廣告廣告
  加入我的最愛 設為首頁 風格修改
首頁 首尾
 手機版   訂閱   地圖  簡體 
您是第 5458 個閱讀者
 
發表文章 發表投票 回覆文章
  可列印版   加為IE收藏   收藏主題   上一主題 | 下一主題   
allenchen
數位造型
個人文章 個人相簿 個人日記 個人地圖
小人物
級別: 小人物 該用戶目前不上站
推文 x77 鮮花 x190
分享: 轉寄此文章 Facebook Plurk Twitter 複製連結到剪貼簿 轉換為繁體 轉換為簡體 載入圖片
推文 x0
[HTML][教學] [轉載]DIV、CSS 設計:淺談網頁設計CSS編碼與組織技巧
DIV、CSS 設計:淺談網頁設計CSS編碼與組織技巧

如何讓網頁 CSS 代碼設計簡潔而易於編寫是許多設計師都關心的問題。
合理的網頁 CSS 編碼與組織技巧,能夠説明你更有效率地設計出更清晰高效的代碼,樣式表大小的縮減還能減少網頁下載的時間。  

組織你的CSS樣式表
儘管我們有種種 CSS 的開發工具,比如 Topstyle,比如 styleMaster,它們可以讓你對當前這個CSS樣式表裡面定義了哪些規則,涉及哪些 class,哪些 ID 一目了然,但這不等於說你的CSS樣式表就組織清晰了,隨寫,隨看,隨改大概是我們常用的設計方式,一開始CSS樣式表還有點層次,後面這里加一點,那里加一點,就越來越亂了。所以不妨考慮規範一下你的設計方式。

大概有兩種組織方式,一種是我們常用的,把所有的描述同一個元素 (和它的子元素) 的規則都放到一起來,那麼如果需要查閱頁面中某個元素究竟受哪些規則影響的時候,就不必在整個樣式表中翻來翻去了。

另一種也值得參考,即,把描述某些特性的規則放到一處,把描述另一些特性的放到另一處,比如說關於顏色的定義,放到 color.css 檔中,描述字體的定義,放到 font.css 中,描述佈局的定義,放到 layout.css 中,這也能讓你的樣式表結構清晰,方便理解。

最大的優點是,如果你希望換一套配色方案,可以只修改一下 color.css,完全不必擔心其他的規則是否會影響頁面的顏色。

在傳統的網頁設計中,我們常常提到網頁的風格是如何重要,培養良好的編碼風格甚至遠比掌握網頁的語法和語義重要,儘管網頁設計師不一定要掌握那些網頁設計的技巧,但培養良好的網頁 CSS 編寫風格的確是很有用的。

使用屬性縮寫
CSS屬性縮寫的介紹,這裡我們來小結一下:
首先,有這麼幾個常用的屬性縮寫:
font
background
list-style
margin
border
padding

CSS多數是可以把幾個常規屬性合併到一起使用的,也就是說,可以給這些屬性縮寫賦予好幾個值,每個值之間用空格分隔。

另外,margin, border 和 padding 都遵循順時針原則,如果給定了四個值,從上方開始每次順時針轉 90 度。
如果給定了三個值,則是上側一種,左右同一種,下側一種。
如果給定了兩個值,就是上下一種,左右一種。
如果只給了一個值,那就是都一樣。

CSS屬性縮寫的使用,見仁見智,一方面,它的確是可以大大縮短代碼 (如果用得頻繁的話),另一方面,修改CSS的時候又未免帶來不直接和不方便。

利用繼承和預設值
書寫高效的 CSS 中的相關章節,我想,這也得斟酌使用,首先,繼承和預設值在 W3C 標準中都沒有嚴格 (must) 的規定 (BTW, 就算有又如何呢?),流覽器未必真的會像你預期的那樣去實現,某些CSS屬性的預設值真的是 0 麼?在所有流覽器裡都是 0 麼?需要反復嘗試後總結經驗;再者,如果CSS代碼中含有過多的這樣的“隱喻”,就未免不大好讀了,某某元素會顯示出某某特性,乃是繼承自它的父元素……在編寫樣式表的當天你可能還清楚,過一段時間忘了,就會很奇怪為什麼不曾定義這個規則卻又顯現出那個特性了。

所以建議,如果你要用到繼承和預設值來簡化代碼的話,最好寫下一些注釋予以說明。

利用多個 class 和多元選擇符
一個 HTML 元素可以屬於多個類,比如這樣:
<td class="subtotal negative">(-$422.72)</td>
你可以給“合總”的那些表格欄設定一個樣式,再給包含負數的那些表格欄設定一個樣式,把它們疊加在上面:
.subtotal {font-weight: bold;}
.negative {color: red;}
這種特性有時能夠讓你很靈巧地實現一些功能,即縮短了 HTML 代碼,又清晰了 CSS 規則。
關於多個 class 的詳細說明 (包括選擇符的相容性測試..) 請參考52CSS.com的相關文章介紹。
小結 選擇一種 CSS 規則的組織方式,並堅持使用它!
謹慎地使用一些雖然能夠簡短代碼,但會影響可讀性的書寫方式!
適時地瞭解一些已經普遍實現的 CSS2 新特性,能夠大大方便你的設計!


[ 此文章被allenchen在2010-02-26 17:19重新編輯 ]



獻花 x0 回到頂端 [樓 主] From:台灣中華電信 | Posted:2009-03-04 16:44 |
twnhostCom
數位造型
個人文章 個人相簿 個人日記 個人地圖
小人物
級別: 小人物 該用戶目前不上站
推文 x0 鮮花 x13
分享: 轉寄此文章 Facebook Plurk Twitter 複製連結到剪貼簿 轉換為繁體 轉換為簡體 載入圖片

謝謝分享

DIV和CSS是很實用的技術


獻花 x0 回到頂端 [1 樓] From:台灣新世紀資通 | Posted:2010-02-28 09:10 |

首頁  發表文章 發表投票 回覆文章
Powered by PHPWind v1.3.6
Copyright © 2003-04 PHPWind
Processed in 0.030637 second(s),query:16 Gzip disabled
本站由 瀛睿律師事務所 擔任常年法律顧問 | 免責聲明 | 本網站已依台灣網站內容分級規定處理 | 連絡我們 | 訪客留言