CSS的主要使用场景就是美化网页、布局页面的

• HTML的局限性：只关注内容的语义
• CSS-网页美容师：层叠样式表的简称
• CSS基础选择器
• CSS语法规范：有选择器以及一条或多条声明
• 标签选择器：用HTML标签名称作为选择器

CSS 选择器

类选择器

.类名 {
	属性1: 属性值1;
}
<div class="类名" 

⚠ 注意

1. 类选择器使用"."进行标识，后面紧跟类名（自定义，我们自己命名的）
2. 可以理解为给这个标签起了一个名字，来表示
3. 长名称或词组可以使用中横线来为选择器命名
4. 不要使用纯数字、中文等命名，尽量使用英文字母来表示
5. 命名要有意义，尽量使别人一眼就知道这个类名的目的
6. 命名规范：见附件（Web前端开发规范手册.doc）

多类名

• 在标签class中填写多类名
• 每个类名用空格分开

id选择器

#id名 {
	属性1: 属性值1；
	...
}

注意id属性只能在每个HTML文档中出现一次。

id选择器和类选择器的区别

1. 类选择器好比人的名字，一个人可以有多个名字，同时一个名字也可以被多个人使用
2. id选择器好比人的身份证号码，全中国是唯一的，不得重复
3. id选择器和类选择器最大的不同在于使用次数上
4. 类选择器在修改样式中用的最多，id选择器一般用于页面唯一性的元素，经常和JS搭配使用

通配符选择器

在CSS中，通配符选择器用"*"定义，他表示选取页面中所有元素

* {
	属性1: 属性值1；
	...
}
# 特殊情况才使用（清除所有元素标签的内外边距）
* {
	margin: 0;
	padding: 0;
}

基础选择器总结

CSS 字体属性

字体系列

CSS使用font-family属性定义文本的字体系列

p {font-family:"微软雅黑";}
body {font-family:"Microsoft YaHei";}

• 各种字体之间必须使用英文状态下的逗号隔开
• 一般情况下，如果有空格隔开的多个单词组成的字体，加引号
• 尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正常显示

大小

CSS使用font-size属性定义字体大小

p {
	font-size: 20px;
}

• px大小是我们网页的最常用的单位
• 谷歌浏览器默认的文字大小为16px
• 不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不要默认大小
• 可以给body指定整个页面的文字大小
• 标题标签比较特殊，需要单独指定文字大小

粗细

CSS使用font-weight属性设置文本粗细

p {
	font-weight: bold;
}

• 学会让加粗标签（比如h和strong等）不加粗，或者其他标签加粗
• 实际开发时，我们更喜欢用数字表示粗细

文字样式

CSS使用font-style属性设置文本的风格

P {
	font-style: normal;
}

字体符合属性

字体属性可以把以上文字样式综合来写，节约代码

# 复合属性有要求
font: font-style font-weight font-size/line-height font-family
font: italic 700 16px Microsoft yahei

• 使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，并且各个属性之间以空格分开
• 不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用

CSS字体属性总结

CSS 文本属性

CSS Text（文本）属性可定义文本的外观，比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等。

文本颜色

color属性用于定义文本颜色

div {
	color: red;
}

开发中最常用的是十六进制

对齐文本

text-align属性用于设置元素内文本内容的水平对齐方式

div {
	text-align: center;
}

装饰文本

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

div {
	text-decoration: underline;
}

文本缩进

text-indent属性用来指定文本的第一行的缩进，通常是将段落的首行缩进

div {
	text-indent: 20px;
	text-indent: 2em;
}

em是一个相对单位，就是当前元素（font-size）1个文字的大小，如果当前元素没有大小，则会按照父元素的一个文字大小

行间距

line-height属性用于设置行间的距离，可以控制文字行与行之间的距离

p {
	line-height: 20px;
}

这一行最下边到下一行最下边的距离就是行高

CSS文本属性总结

CSS 引入方式

按照CSS样式书写的位置（或者引入的方式），可以分为三大类：行内样式表（行内式）、内部样式表（嵌入式）、外部样式表（链接式）

内部样式表

内部样式表是写到HTML页面内部，是将所有的CSS代码抽取出来，单独放到一个<style>标签中
<style>
	div {
		color: red;
		font-size: 12px;
	}
</style>

行内样式表

行内样式表是在元素标签内部的style属性中设定CSS样式，适合简单修改样式
＜div style="color:red; font-size: 12px;">青春不常在，抓紧谈恋爱

• style其实就是标签的属性
• 在双引号中间，写法要符合CSS规范
• 可以控制当前的标签设置样式
• 由于书写繁琐，并且没有体现出结构与样式分离的思想，所以不推荐大量使用，只有对当前元素添加简单样式的时候，可以考虑使用
• 使用行内样式表设定CSS，通常也被称为行内式引入

