css标签——文本标签

最新推荐文章于 2024-06-13 23:29:27 发布

Farer1

最新推荐文章于 2024-06-13 23:29:27 发布

阅读量1.7k

点赞数

文章标签： css css3 前端

文本标签

针对文本的样式操作（渲染）

color：设置文本的颜色
text-align：设置文本的对齐方式

left：默认值，左对齐
center：居中对齐
right：右对齐

注意：text-align可以设置文本的对齐方式，在设置时可以设置里面的对齐元素格式。通常配合着line-height一起使用，使文字垂直居中显示

效果：

说明：在一个元素div中，如果设置了text-align只能对其字标签中的文本有设置效果，对其容器和表格之类的不能有效。

line-height：行高

像素
数字或百分数：数字参考的文字的字体大小，是字大小的倍数

注意：如果在元素中只有一行内容，那么我们就可以采取高和行高设置相同的值来做到内容的垂直居中的在元素中。

<style>
        .textstyle {
            width: 100px;
            height: 300px;
            line-height: 80px;
            background-color: pink;
        }

        .textstyle1 {
            width: 100px;
            height: 300px;
            line-height: 300px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="textstyle">
        <p>文本格式文字</p>
        <p>文本格式文字</p>
    </div>
    <div class="textstyle1">
        <p>文本格式文字</p>
    </div>

显示：

text-decoration：设置文本的修饰符

none：文本无符号修饰（经常使用在去除a超链接的下划线上演示）
underline：下划线
line-through：删除线
overline：上划线

演示：

.hover {
            text-align: center;
        }

        .nav {
            text-decoration: none;
            color: pink;
            text-align: center;
        }

        .nav:hover {
            color: red;
        }

<div class="hover">
        <a href="#" class="nav">这是一个超链接</a>
    </div>

显示：

鼠标悬停上后会变为红色字体

其他样式文本

letter-spacing：设置字符间距，一个中文就是一个字符（一个英文字母也是）

word-spacing：单词间距（只适用于英文），是因为此设置的为英文空格的宽度

text-indent：首行缩进，适用于p元素

text-transform：设置字母的大小

capitalize：首字母大写
uppercase：全大写（经常适用于验证码）
lowercase：全小写
none：无

direction：设置文本方向（几乎不用）

Farer1

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css标签——文本标签

文本标签针对文本的样式操作（渲染）color：设置文本的颜色 text-align：设置文本的对齐方式left：默认值，左对齐 center：居中对齐 right：右对齐注意：text-align可以设置文本的对齐方式，在设置时可以设置里面的对齐元素格式。通常配合着line-height一起使用，使文字垂直居中显示效果：说明：在一个元素div中，如果设置了text-align只能对其字标签中的文本有设置效果，对其容器和表格之类的不能有效。line-height：行高..
复制链接

扫一扫