一、CSS简介

• CSS 指层叠样式表 (Cascading Style Sheets)
• 样式定义如何显示 HTML 元素
• 样式通常存储在样式表中
• 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
• 外部样式表可以极大提高工作效率 外部样式表通常存储在 CSS 文件中
• 多个样式定义可层叠为一

1.注释

/* 注释内容 可多行注释 */

2.语法

选择器（属性:值;属性:值;……）

3.三种引入方式

1. head内style标签内部直接书写css代码
2. link标签引入外部css文件
3. 直接在标签被通过style属性书写css样式

4.标签通常都必须有的属性：

id 唯一标识标签
class 标签类属性 可以有多个，类似python面向对象的继承

二、如何查找标签

1.基本选择器

1）标签选择器

标签名{属性名:值} 

2）id选择器

#id名{属性名:值} 

3）类选择器：相同类名的标签包括其嵌套的其他标签都更改样式

.类名{属性名:值} 

4）通用选择器：匹配 html 中的所有元素标签

*{属性名:值} 

5）共用选择器：多个标签更改样式（不同的选择器也可以共用一个样式）

标签名1，标签名2，标签名3{属性名:值} 

2.组合选择器

1）后代选择器：A标签中嵌套的所有B标签都更改样式

A B{属性名:值} 

2）儿子选择器:A标签中嵌套的子标签B(超过两层嵌套即非子标签)都更改样式

A > B {属性名:值} 

3）毗邻选择器:A标签下面(非嵌套)的第一个B标签更改样式

A + B {属性名:值} 

4）弟弟选择器:A标签下面(非嵌套)的所有B标签更改样式

A ~ B {属性名:值} 

3.属性选择器:你可以给任意标签加任意的属性名和属性值

 [属性名]{样式}：属性名符合的标签更改样式 [属性名=属性值]{样式}：属性名及属性值都符合的标签会更改样式 也适用组合选择器 

4.伪类选择器

 元素:伪类名{属性名:值} 栗子：遵循爱恨原则，顺序不能变 a:link {color:gray;}/*链接没有被访问时前景色为灰色*/ a:visited{color:yellow;}/*链接被访问过后前景色为黄色*/ a:hover{color:green;}/*鼠标悬浮在链接上时前景色为绿色*/ a:active{color:blue;}/*鼠标点中激活链接那一下前景色为蓝色*/ 

5.伪元素选择器

 第一个字母 ::first-letter{属性名:值} 第一行（以浏览器为准的第一行） ::first-line{属性名:值} 被选中的字行（鼠标选择的字段） ::selection ::before 和 ::after在内部内容的前面或者后面插入内容，必须带一个属性content 

选择器优先级

相同选择器 不同引用方式——就近原则 谁靠近标签谁生效
不同选择器 相同引入方式——行内样式 > id选择器 > 类选择器 > 标签选择器