今天就跟大家聊聊有關CSS中注釋部分編程引申的示例分析,可能很多人都不太了解,為了讓大家更加了解,小編給大家總結了以下內容,希望大家根據(jù)這篇文章可以有所收獲。
創(chuàng)新互聯(lián)2013年至今,先為向陽等服務建站,向陽等地企業(yè),進行企業(yè)商務咨詢服務。為向陽企業(yè)網(wǎng)站制作PC+手機+微官網(wǎng)三網(wǎng)同步一站式服務解決您的所有建站問題。
CSS注釋
就像HTML教程中描述的一樣,在CSS文檔中注釋也起到很重要的作用,可以幫助我們記起CSS的含義,加載在HTML文檔的位置等.
CSS注釋的開始使用/*,結束使用*/
CSS注釋語法
/* 注釋內容 */
示例
/* ----------文字樣式開始---------- */
/* 夢之都白色12象素文字 */
.dreamduwhite12px
{
color:white;
font-size:12px;
}
/* 夢之都黑色16象素文字 */
.dreamdublack16px
{
color:black;
font-size:16px;
}
/* ----------文字樣式結束---------- */
風格建議
我使用行寬不超過 80 字節(jié)的文檔塊風格注釋:
/**
* This is a docBlock style comment
*
* This is a longer description of the comment, describing the code in more
* detail. We limit these lines to a maximum of 80 characters in length.
*
* We can have markup in the comments, and are encouraged to do so:
*
<div class=foo>
<p>Lorem</p>
</div>
*
* We do not prefix lines of code with an asterisk as to do so would inhibit
* copy and paste.
*/
/**
* 這是一個文檔塊(DocBlock)風格的注釋。
*
* 這里開始是描述更詳細、篇幅更長的注釋正文。當然,我們要把行寬控制在 80 字節(jié)以內。
*
* 我們可以在注釋中嵌入 HTML 標記,而且這也是個不錯的辦法:
*
<div class=foo>
<p>Lorem</p>
</div>
*
* 如果是注釋內嵌的標記的話,在它前面不加星號,以免被復制進去。
*/
在注釋中應當盡量詳細描述代碼,因為對你來說清晰易懂的內容對其他人可能并非如此。每寫一部分代碼就要專門寫注釋以詳解。
注釋的拓展用法
注釋有許多很高級的用法,例如:
準修飾選擇器(Quasi-qualified selectors)
代碼標簽
繼承標記
準修飾選擇器(Quasi-qualified selectors)
你應當避免過分修飾選擇器,例如如果你能寫 .nav{} 就盡量不要寫 ul.nav{}。過分修飾選擇器將影響性能,影響 class 復用性,增加選擇器私有度。這些都是你應當竭力避免的。
不過有時你可能希望告訴其他開發(fā)者 class 的使用范圍。以 .product-page 為例,這個 class 看起來像是一個根容器,可能是 html 或者 body 元素,但是僅憑 .product-page 則無法判斷。
我們可以在選擇器前加上準修飾(即將前面的類型選擇器注釋掉)來描述我們規(guī)劃的 class 作用范圍:
/*html*/.product-page{}
這樣我們就能準確獲知該 class 的作用范圍而不會影響復用性。
其它例子如:
/*ol*/.breadcrumb{}
/*p*/.intro{}
/*ul*/.image-thumbs{}
這樣我們就能在不影響代碼私有度的前提下獲知 class 作用范圍。
代碼標簽
如果你寫了一組新樣式的話,可以在它上面加上標簽,例如:
這些標簽可以使得其他開發(fā)者快速找到相關代碼。如果一個開發(fā)者需要查找和列表相關的部分,他只要搜索 ^lists 就能快速定位到 .nav,.matrix 以及其它相關部分。
繼承標記
將面向對象的思路用于 CSS 編寫的話,你經常能找到兩部分 CSS 密切相關(其一為基礎,其一為拓展)卻分列兩處。我們可以用繼承標記來在原元素和繼承元素之間建立緊密聯(lián)系。這些在注釋中的寫法如下:
在元素的基本樣式中:
/**
* Extend `.foo` in theme.css
*/
.foo{}
在元素的拓展樣式中:
/**
* Extends `.foo` in base.css
*/
.bar{}
這樣一來我們就能在兩塊相隔很遠的代碼間建立緊密聯(lián)系。
看完上述內容,你們對CSS中注釋部分編程引申的示例分析有進一步的了解嗎?如果還想了解更多知識或者相關內容,請關注創(chuàng)新互聯(lián)行業(yè)資訊頻道,感謝大家的支持。
新聞名稱:CSS中注釋部分編程引申的示例分析
鏈接分享:http://vcdvsql.cn/article28/pphsjp.html
成都網(wǎng)站建設公司_創(chuàng)新互聯(lián),為您提供ChatGPT、外貿建站、品牌網(wǎng)站設計、品牌網(wǎng)站建設、做網(wǎng)站、服務器托管
聲明:本網(wǎng)站發(fā)布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創(chuàng)新互聯(lián)