webBasic_day03_CSS_选择器_hover_盒子模型（padding, margin)

最新推荐文章于 2021-08-04 01:23:05 发布

CXZ___deboke

最新推荐文章于 2021-08-04 01:23:05 发布

阅读量251

点赞数

分类专栏： webBasic

本文链接：https://blog.csdn.net/cxz___deboke/article/details/79591445

版权

webBasic 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

CSS

层叠样式表

CSS样式编写方式

内联样式–学习和测试的时候使用
```
<a href="#" style="color:red;font-size:64px;">内联样式</a>
```
1.1 内联样式不能重用,所以使用不多
1.2 内联样式的优先级最高
1.3 项目中一般只用内联样式写display:none
内部样式

2.1 在head标签中使用style标签声明css样式
```
<style type="text/css">
/* 选择器 {属性:样式} */
h3 {
    color: #006699;
}
</style>
```
2.2 这样写样式,在本html页面中可以被重用
外部样式

—–style.css

    h2{
        color:#006699;
    }
    a{
        color:#660099;
    }

—-demo4.html

    <link rel="stylesheet" 
    type="text/css" href="style.css">
    <style type="text/css">
    /* 选择器 {属性:样式} */
    h3 {
        color: #006699;
    }
    a{
        color:#006699;
    }
    </style>
    </head>
    <body>
        <a href="#" style="color:red;font-size:64px;">内联样式</a>
        <h3>内部样式的演示</h3>
        <h3>内部样式的演示1</h3>
        <h2>外部样式的样式</h2>
    </body>

样式优先级的问题

浏览器默认样式的优先级最低
内部样式或者外部样式,就近优先
内联样式优先级最高

选择器

找到要更改样式的标签(一个,多个)

CSS的选择器

标签选择器 p{color:red;},基本样式定义
id选择器 #id{属性:值;}
类选择器 .class{属性:值}

派生选择器

在结构关系中,只要内部存在,不管隔着多少级,都会被认可

    <div>
        <ul>
            <a href="#">不符合派生的结果关系</a>
            <li><a href="#">派生选择器</a></li>
            <li><a href="#">派生选择器</a></li>
            <li><a href="#">派生选择器</a></li>
            <li><a href="#">派生选择器</a></li>
        </ul>
        <ul>
            <li><span><a>不符合派生的a标签</a></span></li>
        </ul>
    </div>


    div ul li a{
    /* 派生选择器 */
        color:red;
    }

子类选择器

结构关系中,只认可直接子集,孙子级别不管

    div>ul>li>a{
    /* 子类选择器 */
        color:red;
    }

分组选择器

    h1,h2,h3,p,div,li,a{
    /* 定义基础样式的时候使用,随时等待被覆盖 */
        color: yellow;
    }

注意

由于各个厂商浏览器存在兼容性问题,一般开发的时候,会优先写一段样式,把兼容性问题尽量清除

    *{
        margin: 0px;
        padding: 0px;
        font-size: 12px;
        color: black;
    }

伪类选择器:hover

当鼠标悬停至元素上方时,向该元素添加样式

    img {
        width: 100px;
    }
    img:hover {
        width: 256px;
    }

    <img alt="" src="../img/06.png">
    <img alt="" src="../img/07.png">
    <img alt="" src="../img/08.png">
    <img alt="" src="../img/09.png">

css常用样式属性

1.布局相关属性

1.1 宽高 width: height: px 100%

1.2 margin:外边距

    margin:100px; 设置4个方向都是100px;
    margin:10px 20px;上下是10px,左右是20px
    margin:10px 5px 3px 4px;上右下左.


    margin-top: 设置上外边距
    margin-right:设置右外边距
    margin-bottom:设置下外边距
    margin-left:设置左外边距
    margin:0px auto; 块级元素水平居中

通常块级元素在父级元素内部的位移,使用margin

内边距 padding

    padding:100px; 设置4个方向都是100px;

    padding:10px 20px;上下是10px,左右是20px

    padding:10px 5px 3px 4px;上右下左.

    padding-top: 设置上内边距

    padding-right:设置右内边距

    padding-bottom:设置下内边距

    padding-left:设置左内边距

内边距是边框到内容区域的距离

注意,改变padding会改变当前块级所占位置的宽高

所以,如果使用padding要注意,宽高减去内边距的值

盒子模型

元素之间有留白,元素本身占位大小,元素背景的填充范围

计算上述这些位置的规则,就是盒子模型

盒子模型计算元素宽度公式

左外边距+左边框+左内边距+内容区域宽度+右内边距+右边框+右外边距

一个div如果不写宽高

宽默认是父元素100%的宽

高默认是0,内部区域有多高,这个div撑起多高

2.背景属性

    background-color: 背景颜色
    background-image: 背景图片
    background-repeat: no-repeat;平铺方式
    background-position: right bottom;图片定位

一旦为div设置了背景图片

div内部的元素将会在背景图片之上显示

css关于颜色值的设置

RGB #aabbcc 16进制表示颜色
#abc
rgb(255,255,255)
英文单词 red之类
rgba(255,255,255,0.5)透明度

3.字体属性

    font-size:字体大小
    单位:30px  30cm  em相对的度量单位

    color:字体颜色
    font-family:"黑体","微软雅黑";
    font-weight:字体的粗细
        lighter;细一些
        normal;正常
        bold;加粗
        bolder;比粗更粗
    font-style:字体的样式
        italic;斜体  <i></i>

4.文本属性

    text-align:文本的对齐方式  
        left;
        right;
        center;
    line-height: 200px;/* 行高 */
    /* 如果行高设置成本控件的高度,
    那么内部文本垂直居中  */
    /* 如果内容文本发生折行,每一行都会认为有
    200的行高,效果不符合预期,要注意 */

    text-decoration: none;  清除按标签下划线

CXZ___deboke

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webBasic_day03_CSS_选择器_hover_盒子模型（padding, margin)

CSS层叠样式表CSS样式编写方式内联样式–学习和测试的时候使用&lt;a href="#" style="color:red;font-size:64px;"&gt;内联样式&lt;/a&gt;1.1 内联样式不能重用,所以使用不多 1.2 内联样式的优先级最高 1.3 项目中一般只用内联样式写display:none内部样式2.1 在head标签中使用...
复制链接

扫一扫