第6章使用CSS樣式

1、第6章主要內(nèi)容使用CSS樣式五、 CSS濾鏡四、設(shè)置CSS樣式三、網(wǎng)頁中CSS應(yīng)用二、創(chuàng)建CSS樣式一、 CSS樣式的基本介紹六、 CSS樣式表應(yīng)用實(shí)例一、 CSS的基本概念CSS(Cascading Style Sheet),中文譯為“層疊樣式”,是用于控制網(wǎng)頁樣式并允許將樣式信息與網(wǎng)頁內(nèi)容分離的一種標(biāo)記性語言。 CSS樣式表有以下特點(diǎn)： l可以將網(wǎng)頁的顯示控制與顯示內(nèi)容分離。l能更有效地控制頁面的布局。l可以制作出體積更小、下載更快的網(wǎng)頁。l可以更快、更方便地維護(hù)及更新大量的網(wǎng)頁。二、CSS樣式的類型1.自定義CSS（類樣式）。自定義樣式最大的特點(diǎn)就是具有可選擇性，可以自由決定將該樣式應(yīng)用

2、于哪些元素，就文本操作而言，可以選擇一個(gè)字、一行、一段乃至整個(gè)頁面中的文本添加自定義的樣式。2重定義標(biāo)簽的CSS。實(shí)際上重新定義了現(xiàn)有HTML標(biāo)簽的默認(rèn)屬性，具有“全屬性”。二、CSS樣式的類型3. CSS選擇器樣式（高級(jí)樣式）。CSS選擇器樣式可以用來控制標(biāo)簽屬性，通常用來設(shè)置鏈接文字的樣式。對(duì)鏈接文字的控制，有以下4種類型：l“a:link”（鏈接的初始狀態(tài)）：用于定義鏈接的常規(guī)狀態(tài)。l“a:hover”（鼠標(biāo)指向的狀態(tài)）：如果定義了這種狀態(tài)，當(dāng)鼠標(biāo)指針移到鏈接上時(shí)，即按該定義顯示，用于增強(qiáng)鏈接的視覺效果。l“a:visited”（訪問過的鏈接）：對(duì)已經(jīng)訪問過的鏈接，按此定義顯示。為了能正

3、確區(qū)分已經(jīng)訪問過的鏈接。“a:visited”的顯示方式要不同于普通文本及鏈接的其他狀態(tài)。l“a:active”（在鏈接上按下鼠標(biāo)時(shí)的狀態(tài)）：用于表現(xiàn)鼠標(biāo)按下時(shí)的鏈接狀態(tài)。實(shí)際中應(yīng)用較少。如果沒有特別的需要，可以定義成與“a:link”狀態(tài)或者“a:hover”狀態(tài)相同。三、CSS樣式的基本語法CSS的基本語法由三部分構(gòu)成：選擇器（selector）、屬性（property）和屬性值（value）如： selector property:value pcolor:blue三、CSS樣式的基本語法1.選擇器組如果需要將相同的屬性和屬性值賦予多個(gè)選擇器，選擇器之間需要使用逗號(hào)進(jìn)行分隔。h2,h3,

4、h4,h5,h6,h7color:red三、CSS樣式的基本語法2類選擇器利用類選擇器，可以使用同樣的HTML標(biāo)簽創(chuàng)建不同的樣式。如段落“”有兩種樣式：一種是左對(duì)齊，一種是右對(duì)齊?？梢匀缦聲鴮懀簆.righttext-align:rightp.centertext-align:center也可以不用HTML標(biāo)簽，直接用“.”加上類名稱作為一個(gè)選擇器，代碼如下：.center text-align:center三、CSS樣式的基本語法3CSS注釋為了方便以后更好地閱讀CSS代碼，可以為CSS添加注釋。CSS注釋以“/*”開頭，以“*/”結(jié)束，如：/*段落樣式*/PText-align:cente

