CSS 文本 详解
CSS 文本
TEXT FORMATTING
文本格式化
This text is styled with some of the text formatting properties. The heading uses the text-align, text-transform, and color properties. The paragraph is indented, aligned, and the space between characters is specified. The underline is removed from this colored "Try it Yourself" link.
该文本使用某些文本格式属性来设置样式。标题使用 text-align、text-transform 和 color 属性。段落缩进、对齐，并指定了字符间距。然后从这个彩色的“亲自试一试”链接中删除了下划线。
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid gray;
padding: 8px;
}
h1 {
text-align: center;
text-transform: uppercase;
color: #4CAF50;
}
p {
text-indent: 50px;
text-align: justify;
letter-spacing: 3px;
}
a {
text-decoration: none;
color: #008CBA;
}
</style>
</head>
<body>
<div>
<h1>text formatting</h1>
<p>This text is styled with some of the text formatting properties. The heading uses the text-align, text-transform, and color properties.
The paragraph is indented, aligned, and the space between characters is specified. The underline is removed from this colored
<a target="_blank" href="tryit.asp?filename=trycss_text">"Try it Yourself"</a> link.</p>
</div>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
文本颜色
color 属性用于设置文本的颜色。颜色由以下值指定：
- 颜色名 - 比如 "red"
- 十六进制值 - 比如 "#ff0000"
- RGB 值 - 比如 "rgb(255,0,0)"
查看 CSS 颜色值，以获取可能颜色值的完整列表。
页面的默认文本颜色是在 body 选择器中定义的。
示例代码：
body {
color: blue;
}
h1 {
color: green;
}
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: blue;
}
h1 {
color: green;
}
</style>
</head>
<body>
<h1>这是标题 1</h1>
<p>这是一段普通的段落。请注意文本为蓝色。页面的默认文本颜色在 body 选择器中定义。</p>
<p>另一段文本。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
提示：对于 W3C compliant CSS：如果您定义了 color 属性，则还必须定义 background-color 属性。
文本颜色和背景色
在本例中，我们定义了 background-color 属性和 color 属性：
示例代码：
body {
background-color: lightgrey;
color: blue;
}
h1 {
background-color: black;
color: white;
}
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightgrey;
color: blue;
}
h1 {
background-color: black;
color: white;
}
</style>
</head>
<body>
<h1>此标题是带黑色背景的白色文本</h1>
<p>此页面有灰色背景和蓝色文本。</p>
<p>另一段文本。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
