Dreamweaver 網(wǎng)頁(yè)設(shè)計(jì)與制作教程 ch06

1、第6章 CSS樣式 本章主要內(nèi)容是CSS樣式的創(chuàng)建方法和它的應(yīng)用， 并就如何編輯CSS樣式中的文字格式、背景格式、文 本塊格式、方框格式、邊框格式、列表格式、定位格 式、擴(kuò)展格式等作了詳細(xì)的講解，最后以一個(gè)實(shí)例說(shuō) 明了如何應(yīng)用CSS樣式對(duì)網(wǎng)頁(yè)進(jìn)行編輯。 6.1 CSS樣式概述 CSS是層疊樣式表（Cascading Style Sheets）的簡(jiǎn) 稱，利用它可以對(duì)網(wǎng)頁(yè)中的文本內(nèi)容進(jìn)行精確的格式化控 制。CSS樣式不僅能夠控制一篇文檔中的文本樣式，而且 通過(guò)采用外部鏈接的方式，還可以控制多篇文檔的文本格 式。對(duì)CSS樣式的定義進(jìn)行修改時(shí)，文檔中所有應(yīng)用該樣 式的文本格式也會(huì)自動(dòng)發(fā)生改變。 CSS

2、樣式通常用名稱或是HTML標(biāo)記來(lái)表示，HTML文 檔中的CSS樣式不僅可以控制大多數(shù)傳統(tǒng)的文本格式屬性， 如字體、字號(hào)和對(duì)齊方式等，還可以定義一些特殊的HTML 屬性，例如定位、特效和鼠標(biāo)輪替等。 CSS樣式的定義代碼一般書(shū)寫(xiě)在HTML文檔的頭部，通 常由一系列樣式的定義組成。它可以應(yīng)用到使用標(biāo)注HTML 標(biāo)記所格式化的文本上，可以定義到通過(guò)class屬性所定義 范圍的文本上，也可以應(yīng)用到其他的那些符合CSS標(biāo)準(zhǔn)規(guī) 范的文本上。 利用Dreamweaver，用戶不需要了解CSS復(fù)雜煩瑣的 語(yǔ)法，就可以創(chuàng)建出具有專(zhuān)業(yè)風(fēng)格的CSS樣式。不僅如此， Dreamweaver還能夠識(shí)別現(xiàn)存文檔中定義的C

3、SS樣式，更 加方便用戶對(duì)現(xiàn)有的文檔進(jìn)行修改。 使用CSS，可以將樣式和結(jié)構(gòu)分離；能以前所未有的能 力控制頁(yè)面的布局；可以制作體積更小下載更快的網(wǎng)頁(yè)；可 以更快更容易地維護(hù)及更新大量的網(wǎng)頁(yè)；還可以使瀏覽器稱 為更友好的界面。 使用CSS樣式的缺點(diǎn)在于，它需要有較高版本的瀏覽器， 使用Internet Explorer 4.0或Netscape Navigator 4.0， 才能夠正確地顯示帶有CSS樣式的網(wǎng)頁(yè)。 就CSS應(yīng)用的形式來(lái)分，CSS一般可以分為兩類(lèi)：嵌入 式，即在獨(dú)立的文檔中應(yīng)用CSS樣式；和外部鏈接式，它可 以應(yīng)用于多個(gè)文檔，生成專(zhuān)門(mén)的*.css文件。 6.2 創(chuàng)建CSS樣式 CS

4、S樣式最大的優(yōu)點(diǎn)是 它具有自動(dòng)更新功能，當(dāng)應(yīng) 用了CSS格式之后，如果不 滿意，僅需要修改CSS樣式 就可以更新所有的應(yīng)用，而 不用像設(shè)置HTML樣式那樣一 個(gè)一個(gè)地修改。 6.2.1 創(chuàng)建新CSS樣式 其操作步驟如下： 1) 在Dreamweaver中，單 擊“窗口”“CSS樣式”， 打開(kāi)CSS 樣式面板如圖6-1 所示。 圖6-1 CSS 樣式面板 2) CSS樣式面板顯示 在設(shè)計(jì)浮動(dòng)面板組，單 擊面板組右上角的“顯 示菜單”按鈕 ，彈 出下拉菜單如圖6-2所 示。 圖6-2 CSS樣式的下拉菜單 3) 從其中選擇“新建”選項(xiàng)卡。或者單擊CSS樣式面 板右下角的【新建CSS樣式】按鈕 ，打

