一、CSS的优势。
内容与表现分离
网页的表现统一 ， 容易修改
丰富的样式 ， 使得页面布局更加灵活
减少网页的代码量 ， 增加网页的浏览速度 ， 节省网络带宽
运用独立于页面的CSS ， 有利于网页被搜索引擎收录
二丶Style标签
Style 标签在HTML文档中的位置 ， 在 <head> 和 </head> 之间。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 h1{ 8 font-size: 50px; 9 color: aqua; 10 } 11 12 </style> 13 14 </head> 15 <body> 16 <h1> 17 爱你三千遍 18 </h1> 19 20 </body> 21 </html>
三、引入CSS的方式
行内样式：
使用style属性引入CSS样式
内部样式表：
CSS代码写在<head>的<style>标签中
外部样式表 ：
链接式
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <!--导入的链接通过link标签href：路径--> 7 <link rel="stylesheet" href="./css/a.css"> 8 </head> 9 <body> 10 <h1> 11 爱你三千遍 12 </h1> 13 </body> 14 </html>
导入式
链接式与导入式的区别：
<link/>标签属于XHTML，@import是属于CSS2.1
使用<link/>链接的CSS文件先加载到网页当中，再进行编译显示
使用@import导入的CSS文件，客户端显示HTML结构，再把CSS文件加载到网页 当中
@import是属于CSS2.1特有的，对不兼容CSS2.1的浏览器是无效的
CSS样式优先级（就近原则）
行内样式 > 内部样式表 > 外部样式表
四丶CSS选择器
基础选择器
HTML标签作为标签选择器的名称
<style> h1{ color: blue; } </style>
类选择器
<标签名 class= "类名称">标签内容</标签名>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .feng{ 8 color: blue; 9 } 10 </style> 11 12 </head> 13 <body> 14 <p class="feng"> 15 七月的风，八月的雨 16 </p> 17 </body> 18 </html>
ID选择器
<标签名 id= "id名称">标签内容</标签名>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 #a881{ 8 color: blue; 9 } 10 </style> 11 12 </head> 13 <body> 14 <p id="a881"> 15 七月的风，八月的雨 16 </p> 17 </body> 18 </html>
注意所有标签只能id是唯一的不能重复。
ID选择器在同一个页面中只能使用一次
ID选择器>类选择器>标签选择器
五、CSS高级选择器
后代选择器（两个选择符之间用空格隔开）
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 /* 8 后代选择器： ul下的所有p标签 9 */ 10 ul p{ 11 background: aquamarine; 12 } 13 </style> 14 </head> 15 <body> 16 <p>1</p> 17 <p>2</p> 18 <p>3</p> 19 <ul> 20 <li><p>4</p></li> 21 <li><p>5</p></li> 22 <li><p>6</p></li> 23 </ul> 24 </body> 25 </html>
子选择器：
body>p{ background: pink; }
选择匹配的F元素，且匹配的F元素是匹 配的E元素的子元素
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 /* 8 子选择器：匹配ul下的子元素li元素 9 */ 10 ul>li{ 11 background: aquamarine; 12 } 13 </style> 14 </head> 15 <body> 16 <p>1</p> 17 <p>2</p> 18 <p>3</p> 19 <ul> 20 <li><p>4</p></li> 21 <li><p>5</p></li> 22 <li><p>6</p></li> 23 </ul> 24 </body> 25 </html>
相邻兄弟选择器
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 /* 8 相邻兄弟选择器 9 */ 10 .aaa+p{ 11 background: blue; 12 } 13 </style> 14 </head> 15 <body> 16 <p class="aaa">1</p> 17 <p>2</p> 18 <p>3</p> 19 <ul> 20 <li><p>4</p></li> 21 <li><p>5</p></li> 22 <li><p>6</p></li> 23 </ul> 24 </body> 25 </html>