一、今日学习内容：
CSS的基本概念
CSS是层叠样式表（Cascading Style Sheet）的简称，CSS也是一种标记语言，可以给HTML书写出来的网页设置不同的样式
CSS的语法规范
h1 {color:red; font-size:14px;}
语法注意点
1、选择器是用于指定CSS样式的HTML标签，{}里面是对该选择器设置的具体样式
2、属性和属性值是以“键值对”的形式出现
3、属性是一种特定的样式属性，例如：字体颜色，字体大小等等
4、属性和属性值之间要用英文的“:”隔开
5、多个“键值对”之间要用英文的";"来隔开
样式一般写在head标签中的style标签内（练习样式时的主要用法）
CSS的基础选择器
标签选择器（元素选择器）
标签选择器是指用HTML标签名作为选择器，对页面中所有的符合条件的一类标签来指定统一的CSS样式。
语法：
优点：
能快速设置页面中一类标签的样式
缺点
不能差异化设置样式
类选择器
差异化选择不同的标签，可以使用类选择器
语法：
语法注意：
1、类选择器用英文的“.”来进行定义，后面要跟类名
2、长类名一般可以用横线来进行连接
3、不要使用纯数字、中文等进行命名，要使用英文字母来命名
4、类的命名要有意义，尽量使他人一眼就知道这个类名的目的
多类名的使用
1、在标签class属性中写多个类名可以进行多类名调用
2、多个类名之间要用空格隔开
3、调用完后就会显示所有被调用类名所声明的样式
ID选择器
什么是id选择器
id是唯一标识，所以id选择器主要是为了唯一的id的HTML元素来指定特定的样式
id选择器用"#"来进行定义，用id来进行调用
id选择器和类选择器之间的区别
1、类选择器好比人名，一个人可以有多个名字，同一个名字也可以被多个人使用。
2、id选择器相当于身份证号码，全国唯一，不得重复
3、id选择器在一个网页中只能使用一次，类选择器可以使用多次
4、类选择器在修改样式中使用的频率最高，id选择器一般用于页面的唯一性的元素上，经常搭配JS来使用
通配符选择器
在CSS中，通配符选择器用“*”来定义，它表示选择页面中的所有元素。
通配符选择器不需要进行调用，可以直接给所有的元素设置样式
CSS的字体属性
font-family（字体外观）
注意点：
各个字体之间必须使用英文的“,”来隔开
一般情况下，进行使用系统默认的字体，保证在任何用户浏览器中都可以正确显示
如果字体的名字有空格，需要用“”将字体名字引起来
CSS Unicode字体
在CSS的字体设置中，如果要避免乱码的情况出现，可以使用Unicode编码来进行字体声明
常用Unicode表如下：
font-size（字体大小）
1、一般设置字体的时候采用的单位是px（像素值）
2、谷歌浏览器的默认字体大小是16px
3、可以给body标签中指定文字大小样式，来改变整个页面的文字大小
4、不同的浏览器可能默认显示的字体大小不一样，我们尽量设置一个明确的字体大小，不要使用默认大小
font-style（字体的样式）
常用的属性值有：
normal：默认值，浏览器会显示标准的字体样式
italic：将字体调整为斜体样式
注意：
平时我们很少去给文字添加斜体样式，反而更多的是将斜体标签（em/i）改为不倾斜字体
font-weight（设置字体的粗细）
CSS使用font-weight来设置文本的粗细
常用数值：
400代表正常的字体粗细
700代表加粗的字体粗细
注意数值后面不要px单位
字体的复合属性
字体属性可以把以上的文字样式来进行综合书写，这样可以使代码更加精简，开发中也经常采用这种方式。
语法格式
注意点：
使用font属性时，必须按照严格的语法格式中属性值的顺序来进行书写，不可以随便更换顺序，各个属性要用空格隔开
可以省略的值：font-style 和 font-weight 不可省略的值：font-size 和 font-family
line-height是为了设置行高
具体的像素值设置和倍数设置都可以
CSS的文本属性
文本颜色
可以使用16进制、RGB以及英文单词来表示颜色，实际开发中最常用的是16进制颜色
文本对齐
text-align-center 居中对齐
文本装饰
text-decoration属性来设置文本的装饰，使用最多的属性值是line-through（价格删除样式）和none（主要用在给a标签来取消下划线）
文本缩进
text-indent属性来对指定文本的第一行进行缩进
可以使用具体的像素值来进行缩进
使用em单位来进行缩进
em是一个相对单位，就是当前元素的一个文字的大小，所以想要缩进两个font-size的单位时，将text-indent的值写成2em即可。
行间距
line-height属性用于设置行间的距离（行高）
可以写具体的像素值，也可以用倍数来进行设置。
CSS的三种引入方式
行内样式表（行内式）
行内样式表实在元素标签内部的style属性中来设置CSS样式 ，适合于简单的样式修改
注意点：
1、行内样式书写的时候要符合css的书写规范
2、样式要写在style属性中，要用双引号来引起来
3、书写繁琐，没有实现结构样式分离的思想
内部样式表（嵌入式）
写到html页面内部的，将所有的CSS代码都写到style标签中
注意：
1、内部样式表也没实现结构和样式分离
2、练习的时候可以使用这种形式
外部样式表（链接式）
外部样式表是我们实际开发中最常用的方式，首先创建一个css文件中，放入我们所需要的样式，然后再html文件中引入样式文件即可
引入外部样式表的步骤
1、创建后缀名为.css的样式文件
2、在HTML文件中，使用<link>标签来进行引入
link属性
rel
定义当前文档与被链接文档的关系，这里直接写成stylesheet即可，表示被链接的文档是一个样式表文件
href
定义引入文件的路径
整合多个外部样式表集中导入
样式表1
样式表2
集中样式表
导入
Emmet语法
1、直接输入标签名按tab键可以直接补全标签
2、可以一次性生成多个标签 div*5可以直接生成5个div标签
3、生成父子级标签 div>p
4、生成兄弟级的标签 div+p
5、生成带id属性的标签 #one 来生成如下结果
6、生成带类名的标签 .red生成如下标签
7、可以用$来实现自增 p.demo$*5可以实现如下结果
8、可以使用{}来给标签内写内容 div{我是个超级好的人，是不是呢？是}*5 实现如下结果
9、快速生成css代码 tac 生成如下代码
|
