选择器优先级、提权; 字体、字体图标;盒模型

伪类选择器：状态匹配

1、链接

/链接四种状态，顺序是固定的/

/1、默认未访问点击/
a:link{color:blue; text-decoration:none;}
/2、已访问过的状态/
a: visited{ color:violet; }
/3、悬停状态/
a:hover{color:red;text-decoration:uderline}

/4、当鼠标点击压下时/

a:active{color:red；}
form p first-of-type input:first-of-type{}
input:read-only{background-color:yellow}
input[type=email]{background-color:lightgreen;}
input:reqired{background-color:lightgreen;}
input:disabled{background-color)

2、表单

<form action="">
<p>用户名：<input type="" name="" value="admin" readonly></p>
<p>邮箱：<input type="email" name="" value="" required></p>
<p>用户名：<input type="password" name="" value="123456" disabled></p>

3、选择器的优先级

1.当选择器相同时，与书写顺序有关，后面的样式覆盖前面的。

2.class的优先级大于tag标签。当选择器不同时，与优先级相关，级别高的覆盖级别低的。

3.如果仍想提升选择器的优先级，此时到了class级，此时到了class级，我们应该用ID级。

结论：id>class>tag

4、选择器的优先级的提升方式

1、声明顺序对优先级的影响

在后面有一个相同的声明，根据源码的顺序，后面有效。
2、选择器的类型对优先级的影响
思考：是不是只能用选择器类型的提权来提升优先级？
实际工作中，应该用一系列的选择器组合来灵活的设置优先级。
3、
body h2{color:skyblue} [0,0,2]
h2{color:red} [0，0，1]

规则： id>class>tag
有一个计算公式：[id选择器的数量，class选择器的数量，tag选择器的数量]
tag级向class级进位，class级向id级进位。
html body h2{color:red} tag已经无法提升，html是根元素，上面没有元素了。此时可以采用增加class的方法提权。

备注：一般采取重新写一段代码的方法来尝试，如果不好，可以马上恢复回去。

<body>
<h2 class="on off“ id="foo">hello php</h2>
</body>
h2.on{}    [0,1,1]
body h2.on{}  [0,1,2]
.on.off{}  [0,2,0]
#foo{color:teal;}

5、属性的简写

.title{ 
        font-family:sans-serif;
        font-size:24px;
        font-style：italic;
        font-weitght:100;
**/*简写*/**
    font:italic lighter 36px sans-serif;
}

6、字体图标
1、可以用字体定义图标。
2、用类来定义（更简单）

body{
    background-color:cornsilk;
    background-image:url()
    background-repeat:no-repeat;
    background-size:300px;
    background-position:100px 200px； /*100PX距左边的距离，200PX距上面的距离。*/
    background-position:top center;/*默认值是center.*/
}

盒模型的属性缩写

网站本身就是由许多个矩形盒子组成的。

.box{
    width:200px;
    height:200px;
    background-color:violet;
    box-sizing:border-box;    }
.box{
border-top-width:5px;
border-top-corlor:red;
border-top-style:solid;
}

1、边框

每个边框可以设置三个属性：宽度，样式，颜色
边框的简写 border-top:5px red solid;
border-bottom:10px red dashed;

</h> 四个边框一样的写法
border:5px solid #000;

2、内边距

padding 上右下左顺时针方向
padding:5px 10px 15px 20px;
页面看不到是因为padding是透明的，且背景色会自动扩展到padding.
将背景色裁切到内容区
background-clip:coneten-box

当左右相等，而上下不相等，使用三值语法。
padding:10px 20px 15px
当左右相等，而上下也相等，使用二值语法。
padding:10px 30px
如果四个方向全相等，使用单值语法。
padding: 10px
总结：当使用三值和二值时，只要记住第二个永远表示左右就可以了。

3、外边距：控制多个盒子之间的排列间距

四值:顺时针，上右下左。
margin:5px 8px 10px 15px;
三值:左右相等，上下不等。
margin:10px 30px 15px;
二值：左右相等，上下也相等
margin:10px 15px;
单值：四个方向全相等
margin:10px

伪类选择器：状态匹配

盒模型的属性缩写

相关文章