摘要：如果你并不是一個(gè)特別有經(jīng)驗(yàn)的程序員，我相信你未必知道屬性除了能用在文本顯示，還可以用作其它地方。說(shuō)實(shí)話，估計(jì)這個(gè)值很少人會(huì)使用它，但你要知道確實(shí)可以使用這樣的一個(gè)值，如果以前不知道它，那么，現(xiàn)在，在有些罕見(jiàn)的地方，你也許就會(huì)變得聰明一點(diǎn)了。

雖然CSS并不是一種很復(fù)雜的技術(shù)，但就算你是一個(gè)使用CSS多年的高手，仍然會(huì)有很多CSS用法/屬性/屬性值你從來(lái)沒(méi)使用過(guò)，甚至從來(lái)沒(méi)聽(tīng)說(shuō)過(guò)。

對(duì)于CSS的color屬性，相信所有Web開(kāi)發(fā)人員都使用過(guò)。如果你并不是一個(gè)特別有經(jīng)驗(yàn)的程序員，我相信你未必知道color屬性除了能用在文本顯示，還可以用作其它地方。

你可以先看一下下面的演示：

HTML代碼

  
Example list item


  
Example list item

CSS代碼

body {
  color: yellow;
  background: #444;
  font-size: 20px;
  font-family: Arial, sans-serif;
  text-align: center;
}

ul {
  border: solid 2px;
  text-align: left;
}

ol {
  text-align: left;
}

hr {
  border-color: inherit;
}

http://jsfiddle.net/c0501uL5/3/embedded/result/

請(qǐng)注意，上面的代碼里只使用了一個(gè)color屬性，就是在body元素上，設(shè)置成了yellow。但是，你也看到了，所有這個(gè)頁(yè)面上的東西都變成了黃色，包括：

無(wú)法顯示的圖片的alt文字

list元素的邊框

無(wú)序list元素前面的小點(diǎn)

有序list元素前面的數(shù)字

還有hr元素

有趣的是，這個(gè)hr元素，缺省情況下它并不從body上繼承color的屬性，但我使用border-color: inherit強(qiáng)制讓它繼承。這是個(gè)很詭異的特征。

在CSS規(guī)范里是這樣說(shuō)的：

  
這個(gè)屬性聲明了元素文本內(nèi)容的前景色(foreground color)。除此之外，它的值還被用于其它地方間接的引用….比如，其它可以接受顏色值的屬性。

我無(wú)法想象出還有什么地方的屬性能用“前景色”來(lái)描述，如果你知道，請(qǐng)?jiān)谠u(píng)論里告訴我。

對(duì)于CSS里的visibility屬性，相信你用過(guò)不下幾百次。大多時(shí)候，你會(huì)把它的值設(shè)置成visible(這是所有頁(yè)面元素的缺省值)，或者是hidden。后者相當(dāng)于display: none，但仍然占用頁(yè)面空間。

其實(shí)visibility可以有第三種值，就是collapse。當(dāng)一個(gè)元素的visibility屬性被設(shè)置成collapse值后，對(duì)于一般的元素，它的表現(xiàn)跟hidden是一樣的。但例外的是，如果這個(gè)元素是table相關(guān)的元素，例如table行，table group，table列，table column group，它的表現(xiàn)卻跟display: none一樣，也就是說(shuō)，它們占用的空間也會(huì)釋放。

但遺憾的是，各種瀏覽器對(duì)collapse值的處理方式不一樣。看一下下面的演示：

HTML代碼

  

    
Fruits
    
Vegetables
    
Rocks
  
  

    
Apple
    
Celery
    
Granite
  
  

    
Orange
    
Cabbage
    
Flint
  

collapse行1
hide行1
重置

CSS代碼

body {
  text-align: center;
  padding-top: 20px;
  font-family: Arial, sans-serif;
}

table {
  border-collapse: separate;
  border-spacing: 5px;
  border: solid 1px black;
  width: 500px;
  margin: 0 auto;
}

