HTML与CSS样式实践：颜色、对齐、文本装饰与图像对齐-CSDN博客

本文链接：https://blog.csdn.net/Prince140678/article/details/119855408

10、文本样式

3.3、文本样式

1、颜色 color rgb rgba

2、文本对齐的方式 text-align=center

3.首行缩进 text-indent:2em;

4.行高 line-height: 单行文字上下居中 line-height=height

5、装饰 text-decoration:

6、文本图片水平对齐：vertical-align:middle;

代码show

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <!--颜色：
            单词
            RGB 0-F
            RGBA A:0~1

            text-align: center; 排版，居中
            text-indent: 2em; 段落首行缩进
            height: 300px;
            line-height: 300px;//行高和块的高度一致，就可以上下居中-->

        <style>
            h1 {
                color:rgba(0,255,255,0.9);
                text-align: center;
            }
            .p1 {
                text-indent: 2em;
            }
            .p3 {
                background: #71805e;
                height: 300px;
                line-height: 300px;
            }
            /*下划线*/
            .l1 {
                text-decoration: underline;
            }
            /*中划线*/
            .l2 {
                text-decoration: line-through;
            }
            /*上划线*/
            .l3 {
                text-decoration: overline;
            }
            /*超链接去下划线*/
            a {
                text-decoration: none;
            }
        </style>
    </head>
    <body>
        <a href="http://www.baidu.com">百度一下</a>
        <p class="l1">l1</p>
        <p class="l2">l2</p>
        <p class="l3">l3</p>
        <h1>故事介绍</h1>
        <p class="p1">
            《航海王》是日本漫画家尾田荣一郎作画的少年漫画作品，于1997年7月22日在集英社《周刊少年Jump》开始连载。改编的电视动画《航海王》于1999年10月20日起在富士电视台首播。
            2012年5月11日，《航海王》获得第41回日本漫画家协会赏 [1]  。本作被吉尼斯世界纪录官方认证为“世界上发行量最高的单一作者创作的系列漫画” [2]  。2017年7月21日，日本纪念日协会通过认证，将每年的7月22日设立为“ONE PIECE纪念日” [3]  。
        </p>
        <p class="p3">
            I love three things in this world.Sun, moon and you.
            Sun for morning, moon for night,and you forever.
        </p>
    </body>
</html>

index2.html

<!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/a.jpg" alt="">
            <span>海贼王封面</span>
        </p>
    </body>
</html>