CSS(Cascading Style Sheets)，即层叠样式表，用来定义页面元素的样式【例如：设置字体和颜色、设置位置和大小，添加动画效果】

CSS代码构成

• 选择器Selector
• 属性Property
• 属性值Value
• 声明Declaration

规则码：选择器+大括号

CSS代码由一条条规则码组成。

语法由一个 选择器（selector）起头。它选择了我们将要用来添加样式的 HTML 元素。在这个例子中我们为一级标题（<h1>）添加样式。

接着输入一对大括号 { }。在大括号内部定义一个或多个形式为 属性（property）—值（value）对 的声明。每个声明都指定了我们所选择元素的一个属性，之后跟一个我们想赋给这个属性的值。

冒号之前是属性，冒号之后是值。不同的 CSS 属性对应不同的合法值。在这个例子中，我们指定了 color 属性，它可以接受许多颜色值；还有 font-size 属性，它可以接收许多 size unit 值。

CSS的使用方法

1. 外链【推荐】

<!-- 外链-->
<link rel="stylesheet" href="style.css">

2. 嵌入

<style>
  li{ margin:0;list-style:none;}
  p{ margin:lem 0;}
</style>

3. 内联 *不使用选择器

<!-- 内联  -->
<p style="margin:lem 0"> Example Content</p>

CSS流程

DOM树+CSS---->渲染树---->显示

选择器组

选择器Selector

找出页面中的元素，以便给他们设置样式。

使用多种方法选择元素：

• 按照标签名、类名或id；
• 按照属性；
• 按照DOM树中的位置。

通配选择器/全局选择器

可以与任何元素匹配，优先级最低，一般做样式初始化。

*{ 
     margin: 0; 
 } 

标签选择器

标签选择器，选择的是页面上所有这种类型的标签。

p{ 
    font-size:14px; 
} 

id选择器

id的值一般是唯一的。

css 中的 ID选择器 以 # 来定义。

#logo {
    font-size: 60px;
    font-weight: 200;
  }

类选择器【常用】

规定用圆点 . 来定义，针对你想要的所有标签使用。

特点

• 类选择器可以被多种标签使用；
• 类名不能以数字开头；
• 同一个标签可以使用多个类选择器。用空格隔开。

.done {
  color: gray;
  text-decoration: line-through;
}

属性选择器

用[]来表示属性。

[disabled] {
    background: #eee;
    color: #999;
}

根据一个元素上的某个标签的属性的存在以选择元素的不同方式。

a[title] {}

根据一个有特定值的标签属性是否存在来选择。

a[href="https://example.com"]{}

伪类

• 状态伪类（例如：鼠标点击、鼠标移到上面等等）
• 结构性伪类（根据在DOM树中的相对位置）

组合

合并选择器

语法： 选择器1,选择器2,...{ }

作用：提取共同的样式，减少重复代码

.header, .footer{ 
    height:300px; 
} 

名称	语法	说明	示例
直接组合	AB	满足A同时满足B	input:focus
后代组合	A B	选中B，如果它是A的子孙	nav a
亲子组合	A>B	选中B，如果它是A的子元素	section>p
兄弟组合器	A~B	选中B，如果它在A后且和A同级	h2~p
相邻组合器	A+B	选中B，如果它紧跟在A后面	h2+p

选择器的优先级

CSS中,权重用数字衡量

元素选择器的权重为: 1

class选择器的权重为: 10

id选择器的权重为: 100

内联样式的权重为: 1000

优先级从高到低: 行内样式 > ID选择器 > 类选择器 > 元素选择器

文本渲染

颜色

1. 颜色-RGB

RGB色彩模式是工业界的一种颜色标准，是通过对红(R)、绿(G)、蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的。

2. 颜色-HSL

色相（Hue）：色相(H)是色彩的基本属性，如红色、黄色等；取值范围是0-360。

饱和度（Saturation）：饱和度(S)是指色彩的鲜艳程度，越高越鲜艳；取值范围0-100%。

亮度（Lightness）：亮度(L)指颜色的明亮程度，越高颜色越亮；取值范围是0-100%。

3. 颜色-关键字

4. 透明度alpha

字体

1. 字体font-family

可以指定多个字体，然后依次匹配，以适配不同设备

通用字体组【最后要加上！】

• Serif衬线体
• Sans-Serif无衬线体
• Cursive手写体
• Fantasy
• Monospace等款字体

建议：注意顺序；在网页中加字体的url

每个值用逗号分开

如果字体名称包含空格，它必须加上引号

2. 字号font-size

• 关键字
• 长度
• 百分数

3. 字色color

4. 效果font-style

• 正常 normal
• 斜体 italic

5. 字重font-weight 字的粗细

• 数字
• 关键字

值	描述
bold	定义粗体字符
bolder	定义更粗的字符
lighter	定义更细的字符
100~900	定义由细到粗 400等同默认，而700等同于bold

字重的效果跟字体有关，有的字体没有那么多字重。

6. 行高line-height

推荐1.6行高。

文本

1. 对齐text-align

值	描述
left	文本居左排列，默认值
right	把文本排列到右边
center	把文本排列到中间

2. 间距spacing

3. text-indent

text-indent 属性规定文本块中首行文本的缩进。

负值是允许的。如果值是负数，将第一行左缩进。

4. text-decoration

text-decoration 属性规定添加到文本的修饰，下划线、上划线、删除线等。

值	描述
underline	定义下划线
overline	定义上划线
line-through	定义删除线

5. text-transform

text-transform 属性控制文本的大小写。

值	描述
capitalize	定义每个单词开头大写
uppercase	定义全部大写字母
lowercase	定义全部小写字母

6. 空白符处理white-space

• Normal

• Nowrap

• Pre

• Pre-wrap

• Pre-line

调试CSS

右键点击页面，选择【检查】