文本属性

缩进文本

在Web页面上一个段落的第一行缩进,这是一种最常用的文本格式化效果,有些网站在段落的第一个字母前面放一个很小的透明的图片,这个图像将文本推进到后面来制造一种缩进文本的感觉。另外一些网站则使用完全非标准的spacer标记。在css中,有一种更好的方法实现文本缩进,即text-indent属性。
通过使用text-indent属性,所有的元素的第一行都可以缩进一个指定的长度,甚至该长度可以是负值。当然,这个属性最常见的用途是将段落的首行缩进:

p:{text-indent:3em;}

一般地,可以为所有的块级元素应用text-indent,但无法将这个属性应用到行内元素,图像之类的替换元素也无法应用text-indent属性。不过,如果一个块极元素的首行中有一个图像,那么他会跟随该行其余的文本移动。

特别注意的是缩进是可以继承的。

水平对齐

与text-indent相比,text-align是一个更为基本的属性,它会影响一个元素中的文本行相互之间的对齐方式。
显然,值left、right、center会导致元素中的文本分别左对齐、右对齐和居中。因为text-align只应用于块级元素,所以无法将行内的一个锚居中而不影响行中的其余部分。justify是水平对齐,它会将本行的左右两端都放在父元素的内边界上。

垂直对齐

行高

line-height属性是指文本行基线之间的距离,而不是字体的大小,他确定了将各个元素框的高度增加或者减少多少。在最基本的情况下,指定line-height可以用来增加文本行之间的垂直间隔,人们认为这是一个了解line-height如何工作的简单方法,但其实并不简单。line-height控制了行间距,这是文本行之间超出字体大小的额外空间。换句话来说,line-height值和字体大小之差就是行间距。

在应用到块级元素时,line-height定义了元素中文本基线之间的最小距离。注意,它定义的是最小距离,而不是一个绝对数值,文本基线拉开的距离可能比line-height值更大。line-height并不影响替换元素的布局,不过确实可以应用到替换元素。

构造文本行

文本行中的每个元素都会生成一个内容区,这由字体的大小确定。这个内容区则会生成一个行内框,如果不存在其他的因素,这个行内框就完全鄂东南关于该元素的内容区。由line-height产生的行间距就是增加或者减少各行内框高度的因素之一。

要确定一个给定元素的行间距,只需将line-height的计算值减去font-size的计算值。这个值总的行间距。而且要记住,这可能是一个负值。然后行间距再除以2,折行间距的一般本别应用到内容区的顶部和底部。其结果就是该元素的行内框。

注意

行高和继承

当一个块级元素从另一个元素继承line-height时,问题会变得复杂。line-height值从父元素继承时,要从父元素计算,而不是在子元素上计算。

垂直对齐文本

在CSS中,vertical-align属性值应用于行内元素和替换元素,如元素和表单输入元素。vertical-align属性不能继承
vertical-align只接受8个关键字、一个百分数值或一个长度值。这些关键字有些我们很熟悉,有些可能不熟悉,包括:baseline(默认值)、sub、super、bootm、text-boom、middle、top和text-top.

基线对齐

vertical-align:baseline要求一个元素的基线与其父元素的基线对齐。多数情况下,流量器都会这么做,因为你显然希望一行中所有的文本元素的底端都对齐。

如果一个垂直对齐元素没有基线–也就是说,如果这是一个图像或表单输入元素,或者是其他替换元素 —那么该元素的底端与其父元素的基线对齐。
这个对齐规则很重要,因为他使得一些web浏览器总把替换元素的底边放在基线上,即使该行中没有其他文本。

上标和下标

vertical-align:sub申明会使一个元素变成下标,这意味着相对于其付元素的基线降低。规范没有定义元素降低的距离,所以对于不同的用户代理,这个距离可能不同。
super刚好跟sub相反:它将元素的基线相对于父元素的基线升高。同样地,文本升高的距离取决于具体的用户代理。

注意,值sub和super不会改变改变元素的字体大小,所以下标或者上标文本不会变小。相反下标或者上标元素的所有文本默认得都应该与付元素中的文本大小相同。

低端对齐

vertical-align:bottom将元素行内框的底端与行框的低端对齐。
vertical-align:text-bottom是将行内文本的低端。替换元素或其他类型的非文本元素会忽略这个值。对于这些元素,将考虑一个默认的文本框。这个默认框由父元素的font-size得到。要对齐的元素的行内框低端再与这个默认文本框的低端对齐。

居中对齐

还有一个middle,它往往应用于图像。你可能会从他的名字想象其效果,但你的想象与实际效果并不完全一样。middle会把行内元素框的中点与付元素基线上方0.5x处的一个点对齐,这里的1ex相对于父元素的font-size定义。

百分数

使用百分数不能模仿图像align=‘middle’对齐。相反,如果为vertical-align设置一个百分数,会把元素的基线相对与父元素的基线升高或者降低指定的量。正百分数值会使元素升高,负值则会使其降低。取决于文本的升高或降低,可能看上去它放在相邻的行上

字间隔和字母间隔

前面已经介绍了对齐,下面来看如何处理自间隔和字母间隔。同样地,这些属性存在一些不太直观的问题。

字间隔

word-spacing属性介绍一个正长度值或者负长度值。这个长度会增加到字之间的标准间隔。实际上,word-spacing用于修改字间间隔。因此,默认normal与设置为0是一样的。

字母间隔

word-spacing遇到的许多问题也同样出现在letter-spacing中。这两者之间唯一的真正区别是字母间隔修改的是字符或字母之间的间隔。

间隔和对齐

word-spacing的值可能受text-align属性值的影响。如果一个元素是两端对齐的。字母和字之间的空间可能会调整,以便文本在整行中刚好放下。可能又会改变创作人员用word-spacing申明的字间隔。如果为letter-spacing制定一个长度值,字符间隔则不会受text-align影响,但是如果letter-spcing的值是nomal,字符间的间隔就可能会改变,以便将文本两端对齐。css没有滴定应当如何计算间隔,所以用户代理只会将其填满。

文本转换

text-transform属性是处理文本的大小写。uppercase和lowercase是将文本转换为全大写或者全小写字符。最后,capitalize只对每个单词的首字母大写。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值