文本系列标签

代码和页面效果放在后面，我们先看一下text-indent中的em

 

再来了解一下text-decoration的含义
 
下面就是text-decoration的值

下面是text-decoration-style的值

我们的行间距有三部分组成，有上间距，文本高度和下间距，文本高度就是文字的像素大小，如果有多余的像素就会有上间距和下间距平均分配

 

 

 

 
下面是文本属性的一个总结，可能不是很全面

 

 代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h1 {
            color: rgb(221, 73, 73);
            text-align: center;
        }

        div {
            color: #dc1422;
            text-decoration: underline pink wavy;
            /* text-decoration-color: red; */
            /* text-decoration-style: wavy; wavy是波浪线*/
            /* 可以分开写，也可以集合在一起写，那样更节约代码 */
        }

        p {
            text-indent: 2em;
            /* 用来指定文本第一行的缩进，通常是将段落的首行缩进 */
            font-style: italic;
            color: red;
        }

        .thick {
            color: #dc5467;
            font-size: 20px;
            text-decoration: underline red dashed 6px;
            /* 后面这个6px就是装饰线的thickness(粗细) */
        }

        .lineh {
            color: #ad7987;
            font-size: 20px;
            /* 这是文本字体大小 */
            line-height: 30px;
            /* 这是行间距 */
        }
    </style>
</head>

<body>
    <h1>你干嘛~哎呦</h1>
    <div>你食不食油饼啊</div>
    <p>你们是不是人啊!道歉会不会!你们黑他黑得那么爽,骂他骂得那么爽,整天TM没有任何一个人会给他道歉。
        你们这样会毁了他的前途,毁了他的一生！！</p>
    <p>荔枝，你让我拿什么荔枝啊?我爱的那个他都被你们这样对待了，还让我怎么荔枝，啊？
        看着他被你们骂得狗血淋头我还坐视不管这就叫荔枝了吗？！</p>
    <br>
    <span class="thick">我庆幸我比流言蜚语更早认识蔡徐坤。
        未曾谋面的也终将会相遇。披金成王，伴坤远航！</span><br><br><br><br><br><br>
    <span class="lineh">小黑子香精煎鱼食不食，香菜风饪鸡食不食，香翅捞饭食不食？
        小黑子香精煎鱼食不食，香菜风饪鸡食不食，香翅捞饭食不食？</span>
</body>

</html>
网页效果如下，丑是丑了点，但每个功能都还能实现就行了
posted @ 2023-01-10 12:48  梗  阅读(87)  评论(0)    收藏  举报