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

很多時候大家對博客的優化並不是很在意,只是一味的追求模板的外觀。尤其是對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

[Mike的筆記整理]CSS
今天回家,准備拖過五一再回去,正好也有兩場招聘會……電腦裏堆了一些以前自己翻書和做頁面時候的筆記,整理一下放出來,以後忘了方便一點,呵呵CSS是Cascading Style Sheet,常譯爲“級聯樣式表&...查看完整版>>[Mike的筆記整理]CSS
 
CSS網頁代碼編寫技巧:隔行換色的實現
  網頁設計中我們經常會碰到用CSS(層疊樣式表)實現隔行換色的需求,您可以根據您的需要,采用下面的任何一種方法,當然要注意適合你的具體編碼與需求情況。  一、使用background背景圖片  如果行高固定的話,...查看完整版>>CSS網頁代碼編寫技巧:隔行換色的實現
 
想讓DIV居中 如何編寫CSS
  網頁布局技巧實例,想讓DIV居中,如何編寫CSS?   div居中的設置該如何編寫css?我們在傳統的表格布局中,只要設置表格的居中屬性就實現了居中的塊元素。應用div css網站布局,div的居中該如何編寫css來控制它...查看完整版>>想讓DIV居中 如何編寫CSS
 
僅用css編寫無限分級彈出菜單
  一直以來,我們大多使用js來實現彈出菜單,可是根據 w3c 的css標准,根本就沒有這個必要。只需要簡單得使用css+html就可以做出一個無限分級的彈出菜單。沒錯,就是利用 Element:hover 這個僞類。注意,浏覽這個例...查看完整版>>僅用css編寫無限分級彈出菜單
 
Dreamweaver編寫CSS需要掌握的技巧
  在DreamWeaver中編寫CSS,這種編寫習慣並不提倡,不過由于“可視化”和操作簡便,使用的朋友依然很多,今天羅列一些“最佳習慣”,希望對這些朋友有所幫助。  CSS正在改變網站設計的進程。...查看完整版>>Dreamweaver編寫CSS需要掌握的技巧
 
CSS編寫應該注意的15個問題
  軟文一篇大家想看了看看  今天在“E路上”看到這篇文章感覺很不錯就拿了過來,自己也是才開始學CSS只是爲了能夠搞懂WEB標准化。以前自己很少注意這些東西!但是我們做SEO優化其實最重要的還是用戶體驗...查看完整版>>CSS編寫應該注意的15個問題
 
用CSS編寫一個網頁導航欄
列表標簽:<ul id="bar"> <li><a href="#">導航標題</a></li> <li><a href="#">導航標題</a></li> <li><a href="#">導航標題</a></l...查看完整版>>用CSS編寫一個網頁導航欄
 
僅用css編寫無限分級彈出菜單
  一直以來,我們大多使用js來實現彈出菜單,可是根據 w3c 的css標准,根本就沒有這個必要。只需要簡單得使用css+html就可以做出一個無限分級的彈出菜單。沒錯,就是利用 Element:hover 這個僞類。注意,浏覽這個例...查看完整版>>僅用css編寫無限分級彈出菜單
 
CSS學習筆記二
CSS布局與傳統表格(table)布局最大的區別在于:原來的定位都是采用表格,通過表格的間距或者用無色透明的GIF圖片來控制文布局版塊的間距;而現在則采用層(div)來定位,通過層的margin,padding,border等屬性來控制版塊...查看完整版>>CSS學習筆記二
 
 
回到王朝網路移動版首頁