1.css的概念
CascadingStyleSheet级联样式表表现HTML或XHTML文件样式的计算机语言包括对字体、颜色、边距、高度、宽度、背景图片、网页定位等设定
2.CSS的优势
内容与表现分离网页的表现统一，容易修改丰富的样式，使得页面布局更加灵活减少网页的代码量，增加网页的浏览速度，节省网络带宽运用独立于页面的CSS，有利于网页被搜索引擎收录
3.CSS基本语法结构
4.style标签
5.HTML中引入CSS样式
行内样式内部样式表外部样式表
6.行内样式
使用style属性引入CSS样式
7.内部样式表
CSS代码写在<head>的<style>标签中<style>h1{color: green; } </style>
优点
方便在同页面中修改样式
缺点
不利于在多页面间共享复用代码及维护，对内容与样式的分离也不够彻底
8.外部样式表
CSS代码保存在扩展名为.css的样式表中HTML文件引用扩展名为.css的样式表，有两种方式:链接式; 导入式
1.链接外部样式表
2.导入外部样式表
9.链接式与导入式的区别
<link/>标签属于XHTML，是属于CSS2.1使用<link/>链接的CSS文件先加载到网页当中，再进行编译显示使用导入的CSS文件，客户端显示HTML结构，再把CSS文件加载到网页当中是属于CSS2.1特有的，对不兼容CSS2.1的浏览器是无效的
10.CSS样式优先级
行内样式>内部样式表>外部样式表 就近原则
11.CSS3基本选择器
标签选择器
类选择器
ID选择器
标签选择器直接应用于HTML标签
类选择器可在页面中多次使用
ID选择器在同一个页面中只能使用一次
1.标签选择器
2.类选择器
3.ID选择器
12.基本选择器的优先级
ID选择器>类选择器>标签选择器
这三种选择器是否也遵循“就近原则”？
不遵循，无论是哪种方式引入CSS样式，一般都遵循ID选择器 > class类选择器 > 标签选择器的优先级
13.层次选择器
层次选择器应用：
<!DOCTYPE html><html><head> <title>层次标签</title></head><!-- 内部样式 --><style> /* 子选择器 */ /* body里面的所有下一级p标签 */ body>p { background-color: red; color: pink; } /* 后代选择器 */ li p { background: pink; } /* 相邻兄弟选择器 （同级），只会从上往下匹配 */ .active+p { background: green; } /* 通用选择器 类选择器.active与它同级匹配的所有p标签 顺序匹配 */ .active~p { background: yellow; } </style><body> <p class="active">p1</p> <p >p2</p> <p>p3</p> <ul> <li> <p>p4</p> </li> <li> <p>p5</p> </li> <li> <p>p6</p> </li> </ul></body></html>
运行结果：
14.后代选择器
15.子选择器
16.相邻兄弟选择器
17.通用兄弟选择器
18.结构伪类选择器
19使用E F:nth-child(n)和E F:nth-of-type(n)的关键点
E F:nth-child(n)在父级里从一个元素开始查找，不分类型
E F:nth-of-type(n)在父级里先看类型，再看位置
20.结构伪类选择器的应用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>结构伪类选择器</title></head><!-- 内部样式表 --><style> p:first-child { color: yellow; } /* 结构伪类选择器 */ /* ul li:first-child */ /* ul 后代匹配第一个子元素li */ ul li:first-child { color: red; } ul li:last-child { color: green; } /* p:nth-of-child() */ /* 不同层级p标签匹配的第一个p标签 */ p:nth-child(1) { color: yellow; } /* p:nth-of-type(2) */ /* 不同层级只要标签里包含第二个类型是p标签的元素就能匹配（只要是标签里面的重复第二个p标签） */ p:nth-of-type(2) { color: pink; } </style><body> <p>p1</p> <p>p2</p> <p>p3</p> <ul> <li>li1</li> <li>li2</li> <li>li3</li> <p>p3</p> <p>p4</p> <p>p5</p> </ul></body></html>
运行结果：
21.属性选择器
22.E[attr]属性选择器
23.E[attr=val]属性选择器
24.E[attr*=val]属性选择器
25.E[attr^=val]属性选择器
26.E[attr$=val]属性选择器
27.属性选择器应用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>属性选择器</title></head><style> * { /* 文本装饰，去超链接下划线 */ text-decoration: none; } div { width: 50px; height: 50px; background-color: purple; text-align: center; display: inline-block; line-height: 50px; } /* 属性选择器 */ /* a[id]所有a标签里只要设置了id属性的所有html元素 */ div[id] { background: yellow; } /* a标签里id属性的值等于one的html元素 */ div[id=one] { background: red; } /* a标签里class属性值包含towthree的所有html元素 */ div[class*=towthree] { background: pink; } /* a标签里class属性值以four-five开头的所有html元素 */ div[class^=four-five] { background: blue; } /* a标签里class属性值以six-seven结尾的所有html元素 */ div[class$=six-seven] { background: tomato; } a:hover { background-color: white; } </style><body> <div id="one"> <a href="">1</a> </div> <div class="towthree"> <a href="">2</a> </div> <div class="towthree"> <a href="">3</a> </div> <div class="four-five"> <a href="">4</a> </div> <div class="four-five"> <a href="">5</a> </div> <div class="six-seven"> <a href="">6</a> </div> <div class="six-seven"> <a href="">7</a> </div> <div class="six-seven"> <a href="">8</a> </div> <div> <a href="">9</a> </div> <div id="ten"> <a href="">10</a> </div></body></html>
运行结果：
28.总结
