CSS学习（二）——文字与文本

最新推荐文章于 2025-06-07 15:16:53 发布

原创最新推荐文章于 2025-06-07 15:16:53 发布 · 398 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #html

CSS 专栏收录该内容

9 篇文章

订阅专栏

本文详细介绍了CSS中文字与文本的样式属性，包括长度、颜色、字体、对齐方式等，通过实例展示了如何使用这些属性来调整网页上的文字外观。

长度与颜色

长度：px像素

颜色：1. 十六进制 2. 英文

文字属性

属性名称	设定值	说明
font-style	normal	正常显示
	italic	斜体
font-variant	normal	正常显示
	small-caps	将小写字母更换为较小的大写字母
font-weight	normal	正常显示
	bold	粗体
font-size	像素	字体大小（默认14px）
	百分比
font-family	字体名称	设置字体

用内嵌式排版样式的标记定义型来举例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>文字与文本</title>
<style type="text/css">
	p{font-size:30px;font-variant:small-caps;font-weight:bold;font-family:黑体;}
</style>
</head>
<body>
  <p>What Are You Doing?</p>	
</body>
</html>

font属性的简化写法：例如，font:italic bold 200px 隶书;
注意，简写时各个属性的位置不能发生改变，要按照上面规范书写。

文本属性

属性名称	设定值	说明
color	十六进制	颜色
	英文	颜色
	三原色单位	颜色
letter-spacing	normal	正常显示
	长度（例如1px）	文本间隔
word-spacing	normal	正常显示
	数字	单词间距
white-space	normal	文本自动处理换行
	pre	换行和空白受保护
	nowrap	强制在同一行显示
text-align	left	文字靠左
	right	文字靠右
	center	文字居中
text-decoration	none	正常显示
	underline	加下划线
	overline	加顶线
	line-through	加删除线
text-indent	长度	首行缩进
	百分比	首行缩进
line-height	像素	行高（行间距）
	数字/百分比（常用）	行高
text-transform	none	正常显示
	capitalize	字符串第一个字符大写
	uppercase	都设置为大写字符
	lowercase	都设置为小写字符
vertical-align	sub	设置文字为下标
	super	设置文字为上标
	top	元件往上靠齐
	middle	设置文字在中线位置
	bottom	元件往下靠齐