CSS中注釋部分編程引申的示例分析

今天就跟大家聊聊有關(guān)CSS中注釋部分編程引申的示例分析，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

創(chuàng)新互聯(lián)2013年至今，先為向陽等服務(wù)建站，向陽等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為向陽企業(yè)網(wǎng)站制作PC+手機+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

CSS注釋

就像HTML教程中描述的一樣,在CSS文檔中注釋也起到很重要的作用,可以幫助我們記起CSS的含義,加載在HTML文檔的位置等.

CSS注釋的開始使用/*,結(jié)束使用*/

CSS注釋語法

  1. /* 注釋內(nèi)容 */  

  2. 示例   

  3.   

  4. /* ----------文字樣式開始---------- */  

  5. /* 夢之都白色12象素文字 */  

  6. .dreamduwhite12px  

  7. {   

  8.  color:white;   

  9.  font-size:12px;   

  10. }   

  11.   

  12. /* 夢之都黑色16象素文字 */  

  13. .dreamdublack16px  

  14. {   

  15.  color:black;   

  16.  font-size:16px;   

  17. }   

  18. /* ----------文字樣式結(jié)束---------- */  

風(fēng)格建議
我使用行寬不超過 80 字節(jié)的文檔塊風(fēng)格注釋：

  1. /** 

  2.  * This is a docBlock style comment 

  3.  *  

  4.  * This is a longer description of the comment, describing the code in more 

  5.  * detail. We limit these lines to a maximum of 80 characters in length. 

  6.  *  

  7.  * We can have markup in the comments, and are encouraged to do so: 

  8.  *  

  9.    <div class=foo> 

  10.        <p>Lorem</p> 

  11.    </div> 

  12.  *  

  13.  * We do not prefix lines of code with an asterisk as to do so would inhibit 

  14.  * copy and paste. 

  15.  */  

  16.   

  17.   

  18. /** 

  19.  * 這是一個文檔塊（DocBlock）風(fēng)格的注釋。 

  20.  * 

  21.  * 這里開始是描述更詳細(xì)、篇幅更長的注釋正文。當(dāng)然，我們要把行寬控制在 80 字節(jié)以內(nèi)。 

  22.  * 

  23.  * 我們可以在注釋中嵌入 HTML 標(biāo)記，而且這也是個不錯的辦法： 

  24.  * 

  25.     <div class=foo> 

  26.         <p>Lorem</p> 

  27.     </div> 

  28.  * 

  29.  * 如果是注釋內(nèi)嵌的標(biāo)記的話，在它前面不加星號，以免被復(fù)制進(jìn)去。 

  30.  */  

在注釋中應(yīng)當(dāng)盡量詳細(xì)描述代碼，因為對你來說清晰易懂的內(nèi)容對其他人可能并非如此。每寫一部分代碼就要專門寫注釋以詳解。

注釋的拓展用法

注釋有許多很高級的用法，例如：

準(zhǔn)修飾選擇器（Quasi-qualified selectors）
代碼標(biāo)簽
繼承標(biāo)記
準(zhǔn)修飾選擇器（Quasi-qualified selectors）

你應(yīng)當(dāng)避免過分修飾選擇器，例如如果你能寫 .nav{} 就盡量不要寫 ul.nav{}。過分修飾選擇器將影響性能，影響 class 復(fù)用性，增加選擇器私有度。這些都是你應(yīng)當(dāng)竭力避免的。

不過有時你可能希望告訴其他開發(fā)者 class 的使用范圍。以 .product-page 為例，這個 class 看起來像是一個根容器，可能是 html 或者 body 元素，但是僅憑 .product-page 則無法判斷。

我們可以在選擇器前加上準(zhǔn)修飾（即將前面的類型選擇器注釋掉）來描述我們規(guī)劃的 class 作用范圍：

  1. /*html*/.product-page{}  

這樣我們就能準(zhǔn)確獲知該 class 的作用范圍而不會影響復(fù)用性。

其它例子如：

  1. /*ol*/.breadcrumb{}   

  2. /*p*/.intro{}   

  3. /*ul*/.image-thumbs{}  

這樣我們就能在不影響代碼私有度的前提下獲知 class 作用范圍。

代碼標(biāo)簽

如果你寫了一組新樣式的話，可以在它上面加上標(biāo)簽，例如：

這些標(biāo)簽可以使得其他開發(fā)者快速找到相關(guān)代碼。如果一個開發(fā)者需要查找和列表相關(guān)的部分，他只要搜索 ^lists 就能快速定位到 .nav，.matrix 以及其它相關(guān)部分。

繼承標(biāo)記

將面向?qū)ο蟮乃悸酚糜?CSS 編寫的話，你經(jīng)常能找到兩部分 CSS 密切相關(guān)（其一為基礎(chǔ)，其一為拓展）卻分列兩處。我們可以用繼承標(biāo)記來在原元素和繼承元素之間建立緊密聯(lián)系。這些在注釋中的寫法如下：

在元素的基本樣式中：

  1. /** 

  2.  * Extend `.foo` in theme.css 

  3.  */  

  4.  .foo{}  

在元素的拓展樣式中：

/** 

  1.  * Extends `.foo` in base.css 

  2.  */  

  3.  .bar{}  

這樣一來我們就能在兩塊相隔很遠(yuǎn)的代碼間建立緊密聯(lián)系。

看完上述內(nèi)容，你們對CSS中注釋部分編程引申的示例分析有進(jìn)一步的了解嗎？如果還想了解更多知識或者相關(guān)內(nèi)容，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝大家的支持。

新聞名稱：CSS中注釋部分編程引申的示例分析
鏈接分享：http://muchs.cn/article28/pphsjp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供ChatGPT、外貿(mào)建站、品牌網(wǎng)站設(shè)計、品牌網(wǎng)站建設(shè)、做網(wǎng)站、服務(wù)器托管

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

h5響應(yīng)式網(wǎng)站建設(shè)