圖解CSS3讀書筆記 文本與顏色

CSS3文本

css字體類型屬性

font-family, font-style(normal、italic、oblique[傾斜]), font-weight,
font-size-adjust(定義是否強制對文本使用同一尺寸,僅火狐支持),
font-stretch(無瀏覽器支持), font-variant(定義字體大小寫,取值有:normalsmall-caps)css


這裏提一下font-size-adjusthtml

這個屬性爲某個元素規定一個 aspect 值,這樣就能夠保持首選字體的 x-height。 aspect指字體的小寫字母 "x" 的高度與
"font-size" 高度之間的比率。
一般aspect值較高的字體具備較好的易讀性。在元素下定義了爲多種字體定義相同的aspect值,可保證當第一個字體不可用時,瀏覽器能夠找出什麼樣的font-size使用第二選擇字體顯示文字。css3

再提一下font-variant,當其設定的值爲small-caps(小寫型大寫字母)時,字體是這樣顯示的:api

clipboard.png


回到剛剛談的6個文本屬性,其中font-family是複合屬性中必不可少的屬性。此外還有一個複合屬性font。瀏覽器

font: font-style font-weight/line-height font-family

css文本類型屬性

word-spacing(詞間距)、letter-spacing(字符間距)、vertical-aligntext-decorationtext-indenttext-alignline-height
text-transform(定義文本大小寫,取值:none,uppercase,lowercase,capitalize)、
text-shadowwhite-space(定義文本之間的空白符顯示與否)、direction佈局

css文本陰影屬性——text-shadow

用法:測試

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用於設定投影方向。

css溢出文本屬性——text-overflow

語法:

text-overflow: clip || ellpisis

clip: 簡單裁切,不顯示省略標記
ellpisis: 文本溢出時顯示省略(…)標記

兼容性:
IE6+!!!!以及其餘主流瀏覽器。

使用方法:
先來看clip的狀況:
代碼:

.clip {
    width: 100px;
    border: 1px solid saddlebrown;
    text-overflow: clip;
    }

效果:
clipboard.png

明顯看出text-overflow沒有起到任何裁切的效果。要想這個屬性生效,須要配合其餘三個屬性使用,分別是 over-flow: hidden(定義超出隱藏)、white-space: nowrap(定義文本不換行)、width(元素寬度)。再來看看改進後的代碼:

.clip {
    width: 100px;
    border: 1px solid saddlebrown;
    text-overflow: clip;
    overflow: hidden;
    white-space: nowrap;
    }

效果:

clipboard.png


如今來看看ellipsis的狀況:
同上啦,都是須要配合widthoverflow: hiddenwhite-space: nowrap使用的。
代碼:

.clip {
      width: 100px;
      border: 1px solid saddlebrown;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
        }

效果:

clipboard.png

看上去就比clip天然多了。而且這個時候文本輸出是完整的,只不過收到了元素容器大小限制沒法所有顯示出來,這是就用"…"代替隱藏的部分。

css3文本換行

在text-overflow的每一個例子中都用到了white-space屬性,用來禁止文本換行。爲了加強文本換行顯示的功能,css3中又添加了word-wrap和word-break屬性。

word-wrap

在CSS3中,word-wrap能夠實現長單詞和URL地址的自動換行。

語法:

word-wrap: normal | break-word

normal: 瀏覽器只在半角空格或連字符的地方進行換行。
break-word: 將內容在邊界內換行(不截斷英文單詞換行


word-break

語法:

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;
    }

效果:

clipboard.png

附加word-wrap爲normal和word-break爲keep-all的測試:

clipboard.png


white-space

這個屬性主要用來聲明創建佈局過程當中如何處理元素中的空白符

語法:

white-space: normal | pre | nowrap | pre-line | pre-wrap | inherit

pre: 相似html中<pre>標籤效果。
nowrap: 文本不會換行。直至遇到<br/>
pre-line: 合併空白符,可是保留換行符。意思是不能有空格,但能夠換行。
pre-wrap: 保留空白符和換行符。

如今來測試一下:

html:
clipboard.png

css:

  • white-space: nowrap;
    clipboard.png

  • white-space: pre;
    clipboard.png

  • white-space: pre-line;
    clipboard.png

  • white-space: pre-wrap;
    clipboard.png

CSS3顏色

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

相關文章
相關標籤/搜索