当前位置 博文首页 > 相太阳的博客:CSS font-size字体大小样式属性

    相太阳的博客:CSS font-size字体大小样式属性

    作者:[db:作者] 时间:2021-09-16 10:39

    设置字体大小CSS单词与语法

    基本语法结构:

    .divcss5{font-size:12px;}
    设置了文字大小为12px像素
    Font-size+字体大小数值+单位

    单词:font-size
    语法:font-size : absolute-size | relative-size | length
    取值:xx-small | x-small | small | medium | large | x-large | xx-large
    xx-small:最小
    x-small:较小
    small:小
    medium:正常(默认值),根据字体进行调整
    large:大
    x-large:较大
    xx-large:最大
    也可取具体长度单位值

    font-size:12px; 设置对象具体字体大小为12px
    font-size:xx-small; 设置文字大小为最小
    font-size:small; 设置文字字体大小为小
    font-size:x-large;设置对象字体大小为较大
    font-size:larger;设置对象字体大小为大
    font-size:smaller;相对于父容器中字体尺寸进行相对减小
    font-size:50%;相对于父容器中字体尺寸进行相应调整为50%大小
    font-size:150%;相对于父容器中字体尺寸进行相应调整为150%大小

    使用效果

    < !DOCTYPE html >  
    < html > 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
    <title>font-size字体大小测试-DIVCSS5实验</title> 
    <style type="text/css"> 
    body{ font-size:12px; line-height:24px;} 
    .exp1{font-size:12px;} 
    .exp2{font-size:xx-small;} 
    .exp3{font-size:small;} 
    .exp4{font-size:x-large;} 
    .exp5{font-size:larger;} 
    .exp6{font-size:smaller;} 
    .exp7{font-size:50%;} 
    .exp8{font-size:150%;} 
    </style> 
    <!-- www.divcss5.com --> 
    </head> 
    <body> 
    <div class="exp1">我被font-size值为12px大小</div> 
    <div class="exp2">我被font-size值为xx-small大小</div> 
    <div class="exp3">我被font-size值为small大小</div> 
    <div class="exp4">我被font-size值为x-large大小</div> 
    <div class="exp5">我被font-size值为larger大小</div> 
    <div class="exp6">我被font-size值为smaller大小</div> 
    <div class="exp7">我被font-size值为50%大小</div> 
    <div class="exp8">我被font-size值为150%大小</div> 
    </body> 
    </html> 
    cs
    下一篇:没有了