CSS学习之文本字体样式 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS字体样式</title>
        <style>
        body{
            font-size: 20px;
        }
         .font{
             /* 字体大小 单位px em */
             font-size: 20px;
             /* 字体字体 单位
              同时指定多个字体.中间以逗号隔开，浏览器如果不支持。会一直往后面找。
              值：微软雅黑 宋体 黑体
              \5b8b\4153：Unicode字体
              */
             font-family: "宋体";
             font-family: Arial,"微软雅黑","宋体","黑体";
             font-family: "\5b8b\4153";
             
             /* 字体加粗
              normal:默认值（不加粗）
              bold: 定义粗体(加粗的)
              100-900 400等同于normal.而700等同于bold
              */
             font-weight: bold;
             /* 字体风格
              normal:正常的字体
              italic:整体倾斜(一般用于斜体标签(em,i)改为普通模式)
              */
             font-style: normal;
             
             /* 自定义文字颜色
              red:单词：
              #000000十六进制
              rgb：
              可以用
              */
             /* color: rgb(255,103,0); */
             color: red;
             
             /* 文本水平对齐方式
              left:左对齐
              right:右对齐
              center:居中对齐
              */
             text-align: center;
             
             /* 行间距
              行距比字号大7.8个像素左右就可以了
              */
             line-height: 24px;
             
             /* 首行缩进
              1em 就是一个字的宽度.如果是汉字的段落.1em就是一个汉字的宽度
              */
             text-indent: 2em;
             
             /* 文本装饰-文本线条
              none:默认：定义标准的文本。取消下划线
              underline 定义文本下的一条线。下划线也是我们链接自带的（常用）
              overline:定义文本上的一条线。
              line-through:定义穿过文本下的一条线
              */
             text-decoration: none;
         }
         a{
             /* //取消a标签的下划线 */
             text-decoration: none;
         }
         
         /* 综合性写法 */
         p{
             /* 必须按照当前规则来写
              font:font-style font-weight font-size/line-height font-family
              */
             font:normal 700 20px "微软雅黑"
         }
        </style>
    </head>
    <body>
        <p>我是文字</p>
    </body>
</html>

 

posted @ 2021-07-09 09:17  王彬-效率开发  阅读(71)  评论(0)    收藏  举报