CSS中的伪类选择器、颜色、度量单位、文本字体及文本样式设置

旧城等待， 2023-02-27 12:28 13阅读 0赞

## 1、伪类选择器 ##

##### 伪类选择器总汇 #####

伪类选择器分为四种类型：结构性伪类、UI 伪类、动态伪类和其他伪类选择器，具体如下：

<table> 
 <thead> 
  <tr> 
   <th>选择器</th> 
   <th>名称</th> 
   <th>说明</th> 
   <th>CSS版本</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>:root</td> 
   <td>根元素选择器</td> 
   <td>选择文档中的根元素</td> 
   <td>3</td> 
  </tr> 
  <tr> 
   <td>:first-child</td> 
   <td>子元素选择器</td> 
   <td>选择元素中第一个子元素</td> 
   <td>2</td> 
  </tr> 
  <tr> 
   <td>:last-child</td> 
   <td>子元素选择器</td> 
   <td>选择元素中最后一个子元素</td> 
   <td>3</td> 
  </tr> 
  <tr> 
   <td>:only-child</td> 
   <td>子元素选择器</td> 
   <td>选择元素中唯一子元素</td> 
   <td>3</td> 
  </tr> 
  <tr> 
   <td>:only-of-type</td> 
   <td>子元素选择器</td> 
   <td>选择指定类型的唯一子元素</td> 
   <td>3</td> 
  </tr> 
  <tr> 
   <td>:nth-child(n)</td> 
   <td>子元素选择器</td> 
   <td>选择指定 N 个子元素</td> 
   <td>3</td> 
  </tr> 
  <tr> 
   <td>:enabled</td> 
   <td>UI 选择器</td> 
   <td>选择启用状态的元素</td> 
   <td>3</td> 
  </tr> 
  <tr> 
   <td>:disabled</td> 
   <td>UI 选择器</td> 
   <td>选择禁用状态的元素</td> 
   <td>3</td> 
  </tr> 
  <tr> 
   <td>:checked</td> 
   <td>UI 选择器</td> 
   <td>选择被选中 input 勾选元素</td> 
   <td>3</td> 
  </tr> 
  <tr> 
   <td>:default</td> 
   <td>UI 选择器</td> 
   <td>选择默认元素</td> 
   <td>3</td> 
  </tr> 
  <tr> 
   <td>:valid</td> 
   <td>UI 选择器</td> 
   <td>验证有效选择 input 元素</td> 
   <td>3</td> 
  </tr> 
  <tr> 
   <td>:invalid</td> 
   <td>UI 选择器</td> 
   <td>验证无效选择 input 元素</td> 
   <td>3</td> 
  </tr> 
  <tr> 
   <td>:required</td> 
   <td>UI 选择器</td> 
   <td>有 required 属性选择元素</td> 
   <td>3</td> 
  </tr> 
  <tr> 
   <td>:optional</td> 
   <td>UI 选择器</td> 
   <td>无 required 属性选择元素</td> 
   <td>3</td> 
  </tr> 
  <tr> 
   <td>:link</td> 
   <td>动态选择器</td> 
   <td>未访问的超链接元素</td> 
   <td>1</td> 
  </tr> 
  <tr> 
   <td>:visited</td> 
   <td>动态选择器</td> 
   <td>已访问的超链接元素</td> 
   <td>1</td> 
  </tr> 
  <tr> 
   <td>:hover</td> 
   <td>动态选择器</td> 
   <td>悬停在超链接上的元素</td> 
   <td>2</td> 
  </tr> 
  <tr> 
   <td>:active</td> 
   <td>动态选择器</td> 
   <td>激活超链接上的元素</td> 
   <td>2</td> 
  </tr> 
  <tr> 
   <td>:foucs</td> 
   <td>动态选择器</td> 
   <td>获取焦点的元素</td> 
   <td>2</td> 
  </tr> 
  <tr> 
   <td>:not</td> 
   <td>其他选择器</td> 
   <td>否定选择的元素</td> 
   <td>3</td> 
  </tr> 
  <tr> 
   <td>:empty</td> 
   <td>其他选择器</td> 
   <td>选择没有任何内容的元素</td> 
   <td>3</td> 
  </tr> 
  <tr> 
   <td>:lang</td> 
   <td>其他选择器</td> 
   <td>选取包含 lang 属性的元素</td> 
   <td>2</td> 
  </tr> 
  <tr> 
   <td>:target</td> 
   <td>其他选择器</td> 
   <td>选取 URL 片段标识指向元素</td> 
   <td>3</td> 
  </tr> 
 </tbody> 
