1）邊框與背景

CSS 規(guī)范指出兽埃，邊框繪制在“元素的背景之上”。因為有些邊框是“間斷的”（例如适袜，點線邊框或虛線框）柄错，元素的背景應當出現(xiàn)在邊框的可見部分之間。元素的背景是內(nèi)容苦酱、內(nèi)邊距和邊框區(qū)的背景（大多數(shù)瀏覽器都遵循?）售貌。

2）邊框樣式?——border-style 屬性

如果沒有樣式，將根本沒有邊框疫萤。

CSS 的 border-style 屬性定義了 10 個不同的非 inherit 樣式颂跨，包括 none。a:link img {border-style: outset;}

①多邊樣式? ? ? ?p.aside {border-style: solid dotted dashed double;}

值采用了 top-right-bottom-left 的順序扯饶，為類名為 aside 的段落定義了四種邊框樣式：實線上邊框恒削、點線右邊框、虛線下邊框和一個雙線左邊框尾序。

②單邊樣式? ? ? ?border-top-style? ? border-right-style? ? border-bottom-style? ? border-left-style

p {border-style: solid; border-left-style: none;}?必須把單邊屬性放在簡寫屬性之后钓丰，否則單邊屬性被覆蓋。

3）邊框的寬度—— border-width 屬性

為邊框指定寬度有兩種方法：可以指定長度值每币，比如 2px 或 0.1em携丁；或者使用 3 個關鍵字之一，它們分別是 thin 脯爪、medium（默認值） 和 thick（無具體寬度）则北。

①單邊寬度? ??border-top-width? ? border-right-width? ? border-bottom-width? ? border-left-width

簡寫按照 top-right-bottom-left 的順序設置元素的各邊邊框。

②沒有邊框? ??

如果邊框樣式為 none痕慢，即邊框根本不存在，那么邊框就不可能有寬度涌矢，因此邊框?qū)挾茸詣釉O置為 0掖举。由于 border-style 的默認值是 none，如果希望邊框出現(xiàn)娜庇，就必須聲明一個邊框樣式塔次。

4）邊框顏色—— border-color 屬性

一次可以接受最多 4 個顏色值，按照 top-right-bottom-left 的順序名秀，顏色值小于 4 個励负，值復制就會起作用。上下邊框復制匕得，左右邊框復制继榆。

默認的邊框顏色是元素本身的前景色巾表。如果沒有為邊框聲明顏色，它將與元素的文本顏色相同略吨。另一方面集币，如果元素沒有任何文本，假設它是一個表格翠忠，其中只包含圖像鞠苟，那么該表的邊框顏色就是其父元素的文本顏色（因為 color 可以繼承）。這個父元素很可能是 body秽之、div 或另一個 table当娱。

①單邊顏色? ??border-top-color? ? border-right-color? ? border-bottom-color? ? border-left-color

②透明邊框? ??border-color: transparent;

利用 transparent，使用邊框就像是額外的內(nèi)邊距一樣考榨；此外跨细，能在需要的時候使其可見。這種透明邊框相當于內(nèi)邊距董虱，因為元素的背景會延伸到邊框區(qū)域扼鞋。

4、CSS 外邊距

1）CSS margin 屬性

設置外邊距的最簡單的方法就是使用 margin 屬性愤诱。margin 屬性默認值為0云头，接受任何長度單位，可以是像素淫半、英寸溃槐、毫米或 em。margin 可以設置為 auto科吭。更常見的做法是為外邊距設置長度值昏滴，接受任何長度單位、百分數(shù)值甚至負值对人。

簡寫時按照 top-right-bottom-left 的順序谣殊，百分數(shù)是相對于父元素的 width 計算的。

2）值復制

如果缺少左外邊距的值牺弄，則使用右外邊距的值姻几。

如果缺少下外邊距的值，則使用上外邊距的值势告。

如果缺少右外邊距的值蛇捌，則使用上外邊距的值。

3）單邊外邊距? ??margin-top? ? margin-right? ? margin-bottom? ? margin-left

提示：Netscape 和 IE 對 body 標簽定義的默認邊距（margin）值是 8px咱台。而 Opera 將內(nèi)部填充（padding）的默認值定義為 8px络拌。