5、開(kāi)如圖6-3所 示的新建樣式對(duì)話框。 圖6-3 新建樣式對(duì)話框 4) 選擇CSS樣式類(lèi)型： “類(lèi)（可應(yīng)用于任何標(biāo)簽）”，可以生成一個(gè)新的樣式 表，制作完畢后可以在樣式面板中看到制作完成的樣式。在 應(yīng)用的時(shí)候，首先在頁(yè)面選中對(duì)象，然后選擇樣式即可。該 類(lèi)型樣式名稱必須以英文句點(diǎn)“.”開(kāi)頭，如果沒(méi)有輸入句點(diǎn)， Dreamweaver會(huì)自動(dòng)添加在“名稱”文本框中。它是唯一 可以被應(yīng)用于文檔中任何文本的樣式類(lèi)型，而不用考慮控制 文本的標(biāo)簽。所以可用于類(lèi)樣式的名稱都將顯示在樣式工具 欄中。 選擇“標(biāo)簽（重新定義特定標(biāo)簽的外觀）”，可以將現(xiàn) 有的標(biāo)簽賦上樣式，制作完畢以后不需要選中對(duì)象就可以直 接應(yīng)用到頁(yè)

6、面上去。 5) 定義一個(gè)外部連接的CSS還是定義一個(gè)僅應(yīng)用于當(dāng)前文 檔的CSS。 “自定義”：定義一個(gè)外部連接的CSS。 “僅僅對(duì)該文檔”：定義的CSS樣式只能在當(dāng)前文檔中 使用。 6) 單擊【確定】按鈕， 出現(xiàn)保存樣式表對(duì)話 框，如圖6-4所示。 圖6-4 保存樣式表 7) 選擇樣式表所保存的 位置，單擊【保存】按 鈕，出現(xiàn)CSS設(shè)置對(duì)話 框如圖6-5所示，進(jìn)行相 應(yīng)的屬性設(shè)置，單擊 【確定】，一個(gè)CSS樣 式創(chuàng)建成功。 圖6-5 CSS設(shè)置對(duì)話框 6.2.2 應(yīng)用CSS樣式 1. 如果要在文檔中應(yīng)用樣式 操作方法如下： 1) 將插入點(diǎn)放置在段落之中，即選擇了整個(gè)段落，可 以對(duì)其設(shè)置格式；也

7、可以選中多個(gè)段落，對(duì)多個(gè)段落 設(shè)置格式；選擇某些字符還可以對(duì)這些字符設(shè)置格式。 2) 在CSS樣式面板中，用鼠標(biāo)點(diǎn)擊某個(gè)定義好的樣式， 則該CSS樣式就會(huì)應(yīng)用在這些文檔上。 2. 應(yīng)用外部鏈接式CSS樣式 1) 打開(kāi)CSS樣式面板。 2) 單擊CSS樣式面板右下角的【附加樣式表】按鈕， 出現(xiàn)如圖6-6所示“鏈接外部樣式表”對(duì)話框。 3) 單擊【瀏覽】按鈕，從所保存的CSS文件中選取一 個(gè)，即可應(yīng)用。 圖6-6 “鏈接外部樣式表”對(duì)話框 3. 在現(xiàn)有樣式的基礎(chǔ)上 創(chuàng)建新樣式 1) 在CSS樣式面板上， 選中作為基礎(chǔ)的樣式。 2) 單擊CSS樣式面板右 上角的“顯示菜單”按鈕， 打開(kāi)面板菜單；或者

8、在面 板中單擊鼠標(biāo)右鍵，打開(kāi) 快捷菜單，如圖6-7所示。 圖6-7 CSS樣式的快捷菜單 3) 選擇“重制”命令，系統(tǒng)彈出如圖6-8所示對(duì)話框，并 顯示該樣式的設(shè)置。 4) 在對(duì)話框中選擇新樣式的類(lèi)型和定義，輸入新的名稱。 5) 單擊【確定】按鈕，確定操作。 圖6-8 “重制CSS樣式”對(duì)話框 4. 刪除某個(gè)樣式 在CSS樣式面板上，選中要?jiǎng)h除的樣式。單擊 CSS樣式面板右上角的“顯示菜單”按鈕，打開(kāi)面板 菜單；或者在面板中單擊鼠標(biāo)右鍵，打開(kāi)快捷菜單， 選擇“刪除”命令?；蛘邌螕裘姘宀藛斡蚁陆堑摹皠h 除CSS樣式”命令按鈕。將刪除被選擇樣式，同時(shí)該 樣式從樣式列表中消失。 6.3 設(shè)置CSS樣

