文本的样式

长度单位

 1、px  像素
          ——像素是我们网页中最常用的一个单位
          ——像素就相当于我们屏幕中的一个个小点
          这些小点不是我们直接能看到
          ——显示器的像素也不相同，像素越小，显示效果越好
2:百分比 %
           浏览器会根据其父元素的宽高来计算该值
           使用百分比的好处，当父元素的属性值发生变化了，
             子元素也会按比例发生变化
           一般我们如果做自适应的页面，用百分比比较多
3:em
           —em和百分比类似，它是相对于当前元素的字体大小来计算
            1em=1font-size
            浏览器默认的字体大小是16px
          —当前字体发生变化，em也会随之发生变化
            一般情况，我们设置字体相关的样式时，会使用em比较多
4:rem
            rem是相对于根元素（html）的字体大小来计算

.box {
        width: 200px;
        height: 200px;
        background-color: red;
      }
.box2{
          width: 50%;
          height: 50%;
          background-color: yellow;
      }
#box1 {
        width: 20em;
        height: 20em;
        background-color: orange;
      }
.box3{
          width: 10rem;
          height: 10rem;
          background-color: palegreen;
      }

颜色单位：

1:可以直接使用颜色的单词来表示不同的颜色
         red 红色  green  绿色  blank 黑色  yellow 黄色
         这种方式用的很少，不好描述  难记
2:使用RGB值来表示不同的颜色
          ——所谓的RGB值是通过 red  green  blue 三种颜色
            通过这三种颜色的不同浓度，来表示出不同的颜色
            颜色的浓度0-255之间的值，
            颜色的浓度也可以是百分比，使用百分比，三个数值都要是百分比，
            计算机最终也会计算成0-255之间的值
         —— 语法：rgb(红色浓度，绿色浓度，蓝色浓度)
             比较常用
3:RGBA
       ——语法：rgba(红色浓度，绿色浓度，蓝色浓度，透明度)
       ——透明度：0-1之间，0表示完全透明    1表示不透明
4:十六进制(原理跟rgb原理是一样)
        十六进制
           0 1 2 3 4 5 6 7 8 9 a b c d e f 
        00-ff  表示颜色的浓度
        00  最小    相当于rgb中0
        ff  最大    相当于rgb中255
        ——语法：
          #红色绿色蓝色;
         例如：#ff0000  红色    像这种两两重复的颜色，可以简写 #f00
         常用的十六进制颜色
            #f00 红色，#0f0   绿色   #f60 橘色  
            #ccc 灰色  #000  黑色  #fff 白色
5:HSL值  
         H 色相（0-360）
         S 饱和度 颜色的浓度（0-100%）
         L 亮度  颜色的亮度（0-100%）
      HSLA值  
         A 透明度 （0-1）

字体样式

1：color  设置字体的颜色 

2;font-size  设置字体的大小
              设置字体大小，常用单位：px,em,rem
              浏览器默认的字体大小是16px

3:字体 
             掌握，如何自定义字体即可

4:font-style: ;用来设置字体的斜体效果
                   可选值：
                     normal   默认值  文字正常显示
                     italic   斜体效果
                     oblique  也有斜体效果
                大部分浏览器不区分italic，oblique，我们一般用italic比较多

5:font-weight: ;  设置字体加粗效果
                  可选值
                    normal  默认值  文字正常显示
                    bold   文字加粗显示

                    可以指定100-900之间的数值

6:font-variant: ;  用来设置小型的大写字母
                  可选值：
                     normal     默认值  文字正常显示
                     small-caps  文字以小型的大写字母显示

在css中，还给我们提供了一个样式叫font是所有的字体相关样式的简写
        注意：
          使用font简写的时候，
          1:font-size，font-family必须要写
          2:font-size 必须在倒数第二位，font-family必须写在最后
              不同的浏览器可能有不同的解析，但可以按照规范来写

p {
   color: red;
   font-size: 2rem;
   font-family: 'myFont';
   font-style:italic  ;
   font-weight:200;
   font-variant:small-caps ;
}

行高

—使用line-height设置行高，也就是文字占有的实际高度
—行高更类似我们上学的单线本，线与线之间的距离，就是行高，控制行与行之间距离
—line-height: 30px;
       后面跟的值：
         1:可以直接是一个大小
         2:还可以跟百分比   是根据字体的大小去计算
         3:还可以直接是数值  是字体大小的倍数
——行高，还经常用来设置文字的行间距

       行高会在字体的上下平局分配，也就是上间距=下间距
        行间距=行高-字体大小   

对于单行文本来说，如果把高度和行高设置一样，那么就会让文本垂直居中显示

div{
      height: 100px;
      line-height: 100px;
      background-color: pink;
 }