目录
- justify
去掉超链接的下划线，可以使用: a {text-decoration: none;}
CSS 字体样式
- font 简写属性
简写属性，把所有针对字体的属性设置在一个申明中
定义和用法
font 简写属性在一个声明中设置所有字体属性。
注释：此属性也有第六个值："line-height"，可设置行间距。
说明
这个简写属性用于一次设置元素字体的两个或更多方面。使用 icon 等关键字可以适当地设置元素的字体，使之与用户计算机环境中的某个方面一致。注意，如果没有使用这些关键词，至少要指定字体大小和字体系列。
可以按顺序设置如下属性：
- font-style
- font-variant
- font-weight
- font-size/line-height
- font-family
可以不设置其中的某个值，比如 font:100% verdana; 也是允许的。未设置的属性会使用其默认值。
值 描述 font-style 规定字体样式。normal - 文本正常显示；italic - 文本斜体显示；oblique - 文本倾斜显示 font-variant 规定字体异体。small-caps; font-weight 规定字体粗细。normal - 文本正常显示；bold - 粗体字符；bolder-更粗字符；lighter- 更细文本；100-900，自定义字符粗细。 font-size/line-height 规定字体尺寸和行高。 font-family 规定字体系列。 caption 定义被标题控件（比如按钮、下拉列表等）使用的字体。 icon 定义被图标标记使用的字体。 menu 定义被下拉列表使用的字体。 message-box 定义被对话框使用的字体。 small-caption caption 字体的小型版本。 status-bar 定义被窗口状态栏使用的字体 <html> <head> <style type="text/css"> p.ex1 { font:italic arial,sans-serif; } p.ex2 { /*斜体显示 粗体 尺寸/行高 字体样式1，字体样式2*/ font:italic bold 12px/30px arial,sans-serif; } </style> </head> <body> <p class="ex1">This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.</p> <p class="ex2">This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.</p> </body> </html>
- font-family 规定元素的字体系列
font-family 规定元素的字体系列。
font-family 可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。也就是说，font-family 属性的值是用于某个元素的字体族名称或/及类族名称的一个优先表。浏览器会使用它可识别的第一个值。
有两种类型的字体系列名称：
- 指定的系列名称：具体字体的名称，比如："times"、"courier"、"arial"。
- 通常字体系列名称：比如："serif"、"sans-serif"、"cursive"、"fantasy"、"monospace"
提示：使用逗号分割每个值，并始终提供一个类族名称作为最后的选择。
注意：使用某种特定的字体系列（Geneva）完全取决于用户机器上该字体系列是否可用；这个属性没有指示任何字体下载。因此，强烈推荐使用一个通用字体系列名作为后路。
/*单个字体指定 */ h1 {font-family: Georgia;} /*多个字体进行备用 */ p { /* 按顺序进行查找，若找到则按照找到的字体进行输出*/ font-family: Times, TimesNR, 'New Century Schoolbook', Georgia, 'New York', serif; }使用引号
您也许已经注意到了，上面的例子中使用了单引号。只有当字体名中有一个或多个空格（比如 New York），或者如果字体名包括 # 或 $ 之类的符号，才需要在 font-family 声明中加引号。
单引号或双引号都可以接受。但是，如果把一个 font-family 属性放在 HTML 的 style 属性中，则需要使用该属性本身未使用的那种引号：
<p style="font-family: Times, TimesNR, 'New Century Schoolbook', Georgia, 'New York', serif;">...</p>
- font-style 定义字体的风格
font-style 属性定义字体的风格。
该属性设置使用斜体、倾斜或正常字体。斜体字体通常定义为字体系列中的一个单独的字体。
理论上讲，用户代理可以根据正常字体计算一个斜体字体。
该属性有三个值：
- normal - 文本正常显示
- italic - 文本斜体显示
- oblique - 文本倾斜显示
p.normal {font-style:normal;} p.italic {font-style:italic;} p.oblique {font-style:oblique;}
italic 和 oblique 的区别
font-style 非常简单：用于在 normal 文本、italic 文本和 oblique 文本之间选择。唯一有点复杂的是明确 italic 文本和 oblique 文本之间的差别。
斜体（italic）是一种简单的字体风格，对每个字母的结构有一些小改动，来反映变化的外观。
倾斜（oblique）文本则是正常竖直文本的一个倾斜版本。通常情况下，italic 和 oblique 文本在 web 浏览器中看上去完全一样。
- font-variant 设定小型大写字母
font-variant属性可以设定小型大写字母。
font-variant 属性设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。
<!-- html文件 --> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style type="text/css"> p {font-variant:small-caps;} </style> </head> <body> <p>font-variant:small-caps</p> </body> </html>
- font-weight 将文本设置为粗体
使用 bold 关键字可以将文本设置为粗体。
关键字 100 ~ 900 为字体指定了 9 级加粗度。如果一个字体内置了这些加粗级别，那么这些数字就直接映射到预定义的级别，100 对应最细的字体变形，900 对应最粗的字体变形。数字 400 等价于 normal，而 700 等价于 bold。
如果将元素的加粗设置为 bolder，浏览器会设置比所继承值更粗的一个字体加粗。与此相反，关键词 lighter 会导致浏览器将加粗度下移而不是上移。
p.normal {font-weight:normal;} p.thick {font-weight:bold;} p.thicker {font-weight:900;}
- font-size 设置文本的大小
font-size属性设置文本的大小。
有能力管理文本的大小在 web 设计领域很重要。但是，您不应当通过调整文本大小使段落看上去像标题，或者使标题看上去像段落。
请始终使用正确的 HTML 标题，比如使用 <h1> - <h6> 来标记标题，使用 <p> 来标记段落。
font-size 值可以是绝对或相对值。
绝对值：
- 将文本设置为指定的大小
- 不允许用户在所有浏览器中改变文本大小（不利于可用性）
- 绝对大小在确定了输出的物理尺寸时很有用
相对大小：
- 相对于周围的元素来设置大小
- 允许用户在浏览器改变文本大小
注意：如果您没有规定字体大小，普通文本（比如段落）的默认大小是 16 像素 (16px=1em)。
使用像素来设置字体大小
通过像素设置文本大小，可以对文本大小进行完全控制：
h1 {font-size:60px;} h2 {font-size:40px;} p {font-size:14px;}使用 em 来设置字体大小
如果要避免在 Internet Explorer 中无法调整文本的问题，许多开发者使用 em 单位代替 pixels。
W3C 推荐使用 em 尺寸单位。
1em 等于当前的字体尺寸。如果一个元素的 font-size 为 16 像素，那么对于该元素，1em 就等于 16 像素。在设置字体大小时，em 的值会相对于父元素的字体大小改变。
浏览器中默认的文本大小是 16 像素。因此 1em 的默认尺寸是 16 像素。
可以使用下面这个公式将像素转换为 em：pixels/16=em
（注：16 等于父元素的默认字体大小，假设父元素的 font-size 为 20px，那么公式需改为：pixels/20=em）
h1 {font-size:3.75em;} /* 60px/16=3.75em */ h2 {font-size:2.5em;} /* 40px/16=2.5em */ p {font-size:0.875em;} /* 14px/16=0.875em */结合使用百分比和 EM
在所有浏览器中均有效的方案是为 body 元素（父元素）以百分比设置默认的 font-size 值：
body {font-size:100%;} h1 {font-size:3.75em;} h2 {font-size:2.5em;} p {font-size:0.875em;}
CSS文本属性
| 属性 | 描述 |
|---|---|
| color | 设置文本颜色 |
| direction | 设置文本方向。 |
| line-height | 设置行高。 |
| letter-spacing | 设置字符间距。 |
| text-align | 对齐元素中的文本。 |
| text-decoration | 向文本添加修饰。 |
| text-indent | 缩进元素中文本的首行。 |
| text-shadow | 设置文本阴影。CSS2 包含该属性，但是 CSS2.1 没有保留该属性。 |
| text-transform | 控制元素中的字母。 |
| unicode-bidi | 设置文本方向。 |
| white-space | 设置元素中空白的处理方式。 |
| word-spacing | 设置字间距。 |
- 缩进文本 test-indent
test-indent，该属性可以方便地实现文本缩进。
通过使用 text-indent 属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值。
这个属性最常见的用途是将段落的首行缩进，下面的规则会使所有段落的首行缩进 5 em：
p {text-indent: 5em;}注意：一般来说，可以为所有块级元素应用 text-indent，但无法将该属性应用于行内元素，图像之类的替换元素上也无法应用 text-indent 属性。不过，如果一个块级元素（比如段落）的首行中有一个图像，它会随该行的其余文本移动。
提示：如果想把一个行内元素的第一行“缩进”，可以用左内边距或外边距创造这种效果。
使用负值
text-indent 还可以设置为负值。利用这种技术，可以实现很多有趣的效果，比如“悬挂缩进”，即第一行悬挂在元素中余下部分的左边：
p {text-indent: -5em;}不过在为 text-indent 设置负值时要当心，如果对一个段落设置了负值，那么首行的某些文本可能会超出浏览器窗口的左边界。为了避免出现这种显示问题，建议针对负缩进再设置一个外边距或一些内边距：
p {text-indent: -5em; padding-left: 5em;}
使用百分比值
text-indent 可以使用所有长度单位，包括百分比值。
百分数要相对于缩进元素父元素的宽度。换句话说，如果将缩进值设置为 20%，所影响元素的第一行会缩进其父元素宽度的 20%。
在下例中，缩进值是父元素的 20%，即 100 个像素：
div {width: 500px;} p {text-indent: 20%;} <div> <p>this is a paragragh</p> </div>
继承
text-indent 属性可以继承，请考虑如下标记：
div#outer {width: 500px;} div#inner {text-indent: 10%;} p {width: 200px;} <div id="outer"> <div id="inner">some text. some text. some text. <p>this is a paragragh.</p> </div> </div>以上标记中的段落也会缩进 50 像素，这是因为这个段落继承了 id 为 inner 的 div 元素的缩进值。
- 水平对齐 text-align
text-align是一个基本的属性，它会影响一个元素中的文本行互相之间的对齐方式。
值 现象 left 左对齐 right 右对齐 center 居中 西方语言都是从左向右读，所有 text-align 的默认值是 left。
文本在左边界对齐，右边界呈锯齿状（称为“从左到右”文本）。
对于希伯来语和阿拉伯语之类的的语言，text-align 则默认为 right，因为这些语言从右向左读。不出所料，center 会使每个文本行在元素中居中。
提示：将块级元素或表元素居中，要通过在这些元素上适当地设置左、右外边距来实现。
- center 与‘ <CENTER>’
您可能会认为 text-align:center 与 <CENTER> 元素的作用一样，但实际上二者大不相同。
<CENTER> 不仅影响文本，还会把整个元素居中。
text-align 不会控制元素的对齐，而只影响内部内容。元素本身不会从一段移到另一端，只是其中的文本受影响。justify
最后一个水平对齐属性是 justify。
在两端对齐文本中，文本行的左右两端都放在父元素的内边界上。然后，调整单词和字母间的间隔，使各行的长度恰好相等。您也许已经注意到了，两端对齐文本在打印领域很常见。
需要注意的是，要由用户代理（而不是 CSS）来确定两端对齐文本如何拉伸，以填满父元素左右边界之间的空间。
- 字间隔（词间距） word-spacing
改变字（单词）之间的标准间隔。其默认值 normal 与设置值为 0 是一样的。
word-spacing 属性接受一个正长度值或负长度值。
正值 - 远离
负值 - 靠近
- 字母间隔 letter-spacing
与 word-spacing 的区别在于，字母间隔修改的是字符或字母之间的间隔。
与 word-spacing 属性一样，letter-spacing 属性的可取值包括所有长度。
默认关键字是 normal（这与 letter-spacing:0 相同）。
正值 - 远离
负值 - 靠近
字符转换text-transform
text-transform 处理文本的大小写。这个属性有 4 个值：
- none -对文本不做任何改动，将使用源文档中的原有大小写
- uppercase- 将文本转换为全大写字符
- lowercase - 将文本转换为全小写字符
- capitalize - 对每个单词的首字母大写
好处：
- 只需写一个简单的规则来完成这个修改，而无需修改 h1 元素本身。
- 如果您以后决定将所有大小写再切换为原来的大小写，可以更容易地完成修改。
文本装饰 text-decoration
text-decoration 有 5 个值：
- none - 会关闭原本应用到一个元素上的所有装饰
- underline - 对元素加下划线
- overline - 会在文本的顶端画一个上划线
- line-through - 在文本中间画一个贯穿线,等价于 HTML 中的 S 和 strike 元素
- blink - 让文本闪烁，类似于 Netscape 支持的颇招非议的 blink 标记。
去掉超链接的下划线，可以使用: a {text-decoration: none;}
注意：如果显式地用这样一个规则去掉链接的下划线，那么锚与正常文本之间在视觉上的唯一差别就是颜色（至少默认是这样的，不过也不能完全保证其颜色肯定有区别）。
在一个规则中结合多种装饰
例：超链接既有下划线，又有上划线，则规则如下： a:link a:visited {text-decoration: underline overline;}
不过要注意的是，如果两个不同的装饰都与同一元素匹配，胜出规则的值会完全取代另一个值。请考虑以下的规则：
h2.stricken {text-decoration: line-through;} h2 {text-decoration: underline overline;}
对于给定的规则，所有 class 为 stricken 的 h2 元素都只有一个贯穿线装饰，而没有下划线和上划线.
因为 text-decoration 值会替换而不是累积起来。
处理空白符 white-space
white-space会影响到用户代理对源文档中的空格、换行和 tab 字符的处理。
通过使用该属性，可以影响浏览器处理字之间和文本行之间的空白符的方式。
可以用以下声明显式地设置这种默认行为,即丢掉多余的空白符。如果给定这个值，换行字符（回车）会转换为空格，一行中多个空格的序列也会转换为一个空格。：p {white-space: normal;}
值 pre
如果将 white-space 设置为 pre，空白符不会被忽略。
注意：经测试，IE 7 以及更早版本的浏览器不支持该值，因此请使用非 IE 的浏览器来查看上面的实例。
值 nowrap
与之相对的值是 nowrap，它会防止元素中的文本换行，除非使用了一个 br 元素。
在 CSS 中使用 nowrap 非常类似于 HTML 4 中用 <td nowrap> 将一个表单元格设置为不能换行，不过 white-space 值可以应用到任何元素。
值 pre-wrap 和 pre-line
pre-wrap，该元素中的文本会保留空白符序列，但是文本行会正常地换行。
pre-line，会像正常文本中一样合并空白符序列，但保留换行符。
注意：我们在 IE7 和 FireFox2.0 浏览器中测试了上面的两个实例，但是结果是，值 pre-wrap 和 pre-line 都没有得到很好的支持。
总结
下面的表格总结了 white-space 属性的行为：
值 空白符 换行符 自动换行 pre-line 合并 保留 允许 normal 合并 忽略 允许 nowrap 合并 忽略 不允许 pre 保留 保留 不允许 pre-wrap 保留 保留 允许
根据标签设定宽度强制换行 word-break
文本方向
如果您阅读的是英文书籍，就会从左到右、从上到下地阅读，这就是英文的流方向。不过，并不是所有语言都如此。我们知道古汉语就是从右到左来阅读的，当然还包括希伯来语和阿拉伯语等等。CSS2 引入了一个属性来描述其方向性。
direction 影响块级元素中文本的书写方向、表中列布局的方向、内容水平填充其元素框的方向、以及两端对齐元素中最后一行的位置。
注释：对于行内元素，只有当 unicode-bidi 设置为 embed 或 bidi-override 时才会应用 direction 属性。
direction 属性有两个值：ltr 和 rtl。大多数情况下，默认值是 ltr，显示从左到右的文本。如果显示从右到左的文本，应使用值 rtl。