当前位置 博文首页 > weixin_39707201的博客:html字体复合属性,css:字体(样式、颜

    weixin_39707201的博客:html字体复合属性,css:字体(样式、颜

    作者:[db:作者] 时间:2021-08-31 22:27

    1、字体样式font-family、颜色colorhtml>

    CSStitle>

    .class1?{

    font-family:?"楷体";

    font-size:?20px;

    color:?black;

    }

    style>

    head>

    举头望明月,低头思故乡。????????????p>

    center>

    body>html>

    e05b336f98bcbf9470d9106236812bdd.png

    如果定义多种字体的话,第1种字体样式系统没有,就会使用第2种,第2种没有的话,使用第三种,依次类推

    2、字体大小font-size(绝对大小)html>

    CSStitle>

    .class1?{

    font-size:?20px;

    }

    .class2?{

    font-size:?30px;

    }

    .class3?{

    font-size:?40px;

    }

    .class4?{

    font-size:?xx-small;

    }

    .class5?{

    font-size:?x-small;

    }

    .class6?{

    font-size:?large;

    }

    .class7?{

    font-size:?x-large;

    }

    style>

    head>

    举头望明月,低头思故乡。(20px)????????????p>

    举头望明月,低头思故乡。(30px)????????????p>

    举头望明月,低头思故乡。(40px)????????????p>

    举头望明月,低头思故乡。(xx-smaall)????????????p>

    举头望明月,低头思故乡。(x-small)????????????p>

    举头望明月,低头思故乡。(large)????????????p>

    举头望明月,低头思故乡。(x-large)????????????p>

    center>

    body>html>

    97462bbe99376dd30cbc86223a3ff337.png

    绝对大小定义字体大小有两种方式:

    (1)直接以px(像素)为单位定义字体大小。

    (2)以关键字:xx-small,x-small,small,medium,large,x-large,xx-large定义字体大小。

    3、字体的显示形式font-stylehtml>

    CSStitle>

    .class3?{

    font-style:italic;

    }

    .class4?{

    font-style:normal;

    }

    .class5?{

    font-style:oblique;

    }

    style>

    head>

    举头望明月,低头思故乡。????????????p>

    举头望明月,低头思故乡。????????????p>

    举头望明月,低头思故乡。????????????p>

    center>

    body>html>

    faee30c8c12877fdcd7eccf7b5e4abcb.png

    4、字体样式html>

    CSStitle>

    .class4?{

    text-decoration:?line-through;

    }

    .class5?{

    text-decoration:?none;

    }

    .class6?{

    text-decoration:?overline;

    }

    .class7?{

    text-decoration:?underline;

    }

    style>

    head>

    举头望明月,低头思故乡。????????????p>

    举头望明月,低头思故乡。????????????p>

    举头望明月,低头思故乡。????????????p>

    举头望明月,低头思故乡。????????????p>

    center>

    body>html>

    63a552451d5a77dd496f09495dd21d60.png

    5、字体加粗(九级)html>

    CSStitle>

    .class1?{

    font-weight:?100;

    }

    .class2?{

    font-weight:?300;

    }

    .class3?{

    font-weight:?600;

    }

    .class4?{

    font-weight:?800;

    }

    .class5?{

    font-weight:?900;

    }

    style>

    head>

    举头望明月,低头思故乡。????????????p>

    举头望明月,低头思故乡。????????????p>

    举头望明月,低头思故乡。????????????p>

    举头望明月,低头思故乡。????????????p>

    举头望明月,低头思故乡。????????????p>

    center>

    body>html>

    f39d64d777a809e3d0eaeb6f1a8b06b5.png

    6、复合属性

    普通的方式书写:

    div{

    font-style:?inherit;

    font-weight:?400;

    font-size:?30px;

    font-family:?"微软雅黑";

    }????????"?_ue_custom_node_="true">

    床前明月光,疑是地上霜.

    举头望明月,低头思故乡.

    复合的方式书写:

    title>

    div{

    font:?italic?400?30px?"arial?black";

    }????????style>

    head>

    床前明月光,疑是地上霜.??????div>

    举头望明月,低头思故乡.??????div>

    body>html>

    在以复合的形式书写的时候,要注意属性之间的顺序,不能随意颠倒,并且,各个属性之间要以空格分隔。有些属性可以省略,但是size和family属性不能省略

    7、取消掉链接的下划线

    (1)普通方式:

    title>

    head>

    百度a>

    body>html>

    432feb4b4e790b1fd007294749bed647.png

    (2)取消掉下划线:

    title>

    a{

    text-decoration:?none;

    }????????style>

    head>

    百度a>

    body>html>

    3c266c13305bb7c81d55938f52c0b6b0.png

    cs