tion %> 山东麻将app
當前位置:首頁 > 建站知識

CSS模塊化設計——從空格談起

更新時間:2009.06.22 瀏覽次數:

引子

今天在藍點看了Yang的博客《CSS樣式表中繼承關系的空格與不空格》,思考了一下,本來想寫《CSS樣式的復合定義與復合調用及簡單的模塊化設計》,但是內容太大,還是來點簡單的實惠。所以改叫《CSS樣式——從空格談起》吧。

一、空格運算符

(1)CSS語言

簡單地說,CSS語言類似JS語言,是通過客戶端下載后,通過本地瀏覽器解析。而CSS語言又是非常低級的“弱類型”語言,離JS這種基于對象的比較完善的“弱類型”語言,還差相當一段距離。要知道CSS樣式是定義出來的,而樣式的呈現是根據文檔流順序和CSS優先級別,瀏覽器自己識別計算后顯示出來的。而瀏覽器又有忽略和糾錯功能(尤以IE為甚),所以樣式定義的語法有錯誤,并不影響瀏覽器正常工作,只不過顯示不出應有的效果罷了。在我們設計定義樣式的時候,排錯是比較令人苦惱的,其本質原因是于這種弱類型CSS語言本身的不嚴禁性有關系的,所以我們就更應該注重CSS定義的嚴禁,才能出較少的錯誤,較快更好的完成工作

(2)CSS的運算符

首先說,CSS語言的運算符就不多,有.#{}:";還有一個非常重要的空格。這幾個運算符,都是常用的定義聲明符號。而在CSS樣式定義中,空格就有點特殊,我們可以把它視為在.Net或Java中命名空間或類包定義中的 . 運算符。換句話說,我們可以把空格視為路徑指向的箭頭,表明HTML標簽的父子級別關系。CSS是與HTML想關聯的,也就是說,CSS的每一個定義都與“某個HTML標簽”或“某段模塊化HTML代碼”相對應,而HTML可以調用多個樣式類。一個CSS樣式類可以根據HTML代碼來“復合定義”;一個HTML標簽也可以“復合調用”多個樣式類。所以說,CSS樣式定義的復雜性與關聯的HTML是密不可分。

(3)實例說明

<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;
       font-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語句,嚴格說是JS代碼的一類,換句話說,CSS語句也是“弱類型”的,空格是一個“運算符”,由于“弱類型”不嚴謹,所以,沒有空格的時候,雖然不報錯,也有顯示效果,但那是按錯誤邏輯運算的,有時歪打正著,但確莫名其妙。再加上有很多滿足各瀏覽器的HACK語法,CSS語句就更加零亂不堪。所以,寫的時候,盡量在滿足寬容度的情況下,嚴禁一些。

(3)給大家一個案例

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

下面就給一個我做的網站的地址:http://www.51youcai.com

  1. 樣式表是按類路徑來模塊化定義的,有中文注釋;
  2. 由于加了jsp程序,代碼格式有變動,也許會有不少垃圾代碼;
  3. 在FireFox下,有幾處顯示不當、JS未做相應優化,請用IE6+瀏覽;
  4. 感興趣者可以當HTML和CSS來,做參考。
烟台麻将规则 11选5山东夺金走势图 奥克竞彩比分直播 色情成人三级片在下载 哈尔滨麻将漏宝神器 剑的秘密 麻将玩一局开红包 东北麻将打法 广东十一选五任三计 s9比赛比分 七星江苏麻将作弊器 世界杯比分让球 海纳策略配资 成都雀友麻将机批发 杭州麻将财神怎么翻 十一选五开奖走势 中专怎么样可以报考mba