CSS文本样式详解与应用-优快云博客

本文链接：https://blog.youkuaiyun.com/lixingecho/article/details/113725522

CSS文本样式的主要代码如下所示，可以复制到idea中查看效果。

代码的主要含义已经在注释中进行了解释。

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

<!--
    颜色：color rgb rgba

    text-align: 文本对齐方式（居中之类的）
    text-indent: 2em;  段落首行缩进2字符（2em是2个字符）

    height: 300px;      块的高度
    line-height: 300px; 行高
    单行文字上下居中： 块的高度=行高

    text-decoration: underline;     下划线
    text-decoration: line-through;  中划线
    text-decoration: overline;      上划线
    text-decoration: none;  去除超链接的下划线

    img,span{} 两个标签的相对位置
    vertical-align:   元素的垂直对齐方式
-->

<style>
    h1{
        color: red;
        text-align: center;
    }
    .p1{
        text-indent: 2em;
    }
    .p2{
        background-color: blue;
        height: 300px;
        line-height: 300px;
    }
    img,span{
        vertical-align: middle;
    }
    a{
        text-decoration: none;
    }
</style>

<body>
    
<a href="">123</a>

<p>
    <img src="images/1.png" alt="">
    <span>skmaaaaaaa</span>
</p>


<h1>故事介绍</h1>


<p class="p1">
    很长时间以来，安迪不和任何人接触，在大家抱怨的同时，
    他在院子里很悠闲地散步，就像在公园里一样。
</p>

<p class="p2">
    一次，安迪和另几个犯人外出劳动，他无意间听到监狱官在讲有关上税的事。
</p>

</body>
</html>

CSS 文本样式