英文:Cacxading Style Sheets.(层叠样式表/级联样式表)
样式表: (1)外部样式表:head-link(新建.FIRE(HTML) .CSS)
(2) 内联样式表:style
(3) 内嵌样式表:head里面(属性:属性值)
选择器:
(1)元素选择器em(color:blue;)
(2)类选择器.类名(属性:值;)
(3)ID选择器#ID名(属性:值;)
(4)包含选择器<li><em></em></li>
(5)通配符选择器*{color:blue;}
权重:
内嵌 ID class 元素
内嵌 1 0 0 0
ID 0 1 0 0
CLASS 0 0 1 0
元素/伪元素 0 0 0 1
通配符* 0
!important 最高(css元素选择器里面)
连接
a:link{
font-size: 30px;
color: red;
}链接的样式
a:visited{
color: grey;
}链接以后的样式
a:hover{
background: greenyellow;
}鼠标移入的样式
a:active{
font-size: 60px;
}鼠标点击时的效果
.test2:focus{
border: 3px solid #990099;
}获取光标的时候
table :empty{
background: lightgrey;
}空白表格
.div1:first-line{
font-size: 25px;
}第一行
.div1:first-letter{
color: red;
}第一个字
a:before{
content: "请点击";
}之前加入字
a:after{
content: "才怪嘞!";
}之后加入字 乱码时第一行添加@charsest"utf-8"
(通配符)*{
/*margin: 0;*/
/*padding: 0;*/
}(元素属性之间定义后会缩进)
ul li:nth-child(2){
background: moccasin;
}第几个改变
ul li:nth-child(3){
background: #ebccd1;
}
ul li:nth-last-child(2){
background: #df1f0d;
}倒第二个改变
ul li:nth-child(odd){
background: moccasin;
}奇数改变
ul li:nth-child(even){
background: royalblue;
}偶数改变
ul li:nth-child(2n+1){
background: greenyellow;
}每两个改变
table td(tr)里面就可以同理可得