外部样式表

实际开发都是外部样式表，适合于样式比较多的情况:样式单独写到CSS文件中，之后把CSS文件引入到HTML页面中使用

引入外部样式表分为两步：

1. 新建一个后缀名为.css的样式文件，把所有的CSS代码都放在此文件中
2. 在HTML页面中，使用<link>标签引入这个文件
<link rel="stylesheet" href="css文件路径">

CSS引入方式总结

Emmet语法

Emmet语法的前身是Zen coding，它使用缩写，来提高html、css的编写速度，Vscode内部已经集成该语法。

快速生成HTML结构语法

1. 生成标签直接输入标签名按tab键即可
2. 如果想要生成多个相同标签加上*就可以了
3. 如果有父子级关系的标签，可以用>比如ul > li就可以了
4. 如果有兄弟关系的标签，用＋就可以了比如div+p
5. 如果生成带有类名或者id名字的，直接写.demo或者#two tab键就可以了
6. 如果生成的div类名是有顺序的，可以用自增符号$
7. 如果想要在生成的$签内部写内容可以用{}表示

快速生成CSS样式语法

CSS基本采取简写形式即可

• 比如 w200 按tab就可以生成 width: 200px;
• 比如 lh26 按tab可以生成 line-height: 26px;

快速格式化代码

设置搜索format勾选format on save

CSS复合选择器

在CSS中，可以根据选择器的类型把选择器分为基础选择器和复合选择器，复合选择器是建立在基础选择器之上，对基本选择器进行组合而形成的

• 复合选择器可以更准确、更高效的选择目标元素（标签）
• 复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的
• 常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等

后代选择器（重要）

后代选择器又称为包含选择器，可以选择父元素里面的子元素。其写法就是把外侧标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套是，内层标签就成为外层标签的后代。

元素1 元素2 { 样式声明 }

上述语法表示选择元素1里面的所有元素2（后代元素）

子选择器（重要）

子元素选择器（子选择器）只能选择作为某元素的最近一级子元素。简单理解就是选亲儿子元素

元素1 > 元素2 { 样式声明 }

上述语法表示选择元素1里面的所有直接后代（子元素）元素2

并集选择器（重要）

并集选择器可以选择多组标签，同时为他们定义相同的格式。通常用于集体声明

并集选择器是通各个选择器通过英文逗号连接而成，任何形式的选择器都可以作为并集选择器的一部分

元素1, 元素2 { 样式声明 }

上述语法表示选择元素1和元素2

• 元素1和元素2中间用逗号隔开
• 逗号可以理解为和的意思
• 并集选择器通常用于集体声明

链接伪类选择器

伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第一个，第n个元素

a:link		# 选择所有未被访问的链接
a:visited	# 选择所有已被访问的链接
a:hover		# 选择鼠标指针位于其上的链接
a:active	# 选择活动链接（鼠标按下未弹起）

注意事项

• 为确保生效，请按照LVHA的顺序声明:link-:visited-:hover-:active
• 记忆法：love hate 或者 lv 宝宝 hao
• 因为a链接在浏览器中具有默认样式，所以我们实际工作中都需要给链接单独指定样式

开发写法

a {
	color: gray;
}

focus伪类选择器

focus伪类选择器用于选取获得焦点的表单元素

焦点就是光标，一般情况<input>类表单元素才能获取，因此这个选择器也主要针对表单元素来说
input:focus {
	background-color: yellow;
}

复合选择器总结

CSS的元素显示模式

元素显示模式就是元素（标签）以什么方式进行显示，了解他们的特点可以更好的布局我们的网页。比如<div自己占一行，一行可以放多个<span。HTML元素一般分为块元素和行内元素两种类型

块元素

常见的块元素有<h1-6、<p、<div、<ul等，其中div最典型

块级元素的特点：

1. 比较霸道，自己独占一行
2. 高度，宽度，外边距以及内边距都可以控制
3. 宽度默认是容器（父级宽度）的100%
4. 是一个容器及盒子，里面可以放行内或者块级元素

⚠注意：

• 文字类的元素内不能使用块级元素
• <p标签主要用于存放文字，因此<p里面不能放块级元素，特别是<div
• 同理，<h1-6等都是文字类块级标签，里面也不能放其他块级元素

行内元素

常见的行内元素有<a、<strong、<b、<em、<i、<del、<span等，其中<span标签是最典型的行内元素。有的地方也将行内元素成为内联元素。

行内元素的特点：

相邻行内元素在一行上，有一行可以显示多个

高、宽直接设置是无效的

