长度、颜色单位、字体相关的样式简介

1.长度单位

1:像素 px
          就是电脑屏幕上的一个个发光的小点，我们眼睛是看不出来,像素是我们pc端最常用的一个单位，它是一个固定单位
2:百分比 %  
          是父元素的宽高的百分比，是一个相对单位，会随着父元素宽高的变化而变化，一般情况下，做流式布局比较多
3、em
         也是一个相对单位，相对于当前元素的字体大小来计算最终大小，也就是1em=1个font-size。如果当前的元素没有设置字体大小，那么会继承祖先元素的字体大小，最终继承到html默认的字体大小，是16px

2.颜色的单位

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值来表示颜色
   十六进制：0-9abcdef，00表示最小，代替0-255的0，ff表示最大，代替0-255的255              
    用十六进制的值来表示0-255之间的数值，表示红色，绿色，蓝色的浓度
    语法：#ff0000，像这样两两重复的表示，可以省略一位，简写成#f00 ， #f0f0f0  这样的是不可以省略

3.字体的分类

在网页中将字体分成5大类：
          serif  ['serif]（衬线字体）
          sans-serif（非衬线字体）
          monospace （等宽字体）
          cursive ['kə:siv]（草书字体）
          fantasy  ['fæntəsi]（虚幻字体）

4.字体的其它样式

        设置一个文字大小 font-size
        设置一个字体  font-family
        设置文字斜体  font-style: ;
            可选值：
                normal  默认值  文字正常显示
                italic  文字倾斜  （比较常用）
       设置文字的加粗 font-weight: ;
            可选值：
                normal  默认值  文字正常显示
                bold    文字加粗
                bolder   文字加粗
                100-900 之间数值   100最细  900最粗  注意没有单位

      设置一个小型大写字母 font-variant  
            可选值：
            normal  默认值  文字正常显示
            small-caps  设置小型大写字母

4.行间距

1、行高（line height）  文字占有的实际高度 
         行高=上间距+文字的大小+下间距           上间距=下间距
          如果要设置行与行之间的空白距离，可以通过设置行高来实现
          line-height样式名
            可选值：
             （1）、直接写大小，单位：px/em/rem/%
             （2）、直接写倍数，1/2/3/4/5····，是当前字体大小的倍数
             （3）、可以写百分比，100%，200%。300%
2、单行文本在父元素中垂直居中
             只需要设置行高跟父元素高度一致
3、font中也可以指定行高
          font: 字体大小/行高  字体

5.文本样式

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 设置首行缩进

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;

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

vertical-align  设置元素垂直对齐的方式
作用：
          1、设置图文的对齐方式
           2、解决图片三像素的问题 
           引入图片后，图片与图片之间会有三像素的空白，正常情况，这个空白我们是要去除
                    方法一：
                        vertical-align 非baseline
                    方法二：
                        设置其父元素的font-size为0
                    方法三：
                        设置图片为块元素
                    方法四：
                        使图片脱离文档流，设置它浮动或者绝对定位皆可
      可选值：
                baseline  基线对齐  默认值  以x的最下方为标准
                top   文本靠上
                bottom   文本靠下
                middle  文本居中