th, td {
  text-align: center;
  border: solid 1px black;
  padding: 10px;
}

.vc {
  visibility: collapse;
}

.vh {
  visibility: hidden;
}

button {
  margin-top: 5px;
}

Javascript代碼

var btns = document.getElementsByTagName("button"),
    rows = document.getElementsByTagName("tr");

btns[0].addEventListener("click", function () {
  rows[1].className = "vc";
}, false);

btns[1].addEventListener("click", function () {
  rows[1].className = "vh";
}, false);

btns[2].addEventListener("click", function () {
  rows[1].className = "";
}, false);

演示

http://jsfiddle.net/c0501uL5/4/embedded/result/

CSS-Tricks的Almanac建議說(shuō)不要使用這個(gè)值，因?yàn)闉g覽器的不統(tǒng)一。

據(jù)我的觀察：

在谷歌瀏覽器里，使用collapse值和使用hidden值沒(méi)有什么區(qū)別。 (See this bug report and comments)

在火狐瀏覽器、Opera和IE11里，使用collapse值的效果就如它的字面意思：table的行會(huì)消失，它的下面一行會(huì)補(bǔ)充它的位置。

說(shuō)實(shí)話，估計(jì)這個(gè)值很少人會(huì)使用它，但你要知道確實(shí)可以使用這樣的一個(gè)值，如果以前不知道它，那么，現(xiàn)在，在有些罕見(jiàn)的地方，你也許就會(huì)變得聰明一點(diǎn)了。

在CSS2.1里，background屬性的簡(jiǎn)寫(xiě)方式包含五種屬性值 – background-color, background-image, background-repeat, background-attachment, and background-position。從CSS3開(kāi)始，又增加了3個(gè)新的屬性值，加起來(lái)一共8個(gè)。下面是按順序分別代表的意思：

background: [background-color] [background-image] [background-repeat]
            [background-attachment] [background-position] / [ background-size]
            [background-origin] [background-clip];

注意里面的反斜杠，它更font和border-radius里簡(jiǎn)寫(xiě)方式使用的反斜杠的用法相似。反斜杠可以在支持這種寫(xiě)法的瀏覽器里在position后面接著寫(xiě)background-size。

除此之外，你開(kāi)可以增加另外兩個(gè)描述它的屬性值： background-origin 和 background-clip.

它的語(yǔ)法用起來(lái)像下面這個(gè)樣子：

.example {
  background: aquamarine url(img.png)
              no-repeat
              scroll
              center center / 50%
              content-box content-box;
}

你可以用下面的演示檢測(cè)你的瀏覽器是否支持這種寫(xiě)法：

http://jsfiddle.net/c0501uL5/5/embedded/result/

關(guān)于瀏覽器的支持情況，大概所有的現(xiàn)代瀏覽器都支持這些新屬性值，但對(duì)于一些非常老舊的瀏覽器(IE6/7/8)，最好在代碼里提供一些萬(wàn)一不支持的補(bǔ)救機(jī)制。

之前說(shuō)到了background-clip，你可能會(huì)想到clip屬性。它的用法是下面這個(gè)樣子：

.example {
    clip: rect(110px, 160px, 170px, 60px);
}

它的作用是按指定的尺寸、規(guī)定的大小裁剪元素。很多簡(jiǎn)單，但唯一你需要注意的事情是，clip只會(huì)在絕對(duì)定位的元素上生效。所有，你必須這樣做：

.example {
    position: absolute;
    clip: rect(110px, 160px, 170px, 60px);
}

在下面的演示中，你可以看到當(dāng)元素在絕對(duì)定位/相對(duì)定位的切換中表現(xiàn)出來(lái)的效果：

http://jsfiddle.net/c0501uL5/6/embedded/result/

但是，你也可以將元素的position設(shè)置成position: fixed，因?yàn)?，根?jù)css官方規(guī)范，fixed的元素也屬于‘a(chǎn)bsolutely positioned’元素。

