CSS3学习笔记4-文本样式

最新推荐文章于 2025-09-09 15:40:26 发布

原创最新推荐文章于 2025-09-09 15:40:26 发布 · 222 阅读

0 ·

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

标签

#css

CSS 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了CSS3中用于文本样式的属性，包括text-align（文本对齐）、line-height（行高）、text-decoration（文本修饰）和text-indent（文本首行缩进），并提供了实例演示，展示了如何使用这些属性来增强网页文本的视觉效果。虽然一些文本修饰如闪烁在某些浏览器中可能不被支持。

CSS3学习笔记4——文本样式

文本样式

text-align

text-align属性指定元素文本的水平对齐方式，比如左对齐，右对齐和居中。

text-align有如下值：

值	描述
left	左对齐，大部分浏览器默认左对齐
right	右对齐
center	居中
justify	两端对齐
inherit	规定应该从父元素继承 text-align 属性的值。

line-height

line-height属性行高用来设置行间距，有如下值：

值	描述
normal	默认行间距
数字	比如1.5表示1.5倍行距
数字px	设置固定行间距，20px表示行间距为20像素
数字%	比如50%表示0.5倍行间距
inherit	规定应该从父元素继承 text-align 属性的值。

text-decoration

text-decoration属性设置文本修饰符，有下划线，上划线，删除线等，有如下值：

值	描述
none	默认值
underlin	下划线
overline	上划线
line-through	删除线
blink	闪烁文本
inherit	规定应该从父元素继承 text-decoration 属性的值。

text-indent

text-indent设置文本的首行缩进，有如下值：

值	描述
数值px	20px表示首行缩进20个像素
数值%	定义基于父元素宽度的百分比的缩进。
inherit	规定应该从父元素继承 text-indent 属性的值。

text-shadow

text-shadow设置文本的阴影效果，有如下值：

值	描述
h-shadow	必须，水平阴影位置，可为负值
v-shadow	必须，垂直阴影位置，可为负值
blur	可选，模糊距离
color	可选，阴影的颜色

案例演示

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>css文本样式</title>

</head>
<body>
	<table width="600px" height="100px" border="1px" cellspacing="0px">
		<tr style="text-align: center;font-weight: bolderr">
			<td>姓名</td>
			<td>性别</td>
			<td>年龄</td>
			<td>爱好</td>
		</tr>
		<tr style="text-align: left;font-family: '华文行楷'">
			<td style="text-decoration: line-through;">王俊茂</td>
			<td style="text-decoration: underline;">男</td>
			<td style="text-decoration: overline;">22</td>
			<td style="text-decoration: blink;">王者</td>
		</tr>
		<tr style="text-align: right">
			<td style="text-decoration: blink;">廖子怡</td>
			<td>男</td>
			<td>22</td>
			<td><span style="text-shadow: -25px 50px 2px red">英雄联盟</span></td>
		</tr>
	</table>
</body>
</html>

显示效果为：
在这里插入图片描述
可以看到“王者”设置成闪烁，但在浏览器中却没有看到闪烁，应该是浏览器不支持。