1.line-height
可以給某個元素指定一個不帶單位的縮放因子,這樣它的后代元素就會繼承這個縮放因子,再根據(jù)自身的字號大小來計算自己的行高(line-height)值,
h1 {
font-size: 36px;
}
這里,body 的 line-height 是 18px(12 * 1.5),而 h1 的 line-height 則是 54px(36 * 1.5)。
就算使用 em,百分比等相對單位,后代元素繼承的仍然是計算后的行高(line-height)值,比如把上面的 body 行高改成 1.5em,那么 h1 的行高就會繼承這個值 18px。
2.text-decoration
文本修飾是非繼承類屬性,給 body 元素設置為 none,并不會影響到后代中默認有文本修飾的元素,例如超鏈接,所以如果要去掉超鏈接的默認下劃線還是需要單獨進行設置,
雖然該屬性默認不繼承,但是祖先元素上設置的修飾會“延伸”到后代元素中,
p span {
color: green;
text-decoration: none;
}
這里的下劃線是 p 元素的。
p span {
color: green;
text-decoration: underline;
}
由于文本修飾屬性的延伸會造成一些兼容性的問題,所以
最好的做法就是給需要修飾的文本單獨設置 text-decoration 屬性。
3.text-indent
可以使用該屬性給每個段落首行縮進2個字符,而不是使用空格,
也可以指定一個負數(shù)的值,產(chǎn)生首行懸掛的效果,
讓引號懸掛也是一種常用做法,
讓文本縮進到一個足夠遠的地方,可以讓文字消失,
因此,通常的圖像替換文字常用方法,
IE6/7 并不真正支持 inline-block,某些情況下可能會導致 .logo 消失不見,可以使用浮動或者 block 替代 inline-block,不過兩者都會改變布局方式,也可以使用其它方法。
4.text-overflow
通常情況下,長串的URL地址,在超出容器時會溢出,我們可以設定當文本溢出包含容器時顯示省略符號,
必須配合 overflow: hidden; 一起使用;有時候可能還得加上一個寬度,比如IE 6,
對于那些默認情況下并不會溢出的文本,需要強制其在一行內(nèi)顯示,這樣才能產(chǎn)生效果,
使用 white-space: pre; 或者 word-break: keep-all; 也能強制文本在一行顯示,不過各有各的問題。
在 IE 8/9 中,有時候會發(fā)現(xiàn)沒有效果,那有可能是祖先元素中某個元素設置了word-wrap: break-word; 而該屬性會表現(xiàn)得比 white-space: nowrap; 更強勢,所以,有時候還得加上下面代碼,
5.text-shadow
在非白色背景的深色文字上,可以實現(xiàn)漂亮的內(nèi)嵌效果,
可以給文本添加多個陰影,用逗號分隔,
6.white-space
white-space 屬性設置如何處理元素內(nèi)的空白。
設置值為 nowrap 讓文本可以在同一行上繼續(xù),遇到邊界也不會換行,直到遇到 br> 標簽,
有時我們希望保留文本中的空格和換行符之類的,比如展示計算機的源代碼的時候,就會用到 pre>,而 pre> 的 white-space 屬性的值就是 pre,
pre 也不那么盡如人意,遇到邊界的時候不會自動換行,所以 CSS 2.1 新增了 pre-wrap,
這樣 pre 元素里的內(nèi)容既能保持原有的格式,又能在內(nèi)容超出邊界的時候自動換行。
由于不是所有瀏覽器都支持 pre-wrap,所以還需要讓那些不支持瀏覽器強制換行,
當然,也許你并不希望換行,也不介意水平滾動條,那可以用水平滾動條來代替換行,
7.word-break
目前 webkit 大家族(包括 Google Chrome,Safari,Android Browser 等等)均不支持 keep-all 值,所以能用的也就 break-all 了,
不過會造成英文文本閱讀障礙,應該慎用,
8.word-wrap
這是比 word-break 更好的實現(xiàn)文本換行的方式,
再添加一個溢出隱藏,避免一些惡意的連續(xù)字符,