<thead id="jxdzp"><address id="jxdzp"><pre id="jxdzp"></pre></address></thead>

<em id="jxdzp"><span id="jxdzp"></span></em>

    <listing id="jxdzp"><nobr id="jxdzp"><meter id="jxdzp"></meter></nobr></listing>

      <address id="jxdzp"></address>
      <noframes id="jxdzp"><form id="jxdzp"><th id="jxdzp"></th></form>
      <noframes id="jxdzp"><form id="jxdzp"><th id="jxdzp"></th></form>

          訂閱本欄目 RSS您所在的位置: 深山工作室 > DIV+CSS > 正文

          從空格談起--關于CSS模塊化設計

          天極網 2007/12/23 19:29:02 深山行者 字體: 瀏覽 6183
          一、空格運算符

                (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 {
                 colorrange;
          }
          .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語句就更加零亂不堪。所以,寫的時候,盡量在滿足寬容度的情況下,嚴禁一些。

          相關閱讀
          FLASH中加入LOADING的最簡便方法
          ASP.NET常用的三十三種實用代碼(中)
          性感的CSS菜單(Menus)
          另類的誤刪資料恢復,不使用任何軟件恢復你誤刪除的資料
          廣西南寧美程國際旅行社有限公司
          絕對超酷的JS顏色板
          詳細的百度蜘蛛爬行檢測代碼詮釋
          旅行社企業單位團隊游主題定制
          共有0條關于《從空格談起--關于CSS模塊化設計》的評論
          發表評論
          正在加載評論......
          返回頂部發表評論
          呢 稱:
          表 情:
          內 容:
          評論內容:不能超過 1000 字,需審核,請自覺遵守互聯網相關政策法規。
          驗證碼: 驗證碼 
          網友評論聲明,請自覺遵守互聯網相關政策法規。

          您發布的評論即表示同意遵守以下條款:
          一、不得利用本站危害國家安全、泄露國家秘密,不得侵犯國家、社會、集體和公民的合法權益;
          二、不得發布國家法律、法規明令禁止的內容;互相尊重,對自己在本站的言論和行為負責;
          三、本站對您所發布內容擁有處置權。

          更多信息>>欄目類別選擇
          百度小程序開發
          微信小程序開發
          微信公眾號開發
          uni-app
          asp函數庫
          ASP
          DIV+CSS
          HTML
          python
          更多>>同類信息
          jquery設置或獲取修改classname
          利用css3.0寫出一個音樂播放的唱片碟盤的效果
          利用css中的scale()實現放大縮小效果
          利用background-color:#000000a8在背景顏色16進制代碼之后加字母加上數字讓背景色透明
          css背景使用base64編碼或者將base64編碼放在img圖片標簽中
          利用css3中的-webkit-font-smoothing把網頁文字的毛邊去掉
          更多>>最新添加文章
          dw里面查找替換使用正則刪除sqlserver里面的CONSTRAINT
          Android移動端自動化測試:使用UIAutomatorViewer與Selenium定位元素
          抖音直播音掛載小雪花 懂車帝小程序
          javascript獲取瀏覽器指紋可以用來做投票
          火狐Mozilla Firefox出現:無法載入您的Firefox配置文件 它可能已經丟失 或是無法訪問 問題解決集合處理辦法
          在Android、iOS、Windows、MacOS中微信小程序的文件存放路徑
          python通過代碼修改pip下載源讓下載庫飛起
          python里面requests.post返回的res.text還有其它的嗎
          更多>>隨機抽取信息
          另類營銷,“我在床上很厲害的哦”引發的思考
          8種Python字符串拼接的方法,你知道幾種
          web2.0網頁--常用的XHTML標簽的使用技巧方法介紹
          javascript自動獲取Tags關鍵字
          帶時鐘的臺歷:一個非常非常漂亮的臺歷
          購買深山旅行社管理系統后享受哪些服務?
          88国产精品视频一区二区三区