CSS文本

浏览数：38 / 时间：2015年06月09日

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>