CSS代码示例-用文本修饰属性(text-decoration)设定如何在文本上划线
<html>
<head>
<title>文本修饰属性 text-decoration</title>
<style type="text/css">
.p1{text-decoration: none}
.p2 {text-decoration: underline}
.p3{text-decoration: line-through}
.p4 {text-decoration:overline}
</style>
</head>
<body>
<p class = "p1">文本修饰属性(text-decoration)的缺省值是none。</p>
<p class = "p2">这段的文本修饰属性(text-decoration)值是underline。</p>
<p class = "p3">这段的文本修饰属性(text-decoration)值是line-through。</p>
<p class = "p4">这段的文本修饰属性(text-decoration)值是overline。</p>
</body>
</html>
编辑文本后点击显示结果
文本修饰属性(text-decoration)的缺省值是none。
这段的文本修饰属性(text-decoration)值是underline。
这段的文本修饰属性(text-decoration)值是line-through。
这段的文本修饰属性(text-decoration)值是overline。(上划线）
CSS代码示例-用颜色属性(color)改变文本字体的颜色
<html>
<head>
<title>颜色属性 color</title>
<style type="text/css">
.p1{color:gray}
.p2 {color:#FF0000}
.p3{color:#3300FF}
</style>
</head>
<body>
<p>这段没有设置颜色属性(color)。</p>
<p class = "p1">这段的颜色属性(color)值是灰色。</p>
<p class = "p2">这段的颜色属性(color)值是红色。</p>
<p class = "p3">这段的颜色属性(color)值是蓝色。</p>
</body>
</html>
编辑文本后点击显示结果
这段没有设置颜色属性(color)。
这段的颜色属性(color)值是灰色。
这段的颜色属性(color)值是红色。
这段的颜色属性(color)值是蓝色。
CSS代码示例-用文本对齐属性(text-align)改变文本的对齐方式
<html>
<head>
<title>文本对齐属性 text-align</title>
<style type="text/css">
.p1{text-align:left}
.p2 {text-align:right}
.p3{text-align:center}
</style>
</head>
<body>
<p class = "p1">这段的本文对齐属性(text-align)值为居左。</p>
<p class = "p2">这段的本文对齐属性(text-align)值为居右。</p>
<p class = "p3">这段的本文对齐属性(text-align)值为居中。</p>
</body>
</html>
编辑文本后点击显示结果
这段的本文对齐属性(text-align)值为居左。
这段的本文对齐属性(text-align)值为居右。
这段的本文对齐属性(text-align)值为居中。
CSS代码示例-用行高属性(line-height)设定行间距
<html>
<head>
<title>行高属性 line-height</title>
<style type="text/css">
.p1 {line-height:1cm}
.p2 {line-height:2cm}
</style>
</head>
<body>
<p class = "p1">这个段落的CSS行高属性(line-hight)值为1cm，即每行之间的距离是1厘米。</p>
<p class = "p2">这个段落的CSS行高属性(line-hight)值为2cm，即每行之间的距离是2厘米。</p>
</body>
</html>
编辑文本后点击显示结果
这个段落的CSS行高属性(line-hight)值为1cm，即
每行之间的距离是1厘米。
这个段落的CSS行高属性(line-hight)值为2cm，即
每行之间的距离是2厘米。
CSS代码示例-用字间距属性(letter-spacing)设定字符之间的距离
<html>
<head>
<title>字间距属性 letter-spacing</title>
<style type="text/css">
.p1 {letter-spacing: 3mm}
</style>
</head>
<body>
<p>这段没有设置字间距属性(letter-spacing)。</p>
<p class = "p1">这段设定字间距属性(letter-spacing)值为3毫米。</p>
</body>
</html>
编辑文本后点击显示结果
这段没有设置字间距属性(letter-spacing)。
这 段 设 定 字 间 距 属 性 ( l e t t e r - s p a c i n g ) 值 为 3 毫 米 。
CSS代码示例-用文本缩进属性(text-indent)实现首行缩进
<html>
<head>
<title>文本缩进属性 text-indent</title>
<style type="text/css">
.p1 {text-indent: 8mm}
.d1 {width:300px}
.p2 {text-indent:50%}
</style>
</head>
<body>
<p>下面两端都设定CSS文本缩进属性(text-indent)，第一段用长度方法设值，第二段用百分比方法设值。</p>
<p class = "p1">芙蓉姐姐说道：“我那妖媚性感的外形和冰清玉洁的气质让我无论走到哪里都会被众人的目光无情地揪出来。我总是很焦点。我那张耐看的脸，配上那副火爆得让男人流鼻血的身体，就注定了我前半生的悲剧。”</p>
<div class = "d1">
<p class = p2>芙蓉姐姐说道：“我那妖媚性感的外形和冰清玉洁的气质让我无论走到哪里都会被众人的目光无情地揪出来。我总是很焦点。我那张耐看的脸，配上那副火爆得让男人流鼻血的身体，就注定了我前半生的悲剧。”</p>
</div>
</body>
</html>
编辑文本后点击显示结果
下面两端都设定CSS文本缩进属性(text-indent)，第一段用长度方法设值，第二段用百分比方法设值。
芙蓉姐姐说道：“我那妖媚性感的外形和冰清玉洁的气质让我无论走到哪里都会被众人的目光无情地揪出来。我总是很焦点。我那张耐看的脸，配上那副火爆得让男人流鼻血的身体，就注定了我前半生的悲剧。”
芙蓉姐姐说道：“我那妖媚性感的外形和冰清玉洁的气质让我无
论走到哪里都会被众人的目光无情地揪出来。我总是很焦点。我那张耐看的脸，配上
那副火爆得让男人流鼻血的身体，就注定了我前半生的悲剧。”
