CSS文字样式小结

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>

  <!--   接下来演示文字样式 -->
    <style>
        /*这是字符间距*/
        h1{letter-spacing: 2px;}
        h2{letter-spacing: -3px;}
        /*其他属性*/
        p.text{
            height: 40px;
            background-color: #ccc;
            font-size: 14px;
           /* 注意这里利用line-height垂直居中*/
            line-height: 40px;
        }
        /*对齐方式text-align*/
        h3{
            text-align: center;
        }
        .date{
            text-align: right;
        }
        .main{
            text-align: justify;
        }
        /*装饰线text-decoration*/
        h4{text-decoration: overline;     font-size: 30px;     }
        h5{text-decoration: line-through; font-size: 30px;      }
        h6{text-decoration: underline;    font-size: 30px;     }
        a{text-decoration: none;} /*去掉链接下划线*/
        /*字体*/
        p.font{
            font-family:幼圆；
            font-size:20px;
            font-style: italic; /*斜体*/
            font-weight: bold;
             /*font: bold 18px '幼圆';*/
             /*简化font顺序为  font:斜体 粗体 字号/行高/ 宋体;*/
        }
    </style>
</head>
<body>

    
     <!-- 3-4文字样式 -->
     <div>
         <h1>标题内容是什么</h1>
         <h2>标题内容是什么</h2>

         <p class="text">
             web前端开发课程
         </p>

         <h3>CSS text-alig实例</h3>
         <p class="date">3月14号</p>
         <p class="main">中国古人说：“万物得其本者生，
百事得其道者成。”共建“一带一路”，顺应经济全球化的历史潮流，
顺应全球治理体系变革的时代要求，顺应各国人民过上更好日子
的强烈愿望。</p>

         <h4>标题1文字</h4>
         <h5>标题2文字</h5>
         <h6>标题3文字</h6>
         <a href="#">链接</a>

         <p class="font">字体font的属性</p>
     </div>
</body>
</html>
预览
CSS文字样式小结
相关推荐