5、r;/*居中顯示*/Color:black;Font-family:arial 第6章主要內(nèi)容使用CSS樣式五、 CSS濾鏡四、設(shè)置CSS樣式三、網(wǎng)頁中CSS應(yīng)用二、創(chuàng)建CSS樣式一、 CSS樣式的基本介紹六、 CSS樣式表應(yīng)用實(shí)例一、建立標(biāo)簽樣式標(biāo)簽樣式是網(wǎng)頁中最為常見的一種樣式，一般要?jiǎng)?chuàng)建頁面時(shí)，首先會(huì)建立一個(gè)body標(biāo)簽樣式。下面操作方法如下：（1）啟動(dòng)Dreamweaver CS5，在菜單中選擇“文件”|“打開”命令，打開文件。（2）在“CSS”面板上單擊“新建CSS規(guī)則”按鈕。一、建立標(biāo)簽樣式（3）彈出“新建CSS規(guī)則”對(duì)話框，單擊展開“選擇器類型”下拉按鈕，選擇“標(biāo)簽（重新定義HT

6、ML元素）”；單擊“確定”按鈕。一、建立標(biāo)簽樣式（4）彈出“CSS規(guī)則定義”對(duì)話框，在“分類”列表框中選擇各項(xiàng)進(jìn)行設(shè)置，設(shè)定背景顏色為綠色；單擊“確定”按鈕。一、建立標(biāo)簽樣式（5）切換至“代碼”視圖，可以看到在代碼中添加了相應(yīng)的代碼。（6）保存文檔。按F12鍵，即可在瀏覽器中瀏覽到網(wǎng)頁的視覺效果。二、建立類樣式通過類樣式的使用，可以對(duì)網(wǎng)頁中的元素進(jìn)行更加精確的控制，達(dá)到理想的效果，操作方法如下：（1）在“CSS樣式”面板上，單擊“新建CSS規(guī)則”按鈕 。二、建立類樣式（2）彈出“新建CSS規(guī)則”對(duì)話框，單擊展開“選擇器類型”下拉按鈕，選擇“類（可應(yīng)用于任何HTML元素）”在選擇器名稱輸入.sh

7、；單擊“確定”。二、建立類樣式（3）彈出“CSS規(guī)則定義”對(duì)話框，在“分類”列表框中選擇各項(xiàng)進(jìn)行設(shè)置；單擊“確定” 。二、建立類樣式（4）切換到“代碼”視圖，可以看到代碼中添加了相應(yīng)的代碼為：.sh font-size: 16px;color: #00F;（5）保存文檔。三、建立復(fù)合內(nèi)容樣式復(fù)合內(nèi)容樣式重新定義特定元素組合的格式，或其他的CSS允許的選擇器表單的格式。在“新建CSS規(guī)則”對(duì)話框中單擊展開“選擇器類型”下拉按鈕，選擇“復(fù)合內(nèi)容（基于選擇的內(nèi)容）”選項(xiàng)，在“選擇器名稱”下位列表中，包括了4個(gè)選項(xiàng)，在“選擇器名稱”下拉列表中的各項(xiàng)參數(shù)如下：la:active:定義了鏈接被激活時(shí)的樣式

8、，即已經(jīng)單擊鏈拉，但頁面還沒跳轉(zhuǎn)的樣式。la:hover:定義了鼠標(biāo)停留在鏈接的文字上時(shí)的樣式，一般定義文字、顏色等。la:link:定義了設(shè)置有鏈接的文字的樣式。la:visited:定義了瀏覽者已經(jīng)訪問過的鏈接樣式。四、建立ID樣式建立ID樣式主要用于定義包含特定ID屬性的標(biāo)簽格式。操作方法如下：（1）在“CSS樣式”面板上單擊“新建CSS規(guī)則”按鈕 。四、建立ID樣式（2）彈出“新建CSS規(guī)則”對(duì)話框，單擊展開“選擇器類型”下拉按鈕，選擇“ID（僅應(yīng)用于一個(gè)HTML元素）”，在選擇器名稱中輸入#top；單擊“確定”按鈕。四、建立ID樣式（3）彈出“CSS規(guī)則定義”對(duì)話框，在“分類”列表框

