对HTML中的文字的修饰 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>练习字体的修饰</title>
    <style>
    #aa{
        color: blue;
        font-style: italic;/*控制字体的样式*/
                               /*normal  默认值。浏览器显示一个标准的字体样式。
                                  italic  浏览器会显示一个斜体的字体样式。
                                   oblique 浏览器会显示一个倾斜的字体样式。
                                   inherit 规定应该从父元素继承字体样式。*/
         font-variant: small-caps;/*控制文中字母的大小写*/
                                            /*normal  默认值。浏览器会显示一个标准的字体。
                                               small-caps  浏览器会显示小型大写字母的字体。
                                               inherit 规定应该从父元素继承 font-variant 属性的值。*/
        font-weight: bold;/*控制文本的粗细*/
                                 /* normal 默认值。定义标准的字符。
                                    bold  定义粗体字符。
                                    bolder  定义更粗的字符。
                                    lighter 定义更细的字符。*/
        font-size: 20px; /*控制字体的大小*/
        line-height: 40px;/*控制行高*/
                                 /*normal 默认。设置合理的行间距。
                                   number  设置数字，此数字会与当前的字体尺寸相乘来设置行间距。
                                   length  设置固定的行间距。
                                    % 基于当前字体尺寸的百分比行间距。
                                   inherit 规定应该从父元素继承 line-height 属性的值。*/
        font-family: 'simHei'; /*规定字体*/

           }
           #bb{
          font: italic small-caps bold 23px/45px  'simHei';
            
           }
        
    </style>
</head>
<body>
     <div id="aa"> 唔，今天下午打算和padding相伴等待中秋的月亮了，月兔你能送盒月饼给我咩 
正题，刚刚无意间又看到了张鑫旭老师讲的关于padding的奇思妙想，学到了一些新的东西，来给大脑做个笔记。</div>
     <div id="bb">Myjdf jhfi fhakfj hfidshf fdshf fshfh efh  fhfh f hf.</div>
</body>
</html>

 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>练习字体设置</title>
  <style>
     #aa{
               font-family: '无衬线字体','微软雅黑','黑体',sans-serif;//sans-serif表示无衬线字体类
           }
     #bb{
                 font-family: 'New Times','新宋体',serif;//serif表示有衬线字体

            }
  </style>
</head>
<body>
   <div id="aa">离离原上草，一岁一枯荣。<br/>
                       野火烧不尽，春风吹又生。</div>
   <div id="bb">离离原上草，一岁一枯荣。<br/>
                       野火烧不尽，春风吹又生。</div>
</body>
</html>

 

posted on 2019-03-07 18:51  不愧下学  阅读(454)  评论(0)    收藏  举报

导航