CSS字体及文本样式

一、长度单位

长度单位

        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:color      设置字体颜色,也可以设置其他颜色

  2:font-size    设置字体大小

  3:font-family  可以指定文字的字体

  4:@font-face   自定义字体

四、字体的分类

在网页中将字体分成5大类：

          serif  ['serif]（衬线字体）

          sans-serif（非衬线字体）

          monospace （等宽字体）

          cursive ['kə:siv]（草书字体）

          fantasy  ['fæntəsi]（虚幻字体）

      可以将字体设置为这些大的分类,当设置为大的分类以后，

        浏览器会自动选择指定的字体并应用样式

      一般会将字体的大分类，指定为font-family中的最后一个字体 ,用来兜底

五、字体的其他样式

设置一个文字大小 font-size

    设置一个字体  font-family

    设置文字斜体  font-style: ;

      可选值：

        normal  默认值  文字正常显示

        italic  文字倾斜  （比较常用）

        oblique  文字倾斜  （了解）

    设置文字的加粗

      font-weight: ;

      可选值：

        normal  默认值  文字正常显示

        bold    文字加粗

        bolder   文字加粗

        100-900 之间数值   100最细  900最粗  注意没有单位

    设置一个小型大写字母

      font-variant  

      可选值：

      normal  默认值  文字正常显示

      small-caps  设置小型大写字母

    font简写

      可以统一设置文字相关的一些样式

      注意：

        1、必须要有字体大小和文字的字体

        2、字体大小必须在倒数第二位

           文字字体必须在倒数第一位

六、文本样式

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  设置元素垂直对齐的方式

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

               作用：

                1、设置图文的对齐方式

                2、解决图片三像素的问题

                    引入图片后，图片与图片之间会有三像素的空白，正常情况，这个空白我们是要去除

                    方法一：

                        vertical-align 非baseline

                    方法二：

                        设置其父元素的font-size为0

                    方法三：

                        设置图片为块元素

                    方法四：

                        使图片脱离文档流，设置它浮动或者绝对定位皆可

               可选值：

                baseline  基线对齐  默认值  以x的最下方为标准

                top   文本靠上

                bottom   文本靠下

                middle  文本居中