font，text样式

一.字体样式 font

1. font-color 字体颜色

2. font-style 字体样式

          italic 斜体
          normal 正常字体【默认】

3. font-weight 字体粗细

          bold    粗体
          lighter 更细的字体
          normal  正常字体【默认】
          100 ~ 900   数值越大，字体越粗
              400 normal
              800 bold

4. font-size 字体大小

          px
          浏览器的默认字体大小是16px

5. line-height 行高

          取值是包裹该字体的元素高度，即可文字垂直居中
          
   123
   

6. font-family 字体族

          '微软雅黑'
          'Microsoft YaHei'
          serif 衬线
          sans-serif 没有衬线
          fangsong 政府文件
   速写
      font:font-style font-weight font-size fonnt-family；
          1. 必须包含font-size、font-family
          2. font-style和font-weight必须在font-size之前
          3. font-family必须放在最后
   

7. webfont

          @font-face
              1. 下载ttf字体文件
              2. 放到相对应的目录(项目的目录)
              3. style标签中通过@font-face引入
                  @font-face {
                      font-family: 'myfont';
                      src: url('./文件名.ttf');
                  }
              4. 在需要字体的地方使用
                  div {
                      font-family:'myfont';
                  }
                  

字体图表库iconfont、fontawesome

            iconfont
                1. 更改图标的大小的时候，要使用font-size
                2. 选中需要更改的图标时，需要通过类名选中
               
            fontawesome
            

iconfont:

1.图标加入项目->在线链接中的fontclass->css文件内容 复制到VScode中新建的css文件中

2.html文件link css文件，i标签添加图标 (class="iconfont 图标类名")

注意：
1.添加图标，更新整个css文件，html中添加新的icon
2.更改图标大小

1.修改单个icon --类名
.icon-yonghu{
    font-size:30px;
    }
2.修改所有icon
 .iconfont{
    font-size:30px;
    }

fontawesome

www.bootcdn.cn->font-awesome->复制link标签到html
class中修改图标名，大小

二.文本样式 text

text-align 文本在当前元素中的对齐方式

        left
        center
        right
        justify

text-decoration

        underline   下划线
        overline    上划线
        line-through 删除线

text-shadow 文本阴影

        px  x轴偏移
        px  y轴偏移
        blur 模糊距离
        color 颜色
        text-shadow:10px 10px 2px red 

text-transform 文本变形

        lowercase   小写
        uppercase   大写
        capitalize  首字母大写

text-indent 首行缩进

        2em 2%

三.列表样式

    list-style:none; 将li标签的默认的样式消除

四.拓展

1. 文字的水平垂直居中

          水平:text-align:center;
          垂直:line-height:父元素的高度;

2. 消除a标签的默认样式

      color:#333;
      text-decoration:none;
      cursor:default;
          pointer --a标签默认
          wait
          help

3. 子元素在父元素中水平垂直居中

      父元素：
      display:table-cell;
      vertical-align: middle;
      align-items: center;
      子元素
      display:inline-block;

五.单位

1) 颜色

1. 关键字
    red、yellow...
    color:red;
2. 十六进制颜色
    color:#333333 ==> color:#333;
3. rgb函数
    r red
    g green
    b blue
    color:rgb(0,0,0);
    0 ~ 255
4. rgba函数
    r red
    g green
    b blue
    a 颜色透明度
    color:rgba(0,0,0,0.5);
    0 ~ 255 / 0 ~ 1
*** opacity与rgba函数的区别***
    opacity 父元素的透明度会影响到子元素，且子元素无法设置为正常透明度
    rgba函数 透明度仅仅会作用于父元素，不会影响子元素
5. 渐变色
    background-image: linear-gradient(to right,red,yellow);
    从左向右，从红色渐变到黄色

2) 长度

绝对单位  px
相对单位  em  
        当前文本的包裹元素上的font-size
        
123321
        1em = 18px
        2em = 36px;
    %   相对于父元素
    rem   相对于根元素html