#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,實現(xiàn)統(tǒng)一的排版、瀏覽器下的相同表現(xiàn)。
2.布局 layout.css
定義頁面是二欄還是三欄,是全屏還是1024×768……
一個網(wǎng)站的設(shè)計可能有很多種布局,但是大多數(shù)都是由幾個具有復(fù)用性的布局組成,
選擇性的引入所需要的布局,可以很快地應(yīng)用所期望的頁面布局。
3.基本樣式 type.css
定義body、h1-h6、a:link-a:active、p等的字體大小和顏色。
基本樣式的css引用,譬如將ul定義class為“ul-text”,用來展現(xiàn)相同的icon、行間距、鏈接色彩。
還可以像這樣應(yīng)用:class=”ul-text square”,li前展現(xiàn)的是方型的icon。
4.表格修飾 table.css
定義table、tr、td、th、thead、tfoot、tbody、caption等標(biāo)簽的表現(xiàn)。
和基本樣式一樣,但是表格在現(xiàn)有網(wǎng)站的展現(xiàn)形式幾乎都是處理數(shù)據(jù),所以分開存放引用。
譬如在table上應(yīng)用table-style-1便是黑色邊框的表格,table-style-2便是黃色邊框的表格。
5.表單修飾 form.css
定義fieldset、label、button、input 、select、textarea這幾個標(biāo)簽的表現(xiàn)。
大多數(shù)網(wǎng)站的表單、按鈕、輸入框幾乎都是一樣的。之所以引入這個css,
是為了便于統(tǒng)一在各個瀏覽器中的展現(xiàn)。
默認(rèn)的按鈕、輸入框等在各個瀏覽器下的展現(xiàn)區(qū)別很大,雖然在格式化的css中已經(jīng)初步的統(tǒng)一,
但是輸入框的邊框,按鈕的樣式都是需要在這個css中定義的。無奈的是select無法做到統(tǒng)一,
如果考慮到用js實現(xiàn)的話,這個成本太大了點。
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 具體應(yīng)用
存放封裝過的css。frontpage.css、llist.css、detail.css、register.css等css。
這個文件夾存放的css都是被直接引用的。