CSS屬性

lucy0746 2007-07-23

展開全文

1.全部的代碼均在一個(gè)DIV容器(我暫時(shí)這樣稱呼) Head里面,我們來(lái)看看Head的寫法
#Head{
    text-align:center;
}
為什么Head前面有一個(gè)"#"號(hào)呢?
而有的卻是在前面加一個(gè)"．"比如 "．Head",有時(shí)候?qū)慶ss的時(shí)候干脆什么也不加,比如 td,body,他們有什么區(qū)別,具體怎么用,如果仔細(xì)你就會(huì)發(fā)現(xiàn)在HTML代碼的DIV容器里面,有的是 <div id="Head"></div> 而有的是這樣 <div class="HackBox"></div>
從id和class字面上的意思,我們也已經(jīng)了解了,id具有唯一性,而class是一個(gè)類,適用于可多次重復(fù)使用的容器,而前面什么也不帶的,便是 CSS里默認(rèn)的通用于HTML代碼的描敘,即對(duì)HTML里的代碼起全局作用,比如 td,便是對(duì)HTML表格里面的全部列起作用,text-align:center是指在此容器里面的文字全部居中對(duì)齊,我們注意到,行后面還有一個(gè)分號(hào) ";",
語(yǔ)法 text-align : left | right | center | justify
取值說明：
left : 默認(rèn)值。左對(duì)齊
right : 右對(duì)齊
center : 居中對(duì)齊
justify : 兩端對(duì)齊

2.HeadTop
#Head #HeadTop{
    position:relative;
    width:760px;
    margin:10px auto 10px;
    text-align:left;
}
為什么#HeadTop前面會(huì)有一個(gè)#Head?
我們發(fā)現(xiàn)#headTop是嵌套在#Head里面的,為了Head里面的設(shè)置在HeadTop里面同樣生效,將HeadTop放在了Head后面

position : static | absolute | fixed | relative
取值：
static : 默認(rèn)值。無(wú)特殊定位，對(duì)象遵循HTML定位規(guī)則
absolute : 將對(duì)象從文檔流中拖出，使用 left ， right ， top ， bottom 等屬性相對(duì)于其最接近的一個(gè)最有定位設(shè)置的父對(duì)象進(jìn)行絕對(duì)定位。如果不存在這樣的父對(duì)象，則依據(jù) body 對(duì)象。而其層疊通過 z-index 屬性定義
fixed :未支持。對(duì)象定位遵從絕對(duì)(absolute)方式。但是要遵守一些規(guī)范
relative :對(duì)象不可層疊，但將依據(jù) left ， right ， top ， bottom 等屬性在正常文檔流中偏移位置

width : auto | length
auto : 默認(rèn)值。無(wú)特殊定位，根據(jù)HTML定位規(guī)則分配
length : 由浮點(diǎn)數(shù)字和單位標(biāo)識(shí)符組成的長(zhǎng)度值 | 百分?jǐn)?shù)。百分?jǐn)?shù)是基于父對(duì)象的寬度。不可為負(fù)數(shù)。可以用相對(duì)長(zhǎng)度象素單位px或者絕對(duì)長(zhǎng)度in等做單位(1in = 2.54cm = 25.4 mm = 72pt = 6pc)

margin:10px auto 10px;
檢索或設(shè)置對(duì)象四邊的外補(bǔ)丁
如果提供全部四個(gè)參數(shù)值，將按上－右－下－左(順時(shí)針方向)的順序作用于四邊。如果只提供一個(gè)，將用于全部的四邊。如果提供兩個(gè)，第一個(gè)用于上－下，第二個(gè)用于左－右。如果提供三個(gè)，第一個(gè)用于上，第二個(gè)用于左－右，第三個(gè)用于下。

text-align:left;
我們看到Head里面已經(jīng)有設(shè)置文字對(duì)齊是居中的了,而這里又定義文字居左,那么到底文字怎么對(duì)齊呢?如果有相沖突的定義,CSS將按最近的一個(gè)定義來(lái)執(zhí) 行,這跟HTML中的是一樣的,比如<font color=red><font color=green>我到底是什么顏色?</font></font>

3.
#Head #Logo{
    width: 240px;
    height: 31px;
    float: left;
    margin-left: 2px;
}
width(寬度),height(高度)都不說了
float : none | left | right
取值：
none : 默認(rèn)值。對(duì)象不飄浮
left : 文本流向?qū)ο蟮挠疫?
right : 文本流向?qū)ο蟮淖筮?br>翻譯為漂浮,left說明是從左開始排列
margin-left: 2px; 相當(dāng)于 maign:0px;0px;0px;2px
這里L(fēng)ogo容器說明的是,從左開始排列,寬度為240px,高度為31px,左補(bǔ)丁(左邊空余)2px寬