5、CSS 外邊距合并

外邊距合并指的是回溺，當兩個垂直外邊距相遇時春贸，它們將形成一個外邊距混萝。合并后的外邊距的高度等于兩個發(fā)生合并的外邊距的高度中的較大者。

1）

垂直合并：第一個元素的下外邊距與第二個元素的上外邊距會發(fā)生合并祥诽。

2）

當一個元素包含在另一個元素中時（假設沒有內(nèi)邊距或邊框把外邊距分隔開）譬圣，它們的上和/或下外邊距也會發(fā)生合并。

3）外邊距可以與自身發(fā)生合并雄坪。這就是一系列的段落元素占用空間非常小的原因厘熟，因為它們的所有外邊距都合并到一起，形成了一個小的外邊距维哈。

假設一個空元素绳姨，無邊框或填充，如下合并

遇到另一個元素的外邊距阔挠，它還會發(fā)生合并

四飘庄、CSS定位

1、定位概述

定義元素框相對于其正常位置應該出現(xiàn)的位置购撼，或者相對于父元素跪削、另一個元素甚至瀏覽器窗口本身的位置。

css定位屬性

1）一切皆為框——display 屬性改變生成的框的類型

塊框：div迂求、h1 或 p 元素等塊級元素顯示為一塊內(nèi)容碾盐。

行內(nèi)框：span 和 strong 等“行內(nèi)元素”內(nèi)容顯示在行中。

無名塊框：沒有進行顯式定義的情況下創(chuàng)建塊級元素揩局。把一些文本添加到一個塊級元素（比如 div）的開頭毫玖，即使沒有把這些文本定義為段落，它也會被當作段落對待凌盯。（塊級元素的文本行）

2）CSS 定位機制

CSS 有三種基本的定位機制：普通流（默認）付枫、浮動和絕對定位。

普通流中的元素的位置由元素在 (X)HTML 中的位置決定驰怎。

塊級框從上到下一個接一個地排列阐滩，框之間的垂直距離是由框的垂直外邊距計算出來。

行內(nèi)框在一行中水平布置县忌∫睹迹可以使用水平內(nèi)邊距、邊框和外邊距調(diào)整它們的間距芹枷。但是，垂直內(nèi)邊距莲趣、邊框和外邊距不影響行內(nèi)框的高度鸳慈。由一行形成的水平框稱為行框（Line Box），行框的高度總是足以容納它包含的所有行內(nèi)框喧伞。不過走芋，設置行高可以增加這個框的高度绩郎。

3）CSS position 屬性

position 屬性值的含義：

static? ??元素框正常生成。塊級元素生成一個矩形框翁逞，作為文檔流的一部分肋杖，行內(nèi)元素則會創(chuàng)建一個或多個行框，置于其父元素中挖函。

relative? ??元素框偏移某個距離状植。元素仍保持其未定位前的形狀怨喘，它原本所占的空間仍保留。

absolute? ??元素框從文檔流完全刪除，并相對于其包含塊定位膏执。

fixed? ? 元素框的表現(xiàn)類似于將 position 設置為 absolute驻售，不過其包含塊是視窗本身。

2胧后、相對定位

如果對一個元素進行相對定位芋浮，它將出現(xiàn)在它所在的位置上。然后壳快，通過設置垂直或水平位置纸巷，讓這個元素“相對于”它的起點進行移動。

在使用相對定位時眶痰，無論是否進行移動瘤旨，元素仍然占據(jù)原來的空間。因此竖伯，移動元素會導致它覆蓋其它框存哲。

相對定位實際上被看作普通流定位模型的一部分，因為元素的位置相對于它在普通流中的位置七婴。

#box_relative {position: relative; left: 30px; top: 20px;}

3祟偷、絕對定位

設置為絕對定位的元素框從文檔流完全刪除，并相對于其包含塊（可能是文檔中的另一個元素或者是初始包含塊）定位打厘。元素原先在正常文檔流中所占的空間會關閉修肠，就好像該元素原來不存在一樣。元素定位后生成一個塊級框户盯，而不論原來它在正常流中生成何種類型的框嵌施。

