w3c係列CSS之路（二）：錯誤解析和基本數據類型

有時候當你發現你寫的樣式代碼並沒有如期執行時，很可能是你打錯字了。但是其他元素的樣式並沒有失效，這跟其他語言還是有區別的，比如C，語法出錯編譯就會報錯，更別說執行了。CSS對於語法錯誤有它自己的解析機製，下麵我們就來探討一下。

1.錯誤處理

要想解析語法錯誤，首先得明白語法，一些基本的用法這裏就不說了，說些關鍵點：

1.注意關鍵字的使用。不要在關鍵字外加引號。比如：color:"red";是不對的。

2.支持廠商對關鍵字的擴展。比如_height在非IE瀏覽器下是非法無效的，但在IE6下卻是有效的。利用這個特性衍生出了 css hack。

3.對於html，CSS是大小寫不敏感的。但是對於XML卻相反。

4.@規則：@+標識符（比如@import）。CSS 2.1 user agents must ignore any '@import' rule that occurs inside a block or after any non-ignored statement other than an @charset or an @import rule.

舉個例子：

@import "subs.css";
h1 { color: blue }
@import "list.css";

CSS會忽略第二個@import。上麵這段代碼等效於：

@import "subs.css";
h1 { color: blue }

有種情況例外，就是在import後麵加了media type類型指定樣式媒體目標。比如：

@import "subs.css";
@import "print-main.css" print;/*此段有效*/
@media print {
  body { font-size: 10pt }
}
h1 {color: blue }

css對於錯誤的處理態度就是無視之，下麵看看都有哪些情況。

1.1未知屬性和非法值

忽略未知屬性和非法值，如果你寫了mheight:100px;;這樣的代碼，CSS會直接忽略它,因為mheight是未知屬性。同樣，height:100kg;也會被無視，因為100kg是非法值。

但是，之前說了CSS支持廠商對關鍵字的擴展，所以某些屬性對一般瀏覽器是未知的，但對於特定瀏覽器卻是正確的，比如IE6的*height。

1.2畸形的聲明

瀏覽器解析聲明時會檢測其()、{}、“”[]等匹配規則，遇到錯誤瀏覽器必須進行處理，但是怎麼處理標準並沒有說。比如p{color}會被無視。

1.3@+不可用的標識符

@import沒錯，@important就不對了。

1.4樣式表的意外結尾

標準規定瀏覽器必須關閉需要成對出現的結構。比如：

@media screen {
    p:before { content: 'Hello

需要被解析成：

 @media screen {
    p:before { content: 'Hello'; }
  }

但是，很多瀏覽器並沒有按標準來修複它。

1.5意外的字符串結尾

如果字符串結尾沒有引號關閉它，瀏覽器必須要關閉它並忽略此段非法聲明。

 p {
        color: green;
        font-family: 'Courier New Times
        color: red;
        color: green;
      }

需要被解析成：

 p { color: green; color: green; }

但是，很多瀏覽器並未按標準來修複它。

說了這麼多，其實我隻想說一句：非法的都忽略！所以不用擔心寫錯一個字而讓瀏覽器崩潰。至於標準所說的錯誤解析規則很多瀏覽器並沒有實現這一點，我覺得也不重要，因為你就不應該犯這種低級錯誤！

2.基本數據類型

這節跟上節基本沒啥關係啊，標準放在了同一章，這裏就一起講吧....

2.1整數和實數

就是數值嘛~，整數，小數，負數都支持啦~

2.2長度值

長度值的格式：數值+單位。如果數值為0，單位可有可無。

單位又分為相對單位和絕對單位，相對單位有：

em：em長度等效於作用在該節點"font-size"上的值。比如：

div{
    font-size:10px;
    height:2em;/*這裏等價於20px*/
}

ex:ex長度相對於一個小寫字母x的高度。通常被用在內容不包含"x"的元素上，這.....，不知道為什麼會有這麼奇葩的相對單位，反正沒怎麼見過。

絕對單位比較多：

in：英寸，等效於2.54cm；

cm：厘米，等效於10mm；

mm：毫米；

pt：點，等效於1/72 in；

pc：皮卡，等效於1/6 in；

px：像素，等效於0.75pt；

絕對單位都可以相對轉換，用起來也比較簡單，由於開發都是基於screen的，所以隻用到了px.

2.3百分值

數值+%，怎麼用大家都知道的。

2.4 URL和URI

URL統一資源定位符和URI統一資源標識符，這也算是基本單位.....二者的關係就不多說了。

2.5 Counters

這個屬性之前沒用過也沒見過，腦補一下：

counters計數器可以對標簽自動排序，通過counter-reset屬性和counter-increment屬性結合來實現。

counter-reset 屬性
用法：counter-reset 屬性設置某個選擇器出現次數的計數器的值。默認為 0。
說明：利用這個屬性，計數器可以設置或重置為任何值，可以是正值或負值。如果沒有提供 number，則默認為 0。
注釋：如果使用display: none，則無法重置計數器。如果使用visibility: hidden，則可以重置計數器。

counter-increment 屬性
用法：counter-increment 屬性設置某個選取器每次出現的計數器增量。默認增量是 1。
說明：利用這個屬性，計數器可以遞增（或遞減）某個值，這可以是正值或負值。如果沒有提供 number 值，則默認為 1。
注釋：如果使用了display: none，則無法增加計數。如使用visibility: hidden，則可增加計數。

我們來看個例子加深理解：

	<body>
		<h1></h1>
		<h2></h2>
		<h2></h2>
		<h1></h1>
		<h2></h2>
	</body>

body {
	counter-reset:num_h1;
	background:#aaa;
}
h1 {
	counter-reset:num_h2;
	background:#f0f;
}
h1:before {
	content:"類別 " counter(num_h1) ;
	counter-increment:num_h1;
}
h2:before {
	counter-increment:num_h2;
	content:counter(num_h1) "." counter(num_h2) ;
}

結果如下：

2.6 顏色值

顏色值的表示方法有以下幾種：

em { color: #f00 }              /* #rgb */
em { color: #ff0000 }           /* #rrggbb */
em { color: rgb(255,0,0) }      
em { color: rgb(100%, 0%, 0%) }

CSS內置了一些顏色關鍵字，平時測試的時候可以用，做產品實際用的很少。

2.7字符串

字符串被包含在單引號或雙引號之間，這點跟JS一樣。

3.總結

看w3c還是收貨不少的，最後附上本節官方鏈接：https://www.w3.org/TR/CSS2/syndata.html

最後更新：2017-04-03 05:40:03