«

文本设置

MitSeek 发布于 阅读：38 CSS 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            p:first-of-type{/* 第一个P标签 */
                font-weight: bold;
                font-style: normal;/* 常规字体 */
                font-family: 宋体;/* 设置字体 */
            }
            p:nth-of-type(2){/* 第二个P标签 */
                font-weight: bolder;/* 继承父元素的粗细,更粗 */
                font-style: italic;/* 设置斜体 */
                line-height: 15PX;/* 设置文本行高 */
                border: 1px solid red; /* 设置边框 */
                color: #aaa734;
                margin: 30px;/* 外边框 */
                padding: 30px;/* 内边框 */
                text-indent: 2em ;/* 首行缩进2个字符 */
                letter-spacing: 0.3em;/* 字间距 */
                text-align: center;
            }
            p:nth-of-type(3){/* 第三个P标签 */
                font-weight: bolder;
                font-style: oblique;
                border: 2px solid blue;
                color : green;
                text-align: justify;/* 多行文本才可以生效,单行文本不生效 */
            }
            .box{
                font-family: unset;
                font-size: 80px;
                color: #f2ece6;
                background: #375244;
                font-weight: bold;
                text-shadow: 0 5px 2px red,0px 2px 1px #eee;
                text-align: center;
                border-radius: 60px;
                padding: 60px 0;/* 内边框 */
                margin: 30px;/* 外边框 */
            }
        </style>
    </head>
    <body>
        <div class="box">CSS文本设置</div>
        <p>设置文本粗细内容</p>
        <p>设置文本粗细内容</p>
        <p>设置文本粗细内容</p>
    </body>
</html>

CSS