4.HeadNavBar左邊導(dǎo)航條
#Head #HeadNavBar{
    float:right;
    clear:right;
    background: url(images/header_mm_bk.gif) left top no-repeat;
    width:510px;
}

clear:right;清除右浮動(dòng),說明右邊不能再有容器
clear : none | left | right | both
background: url(images/header_mm_bk.gif) left top no-repeat;
(意思是背景圖片左,上對(duì)齊,不重復(fù))
background : background-color || background-image || background-repeat || background-attachment || background-position
background-color:silver; 背景色
background-image:url(/DownloadImg/2007/7/23/22868_627687_1.gif);
當(dāng)同時(shí)存在背景圖片和背景色時(shí)背景色將被覆蓋
background-repeat : repeat | no-repeat | repeat-x | repeat-y
取值：
repeat : 默認(rèn)值。背景圖像在縱向和橫向上平鋪
no-repeat : 背景圖像不平鋪
repeat-x : 背景圖像僅在橫向上平鋪
repeat-y : 背景圖像僅在縱向上平鋪
background-attachment : scroll | fixed
取值：
scroll : 默認(rèn)值。背景圖像是隨對(duì)象內(nèi)容滾動(dòng)
fixed : 背景圖像固定
background-position : length || length
background-position : position || position
取值：
length : 百分?jǐn)?shù) | 由浮點(diǎn)數(shù)字和單位標(biāo)識(shí)符組成的長(zhǎng)度值。
position : top | center | bottom | left | center | right

整句的意思是寬度為510px象素的容器從右往左排列

5.
#Head ul{
list-style-type:none;
    margin:0;
    padding:0;
}
list-style-type:none;
list-style : list-style-image || list-style-position || list-style-type
list-style-image : url ( url );可以將列表樣式改變?yōu)閳D片

list-style-type : disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none
取值：可以將列表改變?yōu)槠渌麡邮?br>disc : CSS1 默認(rèn)值。實(shí)心圓
circle : CSS1 空心圓
square : CSS1 實(shí)心方塊
decimal : CSS1 阿拉伯?dāng)?shù)字
lower-roman : CSS1 小寫羅馬數(shù)字
upper-roman : CSS1 大寫羅馬數(shù)字
lower-alpha : CSS1 小寫英文字母
upper-alpha : CSS1 大寫英文字母
none : CSS1 不使用項(xiàng)目符號(hào)

6.
#Head #HeadNavBar li{
    float:left;
    height:31px;
    background: url(images/header_mm_sep.gif) left center no-repeat;
    display:inline;
}
display:inline; 內(nèi)聯(lián)對(duì)象的默認(rèn)值。將對(duì)象強(qiáng)制作為內(nèi)聯(lián)對(duì)象呈遞，從對(duì)象中刪除行(顯示在行內(nèi),超出的將不顯示)
display : block | none | inline | inline-block

7.
#Head #HeadNavBar li.NoSep{
    background: none;
    margin-left: 5px;
}
當(dāng)列表區(qū)塊內(nèi)標(biāo)志類為NoSep時(shí),沒有背景色"background: url(images/header_mm_sep.gif) left center no-repeat;",并且左補(bǔ)丁為5px

8.#MyTaoBao {
    padding-left: 14px!important;
    margin-left: 9px!important;
    margin-left: 4px;
    background:transparent url(images/header_mm_mytb_icon.gif) no-repeat left center;
}
padding:lenth;內(nèi)補(bǔ)丁,用法參考margin,
padding-left: 14px;是指左邊空余14px的值,這空余是用來(lái)放置居左中的背景圖片的
!important;提升指定樣式規(guī)則的應(yīng)用優(yōu)先權(quán)。

9.設(shè)置列表內(nèi)的鏈接樣式
#Head #HeadNavBar li a{
    display:block;
    padding: 0 6px 0 7px;
    float:left;
    height:31px;
    line-height:31px;
    color: #0f3a66;
    font-size: 13px;
}
display:block; 以塊狀呈現(xiàn)
padding: 0 6px 0 7px;左右內(nèi)補(bǔ)丁各為7px,6px
color: #0f3a66;鏈接時(shí)文字顏色為#0f3a66;
鏈接的完整定義還可以包含背景顏色background,鏈接樣式text-decoration(text-decoration : none[無(wú)裝飾] || underline[下劃線] || blink[文字閃爍] || overline[上劃線] || line-through[貫穿線])
鏈接的順序應(yīng)該是這樣的(LVHA)
a:link
a :visited
a :hover
a :active