普通流中其它元素的布局就像絕對定位的元素不存在一樣饲化。絕對定位可能覆蓋頁面上的其它元素，通過設置 z-index 屬性來控制這些框的堆放次序吗伤。

絕對定位的元素的位置相對于最近的已定位祖先元素吃靠，如果元素沒有已定位的祖先元素，那么它的位置相對于最初的包含塊足淆。

4巢块、浮動

1）浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止缸浦。由于浮動框不在文檔的普通流中夕冲，所以文檔的普通流中的塊框表現(xiàn)得就像浮動框不存在一樣。

把框 1 向右浮動時裂逐，它脫離文檔流并且向右移動歹鱼，直到它的右邊緣碰到包含框的右邊緣??

框 1 向左浮動時脫離文檔流并且向左移動，直到它的左邊緣碰到包含框的左邊緣卜高。因為它不再處于文檔流中弥姻，所以它不占據(jù)空間，實際上覆蓋住了框 2

包含框無法容納水平排列的三個浮動元素掺涛，那么其它浮動塊向下移動，直到有足夠的空間薪缆。如果浮動元素的高度不同秧廉，那么當它們向下移動時可能被其它浮動元素“卡住”

2）CSS float 屬性

float 屬性定義元素在哪個方向浮動。任何元素都可以浮動拣帽，浮動元素會生成一個塊級框疼电，無論它本身是何種元素。如果浮動非替換元素减拭，則要指定一個明確的寬度蔽豺；否則，它們會盡可能地窄拧粪。

注釋：假如在一行之上只有極少的空間可供浮動元素修陡，那么這個元素會跳至下一行，這個過程會持續(xù)到某一行擁有足夠的空間為止可霎。

屬性值和描述：

left? ? ? ? ?元素向左浮動魄鸦。

right? ? ? ? 元素向右浮動。

none? ? ? ? 默認值癣朗。元素不浮動号杏，并會顯示在其在文本中出現(xiàn)的位置。

inherit? ? ? ?規(guī)定應該從父元素繼承 float 屬性的值。

3）CSS 浮動問題——行框和清理

浮動框旁邊的行框被縮短盾致，從而給浮動框留出空間，行框圍繞浮動框荣暮。

創(chuàng)建浮動框可以使文本圍繞圖像庭惜。??

阻止行框圍繞浮動框，需要對該框應用 clear 屬性穗酥。clear 屬性的值可以是 left护赊、right、both 或 none砾跃，它表示框的哪些邊不應該挨著浮動框骏啰。

①方法一：對段落增加margin-top

段落的上外邊距（margin-top）上添加足夠的空間，使元素的頂邊緣垂直下降到浮動框下面

②方法二：在包圍容器中新增空元素且清理它

假設希望讓一個圖片浮動到文本塊的左邊抽高，并且圖片和文本包含在另一個具有背景顏色和邊框的元素中判耕。

當圖片向左浮動，文本塊向右浮動時翘骂，出現(xiàn)問題：包圍圖片和文本的 div 不占據(jù)空間壁熄。如何讓包圍元素在視覺上包圍浮動元素呢？需要在這個包圍元素內(nèi)的某個地方應用 clear碳竟，但是沒有現(xiàn)有的元素可以應用清理草丧，所以我們只能添加一個空元素并且清理它。

.clear {clear: both; }

<div class="clear"></div>

③方法三：對容器 div 進行浮動

但是下一個元素會受到這個浮動元素的影響莹桅。為了解決這個問題昌执，有些人選擇對布局中的所有東西進行浮動，然后使適當?shù)挠幸饬x的元素（常常是站點的頁腳）對這些浮動進行清理诈泼。這有助于減少或消除不必要的標記懂拾。

4）CSS clear 屬性

clear 屬性規(guī)定元素的哪一側不允許其他浮動元素。

值? ? ? ? ? ? ?描述

left? ? ? ? ? ?在左側不允許浮動元素厂汗。

right? ? ? ? ?在右側不允許浮動元素委粉。

both? ? ? ? ?在左右兩側均不允許浮動元素。

none? ? ? ? ?默認值娶桦。允許浮動元素出現(xiàn)在兩側贾节。

inherit? ? ? ? 規(guī)定應該從父元素繼承 clear 屬性的值。

五衷畦、CSS 選擇器

