94-100 css文本样式

 

<!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>文本属性</title>
    <style>
        /* 文本颜色顶部 */
        /* body {
            color: red;
        }

        h1 {
            color: green;
        }

        p.ex {
            color: rgb(44, 9, 199);
        } */

        /* 文本颜色底部 */
        h2 {
            text-align: center;
        }

        p.date {
            /* 右对齐 */
            text-align: right;
        }

        p.main {
            text-align: justify;
        }

        h3 {
            text-decoration: underline;
        }

        h4 {
            text-decoration: line-through;
        }

        h5 {
            text-decoration: overline;
        }

        h6 {
            text-decoration: none;
        }

        p.suojin {
            text-indent: 2em;
        }
    </style>
</head>

<body>

    <h1>文本颜色</h1>
    <p>这是一个普通的段落。请注意,本文是红色的。页面中定义默认的文本颜色选择器。</p>
    <p class="ex">这是一个类为"ex"的段落。这个文本是蓝色的。</p>

    <h2>文本的对齐方式 CSS text-align 居中对齐实例</h2>
    <!-- 给段落标签加入class属性 -->
    <p class="date">2022year 2月7日</p>
    <p class="main">旅卦，到朝歌觐见商纣，劫难重重
        <br>
        1、初六：旅琐琐，斯其所取灾。
        <br>

        旅行是件琐碎麻烦的事，是旅行者自己所寻取的灾难。

        这里，主要有两个信息需要注意，为什么说旅行是麻烦事？是咎由自取的灾难？这里大概是说，周文王此行是向纣王请罪，至于如何得罪了纣王，不得而知。原因可能有两种：一个是周国慢慢坐大，引起纣王的忌惮；另一种可能是周文王为首的周国对商朝做了过分的事，比如侵犯边境。

        这样解释起来，就是，这次去商朝朝歌城“旅行”，就是之前自己做了错事，咎由自取即将来临的灾祸（纣王很可能会惩罚自己）。
    </p>
    <p><b>注意：</b> 重置浏览器窗口大小查看 &quot;justify&quot; 是如何工作的。</p>

    <h3>下划线</h3>
    <h4>删除线</h4>
    <h5>上划线</h5>
    <h6>没有样式（清楚有样式的设置，比如去掉下划线的样式）</h6>

    <p>文本缩进</p>
    <P class="suojin">缩进2个字 jQuery is a fast, small, and feature-rich JavaScript library.It makes things like HTML
        document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API
        that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has
        changed the way that millions of people write JavaScript.</P>
</body>

</html>

效果

  

 

posted @ 2022-02-07 11:09  优敏行  阅读(30)  评论(0)    收藏  举报