9、式格式 在Dreamweaver中，通過(guò)CSS樣式定義對(duì)話框可以對(duì) CSS樣式格式進(jìn)行精確定制，在CSS面板上新建CSS樣式時(shí) 可以進(jìn)行設(shè)置，或者通過(guò)可以打開(kāi)如圖6-5所示CSS樣式定 義對(duì)話框，從中可以看出，CSS共有8個(gè)選項(xiàng)。 6.3.1 編輯文字格式 在CSS樣式定義對(duì)話框中單擊左邊的“類(lèi)型”，右邊區(qū) 域顯示可以設(shè)置的有關(guān)文字格式方面的CSS樣式。其中： 1)字體：可以在下拉菜單中設(shè)置當(dāng)前樣式所用的字體。 2)大?。?，設(shè)置字體的大小。可以通過(guò)選擇數(shù)字和單位來(lái)指 定字體，如“磅”、“像素”、“英寸”、“厘米”等，也 可以選擇相對(duì)的字體大小，如“極小、“特小”等。 3)樣式：通過(guò)選擇“正?！?/p>

10、、“斜體”或“偏斜體”來(lái)設(shè)置 字體的特殊格式， 4)行高：設(shè)置文本的行高。選擇“正?！保瑒t由系統(tǒng)自動(dòng)計(jì) 算字體的行高和大??；也可以通過(guò)輸入一個(gè)精確的數(shù)值并選 擇其計(jì)算單位，來(lái)具體指定行高。 5)粗細(xì)：對(duì)字體應(yīng)用指定的或相對(duì)的粗細(xì)度，有“正?！?、 “粗體”、“特粗”和“細(xì)體”等。其中“正常”等于400， “粗體”一般為700。 6)變量：允許設(shè)置字體的變體形式，有“正?！焙汀靶⌒痛?寫(xiě)字母”。 7)大小寫(xiě)：可以設(shè)置字符的大小寫(xiě)方式?！笆鬃帜复髮?xiě)”， 可以指定將每個(gè)單詞的第一個(gè)字符大寫(xiě)；“大寫(xiě)”或“小寫(xiě)” 可以分別將別選擇的文本設(shè)置為大寫(xiě)或小寫(xiě)；“無(wú)”保持字 符本身原有的大小寫(xiě)格式。 8)修飾：可

11、以設(shè)置字體的一些修飾格式?！跋聞澗€”、“上 劃線”、“刪除線”、“閃爍”和“無(wú)”。 9)顏色：用于設(shè)置文字的顏色。 6.3.2 編輯背景格式 在CSS樣式定義對(duì)話框中單擊左邊的“背景”，右邊區(qū) 域顯示可以設(shè)置CSS樣式的背景格式，如圖6-9所示。 圖6-9 編輯CSS樣式背景格式 其中： 1)背景顏色：設(shè)置樣式的背景顏色。 2)背景圖像：設(shè)置作為樣式背景的圖像文件所在的URL地址： 單擊【瀏覽】按鈕可以從磁盤(pán)中選擇某一個(gè)圖像文件。 3)重復(fù)：可以設(shè)置是否允許背景圖像被重復(fù)?！安恢貜?fù)”只 在應(yīng)用樣式的元素開(kāi)始部分顯示一次圖像；“重復(fù)”在應(yīng)用 樣式的元素背景上縱向和橫向重復(fù)顯示該圖像；“橫向重復(fù)”

12、 相應(yīng)的顯示圖像的橫向重復(fù)延伸；“縱向重復(fù)”相應(yīng)的顯示 圖像的縱向重復(fù)延伸。 4)附件：設(shè)定當(dāng)拖動(dòng)瀏覽器滾動(dòng)條瀏覽滾動(dòng)頁(yè)面時(shí)，背景圖 像是固定在它的原始位置，還是同內(nèi)容一起滾動(dòng)?！肮潭ā?表明背景圖像固定在原始位置；“滾動(dòng)”表明背景圖像可以 滾動(dòng)。 有些瀏覽器會(huì)將固定方式始終作為滾動(dòng)方式來(lái)處理。 5)水平位置和垂直位置：設(shè)置背景圖像相對(duì)于文檔窗口的水 平和垂直位置。 6.3.3 編輯文本塊格式 在CSS樣式定義對(duì)話框中單擊左邊的“區(qū)塊”，右邊 區(qū)域顯示可以設(shè)置CSS樣式的區(qū)塊格式，如圖6-10所示。 圖6-10 編輯CSS樣式的塊格式 1)單詞間距：可以在文字直接添加空格?？梢暂斎胍粋€(gè)數(shù) 值，

