99热热热_国产成人自拍一区_欧美一级网站_99热在线播放_国产精品乱码一区二区三区_久久精品国产一区二区三区

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

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

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

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

相關閱讀
告訴你一些GOOGLE搜索你不知道的東西
深山行者留言系統V2.2 .1 更新下載
png顯示叉號的解決辦法(IE無法顯示PNG格式圖片的解決辦法)
游戲-QQ穿越火線留言板模板
360500整站頁面設計
符合標準的正常工作的對聯廣告(2)
讓你的Pycharm和電腦pip install下載速度飛起來
asp利用sina提供的ip庫端口來獲得當前IP所有的地區,所在國,所在省,所在市,在線解析json
共有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還有其它的嗎
更多>>隨機抽取信息
腳本控制三行三列自適應高度DIV布局
設置兩個未知高度的DIV保持等高
深山網吧留言板系統(激情穿越火線)v4.3
一行內文本超出指定寬度溢出的處理
鄭州廿四旅游
熟記ASP+Access數據庫的18條安全法則
99热热热_国产成人自拍一区_欧美一级网站_99热在线播放_国产精品乱码一区二区三区_久久精品国产一区二区三区
  • <li id="6qmi0"></li>
  • <li id="6qmi0"><source id="6qmi0"></source></li>
    久久久久久国产精品一区| 视频一区不卡| 国产日韩一区欧美| 亚洲成人第一| 欧美成人一区二区在线| 91麻豆蜜桃| 美女国产精品| 亚洲欧美久久久| 亚洲国产高清视频| 欧美日韩一区二区三区在线视频| 你懂的网址一区二区三区| 久久一区二区精品| 麻豆成人精品| 久久成人在线| 狂野欧美一区| 噜噜噜久久亚洲精品国产品小说| 99成人在线| 国产精品丝袜xxxxxxx| 在线播放亚洲| 日韩一级在线| 国产麻豆综合| 99精品视频免费观看视频| 亚洲视频高清| 99国产精品99久久久久久粉嫩| 黄色亚洲大片免费在线观看| 欧美日韩国产综合在线| 午夜精品一区二区三区四区| 一区二区三区四区五区视频 | 久久综合婷婷综合| 久久精精品视频| 久久伦理网站| 亚洲欧美日韩不卡一区二区三区| 日韩高清av电影| 在线视频一区观看| 亚洲第一区色| 亚洲一区3d动漫同人无遮挡| 国产偷久久久精品专区| 性伦欧美刺激片在线观看| 久久久99国产精品免费| 成人欧美一区二区三区视频xxx| 97人人香蕉| 蜜桃久久影院| 午夜天堂精品久久久久| 亚洲欧洲精品一区二区| 欧美在线综合| 老牛影视免费一区二区| 欧美日本亚洲| 一区在线电影| 99精彩视频在线观看免费| 99re在线国产| 日韩三级电影| 99在线|亚洲一区二区| 999视频在线免费观看| 精品蜜桃传媒| 欧美在线亚洲| 久久国产精品99国产| 精品久久久久久中文字幕动漫| 久久久久久一区| 国内成+人亚洲| 99re在线视频上| 中文字幕一区二区三区四区五区六区 | 欧美 日韩 国产在线 | 伊人情人网综合| 亚洲国产日韩欧美| 久久99久久精品国产| 中文字幕中文字幕在线中一区高清| 亚洲久久在线| 日本一区二区在线| 国产日韩一区二区三区在线播放| 国产亚洲情侣一区二区无| 一区二区三区四区免费视频| 国产精品日韩高清| 亚洲 国产 欧美一区| 国产精品美女久久久浪潮软件| 欧美精品二区三区四区免费看视频| 欧美精品一区二区视频| 粉嫩av四季av绯色av第一区| 欧美黄色免费| 久久国产精品-国产精品| 国产主播一区| 欧美中文娱乐网| 久久国产精品亚洲77777| 一区二区不卡在线观看| 91精品入口蜜桃| 激情欧美丁香| 台湾成人av| 国产一区二区视频在线免费观看 | 久久99精品久久久久久久久久| 国产精品激情电影| 久久精品ww人人做人人爽| 国产日韩欧美三级| 女人香蕉久久**毛片精品| 国产一区视频观看| 久久久国产精品一区二区中文 | 亚洲一区二区三区午夜| 国产精品免费在线播放| 99热这里只有精品8| 亚洲在线播放电影| 欧美精品欧美精品系列c| 久久午夜精品| 亚洲影视综合| 亚洲国产精品第一区二区三区| 日韩高清国产精品| 久久av免费观看| 99久久综合狠狠综合久久止 | 牛夜精品久久久久久久99黑人| 国产精品一区二区av| 香蕉精品999视频一区二区 | aa成人免费视频| 亚洲少妇一区| 国产欧美韩日| 亚洲日本欧美| 在线观看成人av| 国产一区二区三区四区老人| 一区在线电影| 午夜日韩在线| 欧美日韩三级电影在线| 在线一区高清| 国产精品扒开腿做爽爽爽软件| 亚洲精品中文字幕在线| 日韩欧美三级电影| 日韩影视精品| 欧美一区不卡| 黄色亚洲免费| 夜夜嗨网站十八久久| 亚洲三级影院| 香蕉久久a毛片| 99久久精品免费看国产四区| 91久久精品www人人做人人爽| 久热这里只精品99re8久| dy888夜精品国产专区| 国产精品久久波多野结衣| 国产精品日本一区二区| 久久99国产精品99久久| 茄子视频成人在线观看| 亚洲无玛一区| 亚洲视频免费| 噜噜噜久久亚洲精品国产品小说| 2019国产精品视频| 国产色综合一区二区三区| 欧美二级三级| 欧美日韩一区二区视频在线观看| 国产在线日韩| 香蕉精品999视频一区二区 | 欧美日本国产| 在线亚洲伦理| 国产精品国产精品| 偷拍视频一区二区| 亚洲二区精品| 鬼打鬼之黄金道士1992林正英| 欧美激情www| 国产精品二区在线| 久久精品一本| 五月天久久狠狠| 最新亚洲激情| 国产一区二区三区高清| 性欧美.com| 乱人伦精品视频在线观看| 久久久久成人精品免费播放动漫| 在线观看精品视频| 美女久久一区| 亚洲精美视频| **亚洲第一综合导航网站| 美日韩免费视频| 亚洲视频一区| 久久精品日产第一区二区三区精品版| 天天久久人人| 5g影院天天爽成人免费下载| 日本精品一区二区三区高清 久久| 亚洲无吗在线| 麻豆av一区二区三区| 黄色av成人| 欧美日本亚洲| 欧美亚洲免费| 樱花www成人免费视频| 久久精品一二三区| 欧美日本精品| 久久久久综合一区二区三区| 亚洲福利一区| 亚洲午夜精品久久久中文影院av| 欧美中文字幕| 欧美日韩综合网| 麻豆蜜桃91| 久久久久久色| 亚洲乱码久久| 亚洲永久一区二区三区在线| 成人精品一二区| 在线视频精品一区| 中文字幕av日韩精品| 国产一区二区无遮挡 | 午夜免费电影一区在线观看| 国产精品av一区| 亚洲一区日韩在线| 国内精品**久久毛片app| 久久偷看各类wc女厕嘘嘘偷窃| 国产精品亚洲综合久久| 欧美精品麻豆| 亚欧精品在线| 欧美不卡三区| 久久精品中文字幕一区二区三区 |