从零开始学习CSS（3）

前言：

今天是学习html的第五天，让我们看看今天的学习成果。

学习内容：

1、长度单位、颜色单位、字体相关的样式、行高
2、文本样式（11个）

长度单位：

长度单位

1:像素 px

就是电脑屏幕上的一个个发光的小点，我们眼睛是看不出来,

像素是我们pc端最常用的一个单位，它是一个固定单位

2:百分比 %

是父元素的宽高的百分比，是一个相对单位，会随着父元素宽高的变化而变化

一般情况下，做流式布局比较多

3、em

也是一个相对单位，相对于当前元素的字体大小来计算最终大小，

也就是1em=1个font-size。如果当前的元素没有设置字体大小，

那么会继承祖先元素的字体大小，

最终继承到html默认的字体大小，是16px

4、rem

r root 根

也是一个相对单位，相对于根标签html的字体大小来计算最终大小

也就是1rem=1个html的font-size

5、vw、vh

颜色单位：

1:在CSS可以直接使用颜色的单词来表示不同的颜色

red、green、yellow、blank等

缺点：颜色单词太多了，不好描述

2:使用RGB值来表示不同的颜色

rgb(红色，绿色，蓝色)

颜色的值 0-255之间 0最小，255最大

直接用电脑或插件可以吸取颜色的比值，ctrl+alt+a

3:RGBA

rgba(red, green, blue, alpha)

alpha 透明度 0-1之间设置透明度 0是透明，1是不透明

4:使用十六进制的rgb值来表示颜色，原理和上边RGB原理一样

十六进制：0-9abcdef，

00表示最小，代替0-255的0，ff表示最大，代替0-255的255

用十六进制的值来表示0-255之间的数值，表示红色，绿色，蓝色的浓度

语法：#ff0000，像这样两两重复的表示，可以省略一位，简写成#f00

#f0f0f0 这样的是不可以省略

例子：#f00 #0f0 #00f #ccc #eee #333

5:HSL值（H - 色相 0-360,S - 饱和度 0-100%,L - 亮度 0-100%）

HSLA值 A - alpha 透明度 0-1之间

字体相关的样式

行高：

1、行高（line height）文字占有的实际高度

行高=上间距+文字的大小+下间距

上间距=下间距

如果要设置行与行之间的空白距离，可以通过设置行高来实现

line-height样式名

可选值：

（1）、直接写大小，单位：px/em/rem/%

（2）、直接写倍数，1/2/3/4/5····，是当前字体大小的倍数

（3）、可以写百分比，100%，200%。300%

2、单行文本在父元素中垂直居中

只需要设置行高跟父元素高度一致

3、font中也可以指定行高

font: 字体大小/行高字体;

文本样式（11个）;

1: text-transform 可以用来设置文本的大小写

可选值：

none 文本正常显示默认值

uppercase 字母大写

lowercase 字母小写

capitalize 单词首字母大写

2: text-decoration [dɛkə'reɪʃ(ə)n] 可以用来设置文本的修饰

可选值：

none 文本正常显示默认值

underline 文本下划线

overline 文本上划线

line-through 文本删除线

3: letter-spacing可以指定字符间距

4: word-spacing可以设置单词之间的距离

5: text-align用于设置文本的对齐方式

可选值：

left 默认值，文本靠左对齐

right 文本靠右对齐

center 文本居中对齐

注意：设置文本的对齐方式，必须要给文本一定的空间，

如果行内元素的话，它的宽度是被内容撑开的，也就无法设置

6: text-indent 设置首行缩进

常用的长度单位：em

7: white-space: ; 设置网页如何处理空白，可以设置换不换行

8: text-overflow 文本溢出包含元素时发生的事情

可选值：ellipsis 省略号

9: text-shadow: h-shadow v-shadow blur color;

4个参数（参数之间以空格隔开）

1、阴影的水平位移距离正值向右，负值向左必填

2、阴影的垂直位移距离正值向下，负值向上必填

3、阴影的模糊半径选填，默认是0px

4、阴影的颜色一般情况用rgba 选填，默认是字体的颜色

10：box-shadow: h-shadow v-shadow blur color;

4个参数跟text-shadow是一样

唯一不同的是

阴影的颜色默认是黑色

11: vertical-align 设置元素垂直对齐的方式