美文网首页让前端飞
CSS内联样式的使用,设置字体属性

CSS内联样式的使用,设置字体属性

作者: 前小小 | 来源:发表于2020-12-25 18:01 被阅读0次

    1,CSS设置字体名称属性(font-family):

    示例:

    .fs1{
    font-family:Arial, Helvetica, sans-serif;
    }
    
    .fs2{
    font-family:黑体;
    }
    
    .fs3{
    font-family:"Times New Roman", Times, serif;
    }
    
    </style>
    <span class="fs1">CSS设置字体属性</span><br />
    <span class="fs2">CSS设置字体属性</span><br />
    <span class="fs3">CSS设置字体属性</span><br />
    

    2,CSS设置字体大小属性(font-size):

    示例:

    <style>
    .fs1{
    font-size:12px;
    }
    
    .fs2{
    font-size:16px;
    }
    
    .fs3{
    font-size:18px;
    }
    
    .fs3{
    font-size:24px;
    }
    
    <span class="fs1">CSS设置字体大小属性</span><br />
    <span class="fs2">CSS设置字体大小属性</span><br />
    <span class="fs3">CSS设置字体大小属性</span><br />
    <span class="fs4">CSS设置字体大小属性</span><br />
    </style>
    

    3,CSS设置字体粗体属性(font-weight):

    示例:

    <style>
    .b{
    font-weight:bold;
    }
    </style>
    
    <span>CSS设置字体粗体,无粗体!</span><br />
    <span class="b">CSS设置字体粗体,有粗体</span><br />
    

    4,CSS设置字体斜体属性(font-style:italic;):

    <style>
    .i{
    font-style:italic;
    }
    </style>

    <span>CSS设置字体斜体,无斜体!</span><br />
    <span class="i">CSS设置字体斜体,有斜体</span><br />

    Css设置字体颜色属性(color)
    示例:
    <style>
    body{font-size:14px;}
    .color1{color:#000;} /黑色/
    .color2{color:#f00;} /红色/
    .color3{color:green;} /绿色/
    .color4{color:orange;} /橙色/
    .color5{color:blue;} /蓝色/
    div{text-align:center; padding-top:32px; width:600px; margin:0px auto;}
    </style>
    <span class="color1">Css设置字体属性,蚂蚁学院,网站建设教程网! 黑色!</span><br />
    <span class="color2">Css设置字体属性,蚂蚁学院,网站建设教程网! 红色!</span><br />
    <span class="color3">Css设置字体属性,蚂蚁学院,网站建设教程网! 绿色!</span><br />
    <span class="color4">Css设置字体属性,蚂蚁学院,网站建设教程网! 橙色!</span><br />
    <span class="color5">Css设置字体属性,蚂蚁学院,网站建设教程网! 蓝色!</span><br />

    相关文章

      网友评论

        本文标题:CSS内联样式的使用,设置字体属性

        本文链接:https://www.haomeiwen.com/subject/yxlinktx.html