天天看點

div+css常用屬性參數

文字類

color: #FF0000;文字顔色 

font-family: "Arial", "Helvetica", "sans-serif";字型

font-size: 9px;字号 

text-align:center; 居中(left為居左,right為居右) 

line-height:28px;行高(可用150%值) 

font-style: italic;斜體(oblique偏斜體) 

font-weight: bold;服務粗體(bolder特粗,400粗值)

font-variant: small-caps;小型大寫字母

text-transform: capitalize;首字母大寫 

text-decoration: underline overline line-through blink;下劃線,上劃線,删除線,閃爍 

text-indent: 2em;文字縮進2個字型高(或15px,即15象素) 

背景類

background-attachment: fixed;固定位置(scroll滾動)

background: #0066CC;背景色(transparent透明)

background: url(/image/more2.gif);背景圖檔 

background-repeat: repeat;重複(repeat-x橫向重複,repeat-y縱向重複)

background-position: center top;水準居中 垂直頂部(left center水準居左 垂直居中) 

background:url(/image/dtbg.gif) #FEFEFE no-repeat right bottom(2px 5px); 背景圖檔、背景顔色、圖檔不重複、背景圖檔從右下角開始(圖檔距左2px距上5px) 

架構位置類 

clear: both;兩邊拒排浮動對象(left左邊拒排浮動對象,right右邊拒排浮動對象) 

float: left;浮動對象位置居左(right, 最新列車時刻表位置居右) 

position:relative; 相對位置,一般在上級架構中設定 極品時刻表 

position:absolute; 絕對位置,配合上級架構的設定對本級架構設定,設定top、left值 

top:5px; 頁面絕對或相對于架構頂端絕對位置 

left:10px; 頁面絕對或相對于架構左邊絕對位置 

width: 100px;寬100px 

height: 200px;高200px(可用auto和100%值) 

margin 上海火車時刻表:10px 20px 10px 20px; 

上右下左頁邊距(值相同可省寫margin:10px) 

單獨指定用margin-top:10px; (margin-right、margin-bottom、margin-left) 

  padding:20px 10px 10px 20p; 

上右下左内容離邊框的距離(值相同可省寫padding:10px) 

單獨指定用padding-top:10px;(padding-right、padding-bottompadding-left) 

border:#ccc 1px solid 成都列車時刻表; 

四邊框顔色、線寬、實線(dotted虛線,dashed點畫線,double雙線,ridge脊線) 

單獨指定用border-top:#ccc 1px solid;border-right:#ccc 1px solid 

項目清單類

 list-style-position: outside;位置為外(inside内) list-style-image: url(/yh/image/more04.gif);項目符号圖像 臨客時刻表 list-style-type: disc;項目符号為圓點(circle圓圈,square方塊) 

擴充類 cursor: e-resize;滑鼠樣式 filter: Blur(Add=4, Direction=8, Strength=4);濾鏡 filter: FlipH;橫向翻轉(FlipV gprs流量費縱向翻轉) 

單獨設定連結 

#bottool a:link{color:#fff};未通路的顔色 

#bottool a:visited{color:#fff};已通路的顔色 流量軟體 

#bottool a:hover{color:#ff0};滑鼠在連結上 

這麼多定義項, 其實常用也就下面幾類:指定寬高值width,height;指定背景:background;指定位置:float,特殊的用position結合 top、left來定位;設定架構邊距:margin;設定容器内框距:padding幾項。其中在我的樣式定義中取消了overflow、 clear、!important程式的定義項。

1、取消overflow:hidden是因為經反複實驗,該定義項隻能隐藏超出容器高度的内容而不能隐藏超出寬度的内容。而我需要的就是要能自動隐藏超出容器寬度的内容,有時反而需要容器高度能随内容的多少而撐開容器高度。

2、取消clear定義項是因為在實際應用中很真正達到了解的容器與容器的排列關系,架構或容器的位置還是用float、position、top、left等精确定位。 

3、!important 

指定樣式規則的應用優先權。這個主要用于在IE和其它的浏覽器要差別顯示出的效果,我的網站就是想固定顯示效果,是以不存在什麼優先權。 

我對DIV+CSS也還在研究之中,有不當之處請大家跟貼指正,有完善的地方也請跟貼完善。我認為用DIV+CSS來布局網站,最重要的是布局思路問題,不同的設計方案,設計的繁簡大不一樣。我着重架構或容器的通用性,設計出幾種容器的樣式,就象FS4中的标簽樣式,然後在需要的地方調用這個樣式就行了,以達到通用性而不是專用性。、