一、line-height常用（非常重要的）
line-height用于设置文本的行高
行高可以先简单的理解为一行文字所占据的高度
主要作用是文本的行高
为什么文本需要行高呢？渲染出来给用户看起来比较舒服，为了方便文本的阅读
有了行高之后可以明显的发现便于阅读了。
行高的严格定义是：两行文字基线baseline之间的距离
什么又是基线呢？
x下面的这根线就是一个基线
这里中文和英文合起来看就是
这里设置行高为30px这两个地方都会是30px
如果将line-height设置成为100px
然后行高减去行距之后上面一半然后下面一半，文本就能够在中间显示了，但是这种东西只能让文本进行居中，因为文本才具备这种特性。
即，文本在div中居中的时候可以设置这个东西。
二、font缩写属性
在设置属性的时候光字体相关的属性就有非常多，维护起来比较麻烦
于是提供了一个缩写的属性，将上面的属性放到font中
将上面的属性全部写到一行显示。
缩写属性是有一些特性的
有三点需要讲一下
（1）font-style、font-variant、font-weight可以随意调换顺序，也可以省略
（2）/line-height可以省略，如果不省略，必须跟在font-size后面
（3）font-size、font-family不可以调换顺序，不可以省略
补充：
三、CSS常见选择器
CSS常见的选择器：属性选择器，后代选择器，兄弟选择器，选择器组，伪类选择器，伪元素
有一些结构伪类的选择器单独的进行讲解。
1、CSS选择器selector
CSS选择器就是用来找到目标元素的，给这个元素添加样式
不管选择器多复杂都是这个目的。
开发当中经常需要找到特定的网页元素进行设置样式，使用CSS选择器按照一定的规则选择出符合条件的元素，为止添加CSS样式
选择器的种类繁多，大概可以这么进行归类
通用选择器（universal selector)
元素选择器（type selectors)
类选择器（class selectors)
id选择器（id selectors)
属性选择器（attribute selectors)
组合（combinators)
伪类（pseudo-classes)
伪元素（pseudo-elements)
1.1 通用选择器
通用选择器能够帮助我们选中所有的元素
因为body自动设置了一个margin为8px
所以会有一些边距
所以一般我们上来就是将这里的margin设置成0，还有padding也要设置成0的
总结：
通用选择器
通用选择器universal selector，所有的元素都会被选中；
一般用来给所有元素作一些通用性的设置，比如内边距，外边距；
比如重置一些内容；
效率比较低，尽量不要使用；
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>04CSS选择器</title>
<style>
/* 1通用选择器 * {
font-size:30px;
background-color:#f00;
} */
/* 1.1更加推荐的方式是使用，并列选择器的方式 */
div, p, h2, span, body {
margin:0;
padding:0;
}
</style>
</head>
<body>
<!-- 1当前网页中可能存在非常多的元素 -->
<!-- 1.1如果想要找到所有的元素可以使用并级选择器，比如div,p,h2
使用逗号连接，一次性选择多个元素
1.2另外一种方式是使用*，这个是所有元素都可以匹配，*是一个通配符，如果设置这个
页面上全部的元素都会添加这个样式
不管有没有使用到的元素全部遍历一遍，然后全部添加对应的属性，统配选择器的效率是比较低的，更加推荐的方法是使用1.1的方式。 -->
<div>我是div元素</div>
<p>我是p元素</p>
<div>
<h2>我是h2元素</h2>
<p>我是p元素 <span>哈哈哈</span></p>
</div>
</body>
</html>
1.2 简单选择器
简单选择器是开发中使用最多的选择器：
元素选择器 type selectors，使用元素的名称；
类选择器 class selectors，使用.类名；
id选择器 id selectors， 使用#id;
这里需要注意到一点，CSS为什么叫做层叠样式表，因为后面新设置的样式可能会覆盖前面已经设置好的样式
关于权重后面会讲到。
关于id需要注意的是，一个HTML文档里面的id是唯一的，不能重复
id值如果由多个单词组成，单词之间可以使用中划线，或者是下划线，也可以使用驼峰标识，
最好不要使用标签名作为id值
中划线又叫做连字符
class可以同名，在同一个HTML文档中id不要重复，应该是唯一的，如果重复，也会生效
虽然不报错但是这是我们编写HTML的准则。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>05常见选择器</title>
<style>
div {
color:red;
}
.box {
/* 将前面设置的red更改为蓝色 */
color:blue;
}
#home {
/* 将前面设置的red更改为绿色 */
color:green;
}
</style>
</head>
<body>
<div>我是div1</div>
<div class="box">我是div2</div>
<div id="home">我是div3</div>
</body>
</html>
给这些class，id这些属性的值的时候可以是
这是一个规范，其中在前端使用驼峰的比较少
1.3 属性选择器attribute selectors
这个东西了解即可
只要包含这个属性就能够选中
然后是这个属性等于什么的时候
另外还有其他的方式
[attr*=val]:属性值包含某一个值val;
[attr^=val]:属性值以val开头；
[attr$=val]:属性值以val结尾；
[attr|=val]:属性值等于val或者以val开头后面紧跟连接符-;
[attr~=val]:属性值包含val，如果有其他的值必须以空格和val分割；
这样的方式了解即可，并不重要。
1.4 后代选择器descendant combinator
后代选择器主要有两种选择器：
（1）所有后代
根据HTML的结构可以画出这样的一个树形结构出来。
要选择所有有home的div下面的所有span如何选择
如果使用的是元素选择器直接span这样会导致选中页面所有的span元素
然后一个可行的办法是给有home的div下面的所有span添加一个一个class，但是如果有很多的span就需要添加很多的class
可以使用后代选择器，通过空格分隔，
（2）直接子代选择器
相当于是一个父亲的儿子，直接找到自己的子代，孙子等不考虑
1.5 兄弟选择器
（1）相邻兄弟选择器，这个可能会使用到，后面讲小程序的时候会使用这个
（2）普遍兄弟选择器
1.6 选择器组-交集选择器，并集选择器
（1）交集选择器
交集选择器是需要同时符合两个选择器条件，两个选择器之间紧密连接
在开发中通常是为了精确的选择某一个元素；
（2）并集选择器
并集选择器是符合一个选择器条件即可，两个选择器之间以逗号进行分隔
在开发中通常为了给多个元素设置相同的样式。
总结：
非常重要的选择器：简单选择器，后代选择器，兄弟选择器，交集并集选择器
四、认识伪类
什么是伪类型？
pseudo-classes翻译过来就是伪类，pseudo是伪装的，虚伪的意思
伪类是选择器的一种，它用于选择处于特定状态的元素；
比如 :hover{}这就是一个伪类，比class多了一个点
元素可以有静止状态，鼠标悬停状态，点下状态，点击过后的状态等等
a元素的状态是比较多的
当前a元素处于一个没有点击的静止的状态
当我们把鼠标悬停到a元素上面的时候鼠标变成了一种小手的状态
当我们点击下去不松手的时候变成了红色
像这种就可以使用伪类来设置
比如：鼠标放上去文字变成红色
常见的伪类是非常多的
常见的伪类有：
（1）动态伪类dynamic pseudo-classes
:link, :visited, :hover, :active, :focus
（2）目标伪类target pseudo-classes
:target
（3）语言伪类language pseudo-classes
:lang()
(4)元素状态伪类UI element states pseudo-classes
:enabled, :disabled, :checked
（5）结构伪类structural pseudo-classes 这个后面学习
:nth-child(), :nth-last-child(), :nth-of-type(), :nth-last-of-type()
:first-child, :last-child, :first-of-type, :last-of-type
:root, :only-child, :only-of-type, :empty
（6）否定伪类negation pseudo-classes后面学习
:not()
所有的伪类：
https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-classes
现在只需要掌握一个伪类型即可，就是:hover
使用举例
a:link未访问的链接
a:visited 已访问的链接
这两个用于a元素
a:hover 鼠标挪动到链接上(重要)
a:active激活的链接（鼠标在链接上长按住未松开）
这两个可以用于别的元素
使用注意
:hover必须放在:link和:visited后面才能生效
:active必须放在:hover后面才能完全生效
所以建议的编写顺序是:link, :visited, :hover, :active
除了a元素， :hover, :active也能够用在其他元素上面
如果是经常访问过的网站，浏览器会进行缓存，如果使用a元素的时候这里的颜色就会发生改变，比如这里的百度
我们可以给从来没有被访问过的a链接进行颜色的设置
鼠标悬停到a元素上面就会变成蓝色
被访问过了设置成另外的一个颜色
这一种是点下去了但是没有松手的一个颜色
总结：
刚才有说到动态伪类还有一个叫做:focus，这个是第五种，表示处于焦点
通过tab键选中（聚焦）到这个元素上面的时候，这个时候也是一种状态，这个就是focus
以上需要注意的是伪类在编写的时候有一个顺序的问题。
:hover必须放在:link和:visited后面才能完全生效
:active必须放在:hover后面才能完全生效
所以建议的编写顺序是:link、:visited，:hover，:active
简记LVHA
另外前面说了除了a元素，:hover，:active也可以用在其他元素上
然后加上:focus
最终的顺序是：
:link, :visited, :focus, :hover, :active
LVFHA
最后需要注意的是
如果
这样设置之后，所有伪类的状态都是这个样式