三.CSS文本属性-CSDN博客

本文链接：https://blog.csdn.net/weixin_47971713/article/details/115393912

一.文本颜色

在这里插入图片描述

 <style>
        div {
            /* color:aquamarine;
            color:rgb(112, 108, 172); */
            color: #8cbb57;
        }
    </style>
</head>

<body>
    <div>我有三种方式,给你点颜色看看</div>
</body>

在这里插入图片描述
开发过程中,十六进制的颜色是最常用的

二.文本对齐

text-align只能设置水平对齐
在这里插入图片描述

  <style>
        div {
            /* color:aquamarine;
            color:rgb(112, 108, 172); */
            color: #8cbb57;
        }

        div {
            text-align: center;
            /* text-align: right; */
        }
    </style>
</head>

<body>
    <div>春天的颜色</div>
</body>

在这里插入图片描述

三.装饰文本

在这里插入图片描述

    <style>
        div {
            /* color:aquamarine;
            color:rgb(112, 108, 172); */
            color: #8cbb57;
        }

        div {
            text-align: center;
            /* text-align: right; */
            text-decoration: line-through;
        }

        p {
            text-decoration: underline;
        }

        span {
            text-decoration: overline;
        }
    </style>
</head>

<body>
    <div>漫春</div>
    <p>慢慢亦漫漫</p>
    <span>慢慢亦灿灿</span>
</body>

在这里插入图片描述
可以用一个a标签,取消文字自带的下划线,有兴趣的去测试一下哈

    <style>
        div {
            /* color:aquamarine;
            color:rgb(112, 108, 172); */
            color: #8cbb57;
        }

        div {
            text-align: center;
            /* text-align: right; */
            text-decoration: line-through;
        }

        p {
            text-decoration: underline;
        }

        span {
            text-decoration: overline;
        }

        a {
            text-decoration: none;
        }
    </style>
</head>

<body>
    <div>漫春</div>
    <p>慢慢亦漫漫</p>
    <a herf="#">熠熠生辉</a>
    <span>慢慢亦灿灿</span>
</body>

在这里插入图片描述

四.文本缩进

在这里插入图片描述

    <style>
        p {
            /* 文本第一行缩进多少距离
            text-indent:20px;
            如果此时写2em则是缩进当前元素2个文字大小的距离 */
            /*-2em就是向左缩进两个位置*/
            text-indent: 2em;
            font-family: '楷体';
        }

        div {
            text-indent: 10em;
            font-family: '楷体';
        }

        h2 {
            font-family: '楷体';
        }
    </style>
</head>

<body>
    <h2>来生,愿做一棵树</h2>
    <div>三毛</div>
    <p>如果有来生,</p>
    <p>要做一棵树,</p>
    <p>站成永恒,</p>
    <p>没有悲欢的姿势.</p>
    <p>一半在尘土里安详,</p>
    <p>一半在风里飞扬.</p>
    <p>一半洒落荫凉,</p>
    <p>一半沐浴阳光,</p>
    <p>非常沉默非常骄傲.</p>
    <p>从不依靠从不寻找.</p>
</body>