9、中選擇“方框”選項(xiàng)；設(shè)置參數(shù)；單擊“確定”按鈕。四、建立ID樣式（4）在文檔窗口中選擇“插入”欄，在“插入”欄中單擊“插入Div標(biāo)簽”按鈕。四、建立ID樣式（5）彈出“插入Div標(biāo)簽”對(duì)話框，單擊展開“插入”下拉列表，選擇“在結(jié)束標(biāo)簽之前”選項(xiàng)；單擊ID下拉列表，選擇top選項(xiàng)；單擊“確定”按鈕。（6）此時(shí)，已經(jīng)插入ID名稱為top的Div。在頁面中可看到剛剛創(chuàng)建#top的CSS樣式表。五、鏈接外部樣式表CSS樣式不但可以直接嵌入到頁面中，而且可以保存為獨(dú)立的樣式文件（擴(kuò)展名為.CSS），需要引用樣式文件中的CSS樣式中，可以將其鏈接到網(wǎng)頁文檔中。鏈接外部樣式表的操作如下：單擊“CSS樣式”面

10、板下方的“附加樣式表”按鈕五、鏈接外部樣式表彈出“鏈接外部樣式表”對(duì)話框，單擊“文化/URL”右邊的“瀏覽”按鈕，插入文件。選中“鏈接”單選按鈕，單擊“確定”按鈕，即可完成添加外部鏈接樣式表的操作。第6章主要內(nèi)容使用CSS樣式五、 CSS濾鏡四、設(shè)置CSS樣式三、網(wǎng)頁中CSS應(yīng)用二、創(chuàng)建CSS樣式一、 CSS樣式的基本介紹六、 CSS樣式表應(yīng)用實(shí)例一、內(nèi)聯(lián)樣式表內(nèi)聯(lián)樣式表是在現(xiàn)有HTML元素的基礎(chǔ)上，用style屬性把特定的樣式直接加入到那些控制信息的標(biāo)記中。例：內(nèi)聯(lián)樣式表這種樣式表只會(huì)對(duì)元素起作用，而不會(huì)影響HTML文檔中的其他元素。二、內(nèi)部樣式表內(nèi)部樣式表是把樣式表放到頁的區(qū)中，這些定義的

11、樣式就應(yīng)用到頁面中。樣式表是用標(biāo)記插入的，從下例中可以看出標(biāo)記的用法：三、外部樣式表外部樣式表是指將樣式作為一個(gè)獨(dú)立的文件保存在計(jì)算機(jī)上，這個(gè)文件以“.css”作為文件的擴(kuò)展名。樣式在樣式表文件中定義和在嵌入式樣表中的定義是一樣的，只是不再需要style元素。例： h1 font-size:36px; font-family:”隸書”; font-weight:bold; color:#993366;嵌入式樣式定義到一個(gè)樣式表文件mystyle.css中，這個(gè)樣式表文件的內(nèi)容應(yīng)該為嵌入式樣式表中的所有樣式。四、樣式?jīng)_突將兩個(gè)或兩個(gè)以上的CSS規(guī)則應(yīng)用在同一元素時(shí)，這些規(guī)則可能會(huì)發(fā)生沖突并產(chǎn)生意