13、并在其右方的下拉列表中選擇設(shè)置數(shù)值的單位；如果 輸入負(fù)值，顯示的效果會(huì)由瀏覽器來(lái)決定。該選項(xiàng)會(huì)受到 頁(yè)邊距調(diào)整的影響。 2)字母間距：可以在字符直接添加空格。如果輸入負(fù)值， 其顯示由瀏覽器決定。該選項(xiàng)可以覆蓋由頁(yè)邊調(diào)整產(chǎn)生的 字母之間的多余空格。 3)垂直對(duì)齊：可以設(shè)置各元素相對(duì)于上一級(jí)的縱向?qū)R方 式。如果輸入數(shù)值，顯示的是一個(gè)百分比。除了應(yīng)用于 IMG標(biāo)簽的情況，該設(shè)置不會(huì)顯示在Dreamweaver的文 檔窗口中。 4)文本對(duì)齊：設(shè)置文本中元素的對(duì)齊方式。 5)文字縮進(jìn)：設(shè)置文本首行縮進(jìn)的距離。如果輸入為負(fù)值 時(shí)等于創(chuàng)建了文本凸出（反縮進(jìn)），其顯示取決于瀏覽器。 只有當(dāng)標(biāo)簽應(yīng)用于文本塊時(shí)

14、，該設(shè)置才會(huì)顯示在 Dreamweaver的文檔窗口中。 6)空格：設(shè)置在應(yīng)用樣式元素時(shí)空格的處理方法。 “正?！北硎景凑照５姆椒ㄌ幚砜崭瘢鄠€(gè)空格當(dāng) 做一個(gè)空格來(lái)對(duì)待；“保留”表示保留所有的原始空 格形象，比如空格、跳格和回車(chē)符等，都作為文本用 PRE標(biāo)簽包圍；“不換行”表示設(shè)定文本不會(huì)自動(dòng)換 行，只有使用換行標(biāo)記BR才換行。該設(shè)置不會(huì)顯示在 Dreamweaver的文檔窗口中。 7)顯示：可以設(shè)置哪些元素被顯示以及如何顯示。 6.3.4 編輯方框格式 在CSS樣式定義對(duì)話框中單擊左邊的“方框”，右邊 區(qū)域顯示可以設(shè)置CSS樣式的框格式，如圖6-11所示。 圖6-11 編輯CSS樣式框格式

15、 其中： 1)寬和高：設(shè)置元素的大小尺寸。選擇“自動(dòng)”由瀏覽 器自行控制；輸入一個(gè)數(shù)值，并在其右邊的下拉列表中 選擇數(shù)值的單位，可以固定元素的大小和尺寸。只有在 被應(yīng)用于圖像或?qū)訒r(shí)，Dreamweaver的文檔窗口中才 會(huì)顯示該屬性。 2)浮動(dòng)：設(shè)置元素的的浮動(dòng)位置。頁(yè)面不并移動(dòng)，將元 素放置在頁(yè)面邊緣的左側(cè)或右側(cè)時(shí)，其他元素會(huì)圍繞該 元素。只有在被用于IMG標(biāo)簽時(shí)，才會(huì)在 Dreamweaver的文檔窗口中顯示該屬性。 3)清除：定義元素的某個(gè)邊側(cè)不允許有層出現(xiàn)。如果分 層出現(xiàn)在被設(shè)置清除的元素的一邊，該元素會(huì)被移動(dòng)到 層的下面。只有在被用于IMG標(biāo)簽時(shí)，才會(huì)在 Dreamweaver的文檔

16、窗口中顯示該屬性。 4)填充：定義元素的內(nèi)容和邊框之間的空間大小。該設(shè)置不 會(huì)顯示在Dreamweaver的文檔窗口中。 5)邊界：定義元素邊緣和其他元素之間的空間大小。只有在 被應(yīng)用于文本塊一類(lèi)的元素時(shí)，才會(huì)在Dreamweaver的文 檔窗口中顯示該屬性。 6.3.5 編輯邊框格式 在CSS樣式定義對(duì)話框中單擊左邊的“邊框”，右邊區(qū) 域顯示可以設(shè)置CSS樣式的邊框格式，如圖6-12所示。 其中： 1)樣式：設(shè)置邊框的樣式，“點(diǎn)劃線”表明邊框是點(diǎn)線形， “虛線”表明邊線是虛線形。通過(guò)上、右、下和左可以分別 設(shè)置四個(gè)邊的風(fēng)格，“全部相同”表示四邊邊框線的風(fēng)格一 致。 2)寬度：定義應(yīng)用該樣式的

17、元素邊框的寬度。細(xì)、中、粗和 數(shù)值可以作為相應(yīng)的寬度選項(xiàng)。 3)顏色：可以設(shè)置邊框?qū)?yīng)位置的顏色。 圖6-12 編輯CSS樣式邊框格式 6.3.6 編輯列表格式 在CSS樣式定義對(duì)話框中單擊左邊的“列表”，右邊區(qū) 域顯示可以設(shè)置CSS樣式的列表格式，如圖6-13所示。 其中： 1)類(lèi)型：在下拉列表中，可以選擇無(wú)序列表或者有序項(xiàng)目的 符號(hào)或編號(hào)的外觀類(lèi)型。 2)項(xiàng)目符號(hào)圖像：可以設(shè)置以圖片作為列表項(xiàng)目的符號(hào)。通 過(guò)直接在文本框中輸入圖片文件的URL地址，或單擊【瀏覽】 按鈕，從磁盤(pán)上選擇圖片文件。 3)位置：可以設(shè)置列表項(xiàng)換行時(shí)是縮進(jìn)還是邊緣對(duì)齊。 圖6-13 編輯CSS樣式列表格式 6.3.7

18、 編輯定位格式 在CSS樣式定義對(duì)話框中單擊左邊的“定位”，右邊區(qū) 域顯示可以設(shè)置CSS樣式的定位格式，如圖6-14所示。 其中： 1)類(lèi)型：在下拉列表中，可以選擇設(shè)置瀏覽器中分層的放置 方式。 “絕對(duì)”使用在Placement框中輸入的相對(duì)于頁(yè)面左上 角的絕對(duì)坐標(biāo)放置分層。 “相對(duì)”使用在Placement框中輸入的坐標(biāo)放置分層， 該坐標(biāo)是相對(duì)于文檔中的對(duì)象位置。 “靜態(tài)”將層定位在文本自身的位置。 圖6-14 編輯CSS樣式定位格式 2) 寬和高：設(shè)置層的位置和大小。 3)定位：指定層的位置和大小。它的具體使用依賴于類(lèi)型部 分的設(shè)置，分為上、右、下和左四個(gè)部分。 4) 顯示：決定層的初始顯

19、示狀態(tài)，如果沒(méi)有設(shè)置該屬性，在 默認(rèn)狀態(tài)下，大多數(shù)瀏覽器將繼承其上級(jí)的值。 “繼承”繼承層的上一級(jí)的可見(jiàn)性屬性。 “可見(jiàn)”顯示各個(gè)分層的內(nèi)容，而不考慮其上級(jí)元素。 “隱藏”隱藏層的內(nèi)容，而不考慮其上級(jí)元素。 5) Z軸：在下拉列表中可以選擇定義分層的疊放順序。編號(hào) 高的分層顯示在編號(hào)低的分層之上。其數(shù)值可以為正也可以 為負(fù)。 6)溢出：如果在分層中的內(nèi)容超出了分層的邊界，在此決定 處理方式。 可見(jiàn)：當(dāng)分層中的內(nèi)容超出分層的邊界時(shí)，分層會(huì)自動(dòng) 向下或向右擴(kuò)展它的大小，以容納分層的內(nèi)容，使之可見(jiàn)。 隱藏：當(dāng)分層中的內(nèi)容超出分層的邊界時(shí)，分層大小不 變，也不出現(xiàn)滾動(dòng)條，超出邊界的內(nèi)容不顯示。 滾動(dòng)：

20、無(wú)論分層中的內(nèi)容是否超出分層范圍，分層上總 會(huì)出現(xiàn)滾動(dòng)條，利用滾動(dòng)條進(jìn)行瀏覽。 自動(dòng)：在分層中的內(nèi)容超出分層的邊界時(shí)，出現(xiàn)滾動(dòng)條 以便顯示所有分層內(nèi)容。 7) 剪輯：可以定義分層可見(jiàn)部分的位置和大小。如果指定 了碎片區(qū)域，可以通過(guò)腳本語(yǔ)言如JavaScript來(lái)對(duì)其進(jìn)行操 作，例如可以輸入其屬性以創(chuàng)建特殊效果。 6.3.8 編輯擴(kuò)展格式 在CSS樣式定義對(duì)話框中單擊左邊的“擴(kuò)展”，右 邊區(qū)域顯示可以設(shè)置CSS樣式的擴(kuò)展格式，如圖6-15所 示。 圖6-15 編輯CSS樣式擴(kuò)展格式 擴(kuò)展樣式更多的是對(duì)自定義功能的擴(kuò)展，可能不被 某些瀏覽器所支持。其中： 1)分頁(yè)：可以設(shè)置在打印頁(yè)面時(shí)強(qiáng)制分頁(yè)的位

21、置。在“之 前”和“之后”的下拉列表中，可分別設(shè)置分頁(yè)前和分頁(yè) 后的位置。此屬性只有4.0以上版本的瀏覽器支持。 2) 視覺(jué)效果：可以設(shè)置樣式的一些可視效果。 光標(biāo)：用于設(shè)置當(dāng)鼠標(biāo)掠過(guò)被樣式控制的對(duì)象時(shí)的指 針外觀。如選擇hand，鼠標(biāo)指針會(huì)變?yōu)椤笆中巍?，只?4.0及其以上版本的瀏覽器支持此屬性。 過(guò)濾鏡：在其下拉菜單中選擇需要的特效，對(duì)被樣 式控制的對(duì)象指定特殊的效果，包括模糊和反轉(zhuǎn)，只有 4.0及其以上版本的瀏覽器支持此屬性。 利用編輯CSS樣式對(duì)話框可 以對(duì)CSS樣式進(jìn)行編輯。其步驟如 下： 1) 在樣式面板空白處單擊鼠標(biāo)右 鍵，從彈出的菜單中選擇“編輯” 命令；或者從CSS面板菜單的

22、右下 角處選擇【編輯樣式】按鈕。打開(kāi) 如圖6-16所示編輯樣式對(duì)話框。 2) 選擇要編輯的樣式，單擊【編 輯】按鈕，打開(kāi)如圖6-15所示選 擇編輯CSS樣式對(duì)話框。 3) 選中要編輯的樣式，可以鏈接 外部樣式表，可以新建一個(gè)樣式， 可以編輯、復(fù)制和刪除CSS樣式。 圖6-16編輯樣式對(duì)話框 6.4 編輯管理CSS樣式 6.5 將CSS樣式轉(zhuǎn)換為HTML標(biāo)記 CSS樣式只能在4.0或更高版本的瀏覽器中顯示，如果 想讓更多版本的瀏覽器支持，就需要將其轉(zhuǎn)換為標(biāo)準(zhǔn)的 HTML標(biāo)記，使網(wǎng)頁(yè)具有更好的兼容性。其操作步驟如下： 1) 在Dreamweaver中選擇菜單“文件”“轉(zhuǎn) 換”“XHTML”,將會(huì)打

23、開(kāi)一個(gè)新的Dreamweaver窗口，并 裝載轉(zhuǎn)換后的HTML標(biāo)記。 2)不是所有的CSS代碼都可以成功地轉(zhuǎn)換為HTML標(biāo)記，任 何不能替換為HTML標(biāo)記的CSS標(biāo)記都將會(huì)被忽略。表6-1顯 示了CSS樣式和HTML標(biāo)記之間的轉(zhuǎn)換關(guān)系。 CSS屬性 轉(zhuǎn)換為 color font color font-family font face font-size font size=1- 7 font-style:oblique i font-style:italic i font-weight b list-style- type:square ul type= square list-style- type:circle ul type=circle 表6-1 CSS樣式和HTML標(biāo)記之間的轉(zhuǎn)換關(guān)系 list-style-type:upper-roman ol type=I list-style-type:lower-roman ol type=i list-style-type