1栗涂、元素選擇器

p {color:gray;}

如果設置 HTML 的樣式，選擇器通常將是某個 HTML 元素祈争，比如 p斤程、h1、em、a忿墅，甚至可以是 html 本身扁藕。

元素選擇器又稱為類型選擇器（type selector）。類型選擇器匹配文檔語言元素類型的名稱疚脐。類型選擇器匹配文檔樹中該元素類型的每一個實例亿柑。

2、選擇器分組

1）h1, h2, h3, h4, h5, h6 {color:blue;}

將選擇器放在規(guī)則左邊棍弄，用逗號分隔望薄，其右邊的樣式（color:blue;）將應用到這幾個選擇器所引用的元素。逗號告訴瀏覽器呼畸，規(guī)則中包含N個不同的選擇器痕支。

2）通配符選擇器? ??* {color:red;}

CSS2 引入了一種新的簡單選擇器 - 通配選擇器（universal selector），顯示為一個星號（*）蛮原。該選擇器可以與任何元素匹配卧须，就像是一個通配符。這個聲明等價于列出了文檔中所有元素的一個分組選擇器瞬痘。

3）聲明分組? ??h1 {font: 28px Verdana; color: white; background: black;}

既可以對選擇器進行分組故慈，也可以對聲明分組。對聲明分組框全，一定要在各個聲明的最后使用分號翩瓜，這很重要蛛勉。瀏覽器會忽略樣式表中的空白符（和換行符）。

一般結合選擇器和聲明分組

3、類選擇器

1）基礎語法? ? .important {color:red;}（點號+HTML元素的class值）

類選擇器允許以一種獨立于文檔元素的方式來指定樣式锌云〗煞梗可以單獨使用医瘫，也可以與其他元素結合使用猾骡。

只有適當?shù)?b>標記文檔（將類選擇器的樣式與元素關聯(lián)，將 HTML元素的class 指定為一個適當?shù)闹担┖蟛拍苁褂眠@些選擇器蚜印，所以使用這兩種選擇器通常需要先做一些構想和計劃莺禁。要應用樣式而不考慮具體設計的元素，最常用的方法就是使用類選擇器窄赋。

2）類選擇器結合元素選擇器? ??p.important {color:red;}

選擇器現(xiàn)在會匹配 class 屬性包含 important 的所有 p 元素哟冬，但是其他任何類型的元素都不匹配，不論是否有此 class 屬性忆绰。

3）CSS 多類選擇器

在 HTML 中浩峡，一個 class 值中可能包含一個詞列表，各個詞之間用空格分隔错敢。<p class="important warning">This paragraph is a very important warning.</p>

可使用類選擇器單獨為class為important或warning的元素設置樣式翰灾，也可把兩個類選擇器鏈接在一起，僅可以選擇同時包含這些類名的元素（類名的順序不限）。

如果一個多類選擇器包含類名列表中沒有的一個類名纸淮，匹配就會失敗平斩。

4、ID選擇器

1）語法? ??*#intro {font-weight:bold;}

ID 選擇器前面有一個 # 號 - 也稱為棋盤號或井號萎馅。與類選擇器一樣双戳，ID 選擇器中可以忽略通配選擇器。?ID 選擇器引用HTML元素 id 屬性中的值糜芳。

2）id選擇器與類選擇器的區(qū)別

在一個 HTML 文檔中，ID 選擇器會使用一次魄衅，而且僅一次峭竣。ID 選擇器不能結合使用，因為 ID 屬性不允許有以空格分隔的詞列表晃虫。

有些情況下皆撩，知道文檔中會出現(xiàn)某個特定 ID 值，但是并不知道它會出現(xiàn)在哪個元素上哲银，所以想聲明獨立的 ID 選擇器扛吞。此時可匹配到所有含此id的元素。

注意荆责，類選擇器和 ID 選擇器可能是區(qū)分大小寫的滥比。

5、屬性選擇器

屬性選擇器可以根據(jù)元素的屬性及屬性值來選擇元素做院。一般同其他選擇器結合使用盲泛。

1）簡單屬性選擇器? ??a[href] {color:red;}

希望選擇有某個屬性的元素，不論屬性值是什么键耕，可以使用簡單屬性選擇器寺滚。

