中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx

二、HTML中復(fù)合調(diào)用樣式類

（1）在一個HTML標(biāo)簽內(nèi)，可以復(fù)合調(diào)用多個樣式類，也是用空格做運算符，復(fù)合類名總字符不能超過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）應(yīng)用：
對于某些多數(shù)樣式屬性累同，僅有幾個不同樣式屬性的定義，可以用這個方法來縮寫。
也可以在某個不改變某個通用樣式類的同時，用HTML調(diào)用復(fù)合類，突出局部特例。

三、CSS+HTML的模塊化設(shè)計

（1）舉個簡單例子：
.classNameA .classNameB .classNameC
就是一個類包路徑,A包含B,B包含C.
意思就是,在A塊內(nèi)的全部HTML代碼(包括B塊、C塊),先應(yīng)用樣式classNameA；
然后，在B塊內(nèi)的全部HTML代碼(包括C塊),先應(yīng)用樣式classNameA，之后再先應(yīng)用樣式classNameB；
最后，在C塊內(nèi)的全部HTML代碼,先應(yīng)用樣式classNameA，再先應(yīng)用樣式classNameB,最后應(yīng)用樣式classNameB；

（2）在樣式表中，關(guān)于類包的路徑，對于某些復(fù)雜的HMTL代碼，最后寫絕對路徑，就是每一個類名都不要拉下。這樣可讀性更強，錯誤率更�。划�(dāng)然，寬容度就越低。

例如：

<style type="text/css">
/*控制 li 的樣式*/
.a1 ul li {
    color:red;
}

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

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

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

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

/*b1樣式*/
.b1 {
      color:blue;
}
/*控制 li 內(nèi) 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從內(nèi)層到外層；按*.CSS上下文，從下文到上文；按內(nèi)聯(lián)樣式表上下文，從下文到上文；按內(nèi)嵌>內(nèi)聯(lián)>外聯(lián)的優(yōu)先級；
疊加覆蓋計算最終顯示效果。

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

（3）給大家一個案例

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

下面就給一個我做的網(wǎng)站的地址：http://www.51youcai.com

1. 樣式表是按類路徑來模塊化定義的，有中文注釋；
2. 由于加了jsp程序，代碼格式有變動，也許會有不少垃圾代碼；
3. 在FireFox下，有幾處顯示不當(dāng)、JS未做相應(yīng)優(yōu)化，請用IE6+瀏覽；
4. 感興趣者可以當(dāng)HTML和CSS來，做參考。

經(jīng)典論壇討論：
http://bbs.blueidea.com/thread-2815840-1-1.html

本文鏈接：http://m.95time.cn/tech/web/2007/5189.asp　

出處：藍色理想
責(zé)任編輯：moby

上一頁 CSS模塊化設(shè)計——從空格談起 [1] 下一頁

◎進入論壇網(wǎng)頁制作、WEB標(biāo)準化版塊參加討論，我還想發(fā)表評論。