缩进和水平对齐

缩进文本

text-indent属性,用来实现文本的缩进,最常见的用途就是将段落的首行进行缩进。可选值为长度值 ,百分数或者inherit。

p {text-indent: 3em}

text-indent属性只能应用在块级元素上,行内元素或者图像之类的替换元素无法应用,不过如果是一个块级元素首行的图像,也会跟随其他文本移动。

text-indent属性也可以用来设置“悬挂缩进”,所谓悬挂缩进与首行缩进效果相反,其首行会向前突出出来,这时候我们可以使用text-indent设置负值来实现。不过同时我们要注意的是,需要设置外边距或者内边距才能显示出来悬挂缩进的样式,否则会隐藏掉。

p {text-indent: -3em; padding-left: 4em;}

最后一点,这个属性是会默认继承的,所以要小心哟。

水平对齐

text-align属性,可取值为left, center, right, justify和inherit,应用于块级元素。

这个属性的left,right,center值会将元素靠某一侧或者居中展示,可以用用与布局。同时这个属性是默认继承的。所以在用text -align布局时要注意继承问题。而justify则会将两端对齐,通过调整单词和字母间的间隔,使得各行的长度相等。两端对齐文本在打印领域比较常见。这时需要注意的是连字符的问题,不过不同浏览器的处理方式不同,CSS也没有指定规范的处理方法,所以应尽量避免这个问题。

垂直对齐

行高

line-height属性用来指定文本行之间的垂直间距。与字体大小结合而言,line-height的值与字体大小之差就是行间距。可取值为长度值、百分比、数值、normal和inherit。

这时注意的是,不同line-height的文本在同一行时,他们的“基线”都是位于文字底端对齐的。

当这个值为负值时,显然的,行间距将变为负值,即不同行之间会重合。

行高除了设置具体值之外,还可以设置一个不带单位的数值,这个数值我们可以称之为“缩放因子”,它即可避免在继承时父元素的行高值小于子元素的字体大小的问题。

div {line-height: 1.5;} p {font-size: 18px}

当这个p元素成为div的子元素时,p的line-height继承得1.5,与font-size计算后得line-height的具体值为18px × 1.5 = 27px。

垂直对齐文本

vertical-align属性用于将行内元素和表单元格与文本对齐,不能继承。可选值为baseline, sub, super, top, text-top, middle, bottom, text-bottom,百分数,长度和inherit。

要记住:vertical-align不影响块级元素中内容的对齐。不过,可以用它来影响表单元格中元素的垂直对齐。

基线对齐

baseline, 要求一个元素的基线与其父元素的基线对齐,即可理解为这个元素也和父元素的底端对齐一样。

上标和下标

与word中的上标下标一样,sub代表下标, super代表上标。

底端对齐

bottom, 元素与父元素中所在行的底端对齐,这里对齐的是行框而不是基线,它们都在文本基线之下。

text-bottom, 元素将对齐于行内文本的底端。

顶端对齐

top,与bottom刚好相反,与行框的顶端对齐。

text-top则与text-bottom相反,与行内文本的顶端对齐。

居中对齐

middle, 常常用于图像,将图像的中点与行内元素文本的中线对齐。

百分数和长度

百分数计算的是基于行高的数值而不是字体大小,为正时向下移动,为负时向上移动。

相反的是长度值,为正时向上,为负向下。

字间隔和字母间隔

字间隔

word-spacing,可选值为长度,normal和inherit。可以应用于任何元素。

字面意思,会修改英语中字与字的间隔。但是采用象形文字的语言或者非罗马书写体往往无法指定字间隔。也即是说,中文并没有什么卵用。

字母间隔

letter-spacing,跟字间隔非常类似。但是这回会直接计算字符和字符之间的距离,也即是说,任何语言的文字都会成功应用这种属性。为正时变远,为负时重合。

字间隔和字母间隔是可以收到text-align的影响的,毕竟justify的对齐方式会非常明显的改变间隔,所以在设置的时候要小心,需要的时候要显式的设置字母间隔和字间隔。

文本转换

text-transform属性,可选值为uppercase, lowercase, capitalize, none和inherit。

很好理解,uppercase全部大写,lowercase全部小写,capitalize首字母大写,none不变,inherit继承,全部都是英文相关的,在此不多赘述了。

文本装饰

text-decoration属性给文字带来了一些装饰,可选值为none, underline, overline, line-through, blink和inherit。除了none和inherit外,其余几个值是可以同时存在的。

  • underline 下划线
  • overline 上划线
  • line-through 删除线
  • blink 闪烁

IE、Chrome 或 Safari 不支持 “blink” 属性值。

这些装饰的行为比较“怪异”,text-decoration是不能继承的,所以其子元素是不会自动带有这些属性的。然而当你在中间插入元素时,仍然会有这种属性的表现。这是因为装饰“经过了”这些因素,所以看起来好像也设置了装饰一样。当你使用垂直对齐的时候,上划线可能就会把上标“删除”了等等。

文本阴影

CSS2.1中事实上去除了阴影,而CSS3中又加回来了。

关于定义方法,这里直接利用例子描述:

  • p {text-shadow: silver 2px 2px;} 阴影银色,向右偏移2px,向下偏移2px,模糊半径0。
  • p {text-shadow: 2px 2px 2px silver;} 阴影银色,向右偏移2px,向下偏移2px,模糊半径2px。,即是说颜色的位置前后均可,但是长度值的顺序不能变。
  • p {text-shadow: 2px 2px 2px silver;-1em -1em silver} 与上面两个类似,即是说可以同时定义多个阴影效果。

处理空白符

white-space,可选值为normal, nowrap, pre, pre-wrap, pre-line和inherit。

这个属性决定了字之间和文本行之间空白符的方式。默认方式为normal,即丢掉了多余的空白符。例如:

<p>this paragraph has many
 spaces in it</p>

默认情况下或设置white-space为normal时,在浏览器中显示为一行。而当设置值为pre时,可以恢复到两行,保留标记中的空格。

我们也可以设置nowrap来防止元素中的文本换行。只有当遇到<br>时才会换行。当然这导致了超出范围部分未换行的文本被隐藏,不过这有时就是技巧。

除此之外的pre-wrap和pre-line也可以方便控制空白符的处理。pre-wrap表示保留空白符,但会去除换行符正常换行,而pre-line会合并空白符,但保留换行符。两者刚好相反。

文本方向

有的语言例如阿拉伯分和希伯来文等是从右向左阅读的。这是需要考虑文本的阅读方向。暂时先不考虑这种问题,因为要用到的几率比较小,日后到用时方研究吧,偷个懒~