| 導購 | 订阅 | 在线投稿
分享
 
 
 

css應用筆記整理之結構編寫

來源:互聯網  2008-09-09 07:29:05  評論

很多時候大家對博客的優化並不是很在意,只是一味的追求模板的外觀。尤其是對css的應用,更顯得薄弱。

從幾年前的TABLE+CSS網頁編寫結構到現在的DIV+CSS網頁編寫結構,至始至終css都占據著很重要的角色,因此css應用的得當在很大程度上能明顯改善用戶體驗。

自從網絡中提出SEO的概念之後,css的優化更加被得到重視,目前css框架也在不斷被開放,通過css框架將提高我們的工作效率。

什麽是css呢?他是Cascading Style Sheets的縮寫,中文解釋爲層疊樣式表,用于控制頁面布局和外觀。它有三種應用模式,應用的最廣泛的就是外部調用樣式表文件,我在這裏不再探討,有疑問的朋友可以在百度百科中查看相關解釋。

對css編寫結構和應用屬性不了解的朋友可以論壇帖子博客大巴使用指南下載CSS樣式表中文手冊(chm電子書格式)和DIV+CSS布局大全(pdf文檔格式)的壓縮包(rar壓縮包格式)

我將通過對HTML存在的下面代碼進行css分析

<div id=」box」>

<h2 class=」hsize」><a href=」#」 title=」標題」><span class=」title」>標題</span></a></h2>

<div id=」nav」>

<h3>菜單</h3>

<ul>

<li>菜單一</li>

<li>菜單二</li>

<li>菜單三</li>

<ul>

</div>

<div id=」main」 class=」wd hg」>內容</div>

</div>

結構編寫方面

1-1.給需要重點加強的類選擇符(Class Selectors)增值

我們要定義span的屬性,我們可以在css裏面這樣寫:

.title {…}

但是我認爲span裏面的內容很重要,我想讓頁面重向加載span,于是我們可以寫成

span.title {…}

1-2.不要爲ID選擇符(ID Selectors)增加額外的標簽

我們讓頁面重向加載span,是否可以這樣寫呢?

div#box h2.hsize span.title {…}

這樣寫是可以的,但是我們沒必要爲#box前面添加div,因爲id是唯一的,如果這樣做將影響頁面匹配效率。于是我們可以寫成

#box h2.hsize span.title {…}

1-3.盡量對子對象選擇符(Child Selectors)使用「>」符號

在例子代碼中,li是ul的子對象選擇符,我們要定義li的樣式,不建議這樣寫

#nav ul li {…}

這種寫法將很耗空間資源,我們可以這樣寫

#nav ul>li {…}

但是這種寫法也不是很好,如果我們能定義li的class值則盡量使用類選擇符,例如更改爲<li class=」list」></li>,于是我們可以寫成

li.list {…}

1-4.通配選擇符「*」(Universal Selector)有選擇性的使用

很多時候爲了方面我們會直接甩出一個

* {margin: 0; padding: 0;}

來清除IE浏覽器部分標簽帶來的間距問題,但是這裏存在一個問題就是通配符「*」把所有標簽都初始化一遍,以至消耗一定的空間資源。

其實很多標簽在不同浏覽器上的差異很小,並且很多標簽都不是常用到的,所以可以有針對性的使用,比如

html, ul, form, h2 {margin: 0; padding: 0;}

讓所有含有title屬性的標簽字體以黑色顯示,可以用通配符這樣寫