默认的宽度就是它本身的宽度

行内元素只能容纳文本或其他行内元素

注意：

• 链接里面不能在放链接

• 特殊情况链接<a里面可以放块级元素，但是给<a转换一下块级模式最安全

行内块元素

在行内元素中有几个特殊的标签——<img <input <td，他们同时具有块元素和行内元素的特点。有些资料称他们为行内块元素。

行内块元素的特点：

• 和相邻行内元素（行内块）在一行上，但是他们之间会有空白间隙，一行可以显示多个（行内元素特点）
• 默认宽度就是它本身内容的宽度（行内元素特点）
• 高度，行高，外边距以及内边距都可以控制（块级元素特点

元素显示模式转换

特殊情况下，我们需要元素模式的转换，简单理解：一个模式的元素需要另一种元素的特性，比如想要增加链接<a的触发范围

• display: block;
• display: inline;
• display: inline-block;

一个小工具的使用 snipaste

• F1 截图 F3 悬浮 Alt 查看颜色代码+c复制

单行文字垂直居中代码

CSS没有提供，可以通过小技巧实现：让文字的行高等于盒子的高度

CSS的背景

通过CSS背景属性，可以给页面元素添加背景样式

背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等

背景颜色

background-color属性定义了元素的背景颜色

background-color：颜色值；

一般情况下元素背景颜色默认值是transparent（透明），也可手动指定

背景图片

background-image属性描述了元素的背景图像。实际开发常见于logo或者一些装饰性的小图片或者是超大的背景图片，优点是非常便于控制位置（精灵图也是一种运用场景）

background-image : none | url(url)

背景平铺

如果要在HTML页面上对背景图像进行平铺，可以使用background-repeat属性

background-repeat: repeat | no-repeat | repeat-x | repeat-y

背景图片位置

利用background-position属性可以改变图片在背景中的位置

background-position: x y;

参数代表的意思是：x坐标和y坐标。可以使用方位名词或者精确单位

1.参数是方位名词

• 如果两个值都是方位名词，则两个值得前后顺序无关
• 如果只指定一个方位名词，另一个值省略，则第二个值默认居中对齐

2.参数是精确单位

• 如果参数值是精确坐标，那么第一个肯定是x坐标，第二个一定是y坐标
• 如果只指定一个数值，那该数值一定是x坐标，另一个默认垂直居中

3.参数是混合单位

• 如果指定得两个值是精确单位和方位名词混合使用（x，y顺序不能变）

背景图像固定（背景附着）

background-attachment属性设置背景图像是否固定或者随着页面得其余部分滚动

background-attachment后期可以制作视差滚动效果

background-attachment : scroll | fixed

背景复合写法

为了简化背景属性的代码，我们可以将这些属性合并简写在同一个属性background中，从而减少代码量。当使用简写属性时，没有一定的书写顺序，一般习惯约定顺序为：

background：背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置

background: transparent url(image.jpg) repeat-y fixed top;

实际开发中，我们更提倡的写法

背景颜色半透明

CSS3为我们提供了半透明的效果

background: rgba(0, 0, 0, 0.3);

• 红绿蓝 alpha不透明度，取值范围0~1
• 实际开发中，习惯a的0.3的0省略，写为.3
• 注意：背景半透明是指盒子背景半透明，盒子里面的内容不受影响
• CSS3新增属性，时IE9+版本浏览器才支持的
• 但是现在实际开发，我们不太关注兼容性写法了，可以放心使用

背景总结

背景图片：实际开发常见于logo或者一些装饰性的小图片或者是超大的背景图片，优点是非常便于控制位置。（精灵图也是一种运用场景）

CSS三大特性

CSS中有三个非常重要的特性：层叠性、继承性、优先级

层叠性

相同选择器给设置相同的样式，此时一个样式就会覆盖另一个冲突的样式。

层叠性原则：

• 样式冲突，遵循原则是就近原则，哪个样式结构近，就执行哪个样式
• 样式不冲突，不会层叠

继承性

CSS中的继承：子标签会继承父标签的某些样式，比如文本的颜色和字号

• 恰当使用继承可以简化代码，降低CSS样式的复杂性
• 子元素可以继承父元素的样式（text、size、line这些元素开头的可以继承，以及color属性）
• 继承性口诀：龙生龙，凤生凤，老鼠的孩子会打洞

行高的继承性

优先级

当同一个元素指定多个选择器，就会有优先级

优先级注意点

权重是由4组数字组成，但是不会有进位

类选择器永远大于元素选择器，id选择器永远大于类选择器，以此类推

等级判断从左到右，如果某一位数位相同，则判断下一位数值

通配符和继承权重为0