9_文本样式

2022/8/5 23:22:44

本文主要是介绍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>

结果展示

 



这篇关于9_文本样式的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程