12、外結(jié)果，一般會(huì)存在以下兩種情況。一種情況是應(yīng)用于同一元素的多個(gè)規(guī)則分別定義了元素的不同屬性，這時(shí)，多個(gè)規(guī)則同時(shí)起作用。另一種是兩個(gè)或兩個(gè)以上的規(guī)則同時(shí)定義了元素的同一屬性，這種情況稱為樣式?jīng)_突。如果發(fā)生沖突，瀏覽器按就近優(yōu)先原則應(yīng)用CSS規(guī)則。第6章主要內(nèi)容使用CSS樣式五、 CSS濾鏡四、設(shè)置CSS樣式三、網(wǎng)頁中CSS應(yīng)用二、創(chuàng)建CSS樣式一、 CSS樣式的基本介紹六、 CSS樣式表應(yīng)用實(shí)例一、設(shè)置文本樣式在網(wǎng)頁中設(shè)置文本樣式和在Word中設(shè)置文本樣式相同，在“CSS規(guī)則定義”對(duì)話框的“分類”列表框中選擇“類型”選項(xiàng)，即可對(duì)文本的樣式進(jìn)行設(shè)置。lFont-family(F)(字體)下拉列表框

13、：為樣式設(shè)置字體。lFont-size(S)(大小)下拉列表框：定義文本大小。lFont-style(T)(樣式)下拉列表框：設(shè)置字體的特殊格式，包括“正?！薄ⅰ靶斌w”和“偏斜體”三個(gè)選項(xiàng)。lFont-height(I)(行高)下拉列表框：設(shè)置文本所在行的高度。lFont-weight(W)(粗細(xì))下拉列表框：設(shè)置文字的筆畫粗細(xì)。lFont-variant(V)(變體)下拉列表框：設(shè)置文本的小型大寫字母變體。lText-transform(R)(大小寫)下拉列表框：將英文單詞的首字母大寫或全部大寫或全部小寫。lText-decoration(D)(修飾)選項(xiàng)區(qū)域：向文本中添加下劃線、上劃線或刪

14、除線，或使文本閃爍，常規(guī)文本的默認(rèn)設(shè)置是“無”，鏈接的默認(rèn)的設(shè)置是“下劃線”。lColor(C)(顏色)：設(shè)置文本顏色?？梢酝ㄟ^顏色選擇器選取，也可以直接在文本框中輸入顏色值。二、設(shè)置背景樣式在不使用CSS樣式的情況下，利用頁面屬性只能夠使用單一顏色或用圖像水平垂直平鋪來設(shè)置背景。lBackground-color(C)(背景顏色)項(xiàng)：設(shè)置元素的背景顏色。lBackground-image(I)(背景圖像)項(xiàng)：設(shè)置元素的背景圖像。lBackground-repeat(R)(重復(fù))下拉列表框：設(shè)置當(dāng)使用圖像作為背景時(shí)是否需要重復(fù)顯示，一般用于圖像尺寸小于頁面元素面積的情況， 包括以下4個(gè)選項(xiàng)。“

15、不重復(fù)”：表示只在元素開始處顯示一次圖像；“重復(fù)”：表示在應(yīng)用樣式的元素背景的水平方向和垂直方向上重復(fù)顯示該圖像；“模向重復(fù)”：表示在應(yīng)用樣式的元素背景的水平方向上重復(fù)顯示該圖像；“縱向重復(fù)”：表示在應(yīng)用樣式的元素背景的垂直方向上重復(fù)顯示該圖像。lBackground-attachment(T)(附件)下拉列表框：有兩個(gè)選項(xiàng)，即“固定”和“流動(dòng)”，分別決定背景圖像是固定在原始位置還是可以隨內(nèi)容一起滾動(dòng)。lBackground-position(X)(水平位置)和Background-position(Y)(垂直位置)：指定背景圖像相對(duì)于元素的對(duì)齊方式，可以用于將背景圖像與頁面中心水平和垂直對(duì)齊

16、。三、設(shè)置區(qū)塊樣式使用“區(qū)塊”類別可以定義段落文本中文字的字距、對(duì)齊方式等格式。lWord-spacing(s)(單詞間距)文本框：設(shè)置英文單詞之間的距離。lLetter-spacing(l)（字母間距）文本框：增加或減小文字之間的距離，若要減小字符間距，可以指定一個(gè)負(fù)值。lVertical-align(V)（垂直對(duì)齊）下拉列表框：設(shè)置應(yīng)用元素的垂直對(duì)齊方式。lText-align(T)（文本對(duì)齊）下拉列表框：設(shè)置應(yīng)用元素的水平對(duì)齊方式，包括“居左”、“居右”、“居中”和“兩端對(duì)齊”四個(gè)選項(xiàng)。lText-indent(I)（文字縮進(jìn)）文本框：指定每段中的第一行文本縮進(jìn)距離，可以使用負(fù)值創(chuàng)建文本

17、凸出，但顯示方式取決于瀏覽器。lWhite-space(W)（空格）下拉列表框：確定如何處理元素中的空格，包括3個(gè)選項(xiàng)。lDisplay(D)（顯示）下拉列表框：設(shè)置是否以及如何顯示元素，如果選擇“無”則會(huì)關(guān)閉應(yīng)用此屬性的元素的顯示。四、設(shè)置方框樣式在圖像的“屬性”面板上，可以設(shè)置圖像的大小、圖像水平和垂直方向上的空白區(qū)域等，方框樣式完善并豐富了這些屬性設(shè)置，定義特定元素的大小及其他周圍元素間距屬性。lWidth(W)（寬）和Height(H)（高）文本框：設(shè)定寬度和高度，只有在樣式應(yīng)用于圖像或?qū)訒r(shí)，才起作用。lFloat(T)（浮動(dòng)）下拉列表框：float 屬性定義元素在哪個(gè)方向浮動(dòng)。lCl

18、ear(C)（清除）下拉列表框：屬性定義了元素的哪邊上不允許出現(xiàn)浮動(dòng)元素，設(shè)置元素哪一邊不允許有層、如果有層出現(xiàn)在被清除的那一邊，則元素將移動(dòng)到層的下面。lPadding（填充）選項(xiàng)區(qū)域：指定元素內(nèi)容與元素邊框之間的間距（如果沒有邊框，則為邊距）?！發(fā)Margin（邊界）選項(xiàng)區(qū)域：指定一個(gè)元素的邊框與其他元素之間的間距，只有當(dāng)樣式應(yīng)用于文本塊一類的元素（如段落、標(biāo)題、列表等）時(shí)，才起作用?！拔濉⒃O(shè)置邊框樣式在圖像的“屬性”面板上，可以設(shè)置圖像的大小、圖像水平和垂直方向上的空白區(qū)域等，方框樣式完善并豐富了這些屬性設(shè)置，定義特定元素的大小及其他周圍元素間距屬性。lWidth(W)（寬）和Heigh

19、t(H)（高）文本框：設(shè)定寬度和高度，只有在樣式應(yīng)用于圖像或?qū)訒r(shí)，才起作用。lFloat(T)（浮動(dòng)）下拉列表框：float 屬性定義元素在哪個(gè)方向浮動(dòng)。lClear(C)（清除）下拉列表框：屬性定義了元素的哪邊上不允許出現(xiàn)浮動(dòng)元素，設(shè)置元素哪一邊不允許有層、如果有層出現(xiàn)在被清除的那一邊，則元素將移動(dòng)到層的下面。lPadding（填充）選項(xiàng)區(qū)域：指定元素內(nèi)容與元素邊框之間的間距（如果沒有邊框，則為邊距）?！發(fā)Margin（邊界）選項(xiàng)區(qū)域：指定一個(gè)元素的邊框與其他元素之間的間距，只有當(dāng)樣式應(yīng)用于文本塊一類的元素（如段落、標(biāo)題、列表等）時(shí)，才起作用。六、設(shè)置列表樣式在Dreamweaver CS5

