一.字体款式 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 行高

           取值是包裹该字体的元素高度，即可文字垂直居中       <div style="height:200px; line-height:200px;">123</div>

  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 ~ 2554. 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        <div style='font-size:18px;'>123321</div>        1em = 18px        2em = 36px;    %   绝对于父元素    rem   绝对于根元素html