一.引入样式
1.行内样式表
10-30
2.内部样式表(在head标签里面,title标签下面)
优点
方便在同页面中修改样式
缺点
不利于在多页面间共享复用代码及维护，对内容与样式的分离也不够彻底
3.外部样式表
嵌入式
导入式
嵌入式和导入式的区别：
1.标签属于XHTML，@import是属于CSS2.1
2.使用链接的CSS文件先加载到网页当中，再进行编译显示
3.使用@import导入的CSS文件，客户端显示HTML结构，再把CSS文件加载到网页当中
4.@import是属于CSS2.1特有的，对不兼容CSS2.1的浏览器是无效的
4.样式优先级
行内>内部>外部
就近原则
二.基本选择器
1.标签选择器(通过标签名称定位)
h2{
color: red;
}
2.类选择器(通过标签中class属性的值定位，值可以重复，不能以数字开头)
.class01{
color:yellow;
}
10-30
10-31
3.ID选择器(通过标签中id属性的值定位，值不可以重复，不能以数字开头)
#id01{
color: red;
}
10-30
10-31
4.基本选择器的优先级
不遵循就近原则，无论哪一种样式表的导入，都遵循：id选择器>类选择器>标签选择器
三.高级选择器
1.层次选择器
/后代选择器/
li p{
background-color: yellow;
}
/子选择器/
body>p{
background-color: aqua;
}
/相邻兄弟/
.class01+p{
background-color: red;
}
/通用选择器/
.class01~p{
background-color: blue;
}
2.结构伪类选择器
ul li:first-child{
background-color: yellow;
}
ul li:last-child{
background-color: red;
}
ul li:nth-child(even){
background-color: blue;
}
/匹配元素类型/
p:first-of-type{
background-color: pink;
}
p:last-of-type{
background-color: green;
}
p:nth-of-type(3){
background-color: aqua;
}
3.属性选择器
/包含id属性/
a[id]{
background-color: red;
}
/包含target属性，并且值为_blank/
a[target=_blank]{
background-color: yellow;
}
/包含title属性，并且值以we开头/
a[title^=we]{
background-color: aqua;
}
/包含title属性，并且值以e结尾/
a[title$=e]{
background-color: black;
}
/包含class属性，并且值包含it/
a[class*=it]{
background-color: blue;
}