</table>

##### 结构性伪类选择器 #####

结构性伪类选择器能够根据元素在文档中的位置选择元素。这类元素都有一个前缀（:）。

###### 根元素选择器 ######

:root {
    	border: 1px solid red;
    }

解释：匹配文档中的根元素，基本不怎么用，因为总是返回`<html>`元素。

###### 子元素选择器 ######

ul > li:first-child {
    	color: red;
    }

解释：选择第一个子元素。

ul > li:last-child {
    	color: red;
    }

解释：选择最后一个子元素。

ul > li:only-child {
    	color: red;
    }

解释：选择只有一个子元素的那个子元素。

div > p:only-of-type {
    	color: red;
    }

解释：选择只有一个指定类型的子元素的那个子元素。

###### :nth-child(n) 系列 ######

ul > li:nth-child(2) {
    	color: red;
    }

解释：选择子元素的第二个元素。

ul > li:nth-last-child(2) {
    	color: red;
    }

解释：选择子元素倒数第二个元素。

div > p:nth-of-type(2) {
    	color: red;
    };

解释：选择特定子元素的第二个元素。

div > p:nth-last-of-type(2) {
    	color: red;
    };

解释：选择特定子元素的倒数第二个元素。

##### UI 伪类选择器 #####

UI 伪类选择器是根据元素的状态匹配元素。

###### :enabled ######

:enabled {
    	border: 1px solid red;
    }

解释：选择启用状态的元素。

###### :disabled ######

:disabled {
    	border: 1px solid red;
    }

解释：选择禁用状态的元素。

###### :checked ######

:checked {
    	display: none;
    }

解释：选择勾选的 input 元素。

###### :default ######

:default {
    	display: none;
    }

解释：从一组类似的元素中选择默认元素。比如 input 被勾选的即默认的。

###### :valid 和:invalid ######

input:valid {
    	border: 1px solid blue;
    }
    input:invalid {
    	border: 1px solid green;
    }

解释：输入验证合法与不合法显示时选择的元素。

###### :required 和:optional ######

input:required {
    	border: 1px solid blue;
    }
    input:optional {
    	border: 1px solid green;
    }

解释：根据是否具有 required 属性选择元素。

##### 动态伪类选择器 #####

动态伪类选择器根据条件的改变匹配元素。

###### :link 和 和 visited ######

a:link {
    	color: red;
    }
    a:visited {
    	color: orange;
    }

解释：:link 表示未访问过的超链接，:visited 表示已访问过的超链接。

###### :hover ######

a:hover {
    	color: blue;
    }

解释：表示鼠标悬停在超链接上。

###### :active ######

a:active {
    	color: green;
    }

解释：表示鼠标按下激活超链接时。

###### :focus ######

input:focus {
    	border: 1px solid red;
    }

解释：表示获得焦点时。

##### 其他伪类选择器 #####

###### :not ######

a:not([href*="baidu"]) {
    	color: red;
    }

解释：否定选择器，反选。

###### :empty ######

:empty {
    	display: none;
    }

解释：匹配没有任何内容的元素。

###### :lang ######

:lang(en) {
    	color: red;
    }

解释：选择包含 lang 属性，属性值前缀为 en 的元素。和属性选择器匹配结果一致。

###### :target ######

:target {
    	color: red;
    }

解释：定位到锚点时，选择此元素。

###### ::selection ######

::selection {
    	color: red;
    }

