《網(wǎng)頁設計與制作案例教程》第4章 使用CSS樣式_第1頁
《網(wǎng)頁設計與制作案例教程》第4章 使用CSS樣式_第2頁
《網(wǎng)頁設計與制作案例教程》第4章 使用CSS樣式_第3頁
《網(wǎng)頁設計與制作案例教程》第4章 使用CSS樣式_第4頁
《網(wǎng)頁設計與制作案例教程》第4章 使用CSS樣式_第5頁
已閱讀5頁，還剩36頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權，請進行舉報或認領

文檔簡介

第4章使用CSS樣式4.1學習任務：認識CSS樣式表4.2學習任務：CSS規(guī)則的定義和創(chuàng)建4.3學習任務：在網(wǎng)頁文檔中使用CSS樣式4.4上機實訓——用CSS美化網(wǎng)頁4.1學習任務：認識CSS樣式表

4.1.1CSS的基本概念4.1.2CSS樣式的引用4.1.1CSS的基本概念早期的網(wǎng)頁一般是由HTML標簽控制的文本網(wǎng)頁，隨著Web的流行與發(fā)展，漂亮的外觀變得越來越重要。一方面HTML在控制頁面格式和外觀上越來越力不從心；另一方面HTML標簽中充斥了大量的對外觀屬性的定義，網(wǎng)頁要表現(xiàn)的“內(nèi)容”與如何“表現(xiàn)”內(nèi)容混雜在一起，HTML代碼變得越來越繁雜，大量的標簽堆積在一起，難以閱讀和理解。1996年W3C（萬維網(wǎng)聯(lián)盟）提出了CSS技術規(guī)范，它以HTML語言為基礎，提供了豐富的樣式。應用了CSS樣式的網(wǎng)頁，將樣式外觀設置從HTML文檔中分離出來，使代碼清晰、容易維護。CSS一經(jīng)引入即得到了廣泛應用。CSS是CascadingStyleSheets的縮寫，又稱層疊樣式表或級聯(lián)樣式表，主要用于對網(wǎng)頁中的文本或某一區(qū)塊的布局、字體、顏色、背景和特效等進行精確控制。4.1.2CSS樣式的引用CSS樣式既可以定義在外部CSS樣式表文件中，也可以定義在HTML文檔中。外部CSS樣式表是專門保存CSS樣式的文件，其文件名后綴為“.css”，可以用記事本等編輯軟件打開、查看、編輯和創(chuàng)建。內(nèi)部CSS樣式表是將CSS樣式定義在HTML文檔中，根據(jù)定義位置的不同，分為內(nèi)嵌樣式和內(nèi)聯(lián)樣式。1．內(nèi)聯(lián)樣式“內(nèi)聯(lián)樣式”方式直接將CSS樣式嵌套在特定的HTML標簽中。具體方法：選中需要添加樣式的對象，在CSS“屬性”面板中，“目標規(guī)則”設定為“新內(nèi)聯(lián)樣式”，然后根據(jù)需要設置其它的屬性。由于網(wǎng)頁要表現(xiàn)的內(nèi)容和內(nèi)容要表現(xiàn)的樣式混雜在一起，因此，這種方式不建議使用。2．內(nèi)嵌樣式“內(nèi)嵌樣式”方式將CSS樣式嵌套在HTML文檔的<head>標簽內(nèi)。具體方法：1）選中一段內(nèi)容，在CSS“屬性”面板中，“目標規(guī)則”選為“新CSS規(guī)則”，單擊【編輯規(guī)則】按鈕，在“新建CSS規(guī)則”對話框中，“選擇器類型”選擇“ID”，在“選擇器名稱”輸入框中輸入“p1”，在“規(guī)則定義”列表框中選擇“（僅限該文檔）”，如圖4-1所示。圖4-1“新建CSS規(guī)則”對話框2）單擊【確定】按鈕，打開“#p1的CSS規(guī)則定義”對話框，設置“Font-family”為宋體，“Font-size”為18px，“Color”為#F00，如圖4-2所示，單擊【確定】按鈕完成設置?！?p1的CSS規(guī)則定義”對話框中8類屬性含義，將在4.3.3中作詳細介紹。圖4-2“#p1的CSS規(guī)則定義”對話框3）選中另一段內(nèi)容，重復上面的操作，區(qū)別是在“新建CSS規(guī)則”的“選擇器名稱”輸入框中輸入“p2”。從圖4-3可見，<style></style>標簽之間即為定義的CSS樣式，實現(xiàn)了“內(nèi)容”與“表現(xiàn)”的分離。p1、p2是為第一段<p>標簽和第二段<p>標簽設置的唯一的標識號（ID）。<p>標簽中不再有CSS樣式的定義，而是通過p1、p2來引用相應的樣式定義。3．外部樣式表“外部樣式表”方式將CSS樣式存儲在外部樣式表文件中。具體方法：1）選中元素，在CSS“屬性”面板中，“目標規(guī)則”選定為“新CSS規(guī)則”，單擊【編輯規(guī)則】按鈕，打開“新建CSS規(guī)則”對話框。在“選擇器類型”下拉列表框中選擇“ID”，在“選擇器名稱”輸入框中輸入“p1”，在“規(guī)則定義”下拉列表框中選擇“新建樣式表文件”。2）單擊【確定】按鈕，彈出“將樣式表文件另存為”對話框，如圖4-4所示。在“文件名”輸入框中輸入“example”，Dreamweaver將自動為輸入的文件名添加“.css”擴展名。圖4-3內(nèi)嵌CSS樣式圖4-4“將樣式表文件另存為”對話框3）單擊【保存】按鈕，打開“#p1的CSS規(guī)則定義”對話框，從中設置Font-family、Font-size、Color等屬性，單擊【確定】按鈕完成設置。“外部樣式表”方式是將CSS樣式存儲在外部的CSS文件中，例如：example.css。在HTML文檔的<head>標簽內(nèi)，Dreamweaver將自動嵌入鏈接語句<linkhref="example.css"rel="stylesheet"type="text/css"/>，其中“href”屬性指定了外部CSS文件的名稱，“type”屬性指明了引用文件的類型為CSS文件，如圖4-5所示。圖4-5外部鏈接CSS樣式需要修改網(wǎng)頁內(nèi)容的顯示效果時，只需對外部樣式表中的相關內(nèi)容屬性進行修改即可，網(wǎng)頁中的HTML文檔不需做任何修改。通過以上3種方式的比較可以發(fā)現(xiàn)，使用CSS外部樣式表，實現(xiàn)了“內(nèi)容”與“表現(xiàn)”的完全分離，可以一次對若干個文檔的樣式進行控制，當CSS樣式更新后，所有應用了該樣式的文檔都會自動更新。4.2學習任務：CSS規(guī)則的定義和創(chuàng)建4.2.1CSS規(guī)則的語法和類型4.2.2CSS規(guī)則的創(chuàng)建方法4.2.1CSS規(guī)則的語法和類型1．CSS規(guī)則基本語法CSS樣式設置規(guī)則由選擇器和聲明兩部分組成，選擇器是所設樣式的標識（也就是給所設樣式取的名字），聲明塊則用于定義一組樣式屬性，各個聲明由兩部分組成：屬性（如font-family）和值（如“宋體”）。例如：其中，#p1是選擇器，介于大括號{}之間的所有內(nèi)容是聲明塊。CSS規(guī)則含義：使用#p1樣式的文本，顯示的字體是宋體、大小是18px、顏色是#F00。#p1{font-family:"宋體"; font-size:18px;

