CSS的文本样式

最新推荐文章于 2026-06-17 22:45:00 发布

原创最新推荐文章于 2026-06-17 22:45:00 发布 · 294 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#html

前端知识专栏收录该内容

7 篇文章

订阅专栏

本文介绍了CSS中关于文本样式的各种属性，包括font-size、font-family、font-weight、font-style、color、letter-spacing、word-spacing、line-height、text-transform、text-decoration、text-align、text-indent以及white-space等，详细讲解了每个属性的作用和用法，帮助理解如何通过这些属性来定制文本的视觉效果。

1.font-size
设置字体大小，单位常用时px

p{font-size:12px;}

2.font-family
设置字体的类型
中文类型一般要加引号，英文类型不用加引号
可同时指定多个，英文类型必须在中文类型前面

p{font-family:Arial,"微软雅黑";}

3.font-weight
字体粗细

normal 默认值，定义标准字体
bold 定义粗体字体
bolder 更粗的字体
lighter 更细的字体
100~900（100的整数倍） 定义粗到细

p{font-weight:bold;}

4.font-variant
设置变体，只对英文字母有效，一般用于设置小型的大写字母

normal 默认值，显示标准的字体
small-caps 显示小型大写字体

5.font-style
设置斜体，倾斜字体

normal 正常字体
italic 斜体
oblique 倾斜

6.color
定义字体颜色

有3种取值方式:
1.预定义的值：red，blue，green
2.十六进制：#FF0000，#FF6600
3.RGB代码：rgb(255,0,0) 表示红色 取值：0~255

7.letter-spacing
设置字符间距
默认值：normal
可以使用不同单位的数值，一般单位是px
数值可以是正数，负数
8.word-spacing
专门用于英文单词（不同于字符，字符一定是单个，英文单词是整体）


.letter{letter-spacing:12px;}
.word{word-spacing:12px;}

<p class="letter">letter spacing</p>
<p class="word">word spacing</p>

9.line-height
设置行间距
常用单位：px
特殊作用：
文字的行间距等于块级元素的行高文字垂直居中

<html>

<head>
    <style type="text/css">
        .line {
            line-height: 300px;
        }

        div {
            width: 300px;
            height: 300px;
            background: green;
        }
    </style>
</head>

<body>
    <div class="line">hello world</div>
</body>

</html>

10.text-transform
用于控制英文字符的大小写
none：不转换
capitalize：首字母大写
uppercase：转换为大写
lowercase：转换为小写
11.text-decoration
用于设置文本的下滑线，上划线，删除线
none：没有装饰
underline：下划线
overline：上划线
line-through：删除线
这个属性可赋多个值
text-decoration:underline line-through;
12.text-align
用于设置文本内容的水平对齐
left：左对齐
right：右对齐
center：居中对齐
13.text-indent
设置首航文本缩进
常用单位：px
可以去不同数值：正数负数
14.white-space
在制作html页面，无论源代码有多少空格，在浏览器中只会显示一个字符的空白，这是使用white-spce属性可以设置空白符的处理
normal：文本中的空格、空行无效，满行（到达区域边界）自动换行
nowrap：空格、空行无效，文本不能换行，除非遇到换行标记，超出边界，则会增加滚动条
pre：按文本的书写格式保留空格、空行
这是CSS属性，不使用不起作用