解释：这是一个伪元素选择器，当选择文字时触发选择。CSS3 版本下的选择器。

## 2、CSS 颜色设置 ##

##### 颜色表方案 #####

颜色的表现形式主要有三种方式：颜色名称、十六进制代码和十进制代码。

p {
    	color: red;
    }

解释：这是将一个段落内的文字设置为红色，采用的是英文颜色名称。问题是，其他各种颜色我们将如何设置？  
在古老的 HTML4 时，颜色名称只有 16 种。

<table> 
 <thead> 
  <tr> 
   <th>颜色名称</th> 
   <th>十六进制代码</th> 
   <th>十进制代码</th> 
   <th>含义</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>black</td> 
   <td>#000000</td> 
   <td>0,0,0</td> 
   <td>黑色</td> 
  </tr> 
  <tr> 
   <td>silver</td> 
   <td>#c0c0c0</td> 
   <td>192,192,192</td> 
   <td>银灰色</td> 
  </tr> 
  <tr> 
   <td>gray</td> 
   <td>#808080</td> 
   <td>128,128,128</td> 
   <td>灰色</td> 
  </tr> 
  <tr> 
   <td>white</td> 
   <td>#ffffff</td> 
   <td>255,255,255</td> 
   <td>白色</td> 
  </tr> 
  <tr> 
   <td>maroon</td> 
   <td>#800000</td> 
   <td>128,0,0</td> 
   <td>栗色</td> 
  </tr> 
  <tr> 
   <td>red</td> 
   <td>#ff0000</td> 
   <td>255,0,0</td> 
   <td>红色</td> 
  </tr> 
  <tr> 
   <td>purple</td> 
   <td>#800080</td> 
   <td>128,0,128</td> 
   <td>紫色</td> 
  </tr> 
  <tr> 
   <td>fuchsia</td> 
   <td>#ff00ff</td> 
   <td>255,0,255</td> 
   <td>紫红</td> 
  </tr> 
  <tr> 
   <td>green</td> 
   <td>#008000</td> 
   <td>0,128,0</td> 
   <td>绿色</td> 
  </tr> 
  <tr> 
   <td>lime</td> 
   <td>#00ff00</td> 
   <td>0,255,0</td> 
   <td>闪光绿</td> 
  </tr> 
  <tr> 
   <td>olive</td> 
   <td>#808000</td> 
   <td>128,128,0</td> 
   <td>橄榄色</td> 
  </tr> 
  <tr> 
   <td>yellow</td> 
   <td>#ffff00</td> 
   <td>255,255,0</td> 
   <td>黄色</td> 
  </tr> 
  <tr> 
   <td>navy</td> 
   <td>#000080</td> 
   <td>0,0,128</td> 
   <td>海军蓝</td> 
  </tr> 
  <tr> 
   <td>blue</td> 
   <td>#0000ff</td> 
   <td>0,0,255</td> 
   <td>蓝色</td> 
  </tr> 
  <tr> 
   <td>teal</td> 
   <td>#008080</td> 
   <td>0,128,128</td> 
   <td>水鸭色</td> 
  </tr> 
  <tr> 
   <td>aqua</td> 
   <td>#00ffff</td> 
   <td>0,255,255</td> 
   <td>浅绿色</td> 
  </tr> 
 </tbody> 
</table>

当然，目前颜色名称远远不止这些，可以搜索更多的 HTML 颜色表或 CSS 颜色表查阅。这里提供一些页面如下 ：  
http://xh.5156edu.com/page/z1015m9220j18754.html  
http://finle.me/colors.html  
http://www.w3school.com.cn/tags/html\_ref\_colornames.asp  
在上面的表格中，我们也罗列出对应的十六进制和十进制颜色表示方法。使用方法如下：

// 红色的十六进制方案
    p {
    	color: #ff0000;
    }

十进制表示方法就比较多样化，有四种方案：