color:#F00;}2．CSS規(guī)則的類型在DreamweaverCS4中，CSS規(guī)則的選擇器分別有類、ID、標簽和復合內(nèi)容四種類型，下面對這四種CSS規(guī)則類型進行簡單介紹。ID：用于定義具有特定ID（標識號）的標簽的格式，ID類型的CSS規(guī)則僅應用于一個HTML元素。建立ID類型的CSS規(guī)則時，其名稱必須以“#”符號開頭，然后再輸入HTML元素的ID號，ID號可以是任何字母和數(shù)字的組合。使用“新建CSS規(guī)則”對話框輸入選擇器名稱時，未輸入開頭的“#”符號，Dreamweaver將自動添加。不同的HTML元素，需要通過不同的ID號加以區(qū)分。類（CLASS）：可以應用于多個HTML元素的CSS規(guī)則。在使用CSS樣式的過程中，經(jīng)常會有幾個標簽使用相同屬性的情況，或者使同一個HTML標簽呈現(xiàn)不同的樣式風格，針對這種情況可使用類CSS規(guī)則。HTML元素引用類CSS規(guī)則的方法是<標簽class=“類名”>，類選擇器名必須以“.”符號開頭，形式為“.類名”，類名可以是任何字母和數(shù)字的組合。使用“新建CSS規(guī)則”對話框輸入選擇器名稱時，未輸入開頭的“.”符號，Dreamweaver將自動添加。標簽：用于重新定義HTML標簽的默認格式，例如body、h1、font、p、table等。當創(chuàng)建或更改了某一標簽的CSS樣式時，所有使用該標簽設置了格式的對象都會更新為新設的樣式。復合內(nèi)容：用于定義同時影響兩個或多個標簽、類或ID類型的復合CSS規(guī)則，例如建立“Divp”規(guī)則后，網(wǎng)頁中所有Div標簽內(nèi)的所有p元素都將受此規(guī)則的控制。它常用于定義鏈接不同狀態(tài)的文本外觀，包括“a:link、a:visited、a:hover”鏈接狀態(tài)的標簽。4.2.2CSS規(guī)則的創(chuàng)建方法創(chuàng)建CSS規(guī)則的常用方法有兩種：一種是使用CSS“屬性”面板，在目標規(guī)則下拉列表中選擇“新CSS規(guī)則”，單擊【編輯規(guī)則】按鈕；另一種是使用“CSS樣式”面板。兩種方式都將打開圖4-1所示的“新建CSS規(guī)則”對話框。各選項含義如下：選擇器類型：選擇類、ID、標簽和復合內(nèi)容四種類型中的一種。選擇器名稱：輸入選擇器名稱。規(guī)則定義：用于設定CSS規(guī)則的存放位置。選擇“（僅限該文檔）”，定義的CSS規(guī)則只對當前文檔起作用，存放在HTML文檔的<head>標簽內(nèi)；選擇“新建樣式表文件”，將彈出“將樣式表文件另存為”對話框，可創(chuàng)建并鏈接一個外部CSS樣式表文件，用于存放定義的CSS規(guī)則；如果站點內(nèi)已經(jīng)創(chuàng)建或有多個外部CSS樣式表文件，可選擇其中一個用于存放定義的CSS規(guī)則。在“新建CSS規(guī)則”對話框中完成設置后，單擊【確定】按鈕，將打開“CSS規(guī)則定義”對話框，該對話框包含了所有的CSS屬性，分為類型、背景、區(qū)塊、方框、邊框、列表、定位和擴展共8個部分，根據(jù)需要對相關屬性進行設置，連續(xù)單擊【確定】按鈕即可完成CSS規(guī)則的創(chuàng)建。4.3學習任務：在網(wǎng)頁文檔中使用CSS樣式4.3.1CSS樣式面板4.3.2應用CSS樣式4.3.3定義CSS樣式屬性4.3.1CSS樣式面板在DreamweaverCS4中，對CSS樣式的管理主要通過“CSS樣式”面板完成。選擇“窗口→CSS樣式”菜單命令，展開“CSS樣式”面板。該面板分為“全部”模式和“正在”模式，分別如圖4-6和圖4-7所示。使用面板頂部的切換按鈕可以在兩種模式之間切換。全部模式：在“全部”模式下，“CSS樣式”面板顯示為兩個窗格?！八幸?guī)則”窗格，顯示當前文檔中定義的規(guī)則以及附加到當前文檔的樣式表中定義的所有規(guī)則；“屬性”窗格用于編輯“所有規(guī)則”窗格中任何選定的CSS規(guī)則的屬性。正在模式：在“正在”模式下，“CSS樣式”面板將顯示為3個面板：“所選內(nèi)容的摘要”窗格顯示當前所選頁面元素的CSS規(guī)則的屬性；“關于”窗格顯示所選屬性的位置；“屬性”窗格，用來修改所選規(guī)則的CSS屬性。圖4-6“CSS樣式”面板全部模式圖4-7“CSS樣式”面板正在模式“CSS樣式”面板中各功能按鈕含義：按鈕：依次為“顯示類別視圖”、“顯示列表視圖”、“只顯示設置屬性”，用來設置“屬性”欄顯示方式。默認情況下，“屬性”窗格僅顯示那些先前已設置的屬性，并按字母順序排列它們。附加樣式表按鈕：單擊該按鈕，可以在HTML文檔中鏈接一個外部CSS文件。新建CSS規(guī)則按鈕：單擊該按鈕，可以編輯一個新建CSS樣式文件。編輯樣式表按鈕：單擊該按鈕，可對選定的CSS樣式進行編輯。刪除CSS樣式表按鈕：單擊該按鈕，可以刪除選定的CSS樣式。4.3.2應用CSS樣式可以使用“CSS樣式”面板查看、創(chuàng)建、編輯和刪除CSS樣式，并且可以將外部樣式表附加到文檔。1．將外部樣式表附加到文檔在菜單欄中選擇“文件→新建”命令，打開“新建文檔”對話框，在左邊的分類中選擇“空白頁”項，然后再在“頁面類型”欄中選擇“CSS”，單擊【創(chuàng)建】按鈕就可以新建一個CSS樣式文件。單擊“CSS樣式”面板中的附加樣式表按鈕，可將該CSS文件或其他已經(jīng)存在的外部CSS樣式文件鏈接到當前網(wǎng)頁。2．在CSS樣式面板中編輯規(guī)則（全部模式）編輯CSS規(guī)則有3種常用方法：在“所有規(guī)則”窗格中雙擊某條CSS規(guī)則，彈出“CSS規(guī)則定義”對話框，然后進行更改。在“所有規(guī)則”窗格中選擇一條CSS規(guī)則，然后在下面的“屬性”窗格中編輯該規(guī)則的屬性。在“所有規(guī)則”窗格中選擇一條CSS規(guī)則，單擊“CSS樣式”面板右下角的【編輯樣式】按鈕。3．重命名CSS選擇器（全部模式）在“CSS樣式”面板（全部模式）中，雙擊要更改的選擇器，以使名稱處于可編輯狀態(tài)，然后進行更改，按<Enter>鍵確認。提示：要重命名的類內(nèi)置于當前文檔頭中，Dreamweaver將更改類名稱以及當前文檔中該類名稱的所有實例。如果要重命名的類位于外部CSS文件中，Dreamweaver將打開，并在該文件中更改類名稱。Dreamweaver還啟動一個站點范圍的“查找和替換”對話框，以便可以在站點中搜索舊類名稱的所有實例。4．應用CSS樣式首先，選擇要應用CSS樣式的文本或?qū)ο?。將插入點放在段落中以便將樣式應用于整個段落。如果在單個段落中選擇一個文本范圍，則CSS樣式只影響所選范圍。若要指定要應用CSS樣式的確切標簽，可在位于“文檔”窗口左下角的標簽選擇器中選擇標簽。應用類樣式，可執(zhí)行下列操作之一：在“CSS樣式”面板（全部模式）中，右鍵單擊要應用的樣式的名稱，然后從上下文菜單選擇“套用”。在屬性面板中單擊【HTML】按鈕，從“類”下拉列表中選擇要應用的類樣式；或在屬性面板中單擊【CSS】按鈕，從“目標規(guī)則”下拉列表中選擇要應用的類樣式。5．刪除選定內(nèi)容的樣式選擇要從中刪除樣式的文本或?qū)ο?。在HTML“屬性”面板中，從“類”下拉類表中選擇“無”；或在CSS屬性面板中，從“目標規(guī)則”下拉列表中選擇“刪除類”。6．拷貝CSS規(guī)則為了快速建立網(wǎng)站CSS樣式，可將之前已經(jīng)創(chuàng)建好的或別人定義的樣式進行復制，再修改其中的部分樣式，這樣不但提高了制作效率，而且可以學習當前網(wǎng)站流行的樣式。在“所有規(guī)則”窗格中選擇一條或多條CSS規(guī)則，然后單擊右鍵從上下文菜單中選擇“拷貝”，選中要“粘貼”的位置，單擊右鍵“粘貼”即可。7．移動CSS規(guī)則使用“CSS樣式”面板可以輕松地將CSS規(guī)則移動到不同位置?？梢詫⒁?guī)則在文檔間移動、從文檔頭移動到外部樣式表、在外部CSS文件間移動等。如果嘗試移動的規(guī)則與目標樣式表中的規(guī)則有沖突，Dreamweaver會顯示“存在同名規(guī)則”對話框。在“CSS樣式”面板中，選擇要移動的一個或多個規(guī)則，然后右鍵單擊選定內(nèi)容，并從上下文菜單中選擇“移動CSS規(guī)則”；或者在“代碼”視圖中，選擇要移動的一個或多個規(guī)則，然后右鍵單擊選定內(nèi)容，并從上下文菜單中選擇“CSS樣式→移動CSS規(guī)則”。兩種方法都將打開“移至外部樣式表”對話框，如圖4-8所示。樣式表：將CSS規(guī)則移至現(xiàn)有樣式表。新樣式表：將CSS規(guī)則移至新的樣式表中，并將其附加到當前文檔。圖4-8“移至外部樣式表”對話框4.3.3定義CSS樣式屬性DreamweaverCS4在“CSS規(guī)則定義”對話框中提供了多種不同的CSS樣式屬性定義，它們被安排在如圖4-2所示的8大類別中，要熟練使用CSS必須對這8大類別的屬性有深入理解，在后續(xù)的案例中會應用到大部分屬性。1．類型屬性“類型”類別可以定義CSS樣式的字體和類型設置。各選項含義如下：Font-family（字體）：為樣式設置字體系列（或多組字體系列）。Font-size（大?。憾x文本大小?？梢酝ㄟ^選擇數(shù)字和度量單位選擇特定的大小，也可以選擇相對大小。使用像素作為單位可以有效地防止瀏覽器扭曲文本。Font-style（樣式）：指定“正?！?、“斜體”或“偏斜體”作為字體樣式。默認設置是“正?！?。Line-height（行高）：設置文本所在行的高度。Text-decoration（修飾）：向文本中添加下劃線、上劃線或刪除線，或使文本閃爍。常規(guī)文本的默認設置是“無”。鏈接的默認設置是“下劃線”。將鏈接設置設為無時，可以通過定義一個特殊的類去除鏈接中的下劃線。Font-weight（粗細）：對字體應用特定或相對的粗體量?！罢！钡扔?00；“粗體”等于700。Font-variant（變體）：設置文本的小型大寫字母變體。Text-transform（大小寫轉(zhuǎn)換）：將所選內(nèi)容中的每個單詞的首字母大寫或?qū)⑽谋驹O置為全部大寫或小寫Color（顏色）：設置文本顏色。2．背景屬性“背景”類別可以對網(wǎng)頁中的任何元素應用背景屬性。例如，創(chuàng)建一個樣式，將背景顏色或背景圖像添加到任何頁面元素中，比如在文本、表格、頁面等的后面。還可以設置背景圖像的位置。各選項含義如下：Background-color（背景顏色）：設置元素的背景顏色。Background-image（背景圖像）：設置元素的背景圖像。Background-repeat：確定是否以及如何重復背景圖像?！安恢貜汀敝辉谠亻_始處顯示一次圖像。“重復”在元素的后面水平和垂直平鋪圖像?！皺M向重復”和“縱向重復”分別顯示圖像的水平帶區(qū)和垂直帶區(qū)，圖像將被剪輯以適合元素的邊界。Background-attachment：確定背景圖像是固定在其原始位置還是隨內(nèi)容一起滾動。Background-position(X)和Background-position(Y)：指定背景圖像相對于元素的初始位置。這可用于將背景圖像與頁面中心垂直(Y)和水平(X)對齊。如果附件屬性為“固定”，則位置相對于“文檔”窗口而不是元素。3．區(qū)塊屬性“區(qū)塊”類別可以定義標簽和屬性的間距和對齊設置。各選項含義如下：Word-spacing（單詞間距）：設置字詞的間距。若要設置特定的值，可在彈出菜單中選擇“值”，然后輸入一個數(shù)值。在第二個彈出菜單中，選擇度量單位（例如像素、點等）。Letter-spacing（字母間距）：增加或減小字母或字符的間距。若要減小字符間距，可指定一個負值（例如-4）。字母間距設置覆蓋對齊的文本設置。Vertical-align（垂直對齊）：指定應用此屬性的元素的垂直對齊方式。Text-align（文本對齊）：設置文本在元素內(nèi)的對齊方式。Text-indent（文字縮進）：指定第一行文本縮進的程度。White-space（空格）：確定如何處理元素中的空格。從三個選項中進行選擇：“正?！?，收縮空白；“保留”，其處理方式與文本被括在<pre>標簽中一樣（即保留所有空白，包括空格、制表符和回車）；“不換行”，指定僅當遇到<br>標簽時文本才換行。Display（顯示）：指定是否以及如何顯示元素?！盁o”指定到某個元素時，它將禁用該元素的顯示。4．方框?qū)傩浴胺娇颉鳖悇e為用于控制元素在頁面上的放置方式的標簽和屬性定義設置。各選項含義如下：Width/Height（寬和高）：設置元素的寬度和高度。Float（浮動）：設置其它元素（如文本、APDiv、表格等）在圍繞元素的哪個邊浮動。其它元素按通常的方式環(huán)繞在浮動元素的周圍。Clear（清除）：定義元素的哪一邊不允許有APDiv元素。如果清除邊上出現(xiàn)的AP元素，則待清除設置的元素將移到該元素下方。Padding（填充）：指定元素內(nèi)容與元素邊框之間的間距。取消選擇“全部相同”選項可設置元素各個邊的填充。Margin（邊界）：指定一個元素的邊框與另一個元素之間的間距。僅當該屬性應用于塊級元素（段落、標題、列表等）時，Dreamweaver才會在“文檔”窗口中顯示它。取消選擇“全部相同”可設置元素各個邊的邊距。5．邊框?qū)傩浴斑吙颉鳖悇e可以定義元素周圍的邊框樣式、寬度和顏色屬性。各選項含義如下：Style（類型）：設置邊框的樣式外觀。Width（寬度）：設置元素邊框的粗細。Color（顏色）：設置邊框的顏色。6．列表屬性“列表”類別為列表標簽定義列表設置（如項目符號大小和類型）。各選項含義如下：List-style-type：設置項目符號或編號的外觀。List-style-image：為項目符號指定自定義圖像。List-style-position：設置列表項文本是否換行并縮進（外部）或者文本是否換行到左邊距（內(nèi)部）。7．定位屬性“定位”樣式屬性確定與選定的CSS樣式相關的內(nèi)容在頁面上的定位方式。各選項含義如下：Position（位置）：確定瀏覽器應如何來定位選定的元素，Visibility（可見性）：確定內(nèi)容的初始顯示條件。如果不指定可見性屬性，則默認情況下內(nèi)容將繼承父級標簽的值。body標簽的默認可見性是可見的。Z-Index（Z軸）：確定內(nèi)容的堆疊順序。Z軸值較高的元素顯示在Z軸值較低的元素（或根本沒有Z軸值的元素）的上方。值可以為正，也可以為負。Overflow（溢出）：確定當容器（如DIV或P）的內(nèi)容超出容器的顯示范圍時的處理方式。Placement（位置）：指定內(nèi)容塊的位置和大小。瀏覽器如何解釋位置取決于“類型”設置。如果內(nèi)容塊的內(nèi)容超出指定的大小，則將改寫大小值。Clip（剪輯）：定義內(nèi)容的可見部分。如果指定了剪輯區(qū)域，可以通過腳本語言（如JavaScript）訪問它，并操作屬性以創(chuàng)建像擦除這樣的特殊效果。使用“改變屬性”行為可以設置擦除效果。8．擴展屬性“擴展”樣式屬性包括濾鏡、分頁和鼠標指針選項。各選項含義如下：break-before/after（分頁）：在打印期間在樣式所控制的對象之前或者之后強行分頁。Cursor（鼠標）：當指針位于樣式所控制的對象上時改變指針圖像。Filter（過濾器）：對樣式所控制的對象應用特殊效果。4.4上機實訓——用CSS美化網(wǎng)頁通過本實訓的練習，希望用戶熟練掌握CSS使用方法，能夠靈活運用CSS技術來美化網(wǎng)頁，提高網(wǎng)頁的設計與制作能力。1．實訓要求練習創(chuàng)建CSS樣式的方法練習套用CSS樣式練習通過CSS設置文本、列表、超鏈接的方法2．實訓指導在DreamweaverCS4中用CSS樣式美化網(wǎng)頁。1）在DreamweaverCS4中打開已有網(wǎng)頁content.html，如圖4-9所示。圖4-9設置CSS樣式前的頁面2）創(chuàng)建標題1的CSS類規(guī)則。在“CSS樣式”面板中，單擊【新建CSS規(guī)則】按鈕，彈出“新建CSS規(guī)則”對話框，選擇器類型設為“標簽”，從選擇器名稱下拉列表中選擇“h1”標簽，規(guī)則定義選擇“mwxs.css”。單擊【確定】按鈕后，打開“CSS規(guī)則定義”對話框，在“類型”分類中Font-size設為“32px”，Line-height設為“60px”，F(xiàn)ont-weight設為“bolder”，在“區(qū)塊”分類中Text-align設為“center”，使標題居中顯示，連續(xù)單擊【確定】按鈕完成設置。3）用同樣的方法分別創(chuàng)建針對文章出處文本“2006-11-21作者……”的CSS類規(guī)則（選擇器名稱設定為“cc”，規(guī)則定義選擇“mwxs.css”）和正方“我在街角……”的CSS類規(guī)則（選擇器名稱設定為“nr”，規(guī)則定義選擇“mwxs.css”）。屬性值根據(jù)情況用戶自定。4）將CSS類規(guī)則套用到文章中。選中標題“像春天一樣”，在屬性面板中單擊【HTML】按鈕，從“格式”下拉列表中選擇“標題1”；選中文章出處注釋文本“2006-11-21……”，在屬性面板中單擊【CSS】按鈕，從“目標規(guī)則”下拉列表中選擇“.cc”，套用CSS樣式后的文章外觀如圖4-10所示，同樣方法為文章正文套用“.nr”CSS樣式。5）將“美文小說”列表區(qū)的項目列表符號改為自定義圖像。在打開的“新建CSS規(guī)則”對話框中，選擇器類型設為“類”，選擇器名稱設定為“l(fā)n01”，規(guī)則定義選擇“mwxs.css”；單擊【確定】按鈕，打開“CSS規(guī)則定義”對話框，在“列表”類型中L

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經(jīng)權益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責。
  • 6. 下載文件中如有侵權或不適當內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

最新文檔

評論

0/150

提交評論