這是一個(gè)很讓人困惑的CSS特征，我之前也談到過(guò)它。我們大家都知道，當(dāng)按百分比設(shè)定一個(gè)元素的寬度時(shí)，它是相對(duì)于父容器的寬度計(jì)算的，但是，對(duì)于一些表示豎向距離的屬性，例如padding-top,padding-bottom,margin-top,margin-bottom等，當(dāng)按百分比設(shè)定它們時(shí)，依據(jù)的也是父容器的寬度，而不是高度。

下面是一個(gè)實(shí)例演示，你可以調(diào)整容器的寬度，但你會(huì)發(fā)現(xiàn)，黃塊塊的padding-bottom的距離也會(huì)隨之寬度而變大或變小。

HTML代碼

  






寬度是: 400px
黃塊塊的Padding bottom是:
10%

CSS代碼

body {
  font-family: Arial, sans-serif;
  padding-top: 30px;
  text-align: center;
}

.wrapper {
  width: 400px;
  margin: 0 auto;
  border: solid 1px black;
}

.box {
  width: 100px;
  height: 100px;
  background: gold;
  margin-left: auto;
  margin-right: auto;
  padding-top: 10%;
  padding-bottom: 10%;
  margin-bottom: 5%;
}

.range {
  display: block;
  margin: 20px auto;
}

output {
  text-align: center;
  display: block;
  font-weight: bold;
  padding-bottom: 20px;
}

output span {
  font-weight: normal;
}

http://jsfiddle.net/c0501uL5/7/embedded/result/

上面的代碼中，我們對(duì)內(nèi)部子元素聲明了3個(gè)豎向的距離，都是百分比形式。當(dāng)移動(dòng)滑塊時(shí)，我們的js代碼只需修改了容器的寬度。但是，這個(gè)這三個(gè)屬性高度都跟隨著變化，可以看出，它們的百分比計(jì)算是基于容器的寬度，而不是高度的。

我們很多人都用過(guò)這樣的寫(xiě)法：

.example {
  border: solid 1px black;
}

這里的border屬性的用法實(shí)際上是一種簡(jiǎn)寫(xiě)的形式，它分別設(shè)置了border-style, border-width, 和border-color — 用一句代碼表示它們?nèi)齻€(gè)。

但不要忘記，border-style, border-width, 和border-color也都有自己的簡(jiǎn)寫(xiě)形式。所以，border-width可以寫(xiě)成這樣：

.example {
  border-width: 2px 5px 1px 0;
}

這樣，四個(gè)邊的寬度被一次設(shè)定。border-color 和 border-style 屬性也可以這樣做。下面的這個(gè)實(shí)例演示就是用的這種寫(xiě)法：

HTML代碼

CSS代碼

body {
  font-family: Arial, sans-serif;
}

.box {
  width: 150px;
  height: 150px;
  margin: 20px auto;
  border-color: peachpuff chartreuse thistle firebrick;
  border-style: solid dashed dotted double;
  border-width: 10px 3px 1px 8px;
}

p {
  text-align: center;
}

演示

http://jsfiddle.net/c0501uL5/8/embedded/result/

其實(shí)，這些每個(gè)屬性還可以繼續(xù)細(xì)化，被拆分成border-left-style, border-top-width, border-bottom-color….

但是，你無(wú)法用border的簡(jiǎn)寫(xiě)分別對(duì)四個(gè)邊設(shè)置不同的值，只能分開(kāi)來(lái)設(shè)置。所以，border是一個(gè)簡(jiǎn)寫(xiě)里還有簡(jiǎn)寫(xiě)的屬性。

我相信有些小知識(shí)會(huì)讓你大吃一驚。

跟著最新的CSS規(guī)范，text-decoration現(xiàn)在的寫(xiě)法是這樣的：

a {
  text-decoration: overline aqua wavy;
}

text-decoration屬性現(xiàn)在需要用三種屬性值來(lái)表示了：text-decoration-line, text-decoration-color, and text-decoration-style.

但不幸的是，目前只有火狐瀏覽器實(shí)現(xiàn)了對(duì)這些新屬性的支持。

