CSS文字及文本
导航:
1、文字及文本
2、例子
1、文字及文本
文字: 单个字符
文本: 多个字符的组合体
2、例子
2.1、文字的颜色
颜色属性被用来设置文字的颜色
格式: color:色值
颜色是通过CSS最经常的指定：
十六进制值 - 如"＃FF0000"
一个RGB值 - "RGB（255,0,0）"
颜色的名称 - 如"red"
2.2、文本的对齐方式
文本排列属性是用来设置文本的水平对齐方式。
格式: text-align:位置
2.3、文本修饰
text-decoration 属性用来设置或删除文本的装饰。
格式: text-decoration:修饰值
2.4、文本转换
文本转换属性是用来指定在一个文本中的大写和小写字母。
可用于所有字句变成大写或小写字母，或每个单词的首字母大写。
格式:text-transform:转换值
2.5、文本缩进
格式: text-indent:缩进值
2.6、文本行高
格式: line-height:值
2.7、字符间距
格式: letter-spacing:间距值
2.8、单词间距
格式: word-spacing:间距值
<!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" />
<meta name="keyword" content="CSS文字及文本"/>
<meta name="description" content="CSS文字及文本"/>
<meta name="author" content="xiaobei qq:2801616735"/>
<title>CSS文字及文本</title>
</head> <body>
<ul>
<li>文字颜色</li>
<li>文本水平方向的对齐方式</li>
<li>文本纵向方向的对齐方式</li>
<li>文本的修饰</li>
<li>文本转换</li>
<li>文本缩进</li>
<li>文本行高</li>
<li>字符间距</li>
<li>单词间距</li>
</ul>
<h2>1、文字颜色</h2>
<p style="border:1px red dashed;">
<span style="color:#999;">十六进制值</span>
<span style="color:rgb(144,168,250);">RGB</span>
<span style="color:red;">颜色名称</span>
</p>
<hr/>
<h2>2、文本水平方向的对齐方式</h2>
<p style="border:1px red dashed; text-align:left;">文本的对齐方式_默认</p>
<p style="border:1px red dashed; text-align:center;">文本的对齐方式_居中</p>
<p style="border:1px red dashed; text-align:right;">文本的对齐方式_居右</p>
<hr/>
<h2>3、文本纵向方向的对齐方式</h2>
<p style="border:1px red dashed;">X<span style="vertical-align:sub;">2</span></p>
<p style="border:1px red dashed;">X<span style="vertical-align: super;">2</span></p>
<p style="border:1px red dashed;"><img src="a.gif"/><span style="vertical-align:top">dddd</span></p>
<p style="border:1px red dashed;"><img src="a.gif"/><span style="vertical-align:100px;">dddd</span></p>
<p style="border:1px red dashed; height:200px;"><img src="a.gif"/><span style="vertical-align:bottom;">dddd</span></p>
<hr/>
<h2>4、文本的修饰</h2>
<p style="border:1px red dashed; text-decoration:line-through;">文本的修饰_line-through</p>
<p style="border:1px red dashed; text-decoration:underline;">文本的修饰_underline</p>
<p style="border:1px red dashed; text-decoration:overline;">文本的修饰_overline</p>
<hr/>
<h2>5、文本转换</h2>
<p style="border:1px red dashed; text-transform: uppercase;">xiaobei_uppercase</p>
<p style="border:1px red dashed; text-transform: lowercase;">xiaobei_lowercase</p>
<p style="border:1px red dashed; text-transform: capitalize;">xiaobei capitalize</p>
<hr/>
<h2>6、文本缩进</h2>
<p style="border:1px red dashed; text-indent:10px;">文本缩进</p>
<hr/>
<h2>7、文本行高</h2>
<p style="border:1px red dashed; line-height:40px;">文本行高</p>
<hr/>
<h2>8、字符间距</h2>
<p style="border:1px red dashed; letter-spacing:20px;">字符间距</p>
<hr/>
<h2>9、单词间距</h2>
<p style="border:1px red dashed; word-spacing:200px;">this is a world.</p>
</body>
</html>