一.引入样式

1.行内样式表

10-30

2.内部样式表(在head标签里面,title标签下面)

h2{

color: yellow;

font-size: 20px;

}

优点

方便在同页面中修改样式

缺点

不利于在多页面间共享复用代码及维护，对内容与样式的分离也不够彻底

3.外部样式表

嵌入式

导入式

@import “../css/index.css”;

嵌入式和导入式的区别：

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;

}