DIV+CSS經(jīng)常用到的屬性、參數(shù)及說明
更新時間:2008年09月30日 19:21:41 作者:
用過DIV+CSS seo教程布局網(wǎng)站的人都會喜歡上這種方式,雖然開始沒有用傳統(tǒng)的table直觀,但用習慣了就會感覺出DIV+CSS的優(yōu)越。實際應(yīng)用中我搜索了DIV+CSS的常用定義項,并對其參數(shù)作了歸納和說明,與喜歡DIV+CSS的朋友共享。
通用類
overflow:hidden;自動隱藏超出的內(nèi)容,防止撐開層和表格的范圍
!important
指定樣式規(guī)則的應(yīng)用優(yōu)先權(quán)
文字類 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;服務(wù)粗體(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;重復(fù)(repeat-x橫向重復(fù),repeat-y縱向重復(fù)) background-position: center top;水平居中 垂直頂部(left center水平居左 垂直居中) background:url(/image/dtbg.gif) #FEFEFE
no-repeat
right bottom(2px 5px);
背景圖片、
背景顏色、圖片不重復(fù)、背景圖片從右下角開始(圖片距左2px距上5px)
框架位置類
clear: both;兩邊拒排浮動對象(left左邊拒排浮動對象,right右邊拒排浮動對象)
float: left;浮動對象位置居左(right, 最新列車時刻表位置居右)
position:relative; 相對位置,一般在上級框架中設(shè)定 極品時刻表
position:absolute; 絕對位置,配合上級框架的設(shè)定對本級框架設(shè)定,設(shè)置top、left值
top:5px; 頁面絕對或相對于框架頂端絕對位置
left:10px; 頁面絕對或相對于框架左邊絕對位置
width: 100px;寬100px
height: 200px;高200px(可用auto和100%值)
margin 上?;疖嚂r刻表:10px 20px 10px 20px;
上右下左頁邊距(值相同可省寫margin:10px)
單獨指定用margin-top:10px; (margin-right、margin-bottom、margin-left)
padding:20px 10px 10px 20p;
上右下左內(nèi)容離邊框的距離(值相同可省寫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內(nèi)) 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;橫向翻轉(zhuǎn)(FlipV gprs流量費縱向翻轉(zhuǎn))
單獨設(shè)置鏈接
#bottool a:link{color:#fff};未訪問的顏色
#bottool a:visited{color:#fff};已訪問的顏色 流量軟件
#bottool a:hover{color:#ff0};鼠標在鏈接上
這么多定義項, 其實常用也就下面幾類:指定寬高值width,height;指定背景:background;指定位置:float,特殊的用position結(jié)合 top、left來定位;設(shè)定框架邊距:margin;設(shè)定容器內(nèi)框距:padding幾項。其中在我的樣式定義中取消了overflow、 clear、!important程序的定義項。1、取消overflow:hidden是因為經(jīng)反復(fù)實驗,該定義項只能隱藏超出容器高度的內(nèi)容而不能隱藏超出寬度的內(nèi)容。而我需要的就是要能自動隱藏超出容器寬度的內(nèi)容,有時反而需要容器高度能隨內(nèi)容的多少而撐開容器高度。2、取消clear定義項是因為在實際應(yīng)用中很真正達到理解的容器與容器的排列關(guān)系,框架或容器的位置還是用float、position、top、left等精確定位。 3、!important
指定樣式規(guī)則的應(yīng)用優(yōu)先權(quán)。這個主要用于在IE和其它的瀏覽器要區(qū)別顯示出的效果,我的網(wǎng)站就是想固定顯示效果,所以不存在什么優(yōu)先權(quán)。
我對DIV+CSS也還在研究之中,有不當之處請大家跟貼指正,有完善的地方也請跟貼完善。我認為用DIV+CSS來布局網(wǎng)站,最重要的是布局思路問題,不同的設(shè)計方案,設(shè)計的繁簡大不一樣。我著重框架或容器的通用性,設(shè)計出幾種容器的樣式,就象FS4中的標簽樣式,然后在需要的地方調(diào)用這個樣式就行了,以達到通用性而不是專用性。今天就談這些,以后再專門談?wù)勥@個布局設(shè)計思路問題。
overflow:hidden;自動隱藏超出的內(nèi)容,防止撐開層和表格的范圍
!important
指定樣式規(guī)則的應(yīng)用優(yōu)先權(quán)
文字類 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;服務(wù)粗體(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;重復(fù)(repeat-x橫向重復(fù),repeat-y縱向重復(fù)) background-position: center top;水平居中 垂直頂部(left center水平居左 垂直居中) background:url(/image/dtbg.gif) #FEFEFE
no-repeat
right bottom(2px 5px);
背景圖片、
背景顏色、圖片不重復(fù)、背景圖片從右下角開始(圖片距左2px距上5px)
框架位置類
clear: both;兩邊拒排浮動對象(left左邊拒排浮動對象,right右邊拒排浮動對象)
float: left;浮動對象位置居左(right, 最新列車時刻表位置居右)
position:relative; 相對位置,一般在上級框架中設(shè)定 極品時刻表
position:absolute; 絕對位置,配合上級框架的設(shè)定對本級框架設(shè)定,設(shè)置top、left值
top:5px; 頁面絕對或相對于框架頂端絕對位置
left:10px; 頁面絕對或相對于框架左邊絕對位置
width: 100px;寬100px
height: 200px;高200px(可用auto和100%值)
margin 上?;疖嚂r刻表:10px 20px 10px 20px;
上右下左頁邊距(值相同可省寫margin:10px)
單獨指定用margin-top:10px; (margin-right、margin-bottom、margin-left)
padding:20px 10px 10px 20p;
上右下左內(nèi)容離邊框的距離(值相同可省寫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內(nèi)) 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;橫向翻轉(zhuǎn)(FlipV gprs流量費縱向翻轉(zhuǎn))
單獨設(shè)置鏈接
#bottool a:link{color:#fff};未訪問的顏色
#bottool a:visited{color:#fff};已訪問的顏色 流量軟件
#bottool a:hover{color:#ff0};鼠標在鏈接上
這么多定義項, 其實常用也就下面幾類:指定寬高值width,height;指定背景:background;指定位置:float,特殊的用position結(jié)合 top、left來定位;設(shè)定框架邊距:margin;設(shè)定容器內(nèi)框距:padding幾項。其中在我的樣式定義中取消了overflow、 clear、!important程序的定義項。1、取消overflow:hidden是因為經(jīng)反復(fù)實驗,該定義項只能隱藏超出容器高度的內(nèi)容而不能隱藏超出寬度的內(nèi)容。而我需要的就是要能自動隱藏超出容器寬度的內(nèi)容,有時反而需要容器高度能隨內(nèi)容的多少而撐開容器高度。2、取消clear定義項是因為在實際應(yīng)用中很真正達到理解的容器與容器的排列關(guān)系,框架或容器的位置還是用float、position、top、left等精確定位。 3、!important
指定樣式規(guī)則的應(yīng)用優(yōu)先權(quán)。這個主要用于在IE和其它的瀏覽器要區(qū)別顯示出的效果,我的網(wǎng)站就是想固定顯示效果,所以不存在什么優(yōu)先權(quán)。
我對DIV+CSS也還在研究之中,有不當之處請大家跟貼指正,有完善的地方也請跟貼完善。我認為用DIV+CSS來布局網(wǎng)站,最重要的是布局思路問題,不同的設(shè)計方案,設(shè)計的繁簡大不一樣。我著重框架或容器的通用性,設(shè)計出幾種容器的樣式,就象FS4中的標簽樣式,然后在需要的地方調(diào)用這個樣式就行了,以達到通用性而不是專用性。今天就談這些,以后再專門談?wù)勥@個布局設(shè)計思路問題。
相關(guān)文章
大家看了就明白了css樣式中類class與標識id選擇符的區(qū)別小結(jié)
大家看了就明白了css樣式中類class與標識id選擇符的區(qū)別小結(jié)...2007-12-12