CSS習慣性的編寫順序

來源:互聯網
上載者:User

#CSS屬性編寫順序
//顯示內容
display
list-style
position
float
clear

//自身屬性
width
height
margin
padding
border
background

//文字屬性
color
font
text-decoration
text-align
vertical-align
white-space
other text
content

#CSS檔案編寫順序
1.格式化 reset.css
    格式化css的真正好處是能夠快速啟動工作,你可以在新的HTML檔案裡引入架構,
    不用再處理重設padding 和 margins,實現統一的排版、瀏覽器下的相同表現。

2.布局 layout.css
    定義頁面是二欄還是三欄,是全屏還是1024×768……
    一個網站的設計可能有很多種布局,但是大多數都是由幾個具有複用性的布局組成,
    選擇性的引入所需要的布局,可以很快地應用所期望的頁面配置。

3.基本樣式 type.css
    定義body、h1-h6、a:link-a:active、p等的字型大小和顏色。
  基本樣式的css引用,譬如將ul定義class為“ul-text”,用來展現相同的icon、行間距、連結色彩。
  還可以像這樣應用:class=”ul-text square”,li前展現的是方型的icon。

4.表格修飾 table.css
  定義table、tr、td、th、thead、tfoot、tbody、caption等標籤的表現。
  和基本樣式一樣,但是表格在現有網站的展現形式幾乎都是處理資料,所以分開存放引用。
    譬如在table上應用table-style-1便是黑色邊框的表格,table-style-2便是黃色邊框的表格。

5.表單修飾 form.css
  定義fieldset、label、button、input 、select、textarea這幾個標籤的表現。
  大多數網站的表單、按鈕、輸入框幾乎都是一樣的。之所以引入這個css,
    是為了便於統一在各個瀏覽器中的展現。
    預設的按鈕、輸入框等在各個瀏覽器下的展現區別很大,雖然在格式化的css中已經初步的統一,
    但是輸入框的邊框,按鈕的樣式都是需要在這個css中定義的。無奈的是select無法做到統一,
    如果考慮到用js實現的話,這個成本太大了點。

6.列印修飾 print.css

7.包含其他css的css
  frontpage.css、list.css、detail.css、register.css等等

#css架構檔案夾的建立
  a) core 主要的
  存放reset.css、layout.css、type.css、print.css

  b) bud 模組
  存放table.css、form.css、album.css等css

  c) petal 具體應用
  存放封裝過的css。frontpage.css、llist.css、detail.css、register.css等css。
    這個檔案夾存放的css都是被直接引用的。

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.