<table> 
 <thead> 
  <tr> 
   <th>函数</th> 
   <th>说明</th> 
   <th>示例</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>rgb(r,g,b)</td> 
   <td>用 RGB 模型表示颜色</td> 
   <td>rgb(0,128,128)</td> 
  </tr> 
  <tr> 
   <td>rgba(r,g,b,a)</td> 
   <td>同上，a 表示透明度 0~1 之间</td> 
   <td>rgba(0,128,128,0.5)</td> 
  </tr> 
  <tr> 
   <td>hsl(h,s,l)</td> 
   <td>用 HSL 模型（色相、饱和度和透明度）来表示颜色</td> 
   <td>hsl(120,100%,30%)</td> 
  </tr> 
  <tr> 
   <td>hsla(h,s,l,a)</td> 
   <td>同上，a 表示透明度 0~1 之间</td> 
   <td>hsla(120,100%,30%,0.5)</td> 
  </tr> 
 </tbody> 
</table>

p {
    	color: rgb(112, 128, 114);
    	color: rgba(0, 128, 128, 0.5);
    	color: hsl(120, 100%, 30%);
    	color: hsla(120, 100%, 30%, 0.5);
    }

目前又有一个疑问，这些值从哪里获取。除了颜色表之外，想要微调自己的颜色值。我们可以使用 photoshop 等平面设计软件的调色板获取相应的值。

## 3、度量单位 ##

在 CSS 长度设置中，我们经常需要使用到度量单位，即以什么样的单位设计我们的字体或边框长度。而在 CSS 中长度单位又分为绝对长度和相对长度。绝对长度指的是现实世界的度量单位，CSS 支持五种绝对长度单位。  
绝对长度单位：

<table> 
 <thead> 
  <tr> 
   <th>单位标识符</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>in</td> 
   <td>英寸</td> 
  </tr> 
  <tr> 
   <td>cm</td> 
   <td>厘米</td> 
  </tr> 
  <tr> 
   <td>mm</td> 
   <td>毫米</td> 
  </tr> 
  <tr> 
   <td>pt</td> 
   <td>磅</td> 
  </tr> 
  <tr> 
   <td>pc</td> 
   <td>pica</td> 
  </tr> 
 </tbody> 
</table>

相对长度指的是依托其他类型的单位，也是五种。  
相对长度单位：

<table> 
 <thead> 
  <tr> 
   <th>单位标识符</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>em</td> 
   <td>与元素字号挂钩</td> 
  </tr> 
  <tr> 
   <td>ex</td> 
   <td>与元素字体的“x 高度”挂钩</td> 
  </tr> 
  <tr> 
   <td>rem</td> 
   <td>与根元素的字号挂钩</td> 
  </tr> 
  <tr> 
   <td>px</td> 
   <td>像素，与分辨率挂钩</td> 
  </tr> 
  <tr> 
   <td>%</td> 
   <td>相对另一值的百分比</td> 
  </tr> 
 </tbody> 
</table>

一些常用的单位如下：

// em 相对单位
    p {
    	margin: 0;
    	padding: 0;
    	background: silver;
    	font-size: 15px;
    	height: 2em;
    }

解释：em 是相对单位，与字号大小挂钩，会根据字体大小改变自己的大小，灵活性很高。

// px 相对单位，绝对特性
    p {
    	margin: 0;
    	padding: 0;
    	background: silver;
    	font-size: 15px;
    	height: 55px;
    }

解释：虽然 px 也是相对单位，但由于和分辨率挂钩，导致他其实就变成一个绝对单位了，自然灵活性没有 em 高，但是使用难度较低，且大量的开发者习惯性使用它。

// % 百分比
    p {
    	margin: 0;
    	padding: 0;
    	background: silver;
    	font-size: 200%;
    	width: 50%;
    }

解释：长度比较好理解，就是挂钩它所在区块的宽度。而 font-size 则是继承到的原始大小的百分比。

## 4、文本字体 ##

##### 字体设置总汇 #####

<table> 
 <thead> 
  <tr> 
   <th>属性名</th> 
   <th>说明</th> 
   <th>CSS版本</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>font-size</td> 
   <td>设置字体的大小</td> 
   <td>1</td> 
  </tr> 
  <tr> 
   <td>font-variant</td> 
   <td>设置英文字体是否转换为小型大写</td> 
   <td>1</td> 
  </tr> 
  <tr> 
   <td>font-style</td> 
   <td>设置字体是否倾斜</td> 
   <td>1</td> 
  </tr> 
  <tr> 
   <td>font-weight</td> 
   <td>设置字体是否加粗</td> 
   <td>1</td> 
  </tr> 
  <tr> 
   <td>font-family</td> 
   <td>设置 font 字体</td> 
   <td>1</td> 
  </tr> 
  <tr> 
   <td>font</td> 
   <td>设置字体样式复合写法</td> 
   <td>1 ~ 2</td> 
  </tr> 
  <tr> 
   <td>@font-face</td> 
   <td>设置 Web 字体</td> 
   <td>3</td> 
  </tr> 
 </tbody> 
</table>

##### 字体设置 #####

我们可以通过 CSS 文本样式来修改字体的大小、样式以及形态。

###### font-size ######

p {
    	font-size: 50px;
    }

解释：设置文本的大小。属性值如下表：

<table> 
 <thead> 
  <tr> 
   <td>值</td> 
   <td>说明</td> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>xx-small</td> 
   <td>设置字体大小，每个值从小到大的固定值</td> 
  </tr> 
  <tr> 
   <td>x-small</td> 
  </tr> 
  <tr> 
   <td>small</td> 
  </tr> 
  <tr> 
   <td>medium</td> 
  </tr> 
  <tr> 
   <td>large</td> 
  </tr> 
  <tr> 
   <td>x-large</td> 
  </tr> 
  <tr> 
   <td>xx-large</td> 
  </tr> 
  <tr> 
   <td>smaller</td> 
   <td>设置字体相对于父元素字体的大小</td> 
  </tr> 
  <tr> 
   <td>larger</td> 
  </tr> 
  <tr> 
   <td>数字+px</td> 
   <td>使用 CSS 像素长度设置字体大小</td> 
  </tr> 
  <tr> 
   <td>数字+%</td> 
   <td>使用相对于父元素字体的百分比大小</td> 
  </tr> 
 </tbody> 
</table>

// 先设置父元素字体大小
    body {
    	font-size: 50px;
    }
    // 再设置相对小一些
    p {
    	font-size: smaller;
    }

###### font-variant ######

p {
    	font-variant: small-caps;
    }

解释：设置字体是否以小型大写字母显示。

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>normal</td> 
   <td>表示如果以小型大写状态，让它恢复小写状态</td> 
  </tr> 
  <tr> 
   <td>small-caps</td> 
   <td>让小写字母以小型大写字母显示</td> 
  </tr> 
 </tbody> 
</table>

// 先让父元素设置小型大写
    body {
    	font-variant: small-caps;
    }
    // 让子元素设置恢复小写
    p {
    	font-size: 50px;
    	font-variant: normal;
    }

###### font-style ######

p {
    	font-style: italic;
    }

解释：设置字体是否倾斜。

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>normal</td> 
   <td>表示让倾斜状态恢复到正常状态</td> 
  </tr> 
  <tr> 
   <td>italic</td> 
   <td>表示使用斜体</td> 
  </tr> 
  <tr> 
   <td>oblique</td> 
   <td>表示让文字倾斜，在没有斜体时使用</td> 
  </tr> 
 </tbody> 
</table>

###### font-weight ######

p {
    	font-weight: bold;
    }

解释：设置字体是否加粗。

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>normal</td> 
   <td>表示让加粗的字体恢复正常</td> 
  </tr> 
  <tr> 
   <td>bold</td> 
   <td>粗体</td> 
  </tr> 
  <tr> 
   <td>bolder</td> 
   <td>更粗的字体</td> 
  </tr> 
  <tr> 
   <td>lighter</td> 
   <td>轻细的字体</td> 
  </tr> 
  <tr> 
   <td>100 ~ 900 之间的数字</td> 
   <td>600 及之后是加粗，之前不加粗</td> 
  </tr> 
 </tbody> 
