CSS樣式當中的空格

<style type="text/css">
td .b {
color:#00ff00;
}
th.b {
color:#ff0000;
font-family:黑體;
font-size:20px;
}
.b {
color:#0000ff;
font-size:12px;
}
</style>
............................................................................................

<table>
<tr>

<td><div class="b">第一個類別b的路徑是th .b</div></td>
<th class="b">第二個類別b的路徑是th.b</td>
<td class="b">第三個類別b的路徑是 .b</th>
</tr>
</table>
<div class="b">第三個類別b路徑是 .b</div>

講解:

1、第一個類別b的路徑是td .b,定義該HTML文檔內所有的td標籤內的帶class="b"的標籤的樣式 。
也就是說:
td .b { color:#00ff00; }
定義的是
<td><div class="b">text</div></td>

這組代碼塊中的b類,class="b"是包含在td標籤內的,是td的子級,所以在這裡要用「空格」指向明確表明父子級別關係。

2、第二個類別b的路徑是th.b,定義的是該HTML文檔內所有的帶class="b"的th標籤的樣式。
也就是說,
th.b { color: #FF0000}
定義的是
<th class="b">text</td>

在這裡的代碼中,th和class='b'是平級的,先th後.b組成一個同級類路徑th.b,所以沒有空格代表「HTML類」和「自定義類」具有同級路徑!

3、第三個類別b的路徑是 .b,定義該HTML文檔內所有的td標籤的樣式,它是該文檔的一個全局樣式,是body .b的簡寫。
也就是說,
.b { color:#0000ff;f ont-size:12px;}

定義了
<td class="b">第三個類b的類路徑是td.b</th>
<div class="b">第三個類b的類路徑是 .b</div>

這兩處的b類別沒有明確的路徑指向,優先級別要比有明確路徑的低。

4、大家可以看到,在HTML代碼中,同樣都是class="b",但是在CSS定義時,採用的類路徑不同,作用就不同了。路徑越完整,優先級越高。在具體應用的時候,我們可以,使用完整路徑來定義某HTML代碼塊某一些特殊地方,做差異化處理。例如本例表頭th的黑體字顯示效果。

二、HTML中複合套用樣式類別

(1)在一個HTML標籤內,可以複合套用多個樣式類別,也是用空格做運算符,複合類別的總字符不能超過256。
(2)例如:
<style type="text/css">
.myTxt {
font-size:50px;
font-family:Arial Black;
}
.txtRed {
color:red;
}
.txtOrange {
color:orange;
}
.txtGreen {
color:green;
}
.txtBlue {
color:blue;
}
</style>
...................................................................................................

<ul>
<li class="myTxt txtRed">123</li>
<li class="myTxt txtOrange">Text</li>
<li class="txtGreen">Text</li>
<li class="myTxt txtBlue">Text</li>
</ul>

(3)應用:
對於某些多數樣式屬性累同,僅有幾個不同樣式屬性的定義,可以用這個方法來縮寫。
也可以在不改變某個通用樣式類別的同時,用HTML套用複合樣式類別,突出局部特例。

三、CSS+HTML的模塊化設計

(1)舉個簡單例子:
.classNameA .classNameB .classNameC
就是一個類別路徑,A包含B,B包含C.
意思就是,在A塊內的全部HTML代碼(包括B塊、C塊),先應用樣式classNameA;
然後,在B塊內的全部HTML代碼(包括C塊),先應用樣式classNameA,之後再先應用樣式classNameB;
最後,在C塊內的全部HTML代碼,先應用樣式classNameA,再先應用樣式classNameB,最後應用樣式classNameB;

(2)在樣式表中,關於複合類別的路徑,對於某些複雜的HMTL代碼,最後寫絕對路徑,就是每一個類別名稱都完整的描述。這樣可讀性更強,錯誤率更小;當然,寬容度就越低。

例如:
<style type="text/css">

/*控制 li 的樣式*/
.a1 ul li { color:red; }

/*控制class="a"的div塊內,全部連接 a 的樣式*/
.a1 a { font-size:20px; }

/*控制class="a"的div塊內,一個一個為 class="mylink"的樣式*/
.a1 .myLink { font-size:12px; }

/*控制 li 內連接a的樣式*/
.a1 ul li a { font-size:40px; }

/*控制名 li 內,一個為 class="mylink"的連接的樣式 */
.a1 ul li .myLink { font-size:60px; font-family:黑體; }

/*b1樣式*/
.b1 { color:blue; }

/*控制 li 內 b1 的樣式*/
.a1 ul li .b1 { color:green; }

</style>
...........................................................................................................

<div class="a1">
<a href="#">linkText</a>
<a href="#" class="myLink">titleText</a>
<div class="b1">b11111111</div>
<ul>
<li>
<a href="#">titleText</a>
<div class="b1">nameCN</div>
</li>
<li>
<a href="#" class="myLink">titleText</a>
<div class="b1">nameCN<span class="c1">nameEN</span></div>
</li>
<li>titleText</li>
<li>titleText</li>
<li>titleText</li>
</ul>
</div>

樣式,按*.HTML從內層到外層;按*.CSS上下文,從下文到上文;按內聯樣式表上下文,從下文到上文;按內嵌>內聯>外聯的優先級;重疊加覆蓋計算最終顯示效果。

CSS語法,空格是一個「運算符」,由於不嚴謹,所以,沒有空格的時候,雖然不報錯,也有顯示效果,但那是按錯誤邏輯運算的,有時歪打正著,的確莫名其妙。再加上有很多滿足各瀏覽器的HACK語法,CSS語句就更加零亂不堪。所以,寫的時候,盡量在滿足寬容度的情況下,嚴謹一些。


區塊化設計,要求相對封閉獨立性、可重複性、可修改性、統一性等等是比較高的,當然,區塊化越高越複雜的,修改起來也要越謹慎,因為牽一髮而動全身,這就要求,在開發設計前期要做好詳盡的策劃,從目錄結構、命名規範,到全局和特例的界限劃分、後期修改的寬容度估計等等,都要有個把握。
張貼留言

這個網誌中的熱門文章

互補色與對比色解惑

[讀書心得] 設計思維 Design Thinking

龍岡手繪地圖製作有感