CSS(三)字体样式和文本

目录

1.长度单位

2.颜色单位

3.字体的样式

4.字体的分类

5.字体的其他样式

6.行间距

7.文本样式1

8.文本样式2

---

1.长度单位

 长度单位

        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

  html{
        font-size: 20px;
      }
      section {
        width: 300px;
        height: 300px;
        background-color: pink;
      }
      div {
        width: 10rem;
        height: 10rem;
        background-color: red;
      }

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值来表示颜色，原理和上边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之间

   

 .box1{
      width: 100px;
      height: 100px;
      background-color: rgba(189, 100, 100, 0.5);
      /* background-color: #112233; */