css入门（四）—— 文本样式

最新推荐文章于 2024-04-16 17:13:03 发布

少年闲客

最新推荐文章于 2024-04-16 17:13:03 发布

阅读量780

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/weixin_40633131/article/details/104299184

版权

css 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

1. 概述
    A. 文本样式属性主要包括以下：
       text-decoration：下划线、中划线（删除线）、顶划线
       text-transform：大小写转换
       text-indent：段落首行缩进
       text-align：文本水平对齐方式
       line-height：行高
       letter-spacing：字距
       word-spacing：词距
2. text-decoration：下划线、中划线（删除线）、顶划线
    A. 该属性可取以下值：
       none：没有划线，该值也可以用来删除已有的划线样式。
       underline：下划线
       line-through：中划线（删除线）
       overline：上划线
       e.g. <head>
                <title>text-decoration属性</title>
                <style type="text/css">
                    #p1 {
                        text-decoration: underline;
                    }

                    #p2 {
                        text-decoration: line-through;
                    }

                    #p3 {
                        text-decoration: overline;
                    }

                    #baidu {
                        /* 删除a标签自带的删除线效果 */
                        text-decoration: none;
                    }
                </style>
            </head>

            <body>
                <p id="p1">这是“下划线”效果</p>
                <p id="p2">这是“删除线”效果</p>
                <p id="p3">这是“顶划线”效果</p>
                <a id="baidu" href="https:www.baidu.com">百度一下</a>
            </body>
3. text-transform：大小写转换
    A. 该属性可取以下值：
        none：不转还。
        uppercase：转换为大写
        lowercase：转换为小写
        capitalize：将每个英文单词的首字母转换为大写，非首字母大小写不变
4. text-indent：段落首行缩进
    A. 该属性值要设置为像素值，即xxpx（20px等）。
    e.g. <head>
            <title>text-decoration属性</title>
            <style type="text/css">
                p {
                    font-size: 20px;
                    text-indent: 40px;
                }
            </style>
        </head>

        <body>
            <p>电子科技大学（University of Electronic Science and Technology of China）坐落于四川省会成都市。</p>
        </body>
5. text-align：文本水平对齐方式
    A. 该属性可以取以下值：
        left：左对齐，默认值
        center：居中对齐
        right：右对齐
    e.g. <head>
            <title>text-align属性</title>
            <style type="text/css">
                #p1 {
                    text-align: left;
                }

                #p2 {
                    text-align: center;
                }

                #p3 {
                    text-align: right;
                }
            </style>
        </head>

        <body>
            <p id="p1">左对齐</p>
            <p id="p2">居中对齐</p>
            <p id="p3">右对齐</p>
        </body>
6. text-height：行高
    A. 该属性值要设置为像素值，即xxpx（20px等）。
7. letter-spacing：字距、word-spacing：词距
    A. 这两个属性值都要设置为像素值，即xxpx（20px等）。letter-spacing几乎用不到，word-spacing只对单词或汉字有效（用空格分开的代表单个单词或汉字，标点符号不算）。

少年闲客

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css入门（四）—— 文本样式

1. 概述 A. 文本样式属性主要包括以下： text-decoration：下划线、中划线（删除线）、顶划线 text-transform：大小写转换 text-indent：段落首行缩进 text-align：文本水平对齐方式 line-height：行高 letter-spacing：字距...
复制链接

扫一扫