DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> DIV十CSS布局 >> 布局實例 >> CSS完美代碼的五個要點
CSS完美代碼的五個要點
編輯:布局實例     

   如果您是一個站長,一定希望自己網站可移植性增強,並且代碼簡單,潔淨,現在所有的網站,80%都是采用div+css來構架的。

  也許大家都會寫,或是使用css,但是很多時候我們也許沒有考慮到,造成了代碼重復。

  今天我們一起來探討一下,怎麼寫完美的css代碼。

  一、關於 CSS重置

  首先,很認真的告訴你,總是要重置某些分類。無 論你是使用?Eric?Meyer?Reset、YUI?Reset或者你自己編寫的重置代碼,只要使用就對了。

  它能很簡單的移除所有元素的填充(padding)和邊距(margin):

  html,?body,?div,?h1,?h2,?h3,?h4,?h5,?h6,?ul,?ol,?dl,?li,?dt,?dd,?p,?blockquote,

  pre,?form,?fieldset,?table,?th,?td?{?margin:?0;?padding:?0;?}

  Eric?Meyer?Reset和YUI?Reset都是非常強大的,但是對於我而 言,它們走的太遠了。我覺得你最終需要重置一切,然後重新定義所有元素的屬性。這就是為什麼Eric?Meyer推薦更有效的使用(重置樣式表),而你不 要只是使用他的重置樣式表,將它拖放到你的項目中。調整它(的重置樣式表),建立屬於自己的重置樣式表。

  噢,請停止使用:

  *?{?margin:?0;?padding:?0;?}

  花更多的時間去制作它,當你移除了填充(padding)你認為單選按鈕會發生什麼變 化?表單元素有時能夠做些時髦的事情,所以最有效的方式就是將他們獨立。

  二、 CSS屬性的排序

  一個小的測試

  這個例子就是要讓你思考如何更快的找到右邊距屬性?

  Example#1

  div#header?h1?{

  z-index:?101;

  color:?#000;

  position:?relative;

  line-height:?24px;

  margin-right:?48px;

  border-bottom:?1px?solid?#dedede;

  font-size:?18px;

  }

  Example#2

  div#header?h1?{

  border-bottom:?1px?solid?#dedede;

  color:?#000;

  font-size:?18px;

  line-height:?24px;

  margin-right:?48px;

  position:?relative;

  z-index:?101;

  }

  你不能告訴 我Example#2不能更快的找到右邊距屬性。根據字母排序你的元素屬性。一致的創建你的CSS,將幫助你節省花費在尋找一個特殊屬性的時間。

  我知道一些人用這樣的方法去組織代碼,其他人又用另一種方法去組織,但是在我的公司, 我們協商一致做出決定,所有的代碼都將按照字母排序來組織。通過這樣組織代碼與其他人協同工作一定是有幫助的。當我碰到屬性沒有按照字母排序的層疊樣式表 我每一次都會退縮。

  三、CSS樣式的組織

  你應該組織你的樣式表以致相關的內容靠在一起,更簡單的找到想要的。使用更有效的注 解。舉個例子,這是我如何構造我的層疊樣式表:

  /*****Reset*****/

  移除元素的填充(padding)和邊距(margin)。

  /*****Basic?Elements*****/

  定義基本元素的樣式:?body,?h1-h6,?ul,?ol,?a,?p,?等.

  /*****Generic?Classes*****/

  定義簡單的風格,好像浮動的某一側,?移除元素的下邊距,?等當然,它們大部分都與我們希望的語義 不相關,但是它們是高效處理代碼所必須的。

  /*****Basic?Layout*****/

  定義基本的模板:?header,?footer等.?幫助定義網頁布局的基本元素

  /*****Header*****/

  定義所有Hearder元素

  /*****Content*****/

  定義所有內容框內的元素

  /*****Footer*****/

  定義所有Footer的元素

  /*****Etc*****/

  定義其他的選擇器。通過注解和歸類相似元素的分組,將更快的找到你想要的。

  四、保持一致性

  無論你決定使 用什麼方式去編寫代碼,保持一致。我已經對全部放在1行VS多行的CSS編寫編寫方式的爭論感到乏味和疲倦。這是不需要爭辯的。每個人都有自己的觀點,所 以選擇一種你喜歡的工作方式,並在所有的樣式表中保持一致。

  就我個人而言,我 采取一行。

  div#header?{?float:?left;?width:?100%;?}

  div#header?div.column?{

  border-right:?1px?solid?#ccc;

  float:?rightright;

  margin-right:?50px;

  padding:?10px;

  width:?300px;

  }

  div#header?h1?{?float:?left;?position:?relative;?width:?250px;?}

  所以找到你喜歡的工作方式然後保持一致。

  五、從正確的地方開始

  在完成標記語言之前不要去嘗試靠近你的樣式表。

  當我准備分割一張網頁的時候,創建CSS文件之前,我需要預覽並且標記body開標簽到 body的閉合標簽之間的所有文檔。我不會增加額外的DIV?,ID,或者類選擇器。我將會添加一些一般的DIV,就好像hearder、 content、footer.因為我知道這些東西是現實存在的。

  通過先標記 文檔,你將不會碰到本已注定的divities1和classitis2麻煩!/*You?only?need?to?add?in?that?stuff?once?you?have?begun?to?write?the?CSS?and?realize?that?you?are?going?to?need?another?hook?to?accomplish?what?you?are?trying?to?achieve.*/(原 文未譯)。

  利用CSS子選擇器指定子元素;不要只是機械的給元素添加類或者 ID選擇器。記住:沒有一個良好的格式化文檔(或者標記結構)CSS是無價值的

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved