第4章 CSS樣式表

1、第第4章章 CSS樣式表樣式表 第第4章章 CSS樣式表樣式表l CSS入門入門l CSS詳解詳解l 創(chuàng)建和應(yīng)用創(chuàng)建和應(yīng)用CSS開(kāi)開(kāi) 始始 CSS是Cascading Style Sheets（層疊樣式表）的簡(jiǎn)稱。CSS的基本概念在于可將網(wǎng)頁(yè)要展示的內(nèi)容與樣式設(shè)定分開(kāi)，也就是將網(wǎng)頁(yè)的外觀設(shè)定信息從網(wǎng)頁(yè)內(nèi)容獨(dú)立出來(lái)，并集中管理。這樣，當(dāng)要改變網(wǎng)頁(yè)外觀時(shí)，只需更改樣式設(shè)定的部分，HTML文件本身并不需要更改。 本章主要內(nèi)容：本章主要內(nèi)容：第第4章章 CSS樣式表樣式表 4.1.1 “CSS樣式樣式”面板面板4.1.2 定義定義CSS樣式樣式4.1.3 在網(wǎng)頁(yè)中應(yīng)用在網(wǎng)頁(yè)中應(yīng)用CSS樣式樣式返回本章

2、首頁(yè)返回本章首頁(yè)4.1 CSS入門述入門述 CSS是W3C定義和維護(hù)的標(biāo)準(zhǔn)，是一種用來(lái)為結(jié)構(gòu)化文檔（如HTML文檔或XML應(yīng)用）添加樣式（字體、間距和顏色等）的計(jì)算機(jī)語(yǔ)言。它可以使網(wǎng)頁(yè)制作者的工作更加輕松和靈活，現(xiàn)在越來(lái)越多的網(wǎng)站采用了CSS技術(shù)。 第第4章章 CSS樣式表樣式表 4.1.1 “CSS樣式樣式”面板面板返回本節(jié)返回本節(jié) 在Dreamweaver中，“CSS樣式”面板是新建、編輯、管理CCS的主要工具。選擇“窗口”|“CSS樣式”命令可以打開(kāi)或者關(guān)閉“CSS樣式”面板。 在沒(méi)有定義CSS前，“CSS樣式”面板是空白的。如果在Dreamweaver中定義了CSS，那么“CSS樣式”

3、面板中會(huì)顯示所定義好的CSS規(guī)則。 樣式表文件名CSS規(guī)則列表屬性和屬性值列表工具按鈕欄圖4-1 “CSS樣式”面板第第4章章 CSS樣式表樣式表 4.1.2 定義定義CSS樣式樣式返回本節(jié)返回本節(jié) 在【CSS樣式】面板上，單擊【新建CSS規(guī)則】按鈕，會(huì)打開(kāi)如圖4-3所示的【新建CSS規(guī)則】對(duì)話框。 圖4-3 【新建CSS規(guī)則】對(duì)話框 1 1【定義在定義在】選項(xiàng)選項(xiàng) 【定義在】選項(xiàng)包括兩個(gè)單選項(xiàng)，分別介紹如下。 （1）【新建樣式表文件】：此選項(xiàng)將會(huì)把設(shè)定的樣式最終保存在一個(gè)外部單獨(dú)的樣式表文件中，這個(gè)樣式表文件可以被其他HTML文件共同使用，也就是說(shuō)可以使站點(diǎn)內(nèi)的所有頁(yè)面文件使用同一個(gè)樣式表文

4、件，甚至不同的站點(diǎn)只要是網(wǎng)頁(yè)就可以使用。 （2）【僅對(duì)該文檔】：此選項(xiàng)將會(huì)把設(shè)定的樣式僅僅放在當(dāng)前文件的頭文件中，這些樣式只能在此文件中使用。 專家點(diǎn)撥：專家點(diǎn)撥：根據(jù)運(yùn)用CSS的范圍是局限于當(dāng)前網(wǎng)頁(yè)內(nèi)部還是可以運(yùn)用到其他網(wǎng)頁(yè)文件，可以分為“內(nèi)聯(lián)樣式表”和“外部樣式表”?！皟?nèi)聯(lián)樣式表”是將CSS規(guī)則定義在HTML網(wǎng)頁(yè)文檔內(nèi)部。 “外部樣式表”是將CSS規(guī)則定義在一個(gè)獨(dú)立的外部樣式表文件（擴(kuò)展名為.css）中。 第第4章章 CSS樣式表樣式表 4.1.2 定義定義CSS樣式樣式返回本節(jié)返回本節(jié) 【選擇器類型】選項(xiàng)包括3個(gè)單選項(xiàng)，分別介紹如下。 （1）【類（可應(yīng)用于任何標(biāo)簽）】：選擇此類型后，需要

5、在上方的【名稱】文本框中填入一個(gè)樣式名字，需要注意的是，此類名稱必須以“.”開(kāi)頭。這種方式定義的樣式可以用來(lái)定義絕大多數(shù)的HTML對(duì)象，可以使這些對(duì)象有統(tǒng)一的外觀。如圖4-4所示是創(chuàng)建一個(gè).mystyle的樣式。圖4-4 創(chuàng)建mystyle樣式 第第4章章 CSS樣式表樣式表 4.1.2 定義定義CSS樣式樣式返回本節(jié)返回本節(jié) 專家點(diǎn)撥：專家點(diǎn)撥：如果在【定義在】選項(xiàng)中選擇的是【新建樣式表文件】，那么單擊【確定】按鈕后會(huì)彈出【保存樣式表文件為】對(duì)話框，在其中選擇要保存到的目錄，輸入文件名，單擊【保存】按鈕后進(jìn)入【.mystyle的CSS規(guī)則定義】對(duì)話框。在其中可以定義【類型】、【背景】、【區(qū)塊

6、】、【方框】、【邊框】、【列表】、【定位】、【擴(kuò)展】等屬性。 （2）【標(biāo)簽（重新定義特定標(biāo)簽的外觀）】：選擇此選項(xiàng)后，在【標(biāo)簽】下拉框里選擇需要重新定義的HTML標(biāo)簽。 （3）【高級(jí)（ID、偽類選擇器等）】：重新定義特定元素組合的格式，或其他CSS允許的選擇器表單的格式（例如，每當(dāng)h2標(biāo)題出現(xiàn)在表格單元格內(nèi)時(shí)，就會(huì)應(yīng)用選擇器td h2）。還可以重定義包含特定id屬性的標(biāo)簽的格式（例如，由#myStyle定義的樣式可以應(yīng)用于所有包含屬性/值對(duì)id=myStyle的HTML標(biāo)簽）。另外，這個(gè)選項(xiàng)還可以設(shè)定鏈接文本的樣式。 第第4章章 CSS樣式表樣式表 返回本節(jié)返回本節(jié) 定義完樣式表文件后，就可以

7、在Dreamweaver中套用這些樣式了。套用樣式表的方法主要有3種，下面分別進(jìn)行介紹。 1 1在在【屬性屬性】面板選擇應(yīng)用樣式面板選擇應(yīng)用樣式 在網(wǎng)頁(yè)中選中需要應(yīng)用樣式的元素，打開(kāi)【屬性】面板，單擊打開(kāi)【樣式】右邊的下拉列表框，里面列出了已經(jīng)定義的一些CSS樣式。如圖4-8所示。4.1.3 在網(wǎng)頁(yè)中應(yīng)用在網(wǎng)頁(yè)中應(yīng)用CSS樣式樣式圖4-8 【屬性】面板中的“樣式”列表框 2 2利用利用【標(biāo)簽選擇器標(biāo)簽選擇器】選擇樣式選擇樣式 首先需要在【標(biāo)簽選擇器】上選定一個(gè)標(biāo)簽，如圖4-9中的標(biāo)簽，然后在標(biāo)簽上右擊，在彈出的快捷菜單中選擇【設(shè)置類】|【mycss】，則可以快速把已經(jīng)定義的mycss樣式類指定

8、給標(biāo)簽。 圖4-9 利用【標(biāo)簽選擇器】應(yīng)用樣式 第第4章章 CSS樣式表樣式表 返回本節(jié)返回本節(jié) 3 3使用右鍵快捷菜單使用右鍵快捷菜單也可以從右鍵快捷菜單中直接給對(duì)象指定一個(gè)樣式，首先選中需要應(yīng)用樣式的對(duì)象，在右鍵快捷菜單中指定樣式類。如圖4-10所示。 4.1.3 在網(wǎng)頁(yè)中應(yīng)用在網(wǎng)頁(yè)中應(yīng)用CSS樣式樣式圖4-10 從右鍵快捷菜單中直接給對(duì)象指定樣式 4 4清除樣式清除樣式 如果想清除應(yīng)用的樣式，首先選中對(duì)象，然后從右鍵快捷菜單中選擇“無(wú)”，即可清除原有的樣式。需要提醒注意的是，這里的清除樣式并不是將定義的樣式完全刪除，而是網(wǎng)頁(yè)中的某個(gè)對(duì)象不再使用這個(gè)樣式了。 第第4章章 CSS樣式表樣式表

9、 返回本章首頁(yè)返回本章首頁(yè)4.2 CSS樣式詳解樣式詳解 在Dreamweaver的CSS樣式里包含了W3C規(guī)范定義的所有CSS1的屬性，Dreamweaver把這些屬性分為Type（類型）、Background（背景）、Block（塊）、Box（盒子）、Border（邊框）、List（列表）、Positioning（定位）、Extensions（擴(kuò)展）8個(gè)部分，如圖4-11所示。 圖4-11 CSS規(guī)則定義 4.2.1 4.2.1 類型類型4.2.2 4.2.2 背景背景4.2.3 4.2.3 區(qū)塊區(qū)塊4.2.4 4.2.4 方框方框4.2.5 4.2.5 邊框邊框4.2.6 4.2.6 列

10、表列表4.2.7 4.2.7 定位定位4.2.8 4.2.8 擴(kuò)展擴(kuò)展第第4章章 CSS樣式表樣式表 4.2.1 類型類型返回本節(jié)返回本節(jié) 類型選項(xiàng)主要是對(duì)文字的字體大小、顏色、效果等基本樣式進(jìn)行設(shè)置，如圖4-11所示。只對(duì)要改變的屬性進(jìn)行設(shè)置，沒(méi)有必要改變的屬性就使之為空。 1 1字體字體 字體系列是指對(duì)文字設(shè)定幾個(gè)字體，當(dāng)遇到第一個(gè)字體不能顯示時(shí)會(huì)自動(dòng)用系列中的第二個(gè)字體或后面的字體顯示。相對(duì)應(yīng)的CSS屬性是font-family。 大小大小 可以通過(guò)選取數(shù)字和度量單位來(lái)選擇具體的字體大小，或者也可以選擇一個(gè)相對(duì)的字體大小。最好使用像素作為單位，這樣不會(huì)在瀏覽器中文本變形。一般小字體用比較

11、標(biāo)準(zhǔn)的12像素。相對(duì)應(yīng)的CSS屬性是font-size。 3 3樣式樣式 定義字體樣式為“正?！?、“斜體”或“偏斜體”。默認(rèn)設(shè)置為正常。相對(duì)應(yīng)的CSS屬性是font-style?！靶斌w”和“偏斜體”都是斜體字體。而它們不同的是，“斜體”是斜體字，而“偏斜體”是傾斜的文字，對(duì)于沒(méi)有斜體的字體應(yīng)該用“偏斜體”。 4 4行高行高 設(shè)置文本所在行的行高。默認(rèn)為正常，也可以自己鍵入一個(gè)精確的數(shù)值并選取一個(gè)計(jì)量單位。比較直觀的寫法用百分比，例如140%是指行高等于文字大小的1.4倍。相對(duì)應(yīng)CSS屬性是line-height。 5 5修飾修飾向文本中添加下劃線、上劃線或刪除線，或使文本閃爍。常規(guī)文本的默認(rèn)設(shè)

12、置是“無(wú)”。鏈接的默認(rèn)設(shè)置是“下劃線”。將鏈接設(shè)置設(shè)為無(wú)時(shí)，可以通過(guò)定義一個(gè)特殊的類去除鏈接中的下劃線。這些效果可以同時(shí)存在，將效果前的復(fù)選框選定即可。相對(duì)應(yīng)的CSS屬性是text-decoration。 第第4章章 CSS樣式表樣式表 4.2.1 類型類型返回本節(jié)返回本節(jié) 6粗細(xì)粗細(xì) 對(duì)字體應(yīng)用特定或相對(duì)的粗體量。“正?！钡扔?00；“粗體”等于700。相對(duì)應(yīng)的CSS屬性是font-weight。 7變體變體 設(shè)置文本的小型大寫字母變體。Dreamweaver不在“文檔編輯區(qū)”中顯示此屬性。Internet Explorer支持變體屬性，但Navigator不支持。相對(duì)應(yīng)的CSS屬性是fon

13、t-variant。 8大小寫大小寫 將選區(qū)中每個(gè)單詞的第一個(gè)字母轉(zhuǎn)為大寫，或者令單詞全部大寫或全部小寫。相對(duì)應(yīng)的CSS屬性是 text-transform。 9顏色顏色 定義文字顏色。相對(duì)應(yīng)的CSS屬性是color。CSS中顏色的值有3種表示方法。 #RRGGBB格式，是由紅綠藍(lán)三種顏色的值組合，每種顏色的值為“00FF”的兩位十六進(jìn)制正整數(shù)。例如，#FF0000表示紅色，#FFFF00表示黃色。 RGB格式，RGB為三色的值，取0255，例如，RGB（255,0,0）表示紅色，RGB（255,255,0）表示黃色。 用顏色名稱。CSS可以使用已經(jīng)定義好的顏色名稱。例如，red表示紅色，ye

14、llow表示黃色。 第第4章章 CSS樣式表樣式表 4.2.2 背景背景返回本節(jié)返回本節(jié) 背景選項(xiàng)主要是對(duì)元素的背景進(jìn)行設(shè)置，包括背景顏色、背景圖像、背景圖像的控制。如圖4-12所示。一般是對(duì)BODY（頁(yè)面）、TABLE（表格）、DIV（區(qū)域）的設(shè)置。圖4-12 背景選項(xiàng) 1 1背景顏色背景顏色 設(shè)置元素的背景色。相對(duì)應(yīng)的CSS屬性是background-color?？梢詥螕簟邦伾卑粹o打開(kāi)調(diào)色板，然后在其中選擇需要的顏色?；蛘咧苯釉谖谋究蛑休斎腩伾a。 2 2背景圖像背景圖像 設(shè)置元素的背景圖像。相對(duì)應(yīng)的CSS屬性是background-image。可以單擊“瀏覽”按鈕打開(kāi)“選擇圖像源文件

15、”對(duì)話框，在其中選擇需要的圖像文件?；蛘咧苯釉谖谋究蛑休斎雸D像文件的完整路徑。 第第4章章 CSS樣式表樣式表 4.2.2 背景背景返回本節(jié)返回本節(jié) 3 3重復(fù)重復(fù) 確定背景圖像是否以及如何重復(fù)。相對(duì)應(yīng)的CSS屬性是background-repeat。在下拉列表中包括4個(gè)選項(xiàng)。 不重復(fù)：在元素的開(kāi)頭顯示一遍圖像。 重復(fù)：在元素的背景部分水平和垂直方向平鋪圖像。 橫向重復(fù)：在水平和垂直方向重復(fù)顯示。 縱向重復(fù)：在垂直方向重復(fù)顯示。 4 4附件附件 確定背景圖像是固定在其原始位置還是隨內(nèi)容一起滾動(dòng)。注意，某些瀏覽器可能將“固定”選項(xiàng)視為“滾動(dòng)”。Internet Explorer支持該選項(xiàng)，但Ne

16、tscape Navigator不支持。相對(duì)應(yīng)的CSS屬性是background-attachment。 5 5水平位置水平位置 指定背景圖像相對(duì)于元素的水平位置。相對(duì)應(yīng)的CSS屬性是background-position。在下拉列表中可以指定為left（左邊），center（居中），right（右邊）；也可以在文本框中直接輸入數(shù)值，如20px是指背景距離左邊20象素。 6 6垂直位置垂直位置 指定背景圖像相對(duì)于元素的垂直位置。相對(duì)應(yīng)的CSS屬性是background-position。在下拉列表中可以指定為top（頂部），center（居中），bottom（底部）；也可以在文本框中直接輸入數(shù)

17、值。 第第4章章 CSS樣式表樣式表 4.2.3 區(qū)塊區(qū)塊返回本節(jié)返回本節(jié) 區(qū)塊選項(xiàng)主要是設(shè)置對(duì)象文本文字間距、對(duì)齊方式、上標(biāo)、下標(biāo)、排列方式、首行縮進(jìn)等。如圖4-13所示。圖4-13 區(qū)塊選項(xiàng) 第第4章章 CSS樣式表樣式表 4.2.3 區(qū)塊區(qū)塊返回本節(jié)返回本節(jié) 區(qū)塊選項(xiàng)主要是設(shè)置對(duì)象文本文字間距、對(duì)齊方式、上標(biāo)、下標(biāo)、排列方式、首行縮進(jìn)等。如圖4-13所示。 1 1單詞間距單詞間距設(shè)置單詞之間的間距。若要設(shè)置特定的值，請(qǐng)?jiān)谙吕斜碇羞x擇“值”，然后輸入一個(gè)數(shù)值。在第二個(gè)下拉列表中選擇度量單位（例如像素、點(diǎn)等）。相對(duì)應(yīng)的CSS屬性是word-spacing。可以指定負(fù)值，但顯示方式取決于瀏覽

18、器。Dreamweaver不在“文檔”窗口中顯示此屬性。 2 2字母間距字母間距設(shè)置字符之間的間距?？梢灾付ㄘ?fù)值。因?yàn)橹形囊彩亲址?，這個(gè)參數(shù)可以設(shè)置文字間的間距。相對(duì)應(yīng)的CSS屬性是letter-spacing。 3 3垂直對(duì)齊垂直對(duì)齊指定元素的垂直對(duì)齊方式?？梢灾付╯ub（下標(biāo)）、super上標(biāo)）、top（與頂端對(duì)齊）、middle（居中）、bottom（與底端對(duì)齊）等。相對(duì)應(yīng)的CSS屬性是vertical-align。第第4章章 CSS樣式表樣式表 4.2.3 區(qū)塊區(qū)塊返回本節(jié)返回本節(jié) 4 4文本對(duì)齊文本對(duì)齊 設(shè)置文本的排列方式。下拉列表中包括Left（左對(duì)齊）、right（右對(duì)齊）、ce

19、nter（居中）、justify（兩端對(duì)齊）。相對(duì)應(yīng)的CSS屬性是text-align。 5 5文本縮進(jìn)文本縮進(jìn) 設(shè)置文本第一行的縮進(jìn)值。負(fù)值用于將文本第一行向外拉。要在每段前空兩格，可設(shè)置為2em，因?yàn)閑m是當(dāng)前字體尺寸，2em就是兩個(gè)字的大小。相對(duì)應(yīng)的CSS屬性是text-indent。 6 6空格空格 設(shè)置如何處理元素內(nèi)的空白符。相對(duì)應(yīng)的CSS屬性是white-space。下拉列表中包括“正?！薄ⅰ氨Ａ簟焙汀安粨Q行”3個(gè)選項(xiàng)?！罢！保簳?huì)將空白符全部壓縮；“保留”：如同處理pre標(biāo)簽內(nèi)的文本一樣處理這些空白符（也就是說(shuō)，所有的空白符，包括空格，標(biāo)簽，回車，等都會(huì)得以保留）；“不換行”：指

20、定文本只有遇到br標(biāo)簽時(shí)才換行。 7 7顯示顯示 指定是否以及如何顯示元素?！盁o(wú)”指定到某個(gè)元素時(shí)，它將禁用該元素的顯示。 第第4章章 CSS樣式表樣式表 4.2.4 方框方框返回本節(jié)返回本節(jié) 方框選項(xiàng)主要設(shè)置對(duì)象的邊界、間距、高度、寬度、和漂浮方式等。如圖4-14所示。 圖4-14 方框選項(xiàng)第第4章章 CSS樣式表樣式表 4.2.4 方框方框返回本節(jié)返回本節(jié) 1 1寬寬 定義元素的寬。相對(duì)應(yīng)的CSS屬性是width。在下拉列表中包括自動(dòng)和值兩個(gè)選項(xiàng)。 選擇“值”這個(gè)選項(xiàng)后，可以在文本框中輸入具體的數(shù)值，并且再后面的下拉列表中選擇一個(gè)單位。 2 2高高 定義元素的高。相對(duì)應(yīng)的CSS屬性是hei

21、ght。在下拉列表中包括自動(dòng)和值兩個(gè)選項(xiàng)。 選擇“值”這個(gè)選項(xiàng)后，可以在文本框中輸入具體的數(shù)值，并且再后面的下拉列表中選擇一個(gè)單位。 3 3浮動(dòng)浮動(dòng) 定義元素的漂浮方式。下拉列表中包括左對(duì)齊、右對(duì)齊和無(wú)。相對(duì)應(yīng)的CSS屬性是float。 第第4章章 CSS樣式表樣式表 4.2.4 方框方框返回本節(jié)返回本節(jié) 4 4清除清除 定義不允許AP元素的邊。如果清除邊上出現(xiàn)AP元素，則帶清除設(shè)置的元素將移到該元素的下方。相對(duì)應(yīng)的CSS屬性是clear。 5 5填充填充定義元素內(nèi)容與其邊框的空距（如果元素沒(méi)有邊框就是指頁(yè)邊的空白）?？梢苑謩e設(shè)置top（上補(bǔ)白）、right（右補(bǔ)白）、bottom（下補(bǔ)白）、

22、left（左補(bǔ)白）的值。相對(duì)應(yīng)的CSS屬性分別是padding-top、 padding-right、padding-bottom、padding-left。如果勾選“全部相同”復(fù)選框，則為應(yīng)用此屬性的元素的“上”、“右”、“下”和“左”設(shè)置相同的填充屬性。 6 6邊界邊界 定義元素的邊框與其他元素之間的距離（如果沒(méi)有邊框就是指內(nèi)容之間的距離）?？梢苑謩e設(shè)置top（上邊界）、right（右邊界）、bottom（下邊界）、left（左邊界）的值。相對(duì)應(yīng)的CSS屬性分別是margin-top、margin-right、 margin-bottom、margin-left。如果勾選“全部相同”復(fù)選框

23、，則為應(yīng)用此屬性的元素的“上”、“右”、“下”和“左”設(shè)置相同的邊界屬性。 第第4章章 CSS樣式表樣式表 4.2.5 邊框邊框返回本節(jié)返回本節(jié)邊框選項(xiàng)可以設(shè)置對(duì)象邊框的寬度、顏色及樣式。如圖4-15所示。圖4-15 邊框選項(xiàng) 1 1樣式樣式 設(shè)置邊框樣式?？梢栽O(shè)置為none（無(wú)邊框）、dotted（點(diǎn)劃線）、dashed（虛線）、solid（實(shí)線）、double（雙線）、groove（槽狀）、ridge（脊?fàn)睿?、inset（凹陷）、outset（凸出）等邊框樣式。相對(duì)應(yīng)的CSS屬性是border-style。 專家點(diǎn)撥：專家點(diǎn)撥：dotted（點(diǎn)劃線）、dashed（虛線）必須要IE5.5以

24、上或者M(jìn)AC平臺(tái)支持，否則效果為實(shí)線。如果勾選“全部相同”復(fù)選框，為應(yīng)用此屬性的元素的“上”、“右”、“下”和“左”設(shè)置相同的邊框樣式屬性。 第第4章章 CSS樣式表樣式表 4.2.5 邊框邊框返回本節(jié)返回本節(jié) 2 2寬度寬度 設(shè)置元素邊的寬度?？梢苑謩e設(shè)定Top（上邊寬）、Right（右邊寬）、Bottom（下邊寬）、Left（左邊寬）的值。相對(duì)應(yīng)的CSS屬性分別是border-top、border-right、border-bottom、border-left。如果勾選“全部相同”復(fù)選框，為應(yīng)用此屬性的元素的“上”、“右”、“下”和“左”設(shè)置相同的邊框?qū)挾葘傩浴?3 3顏色顏色 設(shè)置邊框的

25、顏色?？梢苑謩e對(duì)每條邊設(shè)置顏色。相對(duì)應(yīng)的CSS屬性分別是border-top-color、border-right-color、 border-bottom-color、border-left-color?？梢酝ㄟ^(guò)設(shè)置不同的顏色做出亮邊和暗邊的效果，這樣元素看起來(lái)是立體的。如果勾選“全部相同”復(fù)選框，為應(yīng)用此屬性的元素的“上”、“右”、“下”和“左”設(shè)置相同的邊框顏色屬性。 第第4章章 CSS樣式表樣式表 4.2.6 列表列表返回本節(jié)返回本節(jié) 列表選項(xiàng)可以設(shè)置列表項(xiàng)樣式、列表項(xiàng)圖片和位置。如圖4-16所示。圖4-16 列表選項(xiàng) 1 1類型類型 設(shè)置列表項(xiàng)所使用的預(yù)設(shè)標(biāo)記?？梢栽O(shè)置的樣式有：di

26、sc（實(shí)心圓）、circle（空心圓）、square（方塊）、decimal（阿拉伯?dāng)?shù)字）、lower-roman（小寫羅馬數(shù)字）、upper-roman（大寫羅馬數(shù)字）、lower-alpha（小寫英文字母）、upper-alpha（大寫英文字母）、none（無(wú)項(xiàng)目符號(hào)）。相對(duì)應(yīng)的CSS屬性是list-style-type。 第第4章章 CSS樣式表樣式表 4.2.6 列表列表返回本節(jié)返回本節(jié) 2 2項(xiàng)目符號(hào)圖像項(xiàng)目符號(hào)圖像 設(shè)置列表項(xiàng)的圖像。相對(duì)應(yīng)CSS屬性是list-style-image?？梢栽谖谋究蛑兄苯虞斎雸D像URL地址或路徑?；蛘邌螕簟盀g覽”按鈕，在彈出的“選項(xiàng)圖像源文件”對(duì)話框

27、中選擇需要的圖像文件。 3 3位置位置 設(shè)置列表項(xiàng)在文本內(nèi)還是在文本外。相對(duì)應(yīng)的CSS屬性是list-style-position。下拉列表中包括兩個(gè)選項(xiàng)。 內(nèi)：列表項(xiàng)目標(biāo)記放置在文本以內(nèi)。 外：列表項(xiàng)目標(biāo)記放置在文本以外。 第第4章章 CSS樣式表樣式表 4.2.7 定位定位返回本節(jié)返回本節(jié) 定位選項(xiàng)中的CSS屬性用來(lái)確定與選定的CSS樣式相關(guān)的內(nèi)容在頁(yè)面上的定位方式。如圖4-17所示。這就相當(dāng)于對(duì)象放在一個(gè)AP元素里來(lái)定位，它相當(dāng)于HTML的DIV標(biāo)記。可以把定義看作為一個(gè)CSS定義的AP元素。 圖4-17 定位選項(xiàng)第第4章章 CSS樣式表樣式表 4.2.7 定位定位返回本節(jié)返回本節(jié) 1

28、1類型類型 設(shè)定對(duì)象的定位方式。相對(duì)應(yīng)的CSS屬性是position。有4種方式可供選擇，如下所述。 絕對(duì)：使用“定位”文本框中輸入的、相對(duì)于最近的絕對(duì)或相對(duì)定位上級(jí)元素的坐標(biāo)（如果不存在絕對(duì)或相對(duì)定位的上級(jí)元素，則為相對(duì)于頁(yè)面左上角的坐標(biāo)）來(lái)放置內(nèi)容。 相對(duì)：使用“定位”文本框中輸入的、相對(duì)于區(qū)塊在文檔文本流中的位置的坐標(biāo)來(lái)放置內(nèi)容區(qū)塊。例如，若為元素指定一個(gè)相對(duì)位置，并且其上坐標(biāo)和左坐標(biāo)均為20px，則將元素從其在文本流中的正常位置向右和向下移動(dòng)20px。也可以在使用（或不使用）上坐標(biāo)、左坐標(biāo)、右坐標(biāo)或下坐標(biāo)的情況下對(duì)元素進(jìn)行相對(duì)定位，以便為絕對(duì)定位的子元素創(chuàng)建一個(gè)上下文。 固定：使用“定

29、位”文本框中輸入的坐標(biāo)（相對(duì)于瀏覽器的左上角）來(lái)放置內(nèi)容。當(dāng)用戶滾動(dòng)頁(yè)面時(shí)，內(nèi)容將在此位置保持固定。靜態(tài)：將內(nèi)容放在其在文本流中的位置。這是所有可定位的HTML元素的默認(rèn)位置。 第第4章章 CSS樣式表樣式表 4.2.7 定位定位返回本節(jié)返回本節(jié) 2 2顯示顯示 確定內(nèi)容的初始顯示條件。相對(duì)應(yīng)的CSS屬性是visibility。如果不指定“顯示”屬性，則默認(rèn)情況下內(nèi)容將繼承父級(jí)標(biāo)簽的值。body標(biāo)簽的默認(rèn)可見(jiàn)性是可見(jiàn)的?！帮@示”下拉列表中包括3個(gè)選項(xiàng)。繼承（默認(rèn)）：繼承內(nèi)容的父級(jí)可見(jiàn)性屬性?？梢?jiàn)：將顯示內(nèi)容，而與父級(jí)的值無(wú)關(guān)。隱藏：將隱藏內(nèi)容，而與父級(jí)的值無(wú)關(guān)。 3 3Z Z 軸軸確定內(nèi)容的堆

30、疊順序。Z軸值較高的元素顯示在Z軸值較低的元素（或根本沒(méi)有Z 軸值的元素）的上方。值可以為正，也可以為負(fù)。 4 4溢出溢出 確定當(dāng)容器（如DIV或P）的內(nèi)容超出容器的顯示范圍時(shí)的處理方式。“溢出”下拉列表中包括4個(gè)選項(xiàng)。 可見(jiàn)：將增加容器的大小，以使其所有內(nèi)容都可見(jiàn)。容器將向右下方擴(kuò)展。 隱藏：保持容器的大小并剪輯任何超出的內(nèi)容。不提供任何滾動(dòng)條。 滾動(dòng)：將在容器中添加滾動(dòng)條，而不論內(nèi)容是否超出容器的大小。明確提供滾動(dòng)條可避免滾動(dòng)條在動(dòng)態(tài)環(huán)境中出現(xiàn)和消失所引起的混亂。 自動(dòng)：將使?jié)L動(dòng)條僅在容器的內(nèi)容超出容器的邊界時(shí)才出現(xiàn)。第第4章章 CSS樣式表樣式表 4.2.7 定位定位返回本節(jié)返回本節(jié) 5 5定位定位 指定內(nèi)容塊的位置和大小，包括上、下、左、右4個(gè)選項(xiàng)。瀏覽器如何解釋位置取決于“類型”設(shè)置。如果內(nèi)容塊的內(nèi)容超出指定的大小，則將改寫大小值。 位置和大小的默認(rèn)單位是像素。還可以指定以下單位：pc（皮卡）、pt（點(diǎn)）、in（英寸）、mm（毫米）、cm（厘米）、em（全方）、（ex）或%（父級(jí)值的百分比）。單位縮寫字母必須緊跟在值之后，中間不留空格。例如，3mm 。 6 6剪輯剪輯 定義內(nèi)容的可見(jiàn)部分，包括上、下、左、右4個(gè)選項(xiàng)。如果指定了剪輯區(qū)域，可以通過(guò)腳本語(yǔ)言（如JavaScri