视频资源：https://www.bilibili.com/video/BV14J4114768?from=search&seid=3842566320098741425
视频记录 56-92
CSS规则由两个主要的部分组成：选择器以及一条或多条声明。
CSS 代码风格
- 1. 紧凑格式
- 2. 展开格式
属性值前面，冒号后面，保留一个空格。
color: red;
选择器（标签）和大括号中间保留空格
h3 {
color: red;
}CSS 选择器
作用：根据不同的需求把不同的标签选出来。
- 标签选择器：用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。
- 类选择器：差异化选择不同的标签，单独选择一个或者某几个标签。
语法
.类名 {
属性1： 属性值1；
...
}
<style>
.red {
color: red;
}
</style>
<url>
<li class="red">apple</li>
<li>pear</li>
<li>banana</li>
<li>grape</li>
</url>
类选择器口诀：样式点定义，结构类调用。一个或多个，开发最常用。
多类名
标签class属性写多个类名，多个类名中间必须用空格分开。
<style>
.red {
color: red;
}
.font35 {
font-size: 35px;
}
</style>
<url>
<li class="red font35">apple</li>
<li>pear</li>
<li>banana</li>
<li>grape</li>
</url>
多类名使用场景
- 相同样式（公共部分）放在一个类里面
- 首先调用公共类，然后调用独有的类。
- 节省CSS代码，便于统一修改。
id选择器
<style>
#pink {
color: pink;
}
</style>
<div id="pink">Kate</div>
id选择器口诀：样式#定义，结构id调用。只能调用一次，别人切勿使用。
通配符
选择器
特殊情况才需要使用通配符选择器
语法：
* {
属性1: 属性值1;
...
}
CSS字体属性
font-family: "Times New Roman", Times, serif;
计算机检测是否安装Times New Roman，如果安装了Times New Roman，就显示Times New Roman。如果没有安装Times New Roman，就检测是否安装Times,如果安装了Times就显示Times,如果没有安装Times就检测serif。如果没有安装serif，就使用计算机默认的字体。
字体大小
- px(像素)是网页中最常用的单位。
- Chrome默认字体大小为16px
- 不同浏览器默认显示的大小不一样，尽量给定一个明确值大小，不使用默认大小。
- 可以给body指定页面文字大小。
字体属性
em {
font-style: normal;
}
<em>hello</em>字体复合属性
文本属性
文本装饰 text-decoration
a {
text-decoration: none; //取消链接下划线
}
<a href="http://www.baidu.com">百度</a>文本缩进 text-indent (首行缩进)
行间距
line-height 设置行间的距离（行高）。控制文件行与行之间的距离。
注：字体16px，则上间距和下间距均为5px，line-height:26px;
测量行高：FastStone测量
C
SS引入方式
- 行内样式表（行内式）
在元素标签内部的style属性中设定CSS样式。适用于修改样式简单的情况。
- 外部样式表（嵌入式）
在html页面内部写样式，单独写到style标签内部，一般放在head标签中。
方便控制这个页面样式。
- 外部样式表（链接式）
样式单独写到CSS文件中，之后将CSS文件引入到HTML中。
图片居中对齐：
是让其父亲p标签添加水平居中的代码。
- Chrome 调试工具