20、中，使用“列表”選項(xiàng)可以定義項(xiàng)目符號(hào)、大小和類型等。lList-Style-type(T)（類型）下拉列表框：設(shè)置項(xiàng)目符號(hào)或編號(hào)的外觀。lList-Style-image(I)（項(xiàng)目符號(hào)圖像）文本框：用于為項(xiàng)目符號(hào)指定自定義圖像，可以輸入圖像的路徑，或單擊“瀏覽”按鈕選擇圖像。lList-Style-Position(P)（位置）下位列表框：設(shè)置列表項(xiàng)換行時(shí)是縮進(jìn)還是邊緣對(duì)齊，選擇“內(nèi)”設(shè)置列表換行時(shí)為縮進(jìn)，選擇“外”設(shè)置列表換行時(shí)為邊緣對(duì)齊。七、設(shè)置定位樣式在Dreamweaver CS5中，使用“列表”選項(xiàng)可以定義項(xiàng)目符號(hào)、大小和類型等。lList-Style-type(T)（類型）下拉列

21、表框：設(shè)置項(xiàng)目符號(hào)或編號(hào)的外觀。lList-Style-image(I)（項(xiàng)目符號(hào)圖像）文本框：用于為項(xiàng)目符號(hào)指定自定義圖像，可以輸入圖像的路徑，或單擊“瀏覽”按鈕選擇圖像。lList-Style-Position(P)（位置）下位列表框：設(shè)置列表項(xiàng)換行時(shí)是縮進(jìn)還是邊緣對(duì)齊，選擇“內(nèi)”設(shè)置列表換行時(shí)為縮進(jìn)，選擇“外”設(shè)置列表換行時(shí)為邊緣對(duì)齊。八、設(shè)置擴(kuò)展樣式擴(kuò)展選項(xiàng)是CSS規(guī)則定義面板中的最后一項(xiàng)，其中集合分頁，鼠標(biāo)效果和視覺效果等內(nèi)容，在“CSS規(guī)則定義”對(duì)話框中選擇“擴(kuò)展”選項(xiàng)，即可進(jìn)行相應(yīng)的設(shè)置。l“分頁”：打印時(shí)在樣式所控制的對(duì)象之前或者之后強(qiáng)行分頁。lCursor(鼠標(biāo)效果)：定義的

22、是當(dāng)鼠標(biāo)懸浮在該元素上時(shí)的樣式，對(duì)應(yīng)的CSS屬性是Cursor。lFilter(CSS濾鏡)：又稱為過濾器，可為網(wǎng)頁中的元素添加各種效果。第6章主要內(nèi)容使用CSS樣式五、 CSS濾鏡四、設(shè)置CSS樣式三、網(wǎng)頁中CSS應(yīng)用二、創(chuàng)建CSS樣式一、 CSS樣式的基本介紹六、 CSS樣式表應(yīng)用實(shí)例一、CSS濾鏡Dreamweaver的濾鏡和我們所熟悉的Photoshop濾鏡相似，能夠渲染對(duì)象元素，創(chuàng)建出藝術(shù)效果。Dreamweaver的CSS樣式提供了豐富的濾鏡效果，使用這些濾鏡能夠創(chuàng)建出文本和圖像的3D、陰影和淡入淡出等效果，應(yīng)用在頁面中在一定程度上美化了頁面。二、CSS無參數(shù)濾鏡CSS的無參數(shù)濾鏡

23、共有六個(gè)（FlipH、FlipV、Invert、Xray、Gray和Light），雖然沒有參數(shù)，相對(duì)來講，靈活性要差點(diǎn)，但用起來更方便，效果也相當(dāng)明顯。用它們可以使文字或圖片“翻翻身”、獲得圖片的“底片”效果，甚至可以制作圖片的“X光片”效果。三、CSS帶參數(shù)濾鏡CSS的帶參數(shù)濾鏡共有十個(gè)（ alpha 、 blur 、 wave、 DropShadow 、 chroma、 Shadow、 Glow、 Mask、 BlendTrans、和RevealTrans）第6章主要內(nèi)容使用CSS樣式五、 CSS濾鏡四、設(shè)置CSS樣式三、網(wǎng)頁中CSS應(yīng)用二、創(chuàng)建CSS樣式一、 CSS樣式的基本介紹六、 C

