CSS层叠样式表与表相分离。常用CSS2和CSS3。
HTML引入CSS
1.行内样式
<div style="color:red"></div>
2.内部样式
<style type="text/css">
div {
color:red;
}
</style>
3.外部样式
<link rel="stylesheet" type="text/css" href="css/table.css">
4.导入样式
/*在css导入样式*/
@import url(../Content/bootstrap.css);
样式选择器
<style type="text/css">
/*标签选择器*/
a {
color: red;
}
/*类选择器*/
.top {
color: yellow;
}
/*ID选择器*/
#DivTop {
color: green;
}
/*后代继承选择器*/
table tr td {
color: orange;
}
/*群选择器*/
a, span, h1 {
font-size: 18px;
}
/*属性选择器*/
input[type=text] {
color: aqua;
}
/*伪选择器*/
a::after {
content: "aa";
color: red;
} a::before {
content: "bb";
color: burlywood;
}
a:hover {
color:azure;
}
</style>
CSS选择器优先级计算
inportant>内联>ID>类>标签|伪类|属性选择器>伪对象>继承>通配符>继承
权值：
style=“”——1000
id选择器 ——100
类选择器/属性选择器/伪类选择器 ——10
标签/伪对象 ——1
通配选择器 ——0
例子：
img.thumb:after，总纬度是0,0,1,2（即：1+10+1=12；）
[data-job="frontend"]::first-letter，总纬度是0,0,1,1（即：10+1=11；）
#main::before，总纬度是0,1,0,1（即：100+1=101；）
[type="checkbox"]:checked，总纬度是0,0,2,0（即：10+10=20；）
ul#shop-list，总纬度是0,1,0,1（即：1+100=101；）