#Head #HeadNavBar li a:hover{
    color: #e60;
}

10.
#Head #HeadNavBar li#AdvanceBox {
    background: none;
    margin-left: 10px;
}
由于AdvanceBox是在塊li里面,故順序?yàn)?Head #HeadNavBar li#AdvanceBox,這句意思是無(wú)背景,左外補(bǔ)丁(左空余)為10px;

11.為#AdvanceBox內(nèi)的其他表單元素定義
#Head #HeadNavBar li#AdvanceBox form {
    margin:0;
    padding:0;
    margin-left:8px;
    margin-top:5px;
}

#Head #HeadNavBar li#AdvanceBox .HeaderSearchBox {
    display:block;
    float:left;
    width:112px;
    height:15px!important;
    height /*ie55*/: 21px;
    padding:3px 2px 1px 2px;
    padding-right:0;
    border: 1px solid #7ad2ff;
    background:url(images/header_mm_srch_bk.png) no-repeat;
    color: #000;
}

#Head #HeadNavBar li#AdvanceBox input.DC {
    color: #90B1C5 !important;
}

#Head #HeadNavBar li#AdvanceBox .HeaderSearchBtn {
    display:block;
    float:left;
    margin-left /*ie55*/: -3px;
}

#Head #HeadNavBar li#AdvanceBox li {
    background: none!important;
}

12.#QuickLinks
#Head #QuickLinks{
    float:right;
    width:750px;
    margin-top:6px;
    margin-right:6px;
}
右浮動(dòng),寬度為750px,上,右補(bǔ)丁各為6px

13.為#Head #QuickLinks定義列表li樣式
#Head #QuickLinks li{
    float: right;
    margin-left:10px;
    line-height:21px;
}
line-height:21px; 行高21px;

14.定義#Head #QuickLinks li內(nèi)鏈接樣式,多個(gè)相同的定義時(shí)可以用","分割開,而且路徑要寫完整
#Head #QuickLinks li a:link, #Head #QuickLinks li a:visited {
    font-style:normal;
    font-weight:normal;
    font-size: 12px;
    color:#04d;
}

#Head #QuickLinks li a:hover, #Head #QuickLinks li a:active {
    color:#e60;
}

15.
.HackBox{
   border-top:1px solid transparent !important;
   border-top:0;
   clear:both;
}
這里有兩個(gè)重復(fù)定義的border-top(上邊框,!important優(yōu)先,邊框?yàn)?px,透明
clear:both; 左右浮動(dòng)均清除,類似換一行

淘寶頭部導(dǎo)航已經(jīng)基本分析完成,現(xiàn)在總結(jié)一下:

(1).容器div可以嵌套,比如 <div id="Head"><div id="Logo"></div></div>,嵌套時(shí)容器的寫法:需要在前面加上容器的命名,如 #Head #Logo,我們發(fā)現(xiàn),Logo雖然在容器"HeadTop"里面卻不用寫成 #Head #HeadTop #Logo,因?yàn)镠eadTop并沒有對(duì)Logo限制

(2).獨(dú)特的容器名字前面加符號(hào) "#",通用的前面加符號(hào)小句點(diǎn)"."

(3).容器的基本參數(shù)包括外補(bǔ)丁 margin,內(nèi)補(bǔ)丁 padding,寬度 width,背景 background,浮動(dòng) float,清除 clear,這幾個(gè)參見參數(shù)的用法要熟記

(4).需要換行顯示時(shí)用 clear:both;

(5).可以單獨(dú)為某個(gè)容器定義鏈接樣式, 順序?yàn)?LVHA(a:link,a:visited,a:hover,a:active),鏈接樣式的幾個(gè)參數(shù)背景(background),內(nèi)補(bǔ)丁 (padding)寬度(width)描述(text-decoration)文字顏色(color)等,可以設(shè)置鏈接以塊狀方式顯示

其他未總結(jié)之處,請(qǐng)多看源碼.

本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點(diǎn)。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購(gòu)買等信息，謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊一鍵舉報(bào)。

小男孩‘自慰网亚洲一区二区,亚洲一级在线播放毛片,亚洲中文字幕av每天更新,黄aⅴ永久免费无码,91成人午夜在线精品,色网站免费在线观看,亚洲欧洲wwwww在线观看

CSS屬性