文本属性
文本属性可定义文本的外观。可以控制文本相对于该行余下内容的位置、使其作为上标、加下划线、以及改变大小写等。甚至还可以有限地模拟打字机的Tab键的使用。
1. 缩进和水平对齐
1.1 缩进文本
将Web 页面上的段落的第一行缩进。通过使用 text-indent 属性,所有元素的第一行都可以缩进一个给定的长度,甚至该长度可以是负值。
这个属性最常见的用途是将段落的首行缩进,下面的规则会使所有段落的首行缩进 3 em:
p {
text-indent: 3em;}
一般来说,可以为所有块级元素应用 text-indent,但无法将该属性应用于行内元素,图像之类的替换元素上也无法应用 text-indent 属性。不过,如果一个块级元素(比如段落)的首行中有一个图像,它会随该行的其余文本移动。
**注意:**如果想把一个行内元素的第一行“缩进”,可以用左内边距或外边距创造这种效果。
- 设置负值
为 text-indent 设置负值时要当心,如果对一个段落设置了负值,那么首行的某些文本可能会超出浏览器窗口的左边界。为了避免出现这种显示问题,建议针对负缩进再设置一个外边距或一些内边距:
p {
text-indent: -3em; padding-left: 4em;}
- 设置百分数
如果将缩进值设置为10%,所影响的第一行会缩进其父元素宽度的10%。
div {
width: 400px;}
p {
text-indent: 10%}
- 继承
div#outer {
width: 500px;}
div#inner {
text-indent: 10%;}
p {
width: 200px;}
<div id="outer">
<div id="inner">This first line of the DIV is indented by 50 pixels.
<p>this paragraph is 200px wide, and the first line of the paragraph is indented 50px. This is because computed values for 'text-indent' are inherited, instead of the declared values.</p>
</div>
</div>
2. 水平对齐
text-align 是一个基本的属性,它会影响一个元素中的文本行互相之间的对齐方式。值 left、right 和 center 会导致元素中的文本分别左对齐、右对齐和居中。
西方语言都是从左向右读,所有 text-align 的默认值是 left。文本在左边界对齐,右边界呈锯齿状(称为“从左到右”文本)。对于希伯来语和阿拉伯语之类的的语言,text-align 则默认为 right,因为这些语言从右向左读。
属性值 | 描述 |
---|---|
left | 把文本排列到左边。默认值:由浏览器决定。 |
right | 把文本排列到右边。 |
center | 把文本排列到中间。 |
justify | 实现两端对齐文本效果。 |
inherit | 规定应该从父元素继承 text-align 属性的值。 |
**提示:**将块级元素或表元素居中,要通过在这些元素上适当地设置左、右外边距来实现。
2.1 justify
justify
justify 是水平对齐属性,它会带来自己的一些问题。在两端对齐文本中,文本行的左右两端都放在父元素的内边界上。然后,调整单词和字母间的间隔,使各行的长度恰好相等。
但需要做以下考虑:
要由用户代理(而不是 CSS)来确定两端对齐文本如何拉伸,以填满父元素左右边界之间的空间。例如,有些浏览器可能只在单词之间增加额外的空间,而另外一些浏览器可能会平均分布字母间的额外空间(不过 CSS 规范特别指出,如果 letter-spacing 属性指定为一个长度值,“用户代理不能进一步增加或减少字符间的空间”)。还有一些用户代理可能会减少某些行的空间,使文本挤得更紧密。所有这些做法都会影响元素的外观,甚至改变其高度,这取决于用户代理的对齐选择影响了多少文本行。
CSS 也没有指定应当如何处理连字符(注1)。大多数两端对齐文本都使用连字符将长单词分开放在两行上,从而缩小单词之间的间隔,改善文本行的外观。不过,由于 CSS 没有定义连字符行为,用户代理不太可能自动加连字符。因此,在 CSS 中,两端对齐文本看上去没有打印出来好看,特别是元素可能太窄,以至于每行只能放下几个单词。当然,使用窄设计元素是可以的,不过要当心相应的缺点。
注1:CSS 中没有说明如何处理连字符,因为不同的语言有不同的连字符规则。规范没有尝试去调和这样一些很可能不完备的规则,而是干脆不提这个问题。
2.2 text-align:center 与 <CENTER>
您可能会认为 text-align:center 与 <CENTER>
元素的作用一样,但实际上二者大不相同。<CENTER>
不仅影响文本,还会把整个元素居中。text-align 不会控制元素的对齐,而只影响内部内容。元素本身不会从一段移到另一端,只是其中的文本受影响。
3. 垂直对齐
3.1 行高
line-height 定义了该元素中基线之间的最小距离。不允许使用负值。
3.2 构造文本行
文本行中的每个元素都会生成一个内容区,这由字体的大小确定。这个内容区则会生成一个行内框(inline box),如果不存在其他因素,这个行内框就完全等于该元素的内容区。line-height设置的行间距就是增加或减少各行内框高度的因素之一。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3GMrHlfP-1608194796762)(C:\Users\63291\AppData\Roaming\Typora\typora-user-images\image-20201106080458116.png)]
3.3 指定line-height 值
line-height 与 font-size 的计算值之差(在 CSS 中成为“行间距”)分为两半,分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。
line-height 值从父元素继承时,要从父元素计算,而不是在子元素上计算,结果可能是line-height 小,font-size大,造成文本不可读问题。解决办法是:原始数字值指定了一个缩放因子,后代元素会继承这个缩放因子而不是计算值。
4. 垂直对齐文本
vertical-align
属性只适用于内联(行内)元素和替换元素,如图像和表单输入。vertical-align
属性不能继承。
4.1 基线对齐
vertical-align: baseline要求一个元素的基线与其父元素的基线对齐。这个对齐规则很重要,因为它会导致某些 web 浏览器总是将替换后的元素的底边放在基线上,即使该行中没有其他文本。
4.2 上标与下标
vertical-align: sub
会使一个元素变成下标,这意味着其基线(如果它是一个替换元素,则是其底端)相对于其父元素的基线降低。
vertical-align: super
将元素的基线(或替换元素的底端)相对于父元素的基线升高。
4.3 底端对齐与顶 端对齐
vertical-align: bottom
将元素的行内框的底端与行框的底端对齐。
vertical-align: text-bottom
指行内文本的底端。替换元素或任何其他类型的非文本元素会忽略这个值。
vertical-align: top
: 与bottom效果相反。
4.4 居中对齐
middle会把行内元素框的中点与父元素基线上方0.5ex处的一个点对齐。下面的1ex相对于父元素的font-size定义。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kxoBcovp-1608194796767)(C:\Users\63291\AppData\Roaming\Typora\typora-user-images\image-20201106082901542.png)]
由于大多数用户代理将“1ex”视为 1 / 2 em,所以“middle”通常将元素的垂直中点与父元素基线之上的 1 / 4 em 处的一个点对齐,
4.5 百分数
vertical-align
设置为一个百分数,会把元素的基线(或替换元素的底端)相对地父元素的基线升高或降低指定的量。正百分数值会使元素升高,负值则会使其降低。
4.6 垂直对齐中的长度对齐
它把一个元素升高或降低指定的距离。
p {
vertical-align