</table>

在目前计算机和浏览器显示中，只有 bold 加粗，其他更粗更细，目前体现不出来。

###### font-family ######

p {
    	font-family: 微软雅黑;
    }

解释：使用指定字体名称。这里使用的字体是浏览者系统的字体。有时为了兼容很多浏览者系统的字体，可以做几个后备字体。

// 备用字体
    p {
    	font-family: 楷体,微软雅黑,宋体;
    }

###### font ######

p {
    	font: 50px 楷体;
    }

解释：字体设置简写组合方式。格式如下：\[是否倾斜|是否加粗|是否转小型大写\] 字体大小 字体名称；

##### Web 字体 #####

虽说可以通过备用字体来解决用户端字体缺失问题，但终究用户体验不好，且不一定备用字体所有用户都安装了。所以，现在 CSS 提供了 Web 字体，也就是服务器端字体。

// 服务器提供字体
    @font-face {
    	font-family: abc;
    	src: url('BrushScriptStd.otf');
    }
    p {
    	font-size: 50px;
    	font-family: abc;
    }

英文字体文件比较小，而中文则很大。所以，中文如果想用特殊字体可以使用图片。大面积使用特殊中文字体，就不太建议了。

## 5、文本样式 ##

##### 文本设置总汇 #####

<table> 
 <thead> 
  <tr> 
   <th>属性名</th> 
   <th>说明</th> 
   <th>CSS版本</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>text-decoration</td> 
   <td>装饰文本出现各种划线</td> 
   <td>1</td> 
  </tr> 
  <tr> 
   <td>text-transform</td> 
   <td>将英文文本转换大小写</td> 
   <td>1</td> 
  </tr> 
  <tr> 
   <td>text-shadow</td> 
   <td>给文本添加阴影</td> 
   <td>3</td> 
  </tr> 
  <tr> 
   <td>text-align</td> 
   <td>设置文本对齐方式</td> 
   <td>1,3</td> 
  </tr> 
  <tr> 
   <td>white-space</td> 
   <td>排版中的空白处理方式</td> 
   <td>1</td> 
  </tr> 
  <tr> 
   <td>letter-spacing</td> 
   <td>设置字母之间的间距</td> 
   <td>1</td> 
  </tr> 
  <tr> 
   <td>word-spacing</td> 
   <td>设置单词之间的间距</td> 
   <td>1</td> 
  </tr> 
  <tr> 
   <td>line-height</td> 
   <td>设置行高</td> 
   <td>1</td> 
  </tr> 
  <tr> 
   <td>word-wrap</td> 
   <td>控制段词</td> 
   <td>3</td> 
  </tr> 
  <tr> 
   <td>text-indent</td> 
   <td>设置文本首行的缩进</td> 
   <td>1</td> 
  </tr> 
 </tbody> 
</table>

##### 文本样式 #####

CSS 文本样式有三种：文本装饰、英文大小写转换和文本阴影。

###### text-decoration ######

p {
    	text-decoration: underline;
    }

解释：设置文本出现下划线。属性值如下表：

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>none</td> 
   <td>让本身有划线装饰的文本取消掉</td> 
  </tr> 
  <tr> 
   <td>underline</td> 
   <td>让文本的底部出现一条下划线</td> 
  </tr> 
  <tr> 
   <td>overline</td> 
   <td>让文本的头部出现一条上划线</td> 
  </tr> 
  <tr> 
   <td>line-through</td> 
   <td>让文本的中部出现一条删除划线</td> 
  </tr> 
  <tr> 
   <td>blink</td> 
   <td>让文本进行闪烁，基本不支持了</td> 
  </tr> 
 </tbody> 
</table>

// 让本来有下划线的超链接取消
    a {
    	text-decoration: none;
    }

