一、命名規範
a)div+css 命名規範
i.標籤定義 (全域性)
1.body
2.h1
3.h2
4.h3 …
5.a6.a:linked
7.a:visted
8.a:hover
ii.類的命名
1.div 寬度定義 w_寬度 例如(w_200則表示寬度為200個畫素的box)
2.div 高度定義 h_高度 例如(w_300 則表示高度為300個畫素的box)
3.div邊框定義
a)屬性定義(常用有兩種 一種是實線solid,另一種是虛線 dashed)
i..bd_dashed//將border屬性定義為虛線
ii..bd_solid//將border 屬性定義為實線
b)邊框位置定義
i.bd_畫素數 例如bd_1 代表border為1畫素的邊框
ii.bd_top_畫素數 例如 bd_top_1 代表上方border為1個畫素的邊框;
iii.bd_left_畫素數 例如 bd_left_1 代表左邊 border為1個畫素的邊框
iv.bd_right_畫素數 例如 bd_ right _1 代表右邊 border為1個畫素的邊框
v.bd_bom_畫素數 例如 bd_bom_1 代表底部 border為1個畫素的邊框
c)邊框顏色定義
i.bd_顏色 例如 bd_ccc 代表顏色為ccc的邊框
d)例子應用 定義乙個1個畫素實線灰色邊框box
i.e)定義乙個2畫素 上方有邊框 且顏色為黑色的虛線box
i.f)使用說明:在這裡我將border的屬性全部拆分了,可能你當前的專案不需要拆分這麼細,更據專案適可而止.如果乙個專案border 的屬性使用範圍不是太多,就可以不需要拆分太細.
4.div內邊距屬性(padding) 定義
a)pd_畫素 例如(pd_10則代表box的內邊距為10個畫素)
b)pd_left_畫素 例如(pd_left_5則代表box的左方內邊距為5個畫素)
c)pd_top_畫素 例如(pd_top_5則代表box的上方內邊距為5個畫素)
d)pd_right_畫素 例如(pd_right_5則代表box的右方內邊距為5個畫素)
e)pd_bom_畫素 例如(pd_bom_5則代表box的下方內邊距為5個畫素)
5.div外邊距屬性(margin) 定義
a)mg_畫素 例如(mg_10則代表box的外邊距為10個畫素)
b)mg_left_畫素 例如(mg_left_5則代表box的左方外邊距為5個畫素)
c)mg_top_畫素 例如(mg_top_5則代表box的上方外邊距為5個畫素)
d)mg_right_畫素 例如(mg_right_5則代表box的右方外邊距為5個畫素)
e)mg_bom_畫素 例如(mg_bom_5則代表box的下方外邊距為5個畫素)
6.浮動
a)float_l代表向左浮動;
b)float_r代表向右浮動
c)注意,一般我們都應該向左浮動,ie6對浮動相容性很差,用外邊距分開兩個box的間隔.
7.文字行高定義
a)lh_20定義box內行高為20個畫素例如(lh_20);
8.隱藏box定義
a)hidden (display:none;)
iii.物件導向的css
1.定義乙個寬為300畫素 高度為250畫素 背景顏色為淺灰的box(使用物件導向的方式)
a)樣式定義:
.w_300b)html標籤:.h_250
.bg_ccc
2. 定義乙個寬為300畫素 高度為250畫素 背景顏色為淺灰的box(使用常規的方式)
a)樣式定義:
.boxb)html標籤:
比較:似乎看到了常規方式要比物件導向的方式要好.看起來簡單使用.接下來我們在做一件事,我們再新建乙個box,寬度是400畫素的.
常規方法:
a)樣式定義:
.boxb)html標籤:.box2
物件導向的方法:
a)樣式定義:
.w_300b)html標籤:.w_400
.h_250
.bg_ccc
總結:我們是不是在樣式上比常規的方法省掉了兩行的樣式.如果乙個**有成千上萬個div,那麼我們是不是會省掉很多**.物件導向的方法使得我們的**重用了,提高了利用率.
3 接上面的例子,我們再給這個box加乙個1畫素實黑線邊框
常規方法:
a)樣式定義:
.boxb)html標籤:.box2
物件導向的方法:
a)樣式定義:
.w_300b)html標籤:.w_400
.h_250
.bg_ccc
.bd_1
.bd_000
.bd_solid
總結:上面的例子讓你是不是感覺到了物件導向的方法有些不好了.比較繁瑣了,我覺得這樣寫沒錯誤.因為下一次我們還有可能使用到邊框為2個畫素的,邊框顏色是其他顏色的.或者使用虛線.我說了這麼多是不是又給物件導向的方法挽回了一些面子.但是要真麼做,我們是不是又犯了教條主義錯誤.我覺得首先要做的是,看看整個**裡面使用其他顏色邊框或者虛線實線多麼?如果多,這麼些沒錯誤.但是一般來說乙個**是不會採用多於三種顏色的邊框.我們再按照物件導向的方法是不是增加了幾行**.如果不多,可以根據box所在位置,或者這個box需要做什麼用的來起乙個類名.例如:內容box需要邊框那麼我們可以定義乙個內容的邊框即 bd_con
再回來物件導向的方法:
a)樣式定義:
.w_300b)html標籤:.w_400
.h_250
.bg_ccc
.bd_con
這樣來寫,你還覺得它繁瑣麼?是不是覺得好多了.
其實物件導向的思想基本也就這樣,只是我們要清楚什麼時候該使用這個方法,什麼時候該使用常規的方法,靈活的使用會使得**量減少,進而提公升**的效能.
4 樣式的規劃
a) 通常我們都會將樣式儲存成乙個檔案.所有的頁面外部呼叫.
既然採用了物件導向的方法,我們就應該有一套新的儲存方法:以此類推,為什麼要使用這個方法,當我們新增新類的時候我們可以馬上檢視到目前的樣式中是不是已經存在了,如果存在,拿來即用.如果不存在,在相應的位置宣告.然後拿來用之..w_300
.w_400
......
所有定義寬度的樣式都寫在這裡,排序按照畫素從低到高.
.h_250
.h_300
.h_350
......
所有定義高度的樣式都寫在這裡,排序按照畫素從低到高.
.bg_ccc
.bd_con
其中可能有錯別字,不要意思啊....
未完待續......
CSS層疊樣式表 定義樣式表
定義樣式表 1 html標記定義 p p可以叫做選擇器，定義那個標記中的內容執行其中的樣式 乙個選擇器可以控制若干個樣式屬性，他們之間需要用英語 隔開，最後乙個可以不應加 2 class定義 class定義是以 開始 p3 id 定義 id定義是 開始的 p4 優先順序問題 id class htm...
基準樣式表
翻譯 css的初學者常因為瀏覽器的預設樣式表，而生產一些錯誤。可以設定乙個基本的樣式表，恢復css最基本的樣貌。global settings html,body body headings h1,h2,h3,h4,h5,h6 h1 h2 h3 common formatting p,ul,ol u...
聯合樣式表
1.使用xsl import 可以將乙個樣式表匯入到另乙個樣式表,把xsl import放在xsl stylesheet根元素中的頂級元素中就可以了.xml version 1.0 encoding gb2312 xsl stylesheet xmlns xsl xsl import href im...