還可以根據(jù)多個屬性進行選擇（同時滿足多個屬性），只需將屬性選擇器鏈接在一起即可屈雄。? ??a[href][title] {color:red;}

屬性選擇器在 XML 文檔中相當有用村视，因為 XML 語言主張要針對元素和屬性的用途指定元素名和屬性名。

2）進一步縮小選擇范圍酒奶，只選擇有特定屬性值的元素?

與簡單屬性選擇器類似蚁孔，可以把多個屬性-值選擇器鏈接在一起來選擇一個文檔。

a[] {color: red;}

要求：屬性與屬性值必須完全匹配讥蟆，如果屬性值包含用空格分隔的值列表勒虾，匹配就可能出問題。

3）根據(jù)部分屬性值選擇

p[class~="important"] {color: red;}

部分值屬性選擇器與點號類名記法的區(qū)別：

p.important 和 p[class="important"] 應用到 HTML 文檔時是等價的瘸彤。那么修然，為什么還要有 "~=" 屬性選擇器呢？因為它能用于任何屬性，而不只是 class愕宋。

4）子串匹配屬性選擇器

參考上圖

5）特定屬性選擇類型? ??

*[lang|="en"] {color: red;} 上面這個規(guī)則會選擇 lang 屬性等于 en 或以 en- 開頭的所有元素玻靡。

6、后代選擇器

后代選擇器（descendant selector）又稱為包含選擇器中贝，可以選擇作為某元素后代的元素囤捻。

1）語法解釋? ?h1 em {color:red;}

根據(jù)上下文選擇元素，使樣式在某些文檔結構中起作用邻寿，而在另外一些結構中不起作用蝎土。

在后代選擇器中，規(guī)則（樣式）左邊的選擇器一端包括兩個或多個用空格分隔的選擇器绣否。選擇器之間的空格是一種結合符（combinator）誊涯。每個空格結合符可以解釋為“... 在 ... 找到”、“... 作為 ... 的一部分”蒜撮、“... 作為 ... 的后代”暴构，但是要求必須從右向左讀選擇器。

2）具體應用

假設有一個文檔段磨，其中有一個邊欄取逾，還有一個主區(qū)。邊欄的背景為藍色苹支，主區(qū)的背景為白色砾隅，這兩個區(qū)都包含鏈接列表。不能把所有鏈接都設置為藍色沐序，因為這樣一來邊欄中的藍色鏈接都無法看到琉用。

注意：后代選擇器有一個易被忽視的方面，即兩個元素之間的層次間隔可以是無限的策幼。

7邑时、子元素選擇器

h1>strong {color:red;}? ??子結合符（大于符號）兩邊可以有空白符，這是可選的特姐。

與后代選擇器相比晶丘，子元素選擇器（Child selectors）只能選擇作為某元素子元素的元素。不可隔代

結合后代選擇器和子選擇器? ?table.company td > p

8唐含、相鄰兄弟選擇器

相鄰兄弟選擇器（Adjacent sibling selector）可選擇緊接在另一元素后的元素浅浮，且二者有相同父元素。

h1 + p {margin-top:50px;}??相鄰兄弟選擇器使用了加號（+）捷枯，即相鄰兄弟結合符（Adjacent sibling combinator）滚秩。

注釋：與子結合符一樣，相鄰兄弟結合符旁邊可以有空白符淮捆。用一個結合符只能選擇兩個相鄰兄弟中的第二個元素郁油。

相鄰兄弟結合符還可以結合其他結合符：html > body table + ul {margin-top:20px;}??選擇緊接在 table 元素后出現(xiàn)的所有兄弟 ul 元素本股，該 table 元素包含在一個 body 元素中，body 元素本身是 html 元素的子元素桐腌。

9拄显、偽類(Pseudo-classes)

CSS 偽類用于向某些選擇器添加特殊的效果。

1)偽類的語法

? selector : pseudo-class {property: value}

CSS 類也可與偽類搭配使用：? ? selector.class : pseudo-class {property: value}

2）錨偽類