###### text-transform ######

p {
    	text-transform: uppercase;
    }

解释：设置英文文本转换为大小写。

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>none</td> 
   <td>将已被转换大小写的值恢复到默认状态</td> 
  </tr> 
  <tr> 
   <td>capitalize</td> 
   <td>将英文单词首字母大写</td> 
  </tr> 
  <tr> 
   <td>uppercase</td> 
   <td>将英文转换为大写字母</td> 
  </tr> 
  <tr> 
   <td>lowercase</td> 
   <td>将英文转换为小写字母</td> 
  </tr> 
 </tbody> 
</table>

###### text-shadow ######

p {
    	text-shadow : 5px 5px 3px black;
    }

解释：给文本添加阴影。其中四个值，第一个值：水平偏移；第二个值：垂直偏移；第三个值：阴影模糊度（可选）；第四个值：阴影颜色（可选）。

##### 文本控制 #####

CSS 文本样式中还有一组对文本进行访问、形态进行控制的样式。

###### text-align ######

p {
    	text-align: center;
    }

解释：指定文本的对齐方式。

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>left</td> 
   <td>靠左对齐，默认</td> 
  </tr> 
  <tr> 
   <td>right</td> 
   <td>靠右对齐</td> 
  </tr> 
  <tr> 
   <td>center</td> 
   <td>居中对齐</td> 
  </tr> 
  <tr> 
   <td>justify</td> 
   <td>内容两端对齐</td> 
  </tr> 
  <tr> 
   <td>start</td> 
   <td>让文本处于开始的边界</td> 
  </tr> 
  <tr> 
   <td>end</td> 
   <td>让文本处于结束的边界</td> 
  </tr> 
 </tbody> 
</table>

start 和 end 属于 CSS3 新增的功能，但目前 IE 和 Opera 尚未支持。

###### white-space ######

p {
    	white-space: nowrap;
    }

解释：处理空白排版方式。

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>normal</td> 
   <td>默认值，空白符被压缩，文本自动换行</td> 
  </tr> 
  <tr> 
   <td>nowrap</td> 
   <td>空白符被压缩，文本不换行</td> 
  </tr> 
  <tr> 
   <td>pre</td> 
   <td>空白符被保留，遇到换行符则换行</td> 
  </tr> 
  <tr> 
   <td>pre-line</td> 
   <td>空白符被压缩，文本会在排满或遇换行符换行</td> 
  </tr> 
  <tr> 
   <td>pre-wrap</td> 
   <td>空白符被保留，文本会在排满或遇换行符换行</td> 
  </tr> 
 </tbody> 
</table>

###### letter-spacing ######

p {
    	letter-spacing: 4px;
    }

解释：设置文本之间的间距。

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>normal</td> 
   <td>设置默认间距</td> 
  </tr> 
  <tr> 
   <td>长度值</td> 
   <td>比如：“数字”+“px”</td> 
  </tr> 
 </tbody> 
</table>

###### word-spacing ######

p {
    	word-spacing: 14px;
    }

解释：设置英文单词之间的间距。

###### line-height ######

p {
    	line-height: 200%;
    }

解释：设置段落行高。

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>normal</td> 
   <td>设置默认间距</td> 
  </tr> 
  <tr> 
   <td>长度值</td> 
   <td>比如：“数字”+“px”</td> 
  </tr> 
  <tr> 
   <td>数值</td> 
   <td>比如：1,2,3</td> 
  </tr> 
  <tr> 
   <td>%</td> 
   <td>比如：200%</td> 
  </tr> 
 </tbody> 
</table>

###### word-wrap ######

p {
    	word-wrap: break-word;
    }

解释：让过长的英文单词断开。

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>normal</td> 
   <td>单词不断开</td> 
  </tr> 
  <tr> 
   <td>break-word</td> 
   <td>断开单词</td> 
  </tr> 
 </tbody> 
</table>

###### text-indent ######

p {
    	text-indent: 20px;
    }

解释：设置文本首行的缩进。