font-family
, font-style
(normal、italic、oblique[傾斜]), font-weight
, font-size-adjust
(定義是否強制對文本使用同一尺寸,僅火狐支持), font-stretch
(無瀏覽器支持), font-variant
(定義字體大小寫,取值有:normal
、small-caps
)css
這裏提一下font-size-adjust
:html
這個屬性爲某個元素規定一個 aspect 值,這樣就能夠保持首選字體的 x-height。 aspect指字體的小寫字母 "x" 的高度與
"font-size" 高度之間的比率。
一般aspect值較高的字體具備較好的易讀性。在元素下定義了爲多種字體定義相同的aspect值,可保證當第一個字體不可用時,瀏覽器能夠找出什麼樣的font-size使用第二選擇字體顯示文字。css3
再提一下font-variant
,當其設定的值爲small-caps(小寫型大寫字母)時,字體是這樣顯示的:api
回到剛剛談的6個文本屬性,其中font-family
是複合屬性中必不可少的屬性。此外還有一個複合屬性font。瀏覽器
font: font-style font-weight/line-height font-family
word-spacing
(詞間距)、letter-spacing
(字符間距)、vertical-align
、text-decoration
、text-indent
、text-align
、line-height
、text-transform
(定義文本大小寫,取值:none
,uppercase
,lowercase
,capitalize
)、text-shadow
、white-space
(定義文本之間的空白符顯示與否)、direction
佈局
用法:測試
text-shadow: [color] x-offset y-offset blur-radius(只能是正值)
這個屬性的用法跟box-shadow
挺類似的,都是須要定義顏色、x軸偏移、y軸偏移和模糊半徑。
可是box-shadow
多了一個陰影擴展的屬性,位於模糊半徑後。字體
兼容性:spa
ie9+以及其餘主流瀏覽器。
若想更好地兼容ie,可以使用濾鏡屬性。.net
E: {filter:shadow(Color= 顏色值, Direction= 數值, Strength= 數值)} 其中Direction用於設定投影方向。
語法:
text-overflow: clip || ellpisis
clip
: 簡單裁切,不顯示省略標記ellpisis
: 文本溢出時顯示省略(…)標記
兼容性:
IE6+!!!!以及其餘主流瀏覽器。
使用方法:
先來看clip的狀況:
代碼:
.clip { width: 100px; border: 1px solid saddlebrown; text-overflow: clip; }
效果:
明顯看出text-overflow
沒有起到任何裁切的效果。要想這個屬性生效,須要配合其餘三個屬性使用,分別是 over-flow: hidden
(定義超出隱藏)、white-space: nowrap
(定義文本不換行)、width
(元素寬度)。再來看看改進後的代碼:
.clip { width: 100px; border: 1px solid saddlebrown; text-overflow: clip; overflow: hidden; white-space: nowrap; }
效果:
如今來看看ellipsis的狀況:
同上啦,都是須要配合width
、overflow: hidden
、white-space: nowrap
使用的。
代碼:
.clip { width: 100px; border: 1px solid saddlebrown; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
效果:
看上去就比clip天然多了。而且這個時候文本輸出是完整的,只不過收到了元素容器大小限制沒法所有顯示出來,這是就用"…"代替隱藏的部分。
在text-overflow的每一個例子中都用到了white-space屬性,用來禁止文本換行。爲了加強文本換行顯示的功能,css3中又添加了word-wrap和word-break屬性。
在CSS3中,word-wrap能夠實現長單詞和URL地址的自動換行。
語法:
word-wrap: normal | break-word
normal: 瀏覽器只在半角空格或連字符的地方進行換行。
break-word: 將內容在邊界內換行(不截斷英文單詞換行)
語法:
word-break: normal | break-all | keep-all
normal: 瀏覽器只在半角空格或連字符的地方進行換行。
keep-all: 不容許字斷開。若是是中文把先後標點符號內的一個漢字短語整個換行,英文單詞整個換行;若是出現某個英文字符長度超過容器邊界,後面的部分將撐破容器。(我的感受跟normal相似)
break-all: 強行截斷英文單詞,達到詞內換行效果。
這裏比較一下word-wrap和word-break的區別:
/*這是測試word-wrap爲break-word的box*/ .box { width: 200px; word-wrap: break-word; border: 1px solid sandybrown; } /*這是測試word-break爲break-all的box*/ .box2 { width: 200px; word-break: break-all; border: 1px solid sandybrown; }
效果:
附加word-wrap爲normal和word-break爲keep-all的測試:
這個屬性主要用來聲明創建佈局過程當中如何處理元素中的空白符。
語法:
white-space: normal | pre | nowrap | pre-line | pre-wrap | inherit
pre: 相似html中<pre>
標籤效果。
nowrap: 文本不會換行。直至遇到<br/>
pre-line: 合併空白符,可是保留換行符。意思是不能有空格,但能夠換行。
pre-wrap: 保留空白符和換行符。
如今來測試一下:
html:
css:
white-space: nowrap;
white-space: pre;
white-space: pre-line;
white-space: pre-wrap;
css3新增的顏色定義屬性:
rgba(r,g,b,a)、hsl(h,s,l)、hsla(h,s,l,a)
其中a的值爲0~1
瀏覽器兼容性爲ie9+以及其餘主流瀏覽器;
這裏提一下rgba和opacity爲元素設置透明度的區別:
opacity只能爲元素的背景設置透明度,而且影響其後代元素,使其後代元素都將繼承其透明度。
rgba能夠對元素任何具備顏色的屬性設置。而且對其後臺元素無影響。
由於hsl的使用頻率較少,這裏就不詳細敘述了。能夠看看這篇文章:Click here