你可以用火狐瀏覽器試一試下面的演示：

HTML代碼

IT"S LIKE WATER, PEOPLE

body {
  padding: 30px;
  text-align: center;
  font-family: Arial, sans-serif;
}

a, a:visited {
  color: blue;
  background: aqua;
  -moz-text-decoration-color: aqua;
  -moz-text-decoration-line: overline;
  -moz-text-decoration-style: wavy;
  text-decoration-color: aqua;
  text-decoration-line: overline;
  text-decoration-style: wavy;
}

body {
  font-family: Arial, sans-serif;
  text-align: center;
}

.example {
  width: 100px;
  height: 100px;
  margin: 20px auto;
  background: aqua;
  border: solid thick red;
}

<上面的方塊使用了圖片描邊。在這個(gè)方塊的右下角，有一個(gè)可以調(diào)整這個(gè)方塊大小的小三角，點(diǎn)住它，拖動(dòng)它調(diào)整方塊大小，看看有什么效果。.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

body {
  font-family: Arial, sans-serif;
  text-align: center;
}

.bi {
    border: 45px solid transparent;
    -webkit-border-image: url(http://www.webhek.com/wordpress/wp-content/uploads/2014/07/bg-pawprints-all.jpg) 45 round;
    -moz-border-image: url(http://www.webhek.com/wordpress/wp-content/uploads/2014/07/bg-pawprints-all.jpg) 45 round;
    border-image: url(http://www.webhek.com/wordpress/wp-content/uploads/2014/07/bg-pawprints-all.jpg) 45 round;
    font-family: Arial, Helvetica, sans-serif;
    color: #222;
    width: 500px;
    margin: 30px auto 30px auto;
    overflow: hidden;
    resize: both;
}

table {
  empty-cells: hide;
}

  

    
Fruits
    
Vegetables
    
Rocks
  
  

    

    
Celery
    
Granite
  
  

    
Orange
    

    
Flint
  



切換EMPTY-CELLS

body {
  text-align: center;
  padding-top: 20px;
  font-family: Arial, sans-serif;
}

table {
  border: solid 1px black;
  border-collapse: separate;
  border-spacing: 5px;
  width: 500px;
  margin: 0 auto;
  empty-cells: hide;
  background: lightblue;
}

th, td {
  text-align: center;
  border: solid 1px black;
  padding: 10px;
}

button {
  margin-top: 20px;
}

var b = document.getElementById("b"),
    t = document.getElementById("table");

b.onclick = function () {
  if (this.getAttribute("data-ec") === "hide") {
    t.style.emptyCells = "show";
    this.setAttribute("data-ec", "show");
  } else {
    t.style.emptyCells = "hide";
    this.setAttribute("data-ec", "hide");
  }
};

Oblique Text
Italic Text

h1 {
  font-weight: normal;
  font-family: Georgia, serif;
  font-style: oblique;
  text-align: center;
  font-size: 50px;
}

h1:nth-child(2) {
  font-style: italic;
}

p {
  font-family: Arial, sans-serif;
  text-align: center;
}

  
“…讓一種字體標(biāo)識(shí)為斜體(oblique)，如果沒(méi)有這種格式，就使用italic字體?！?/p>

supercalifragilisticexpialidocious
TOGGLE word-wrap

body {
  font-family: Arial, sans-serif;
  text-align: center;
}

.p {
  font-size: 24px;
  text-align: center;
  width: 200px;
  margin: 20px auto;
  border: solid 1px black;
  min-height: 60px;
  word-wrap: break-word;
}

button {
  display: block;
  margin: 0 auto;
}

var p = document.getElementById("p"),
    b = document.getElementById("b");

b.onclick = function () {
  if (this.getAttribute("data-ww") === "break-word") {
    p.style.wordWrap = "normal";
    this.setAttribute("data-ww", "normal");
  } else {
    p.style.wordWrap = "break-word";
    this.setAttribute("data-ww", "break-word");
  }
};