一.引入样式 1.行内样式表 <h1 style="color: red;font-size: 18px;">10-30</h1> 2.内部样式表(在head标签里面,title标签下面) <style type="text/css"> h2{ color: yellow; font-size: 20px; } </style> 优点 方便在同页面中修改样式 缺点 不利于在多页面间共享复用代码及维护，对内容与样式的分离也不够彻底
3.外部样式表 嵌入式 <link href="../css/index.css" rel="stylesheet" type="text/css"/> 导入式 <style type="text/css"> @import "../css/index.css"; </style> 嵌入式和导入式的区别： 1.<link/>标签属于XHTML，@import是属于CSS2.1 2.使用<link/>链接的CSS文件先加载到网页当中，再进行编译显示 3.使用@import导入的CSS文件，客户端显示HTML结构，再把CSS文件加载到网页当中 4.@import是属于CSS2.1特有的，对不兼容CSS2.1的浏览器是无效的 4.样式优先级 行内>内部>外部 就近原则
二.基本选择器 1.标签选择器(通过标签名称定位) h2{ color: red; } 2.类选择器(通过标签中class属性的值定位，值可以重复，不能以数字开头) .class01{ color:yellow; } <h2 class="class01">10-30</h2> <h1 class="class01">10-31</h1> 3.ID选择器(通过标签中id属性的值定位，值不可以重复，不能以数字开头) #id01{ color: red; } <h2 id="id01">10-30</h2> <h1 id="id02">10-31</h1> 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; }