RUNOOB CSS 文本

最新推荐文章于 2024-09-03 09:26:33 发布

执霜

最新推荐文章于 2024-09-03 09:26:33 发布

阅读量242

点赞数

分类专栏： web 文章标签： css 前端 css3

本文链接：https://blog.csdn.net/qq_43156556/article/details/121356933

版权

web 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

css 常见文本格式

在这里插入图片描述

<body>
<h3>css 文本格式</h3>
<li> css 文本格式主要包括以下内容
    <ol>
        <li>文本颜色 color
            <ul>
                <li style="color: red">颜色名称 red</li>
                <li style="color: #00FF00">十六进制 #00FF00</li>
                <li style="color: rgb(0,0,255)">RGB值 RGB(0,0,255)</li>
            </ul>
        </li>
        <br/>
        <li style="width: 250px; height: 100px; border: 1px solid black">文本对齐方式 text-align
            <ul>
                <li style="text-align: center">center</li>
                <li style="text-align: right">right</li>
                <li style="text-align: justify">justify</li>
            </ul>
        </li>
        <br/>
        <li>文本划线修饰 text-decoration
            <ul>
                <li style="text-decoration: none;">none</li>
                <li style="text-decoration: overline;">overline</li>
                <li style="text-decoration: line-through;">line-through</li>
                <li style="text-decoration: underline;">underline</li>
            </ul>
        </li>
        <br/>
        <li>文本字母大小写转换 text-transform
            <ul>
                <li style="text-transform: uppercase">大写字母 uppercase</li>
                <li style="text-transform: lowercase">小写字母 lowercase</li>
                <li style="text-transform: capitalize">首字母大写 capitalize</li>
            </ul>
        </li>
        <br/>
        <li>文本空间 spacing
            <ul>
                <li style="letter-spacing: 4px">字符间空间 letter-spacing</li>
                <li style="line-height: 50px">行间空间 line-height</li>
                <li style="word-spacing: 10px">单词间空间 l l word-spacing</li>
            </ul>
        </li>
        <br/>
        <li style="text-indent: 6px">首行缩进 text-indent</li>
    </ol>
</li>
</body>

CSS 文本练习

在这里插入图片描述

正文部分【人类的群星闪耀时–到不朽的事业中寻求庇护】

<h3>text 文本练习</h3>
<h4> Sternstunden der Menschheit </h4>
<h5> Take refuge in immortal causes：</h5>
<p class="date">September 25th, 1513</p>
<p class="main">
    The adventurous <a class="decoration" href="https://baike.baidu.com/item/%E5%B7%B4%E5%B0%94%E6%B2%83%E4%BA%9A/4468300">Balboa</a>
    of Spain sailed to South America to explore and find his fortune,
    Not only did he get rid of the whole regiment's master, but he also got rid of the new governor.
    But the owners, whom he had driven out, returned to Spain,
    Reported his bad behavior to the Spanish court.
    To avoid punishment from the Spanish court, he decided to take the lead in seeking the riches of South America,
    In order to keep themselves safe,
    During his arduous journey, he became the first civilized human to see the Pacific Ocean,
    And he learned that there was infinite gold in a land not far away.
    And that's when his friend Pizarro betrayed him for the credit,
    The new viceroy sent by the King of the United Nations conspires against him
</p>

样式

<style>
        h4{
            width: 600px;
            text-align: center;
            text-transform: uppercase;
            color: #a7c942;
        }
        h5{
            text-align: center;
            width: 600px;
            letter-spacing: 4px;
        }
        p.date{
            width: 600px;
            text-align: right;
        }
        p.main{
            margin: 15px;
            padding: 15px;
            text-indent: 25px;
            text-align: justify;
            width: 600px;
            height: 200px;
            background-color: darksalmon;
            border: 1px solid black;
        }
        a.decoration{
            text-decoration-line: none;
            color: white;
        }
    </style>

注意： 可以使用元素.xxx 的方式为同种元素的不同部分设置样式

执霜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
RUNOOB CSS 文本

css 常见文本格式<body><h3>css 文本格式</h3><li> css 文本格式主要包括以下内容 <ol> <li>文本颜色 color <ul> <li style="color: red">颜色名称 red</li> <li style="color: #00F
复制链接

扫一扫

专栏目录