重看css权威指南 part3

来源:互联网 发布:php强迫其它帐号下线 编辑:程序博客网 时间:2024/05/19 01:10

    接着来说文本属性

word-spacing和letter-spacing:这两个属性都具有继承性,不能使用百分数进行赋值。默认值为normal,相当于0。word-spacing的值可能受到text-align的影响,为了方便对齐。


text-transform:uppercase | lowercase | capitalize | none | inherit    默认值为none,capitalize会使首字母大写,具体表现在不同浏览器下可能不同。具有继承性。


text-decoration:none | underline | overline | line-through | blink | inherit      blink会使文本闪烁(大部分浏览器可能都不支持了)该属性没有继承性。但可以使用inherit来让子元素继承父元素该属性的值。

尽管text-decoration不会被继承,但它的表现可能和你的预期不太一样。看如下代码

<head><meta charset="UTF-8"><title>Document</title><style>p {display:inline-block;text-indent:2em;width:300px;text-decoration:underline;line-height:1.4em;font-size:25px;}strong {color:red;}</style></head><body><p>父元素的文本啊啊啊啊啊啊啊啊啊啊啊啊啊啊<strong>子元素</strong>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p></body>
子元素三个字下面也会出现下划线,而且是黑色的。这个下划线并非继承而来,因为text-decoration没有继承性。这个下划线为p元素的下划线,不过它却穿过了子元素而没有在中间断开。要防止这种情况,就要为子元素也设置text-decoration。


white-space:这个属性的默认值为normal,没有继承性。关于它的各个属性值的具体效果,看下表


空白符换行符自动换行pre-line合并保留允许normal合并
当成空格允许nowrap合并
当成空格不允许pre保留保留不允许pre-wrap保留保留允许

1 0
原创粉丝点击