24、SS樣式表應(yīng)用實(shí)例一、巧用樣式表美化文本框與按鈕在網(wǎng)頁制作中，表單中的對(duì)象總是給人一種單調(diào)與沉悶的感覺，比如說按鈕、文本框等，它們一成不變的模樣與顏色出現(xiàn)在主頁上時(shí)，或多或少都會(huì)破壞主頁的美觀程度，在網(wǎng)上常常看見一些注冊表單的輸入框部分并不是常見的矩形框，而是一條細(xì)線，其實(shí)要實(shí)現(xiàn)這樣的效果并不困難，只要用一段簡短的CSS代碼控制好表單輸入框的樣式即可。一、巧用樣式表美化文本框與按鈕1、無立體效果的文本框與按鈕首先在網(wǎng)頁中插入了相應(yīng)的表單對(duì)象，比如插入一個(gè)文本框與一個(gè)按鈕，按下F10鍵，顯示出網(wǎng)頁源代碼編輯窗口，那我們在網(wǎng)頁的與標(biāo)簽之間插入這個(gè)樣式表：input.smallInputborder

25、:1 solid black;FONT-SIZE: 9pt; FONT-STYLE: normal; FONT-VARIANT: normal; FONT-WEIGHT: normal; HEIGHT: 18px; LINE-HEIGHT: normal然后分別在文本框與按鈕的html語句中加上代碼class=smallInput如在 最后的效果：一、巧用樣式表美化文本框與按鈕2、帶顏色的下劃線式文本框與按鈕效果同樣，也需要樣式表的幫助來實(shí)現(xiàn)這個(gè)效果，和第一種效果的操作步驟一樣在網(wǎng)頁的與標(biāo)簽之間插入樣式表，input.smallInputbackground:#ffffff;border-bo

26、ttom-color:#ff6633; order-bottom-width:1px;border-top-width:0px;border-left-width:0px;border-right-width:0px; solid #ff6633; color: #000000; FONT-SIZE: 9pt; FONT-STYLE: normal;FONT-VARIANT: normal; FONT-WEIGHT: normal; HEIGHT: 18px; LINE-HEIGHT: normal最后的效果：input.buttonfaceBACKGROUND: #ffcc00; borde

27、r:1 solid #ff6633; COLOR: #ff0000; FONT-SIZE: 9pt; FONT-STYLE: normal; FONT-VARIANT: normal; FONT-WEIGHT: normal; HEIGHT: 18px; LINE-HEIGHT: normal二、用CSS控制網(wǎng)頁總體風(fēng)格1整體改變頁面風(fēng)格 現(xiàn)在網(wǎng)頁中流行的字體是9pt和10.5pt宋體，打開“CSS 樣式控制面板”，單擊“新建CSS規(guī)則”按鈕，彈出“新建CSS規(guī)則”對(duì)話框，復(fù)選“標(biāo)簽（重新定義HTML）”的“選擇器類型”，這時(shí)在標(biāo)簽處會(huì)出現(xiàn)“body”、“br”、“cite”等選項(xiàng)，選擇“body”后確認(rèn)。這樣我們就建立了一個(gè)外部的CSS文檔，在保存對(duì)話框中保存為css后就進(jìn)入“body 的css規(guī)則定義（在css.css中）”對(duì)話框(如圖6-30)。選擇“分類”中的“類型”項(xiàng)，定義“字體”為“宋體”、“大小”參數(shù)為“9”，其后的下拉框選擇“點(diǎn)數(shù)（pt）”、“顏色”自定義為喜好顏色就可以了。當(dāng)然還可以選擇“類型”中的“背景”項(xiàng)來定義“背景”顏色和其他背景屬性。這時(shí)您會(huì)看到頁面中內(nèi)容的整體改