CSS08：文本样式

最新推荐文章于 2024-07-25 11:52:08 发布

一个优雅的搬砖人

最新推荐文章于 2024-07-25 11:52:08 发布

阅读量454

点赞数 1

分类专栏： # CSS 文章标签： p2p html c#

本文链接：https://blog.csdn.net/weixin_48306950/article/details/122873508

版权

CSS 专栏收录该内容

24 篇文章 1 订阅

订阅专栏

1、颜色 color

值可以用单词，

也可以用 RGB 0~F 如：#000000，#45FAD1

也可以用 RGBA 0~255 第四位参数是透明度值为0~1 如：rgb(0, 255, 255, 0.5)

2、对齐方式

水平对齐 text-align：值为 left（左对齐）、center（水平居中）、right（右对齐）
垂直对齐 vertical-align：值为 top（上对齐）、middle（垂直居中）、bottom（下对齐），如果想文本在图片的垂直方向居中，那么需要设置图片元素和文本元素 vertical-align: middle;

3、首行缩进 text-indent

text-indent: 2em; 代表缩进两个字符

4、行高 line-height

行高和块的高度一致时，文字就可以上下居中

5、装饰 text-decoration

值可以为 underline（下划线）、line-through（中划线）、overline（上划线）
如果想去除超链接的下划线，可以使用 text-decoration: none;

实例

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

    <!--color 颜色：
                  单词
                  RGB 0~F
                  RGBA 第四个参数代表透明度 0~1
        text-align：对齐方式，left 向左对齐、center 居中、right 向右对齐
        text-indent：2em; 段落首行缩进
        line-height：行高和块的高度一致，就可以垂直居中
        text-decoration: underline; 下划线
        text-decoration: line-through; 中划线
        text-decoration: overline; 上划线
    -->
    <style>
        h1 {
            color: rgba(43, 199, 199, 0.9);
            text-align: center;
        }
        .p1 {
            text-indent: 2em;
        }
        .p3 {
            background: gold;
            height: 300px;
            line-height: 300px;
        }
        .l1 {
            text-decoration: underline;
        }
        .l2 {
            text-decoration: line-through;
        }
        .l3 {
            text-decoration: overline;
        }
        img,span {
            vertical-align: middle;
        }
    </style>
</head>
<body>
<p class="l1">文本装饰</p>
<p class="l2">文本装饰</p>
<p class="l3">文本装饰</p>

<h1>故事介绍</h1>
<p class="p1">《国王排名》（日语：王様ランキング）是十日草辅所创作的日本网络漫画，</p>
<p>由2017年5月20日起连载于漫画投稿网站“Manga Hack”，逢星期六更新，每隔三星期休更一星期。</p>
<p class="p3">本作获得茑屋漫画票选大奖2019第6名、《这本漫画真厉害！2020》男生篇的第7名。</p>
<p>
    <span>2019年12月宣布将由WIT STUDIO动画化，于2021年10月14日首播。2021年8月累计发行量超过130万册。</span>
    <img src="image/a.jpg" alt="波吉陛下">
</p>
</body>
</html>

一个优雅的搬砖人

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS08：文本样式

1、颜色 color值可以用单词，也可以用 RGB 0~F 如：#000000，#45FAD1也可以用 RGBA 0~255 第四位参数是透明度值为0~1 如：rgb(0, 255, 255, 0.5)2、对齐方式水平对齐 text-align：值为 left（左对齐）、center（水平居中）、right（右对齐）垂直对齐 vertical-align：值为 top（上对齐）、middle（垂直居中）、bottom（下对齐），如果...
复制链接

扫一扫

专栏目录