CSS文本笔录

1. 缩进

 text-indent 属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值

属性值有三种：

  length       定义固定的缩进。默认值：0

  %               定义基于父元素宽度的百分比的缩进

  inherit       规定应该从父元素继承 text-indent 属性的值

【注意：1.任何版本均IE不支持属性值inherit（继承）；2.不支持行内元素】

 2. 水平对齐

值 描述

left	把文本排列到左边。默认值：由浏览器决定。
right	把文本排列到右边。
center	把文本排列到中间。
justify	实现两端对齐文本效果。
inherit	规定应该从父元素继承 text-align 属性的值。

text-algin:justify在两端对齐文本中，文本行的左右两端都放在父元素的内边界上。然后，调整单词和字母间的间隔，使各行的长度恰好相等。两端对齐文本在打印领域很常见

具体使用场景及注意事项我在后面文章http://570109268..com/blog/2409915里做了总结

 3 . 字间隔

word-spacing 属性可以改变字（单词）之间的标准间隔，其默认值 normal 与设置值为 0 是一样的。

接受一个正长度值或负长度值：如果提供一个正长度值，字间隔增加；为 word-spacing 设置负值，会拉近

 4 . 字母间隔

letter-spacing 属性的可取值包括所有长度，默认关键字是 normal（这与 letter-spacing:0 相同）。输入的长度值会使字母之间的间隔增加或减少指定的量

letter-spacing 与 word-spacing 的【区别】：字母间隔修改的是字符或字母之间的间隔

【适用场景】

段落汉字间距与英文字母用letter-spacing属性，英文段落单词间距用word-spacing属性

 5 . 字符转换

text-transform 属性处理文本的大小写，这个属性有 4 个值：

none（不修改），uppercase（大写），lowercase（小写），capitalize（首字母答案写）

<style type="text/css">
  p.uppercase {text-transform: uppercase}
  p.lowercase {text-transform: lowercase}
  p.capitalize {text-transform: capitalize}
</style>
<p class="uppercase">This is some text in a paragraph.</p>
<p class="lowercase">This is some text in a paragraph.</p>
<p class="capitalize">This is some text in a paragraph.</p>

【好处】

 ① 只需写一个简单的规则来完成这个修改，而无需修改 h1 元素本身；

 ② 如果以后决定将所有大小写再切换为原来的大小写，可以更容易地完成修改

 6 . 文本装饰（下划线，上划线，贯穿线）

text-decoration 有 5 个值：

none（无行为），underline（下划线），overline（上划线），line-through（贯穿线），blink（闪烁）

【效果】

①underline 会对元素加下划线，就像 HTML 中的 U 元素一样；

②overline 的作用恰好相反，会在文本的顶端画一个上划线；

③值 line-through 则在文本中间画一个贯穿线，等价于 HTML 中的 S 和 strike 元素

④blink 会让文本闪烁，类似于 netscape 支持的颇招非议的 blink 标记

 7 . 处理空白符（换行/不换行）

white-space 属性会影响到用户代理对源文档中的空格、换行和 tab 字符的处理

通过使用该属性，可以影响浏览器处理字之间和文本行之间的空白符的方式

值 描述

normal	默认。空白会被浏览器忽略。
pre	空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
Nowrap	文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
pre-wrap	保留空白符序列，但是正常地进行换行。
pre-line	合并空白符序列，但是保留换行符。
inherit	规定应该从父元素继承 white-space 属性的值。

 8 . 文本方向

如果是英文书籍，就会从左到右、从上到下地阅读，这就是英文的流方向。不过，并不是所有语言都如此。古汉语就是从右到左来阅读，当然还包括希伯来语和阿拉伯语等。CSS2 引入了一个属性来描述其方向性

direction 属性：

影响块级元素中文本的书写方向、表中列布局的方向、内容水平填充其元素框的方向、以及两端对齐元素中最后一行的位置

 【注释：】

对于行内元素，只有当 unicode-bidi 属性设置为 embed 或 bidi-override 时才会应用 direction 属性

direction 属性有两个值：ltr 和 rtl。大多数情况下，默认值是 ltr，显示从左到右的文本。如果显示从右到左的文本，应使用值 rtl

 9 . 字体

 ① 字体系列/声明

     font-family 规定元素的字体系列，可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。也就是说，font-family 属性的值是用于某个元素的字体族名称或/及类族名称的一个优先表，浏览器会使用它可识别的第一个值

【2种字体系列】

     指定的系列名称：具体字体的名称，比如："times"、"courier"、"arial（宋体）"

     通常字体系列名称：比如："serif"、"sans-serif"、"cursive"、"fantasy"、"monospace"

     注意：使用某种特定的字体系列（Geneva）完全取决于用户机器上该字体系列是否可用；这个属性没有指示任何字体下载。因此，强烈推荐使用一个通用字体系列名作为后路

【字体名带单引号】

只有当字体名中有一个或多个空格（比如 New York），或者如果字体名包括 # 或 $ 之类的符号，才需要在 font-family 声明中加引号

单引号或双引号都可以接受。但是，如果把一个 font-family 属性放在 HTML 的 style 属性中，则需要使用该属性本身未使用的那种引号：

<p style="font-family: Times,TimesNR,'New Century Schoolbook',Georgia,'New York',serif;">字体声明加引号</p>

 ②字体倾斜

font-style 属性最常用于规定斜体文本，该属性有三个值：normal（正常），italic（斜体），oblique （斜体）

【italic 和 oblique 的区别】：web浏览器表现无异

 ③字体变形（小型大写字母）

font-variant 属性设置小型大写字母的字体显示文本，所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小

font-variant（字体变形）属性值：normal默认值；small-caps小型大写字母

 ④字体粗细

font-weight 属性设置文本的粗细

值 描述

normal	默认值。定义标准的字符。
bold	定义粗体字符。
bolder	定义更粗的字符。
lighter	定义更细的字符。
100-900	定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold。
inherit	规定应该从父元素继承字体的粗细。

 ⑤ 字体大小

font-size 值可以是绝对或相对值

【绝对值】

将文本设置为指定的大小；不允许用户在所有浏览器中改变文本大小（不利于可用性）；绝对大小在确定了输出的物理尺寸时很有用

【相对值】

相对于周围的元素来设置大小；允许用户在浏览器改变文本大小

【注意】如果您没有规定字体大小，普通文本（比如段落）的默认大小是 16 像素 (16px=1em)

接下来对比下px（pixels像素）与em：

①px：

    通过像素px设置文本大小，可以对文本大小进行完全控制；

②em：

    通过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 */
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>

 【em优点】

使用 em 单位，可以在所有浏览器中调整文本大小

【问题】

不幸的是，在 IE 中仍存在问题；在重设文本大小时，会比正常的尺寸更大或更小

【方案】

结合使用百分比和 EM

在所有浏览器中均有效的方案是为 body 元素（父元素）以百分比设置默认的 font-size 值：

body {font-size:100%;}
h1 {font-size:3.75em;}
h2 {font-size:2.5em;}
p {font-size:0.875em;}

这样在所有浏览器中，可以显示相同的文本大小，并允许所有浏览器缩放文本的大小