在支持 CSS 的瀏覽器中案站，鏈接的不同狀態(tài)都可以不同的方式顯示躬审，這些狀態(tài)包括：活動狀態(tài)，已被訪問狀態(tài)蟆盐，未被訪問狀態(tài)承边，和鼠標懸停狀態(tài)。

a:link {color: #FF0000} /* 未訪問的鏈接 */

a:visited {color: #00FF00} /* 已訪問的鏈接 */

a:hover {color: #FF00FF} /* 鼠標移動到鏈接上 */

a:active {color: #0000FF} /* 選定的鏈接 */

a:hover 必須被置于 a:link 和 a:visited 之后石挂，a:active 必須被置于 a:hover 之后炒刁，才是有效的。偽類名稱對大小寫不敏感誊稚。

3）CSS2 - :first-child 偽類

使用 :first-child 偽類來選擇元素的第一個子元素。

作為第一個元素的元素包括第一個 p罗心、第一個 li 和 strong 和 em 元素里伯。

p:first-child {font-weight: bold;}將作為某元素第一個子元素的所有 p 元素設置為粗體

li:first-child {text-transform:uppercase;}將作為某個元素（在 HTML 中，這肯定是 ol 或 ul 元素）第一個子元素的所有 li 元素變成大寫渤闷。

p:first-child i{ color:blue; }選擇器匹配所有作為元素的第一個子元素的 <p> 元素中的所有 <i> 元素

注釋：必須聲明 <!DOCTYPE>疾瓮，這樣 :first-child 才能在 IE 中生效。

4）CSS2 - :lang 偽類

:lang 偽類可為不同的語言定義特殊的規(guī)則飒箭。

body部分：<p>文字<q lang="no">段落中的引用的文字</q>文字</p>

q:lang(no){ quotes: "~" "~" }? ? :lang 類為屬性值為 no 的 q 元素定義引號的類型狼电。

10、偽元素(Pseudo-elements)

CSS 偽元素用于向某些選擇器設置特殊效果弦蹂。

1）語法

selector:pseudo-element {property:value;}

CSS 類也可以與偽元素配合使用：

selector.class:pseudo-element {property:value;}

可以結合多個偽元素來使用肩碟。

2）:first-line 偽元素

"first-line" 偽元素用于向文本的首行設置特殊樣式。

注釋："first-line" 偽元素只能用于塊級元素凸椿∠髌恚可應用于 "first-line" 偽元素的屬性：font、color脑漫、background髓抑、word-spacing、letter-spacing优幸、text-decoration吨拍、vertical-align、text-transform网杆、line-height羹饰、clear

3）:first-letter 偽元素

"first-letter" 偽元素用于向文本的首字母設置特殊樣式伊滋。

注釋："first-letter" 偽元素只能用于塊級元素⊙侠铮可應用于 "first-letter" 偽元素的屬性font新啼、color、background刹碾、margin燥撞、padding、border迷帜、text-decoration物舒、vertical-align (僅當 float 為 none 時)、text-transform戏锹、line-height冠胯、float、clear

4）CSS2 - :before 偽元素

":before" 偽元素可以在元素的內(nèi)容前面插入新內(nèi)容锦针。

5）CSS2 - :after 偽元素

":after" 偽元素可以在元素的內(nèi)容之后插入新內(nèi)容荠察。

六、CSS高級樣式

1奈搜、CSS 水平對齊

對齊塊元素（占據(jù)全部可用寬度的元素悉盆，并且在其前后都會換行）

1）margin屬性

把左和右外邊距設置為 auto，規(guī)定的是均等地分配可用的外邊距馋吗，結果就是居中的元素焕盟。如果寬度是 100%，則對齊沒有效果宏粤。

注釋：除非已經(jīng)聲明了 !DOCTYPE脚翘，否則使用 margin:auto 在 IE8 以及更早的版本中是無效的。

2）position屬性

position:absolute;? 使用絕對定位（絕對定位元素會被從正常流中刪除绍哎，并且能夠交疊元素来农。）

當像對齊元素時，對 <body> 元素的外邊距和內(nèi)邊距進行預定義可以避免在不同的瀏覽器中出現(xiàn)可見的差異蛇摸。

注釋：當使用 position 屬性時备图，請始終設置 !DOCTYPE 聲明。

3）float屬性

當使用 float 屬性時赶袄，IE8 以及更早的版本存在一個問題揽涮。如果省略 !DOCTYPE 聲明，那么 IE8 以及更早的版本會在右側增加 17px 的外邊距饿肺。這似乎是為滾動條預留的空間蒋困。當使用 float 屬性時，請始終設置 !DOCTYPE 聲明敬辣。

2雪标、CSS 尺寸 (Dimension)

CSS 尺寸 (Dimension) 屬性允許你控制元素的高度和寬度零院。同樣，它允許你增加行間距村刨。

圖像高度告抄、寬度均支持像素值和百分比，行間距支持像素值嵌牺、百分比和數(shù)字打洼。

3、分類?(Classification)

CSS 分類屬性允許你規(guī)定如何以及在何處顯示元素逆粹。

4募疮、導航欄= 鏈接列表

導航欄需要標準的 HTML 作為基礎，因此使用 <ul> 和 <li> 元素是非常合適的僻弹。

list-style-type:none - 刪除圓點阿浓。導航欄不需要列表項標記。

1）垂直導航欄

display:block - 把鏈接顯示為塊元素可使整個鏈接區(qū)域可點擊（不僅僅是文本）蹋绽，同時也允許我們規(guī)定寬度芭毙。

需要規(guī)定 寬度,因為塊元素默認占用全部可用寬度。

2）水平導航欄

使用行內(nèi)或浮動列表項兩種方法卸耘，如果希望鏈接擁有相同的尺寸稿蹲，就必須使用浮動方法。

①行內(nèi)列表項

構建水平導航欄的方法之一是將 <li> 元素規(guī)定為行內(nèi)元素

display:inline;? ? <li> 元素是塊元素鹊奖。在這里，我們?nèi)コ嗣總€列表項前后的換行涂炎，以便讓它們在一行中顯示忠聚。

②對列表項進行浮動

為了讓所有鏈接擁有相等的寬度，浮動 <li> 元素并規(guī)定 <a> 元素的寬度：

li{float:left;}? ? ? ? ? ? ? ? ? ?使用 float 來把塊元素滑向彼此唱捣。

a{display:block;width:60px;}

5两蟀、圖片庫

CSS 可用來創(chuàng)建圖片庫。

圖片鏈接盒子浮動排列震缭，其中text-align：center

6赂毯、圖片透明

1）定義透明效果

IE9, Firefox, Chrome, Opera 和 Safari 使用屬性 opacity 來設定透明度。opacity 屬性能夠設置的值從 0.0 到 1.0拣宰。值越小党涕，越透明。

IE8 以及更早的版本使用濾鏡 filter:alpha(opacity=x)巡社。x 能夠取的值從 0 到 100膛堤。值越小，越透明晌该。

2）圖像透明度——hover效果

img:hover{opacity:1.0;filter:alpha(opacity=100);}當指針移動到圖像上時肥荔，圖像不透明绿渣。

3）圖像透明框中的文本

創(chuàng)建一個 div 元素 (class="background")，設置高度和寬度燕耿、背景圖像中符，以及邊框。然后在第一個 div 內(nèi)創(chuàng)建稍小的 div (class="transbox")誉帅，有固定的寬度淀散、背景色和邊框 - 并且它是透明的。在透明 div 內(nèi)部堵第，在 p 元素中加入文本吧凉。

7、媒介類型

媒介類型(Media Types)允許你定義以何種媒介來提交文檔踏志。文檔可以被顯示在顯示器阀捅、紙媒介或者聽覺瀏覽器等等。

媒介類型名稱對大小寫不敏感

?@media screen{p.test {font-family:verdana,sans-serif; font-size:14px}}

@media 規(guī)則使你有能力在相同的樣式表中针余，使用不同的樣式規(guī)則來針對不同的媒介饲鄙。

8、注意事項和總結

Internet Explorer Behaviors

Internet Explorer 5 引入了行為 (behaviors)圆雁。behaviors 是一種通過使用 CSS 向 HTML 元素添加行為的方法忍级。只有 Internet Explorer 支持 behavior 屬性。因此需要使用 JavaScript 和 HTML DOM 取而代之伪朽。

接下來學習：JavaScript? ? XHTML? ? HTML5? ? css3