*[title] {color: #000000;}

不建議對下面的標簽進行通配選擇符控制

div span button b

很少用到的標簽有

ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, u, i, center, dl, dt, dd, ol, form, label, legend, caption, tbody, tfoot, thead

1-5.「a」標簽的僞對象選擇符(Pseudo Selectors)注意寫法順序

在例子代碼中,如果我要定義a標簽的鼠標過程:默認狀態爲黑色,當鼠標放在「標題」二字上面,字體變爲紅色,點擊「標題」二字時字體呈綠色,點擊「標題」二字後字體呈灰色,我們可以按下面的順序寫

/* 默認狀態爲黑色*/

a:link {color: #000000;}

/* 點擊「標題」二字後字體呈灰色*/

a:visited {color: #999999;}

/* 當鼠標放在「標題」二字上面,字體變爲紅色*/

a:hover {color: #FF0000;}

/* 點擊「標題」二字時字體呈綠色*/

a:active {color: #00FF00;}

浏覽器解釋CSS時遵循靠後優先原則,它會依次解釋active-hover-visited-link,如果順序錯了,則顯示效果也將不同。

1-6.ID選擇符是唯一的,Class選擇符是多樣的

一個代碼標簽可以擁有多個class選擇符並且可以和別的標簽共用class選擇符,但是只能擁有一個id選擇符,因此id和class的選用因實際需要判定。一般地,唯一出現的標簽使用id選擇符,方便以後調用。和別的標簽有共用屬性則使用class選擇符,可以節省空間資源。在例子代碼中「<div id=」main」 class=」wd hg」>內容</div>」就是這樣一個應用。class選擇符的多個參數之間用空格隔開。

1-7.「注釋」避免使用

在第5條介紹中我使用了注釋,在css文件中注釋內容使用「/*」開頭,「*/」結尾的注釋結構,注意css注釋方法不同于js腳本文件的注釋方法和html的注釋方法。注釋的好處是方便以後修改查看,團隊合作時注釋更顯得重要。注釋不會被浏覽器解釋,但是注釋會占用一定的空間資源。

1-8.標簽之間使用的符號含義要分清

#box>h2.hsize>a>span.title {…} 定義span.title的樣式

#box h2.hsize a span.title {…} 和上面一樣定義span.title的樣式,但是浏覽器匹配速度沒有上面快

#box,h2.hsize,span.title {…} 同時定義#box、h2.hsize、span.title的樣式

#nav ul>li+li {…} 定義菜單二和菜單三的樣式

#nav ul>li+li+li {…} 定義菜單三的樣式

1-9.圖片盡量放到css樣式表中

爲了讓搜索引擎更好的抓取頁面的內容,不宜在HTML中使用<img src=」" />圖片代碼,可以考慮在css中采取以圖換字的方式,參考2-3

很多時候大家對博客的優化並不是很在意,只是一味的追求模板的外觀。尤其是對css的應用,更顯得薄弱。 從幾年前的TABLE+CSS網頁編寫結構到現在的DIV+CSS網頁編寫結構,至始至終css都占據著很重要的角色,因此css應用的得當在很大程度上能明顯改善用戶體驗。 自從網絡中提出SEO的概念之後,css的優化更加被得到重視,目前css框架也在不斷被開放,通過css框架將提高我們的工作效率。 什麽是css呢?他是Cascading Style Sheets的縮寫,中文解釋爲層疊樣式表,用于控制頁面布局和外觀。它有三種應用模式,應用的最廣泛的就是外部調用樣式表文件,我在這裏不再探討,有疑問的朋友可以在百度百科中查看相關解釋。 對css編寫結構和應用屬性不了解的朋友可以論壇帖子博客大巴使用指南下載CSS樣式表中文手冊(chm電子書格式)和DIV+CSS布局大全(pdf文檔格式)的壓縮包(rar壓縮包格式) 我將通過對HTML存在的下面代碼進行css分析 <div id=」box」> <h2 class=」hsize」><a href=」#」 title=」標題」><span class=」title」>標題</span></a></h2> <div id=」nav」> <h3>菜單</h3> <ul> <li>菜單一</li> <li>菜單二</li> <li>菜單三</li> <ul> </div> <div id=」main」 class=」wd hg」>內容</div> </div> 結構編寫方面 1-1.給需要重點加強的類選擇符(Class Selectors)增值 我們要定義span的屬性,我們可以在css裏面這樣寫: .title {…} 但是我認爲span裏面的內容很重要,我想讓頁面重向加載span,于是我們可以寫成 span.title {…} 1-2.不要爲ID選擇符(ID Selectors)增加額外的標簽 我們讓頁面重向加載span,是否可以這樣寫呢? div#box h2.hsize span.title {…} 這樣寫是可以的,但是我們沒必要爲#box前面添加div,因爲id是唯一的,如果這樣做將影響頁面匹配效率。于是我們可以寫成 #box h2.hsize span.title {…} 1-3.盡量對子對象選擇符(Child Selectors)使用「>」符號 在例子代碼中,li是ul的子對象選擇符,我們要定義li的樣式,不建議這樣寫 #nav ul li {…} 這種寫法將很耗空間資源,我們可以這樣寫 #nav ul>li {…} 但是這種寫法也不是很好,如果我們能定義li的class值則盡量使用類選擇符,例如更改爲<li class=」list」></li>,于是我們可以寫成 li.list {…} 1-4.通配選擇符「*」(Universal Selector)有選擇性的使用 很多時候爲了方面我們會直接甩出一個 * {margin: 0; padding: 0;} 來清除IE浏覽器部分標簽帶來的間距問題,但是這裏存在一個問題就是通配符「*」把所有標簽都初始化一遍,以至消耗一定的空間資源。 其實很多標簽在不同浏覽器上的差異很小,並且很多標簽都不是常用到的,所以可以有針對性的使用,比如 html, ul, form, h2 {margin: 0; padding: 0;} 讓所有含有title屬性的標簽字體以黑色顯示,可以用通配符這樣寫 *[title] {color: #000000;} 不建議對下面的標簽進行通配選擇符控制 div span button b 很少用到的標簽有 ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, u, i, center, dl, dt, dd, ol, form, label, legend, caption, tbody, tfoot, thead 1-5.「a」標簽的僞對象選擇符(Pseudo Selectors)注意寫法順序 在例子代碼中,如果我要定義a標簽的鼠標過程:默認狀態爲黑色,當鼠標放在「標題」二字上面,字體變爲紅色,點擊「標題」二字時字體呈綠色,點擊「標題」二字後字體呈灰色,我們可以按下面的順序寫 /* 默認狀態爲黑色*/ a:link {color: #000000;} /* 點擊「標題」二字後字體呈灰色*/ a:visited {color: #999999;} /* 當鼠標放在「標題」二字上面,字體變爲紅色*/ a:hover {color: #FF0000;} /* 點擊「標題」二字時字體呈綠色*/ a:active {color: #00FF00;} 浏覽器解釋CSS時遵循靠後優先原則,它會依次解釋active-hover-visited-link,如果順序錯了,則顯示效果也將不同。 1-6.ID選擇符是唯一的,Class選擇符是多樣的 一個代碼標簽可以擁有多個class選擇符並且可以和別的標簽共用class選擇符,但是只能擁有一個id選擇符,因此id和class的選用因實際需要判定。一般地,唯一出現的標簽使用id選擇符,方便以後調用。和別的標簽有共用屬性則使用class選擇符,可以節省空間資源。在例子代碼中「<div id=」main」 class=」wd hg」>內容</div>」就是這樣一個應用。class選擇符的多個參數之間用空格隔開。 1-7.「注釋」避免使用 在第5條介紹中我使用了注釋,在css文件中注釋內容使用「/*」開頭,「*/」結尾的注釋結構,注意css注釋方法不同于js腳本文件的注釋方法和html的注釋方法。注釋的好處是方便以後修改查看,團隊合作時注釋更顯得重要。注釋不會被浏覽器解釋,但是注釋會占用一定的空間資源。 1-8.標簽之間使用的符號含義要分清 #box>h2.hsize>a>span.title {…} 定義span.title的樣式 #box h2.hsize a span.title {…} 和上面一樣定義span.title的樣式,但是浏覽器匹配速度沒有上面快 #box,h2.hsize,span.title {…} 同時定義#box、h2.hsize、span.title的樣式 #nav ul>li+li {…} 定義菜單二和菜單三的樣式 #nav ul>li+li+li {…} 定義菜單三的樣式 1-9.圖片盡量放到css樣式表中 爲了讓搜索引擎更好的抓取頁面的內容,不宜在HTML中使用<img src=」" />圖片代碼,可以考慮在css中采取以圖換字的方式,參考2-3
󰈣󰈤
王朝萬家燈火計劃
期待原創作者加盟
 
 
 
>>返回首頁<<
 
 
 
 
 熱帖排行
 
 
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有