随笔- 126 文章- 0 评论- 4 阅读- 19248

9_文本样式

index代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
    颜色：单词
    RGB  0~F
    RGBA  A:       字体透明度0~1
    text-align:    排版，居中
    text-indent:   段落首行缩进
    行高，和块的高度一致，就可以上下居中
    text-decoration: underline     下划线
    text-decoration: line-through  中划线
    text-decoration: overline      上划线

    -->
    <style>
        body{
            font-family: 华文行楷;
            font-size: 30px;
            color: #b31542;

        }
        h1{
            color: rgba(0,255,255,0.8);
            text-align: center;
        }
        .p1{
            text-indent: 2em;
            text-decoration: underline;
        }
        .p3{
            background: chartreuse;
            height: 200px;
            line-height: 50px;

        }
        /*超链接去下划线*/
        a{
            text-decoration: none;
        }

    </style>
</head>
<body>

<a href="">1234456</a>

<h1>故事介绍</h1>
<p class="p1">一个人静静的凝望着晦暗的天空，阴霾弥漫的苍穹让人有了些许的落寞。</p>

　<p class="p3">孤寂的风吹开了笔端深处褶皱的想念，萦绕在跌宕起伏的心间，脑海放映着旧日缱绻的缠绵，
    妖娆着以前唯美的国度，洋溢着身心皆暖的幸福。你的深情脉脉有如初秋的细雨洗涤着我心灵的尘埃，我沉醉在你柔情似水的剪影里，
    祈盼着时光的滞留，渴望着将此旖旎绣成一副美轮美奂的画卷装裱成框，织就我的梦。 </p>

</body>
</html>

结果展示

index2代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    
    <!--
    水平对齐~参照物， a,b

    -->
    <style>
       img,span{
           vertical-align: middle;

        }
        
    </style>
</head>
<body>

<p>
    <img src="images/1.png" alt=""width="300px"height="300px">
    <span>好酷啊</span>

</p>
</body>
</html>