版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進行舉報或認領(lǐng)
文檔簡介
項目14
使用CSS樣式表美化頁面項目描述
知識儲備
實踐向?qū)?/p>
能力拓展
退出項目小結(jié)
項目描述
CSS層疊樣式表，是用于控制網(wǎng)頁樣式并允許將樣式信息與網(wǎng)頁內(nèi)容分離的一種標記性語言。引入CSS是為了使HTML能夠更好的適應(yīng)頁面的美工設(shè)計。本項目制作“詩歌”網(wǎng)頁和“廬山風(fēng)景介紹”網(wǎng)頁，并利用CSS美化HTML頁面。返回14.2知識儲備14.2.1
CSS的基本概念14.2.2
CSS樣式面板介紹14.2.3
創(chuàng)建CSS樣式14.2.4
設(shè)置CSS規(guī)則14.2.5
CSS樣式的應(yīng)用14.2知識儲備
14.2.1
CSS的基本概念1.CSS樣式基本語法
選擇器（selector）是CSS中的基本概念，所有HTML語言中的標記都是通過不同選擇器進行控制的。用戶只需要通過選擇器對應(yīng)不同的HTML標簽進行控制，并賦予各種樣式聲明，即可實現(xiàn)各種樣式的效果。
CSS樣式的基本語法規(guī)則由兩個主要的部分構(gòu)成：選擇器，一條或多條聲明（或稱為規(guī)則）。
格式：選擇器{聲明1;聲明2;...聲明N}14.2知識儲備
14.2.1
CSS的基本概念
“選擇器”一般是指需要改變樣式的HTML元素。每條聲明由一個屬性和一個值組成。屬性是希望設(shè)置的樣式屬性。每個屬性有一個值。屬性和值用冒號分開。
格式：選擇器{屬性:值}
例如：h1{color:red;font-size:14px;}以上代碼的作用是將h1標記內(nèi)的文字顏色定義為紅色，同時將字體大小設(shè)置為14像素。h1是選擇器，color和font-size是屬性，red和14px是值，如圖14-1所示。圖14-1CSS選擇器14.2知識儲備
14.2.1
CSS的基本概念2.引入CSS樣式的方法
（1）行內(nèi)樣式
行內(nèi)樣式是所有樣式方法中最為直接的一種，它直接對HTML的標記使用style屬性，然后將CSS代碼直接寫在其中。【例14-1】<html>……<body><h2style="color:red;">CSS標題1</h2><p>CSS標記的正文內(nèi)容l</p><h2style="color:blue;">CSS標題2</h2><p>CSS標記的正文內(nèi)容2</p></body></html>14.2知識儲備
14.2.1
CSS的基本概念
（2）內(nèi)嵌樣式內(nèi)嵌樣式表是將CSS在<head>與</head>標記之間插入一對<style>和</style>標記，并在其間進行樣式表代碼的編寫?！纠?4-2】將例14-1改寫成內(nèi)嵌樣式，效果完全相同。顯示效果如圖14-2所示。從例14-2中看到，所有CSS的代碼部分被集中在了同一個區(qū)域，方便了后期的維護。但如果是一個網(wǎng)站，擁有眾多不同頁面，對于不同頁面上的<h2>標記都希望采用同樣的風(fēng)格時，內(nèi)嵌樣式的方法就顯得略微麻煩，每次更新都要每個頁面一起更新。因此這種方式僅適用于對特殊的頁面設(shè)置單獨的樣式風(fēng)格，比如網(wǎng)站的首頁，也是目前國內(nèi)外大多數(shù)門戶網(wǎng)站對首頁面使用的CSS引入方式。14.2知識儲備
14.2.1
CSS的基本概念
（3）鏈接式
鏈接式CSS樣式表是使用頻率最高，也是最為實用的方法。它將HTML頁面本身與CSS樣式風(fēng)格分離為兩個或者多個文件，實現(xiàn)了頁面HTML代碼與美工CSS代碼的分離，使得前期制作和后期維護都較為方便，網(wǎng)站后臺的技術(shù)人員與美工設(shè)計者也因此可以較好的分工。
它的主要特點在于，CSS代碼與HTML代碼完全分離，并且同一個CSS文件可以被不同的HTML所鏈接使用。在設(shè)計整個網(wǎng)站時，可以將所有頁面都鏈接到同一個CSS文件，使用相同的樣式風(fēng)格，這樣如果整個網(wǎng)站需要進行樣式上的修改，僅需要修改這一個CSS文件即可。它使得網(wǎng)站整體風(fēng)格快速統(tǒng)一成為可能，后期維護的工作量大幅減少。14.2知識儲備
14.2.1
CSS的基本概念
（4）導(dǎo)入樣式
導(dǎo)入樣式表與前文所講的鏈接樣式表的功能相似，但在語法和加載方式上有區(qū)別。采用import方式導(dǎo)入的樣式表，在HTML文件初始化時，就會被導(dǎo)入到HTML文件內(nèi)，作為該文件的一部分，類似內(nèi)嵌式的效果。而鏈接式樣式表則是在HTML的標記需要樣式定義外觀時才以鏈接的方式加載。在HTML文件中導(dǎo)入樣式表使用@import語句，它本身屬于CSS語句，放在〈style〉與</style>標記之間。14.2知識儲備
14.2.2
CSS樣式面板介紹1．打開CSS樣式面板
使用“CSS樣式”面板可以查看、創(chuàng)建、編輯和刪除CSS樣式，也可以將外部樣式表附加到文檔?？梢酝ㄟ^頂部菜單欄的“窗口”菜單，單擊“CSS樣式“命令，打開CSS樣式面板。如圖14-3所示。圖14-3CSS樣式面板14.2知識儲備
14.2.2
CSS樣式面板介紹2．CSS樣式面板“當前”狀態(tài)
在“CSS樣式”面板中單擊“當前”按鈕，使CSS樣式面板處于“當前”模式下，在此模式下，CSS樣式面板將顯示三個窗格面板。如圖14-4所示。
圖14-4CSS樣式面板“當前”狀態(tài)圖14-5所選內(nèi)容的摘要14.2知識儲備
14.2.2
CSS樣式面板介紹3．CSS樣式面板“全部”狀態(tài)
在“CSS樣式”面板中單擊“全部”按鈕，即可切換成“全部”模式，在此模式下，“CSS樣式”面板只顯示兩個窗格面板。如圖14-6所示。
圖14-6“全部”狀態(tài)14.2知識儲備
14.2.2
CSS樣式面板介紹4.CSS樣式面板編輯按鈕組
在“CSS樣式”面板右下角有五個按鈕，當鼠標停留每一個按鈕上面時，會顯示該按鈕的名稱。如14-7圖所示。
圖14-7編輯按鈕組14.2知識儲備
14.2.3創(chuàng)建CSS樣式
在Dreamweaver軟件中可以創(chuàng)建CSS規(guī)則來自動完成編寫CSS選擇器，對HTML標簽的外觀進行設(shè)置。
打開任意HTML文檔，將光標移動到要插入CSS規(guī)則的位置上，然后選擇一種方法打開“新建CSS規(guī)則”對話框。
方法一：打開“格式”菜單，選擇“CSS樣式”命令，在彈出的菜單中選擇“新建”項，如圖14-8所示。
方法二：單擊CSS樣式面板右下角的“新建CSS規(guī)則”按鈕
。同樣也可以打開“新建CSS規(guī)則”對話框。
方法三：在“屬性”面板中單擊左邊的“CSS”按鈕
，打開屬性檢查器，在“目標規(guī)則”下拉框中選擇“新CSS規(guī)則”項，單擊“編輯規(guī)則”按鈕
，也可以打開“新建CSS規(guī)則”對話框。14.2知識儲備
14.2.4
設(shè)置CSS規(guī)則1.設(shè)置文本樣式Font-family：設(shè)置字體系列。在下拉菜單中選擇字體。Font-size：定義文字的字體大小。Font-weight：對字體應(yīng)用特定或相對的粗體量。Font-style：指定“正?！?、“斜體”或“偏斜體”作為字體樣式。Font-variant：設(shè)置文本的小型大寫字母變體。Line-height：設(shè)置文本所在行的高度。Text-transform：將所選內(nèi)容中的每個單詞的首字母大寫或?qū)⑽谋驹O(shè)置為全部大寫或小寫。Text-decoration：向文本中添加下劃線、上劃線或刪除線，或使文本閃爍。Color：設(shè)置文本的顏色。14.2知識儲備
14.2.4
設(shè)置CSS規(guī)則2.設(shè)置背景樣式Background-color：設(shè)置元素的背景顏色。Background-image：設(shè)置元素的背景圖像。Background-repeat：設(shè)置是否以及如何重復(fù)背景圖像Background-attachment：設(shè)置背景圖像是固定在其原始位置還是隨內(nèi)容一起滾動。Background-position(X)和Background-position(Y)：設(shè)置背景圖片相對于元素的初始位置。14.2知識儲備
14.2.4
設(shè)置CSS規(guī)則3.設(shè)置區(qū)塊樣式Word-spacing：設(shè)置字詞的間距。Letter-spacing：增加或減小字母或字符的間距。Vertical-align：指定元素的垂直對齊方式。Text-align：設(shè)置文本在元素內(nèi)的對齊方式。Text-indent：指定第一行文本縮進的程度?？梢允褂秘撝祫?chuàng)建凸出，但顯示方式取決于瀏覽器。White-space：設(shè)置如何處理元素中的空格。Display：設(shè)置是否以及如何顯示元素。14.2知識儲備
14.2.4
設(shè)置CSS規(guī)則4.設(shè)置方框樣式Width：設(shè)置元素的寬度。Height：設(shè)置元素的高度。Float：設(shè)置元素的浮動方式。元素按通常的方式環(huán)繞在浮動元素的周圍Clear：清除浮動元素的影響。如果被設(shè)置clear屬性的元素旁邊出現(xiàn)浮動元素，則浮動元素將移到該元素的下方。Padding：指定元素內(nèi)容與元素邊框之間的間距（如果沒有邊框，則為邊距）全部相同：取消此項，可以分別設(shè)置元素各個邊的填充。如果選擇此項，可以為元素的“上”、“右”、“下”和“左”設(shè)置相同的填充屬性。Margin：設(shè)置一個元素的邊框與另一個元素之間的間距（如果沒有邊框，則為填充）。14.2知識儲備
14.2.4
設(shè)置CSS規(guī)則5.設(shè)置邊框樣式Style：設(shè)置邊框的樣式外觀。Width：設(shè)置元素邊框的粗細。Color：設(shè)置邊框的顏色。全部相同：取消此項，可以分別設(shè)置元素各個邊的邊框樣式、邊框粗細、邊框顏色屬性。選擇此項，可以為元素的“上”、“右”、“下”和“左”設(shè)置相同的屬性。14.2知識儲備
14.2.4
設(shè)置CSS規(guī)則6.設(shè)置列表樣式List-style-type：設(shè)置項目符號或編號的外觀。List-style-image：為項目符號指定自定義圖像。List-style-position：設(shè)置列表項文本是否換行并縮進（在外部）或者文本是否換行到左邊距（在內(nèi)部）。14.2知識儲備
14.2.4
設(shè)置CSS規(guī)則7.設(shè)置列表樣式Position：設(shè)置瀏覽器應(yīng)該如何定位選定的元素。Width：設(shè)置元素的寬度。Height：設(shè)置元素的高度。Visibility：設(shè)置內(nèi)容的初始顯示條件。如果不指定可見性屬性，則默認情況下內(nèi)容將繼承父級標簽的值。Z-index：設(shè)置內(nèi)容的堆疊順序。Z軸值較高的元素顯示在Z軸值較低的元素（或根本沒有Z軸值的元素）的上方。值可以為正，也可以為負。Overflow：設(shè)置當容器（如：DIV或P）的內(nèi)容超出容器的顯示范圍時的處理方式。Placement：指定內(nèi)容塊的位置和大小。Clip：定義內(nèi)容的可見部分。14.2知識儲備
14.2.4
設(shè)置CSS規(guī)則8.設(shè)置擴展樣式break-before：打印時在樣式所控制的對象之前強行分頁。break-after：打印時在樣式所控制的對象之后強行分頁。Cursor：當指針位于樣式所控制的對象上時改變指針圖像。Filter：對樣式所控制的對象應(yīng)用特殊效果。14.2知識儲備
14.2.5
CSS樣式的應(yīng)用1.建立規(guī)則（1）打開配套光盤中文檔14-5a.html，文檔中有未經(jīng)加工的文本頁面。（2）選中列表的最外層元素UL，通過下方的標簽選擇器，如圖14-18所示。在屬性面板中給UL標記添加一個ID。（3）在屬性面板中單擊
按鈕，切換屬性面板，然后單擊
，在彈出的“新建CSS規(guī)則”對話框中，如圖14-20所示，單擊“確定”按鈕后即可進入規(guī)則定義的對話框。
圖14-18選中對象
圖14-19設(shè)置ID圖14-20建立規(guī)則14.2知識儲備
14.2.5
CSS樣式的應(yīng)用2.定義邊框的規(guī)則UL外圍存在一個框，在“CSS規(guī)則定義”對話框的左側(cè)“分類”列表框中，選擇“方框”選項，輸入?yún)?shù)如圖14-21所示。在左側(cè)選中“邊框”選項，設(shè)置參數(shù)如圖14-22所示。
圖14-21設(shè)置方框參數(shù)圖14-22設(shè)置邊框參數(shù)14.2知識儲備
14.2.5
CSS樣式的應(yīng)用3.定義復(fù)合鏈接規(guī)則對框內(nèi)的超鏈接文字進行外觀的設(shè)置，單擊CSS樣式面板中的
按鈕新增一個規(guī)則，該規(guī)則用來設(shè)置文字的顏色、行距、修飾、邊距以及呈現(xiàn)方式。具體設(shè)置如圖14-24所示?！?boxlia”規(guī)則設(shè)置如下：類型：lineheight:25px，font-size:13px，color:#333，text-decoration:none區(qū)塊：display:block
14.2知識儲備
14.2.5
CSS樣式的應(yīng)用4.編輯規(guī)則前一規(guī)則定義完成后，項目符號“?”十分明顯地出現(xiàn)了在框的外面，因此要對原有的規(guī)則進行修改。（1）在“全部”狀態(tài)下，雙擊“#box”規(guī)則，彈出“CSS規(guī)則定義”對話框進行規(guī)則修改；也可以在“CSS樣式”面板中，選中“#box”規(guī)則，單擊右下腳的修改按鈕來進行規(guī)則的重編輯，如圖14-26所示（2）在“CSS規(guī)則定義”對話框中，設(shè)置“方框”類別中“padding-left:20px；width:330px;”，即可將列表項目符號“拉”回到方框中間。
圖14-26修改規(guī)則14.2知識儲備
14.2.5
CSS樣式的應(yīng)用5.定義偽類規(guī)則偽類規(guī)則被視作一種復(fù)合規(guī)則，偽類是用來指定一個或者與其相關(guān)的選擇器的狀態(tài)的選擇器。單擊
添加一個新規(guī)則的時候，在“選擇器類型”設(shè)置為“復(fù)合內(nèi)容”后，下方對話框中除了可以直接輸入選擇器名稱，還可以選擇幾個以a標記為基礎(chǔ)的選擇器，如圖14-27所示。超鏈接相關(guān)的偽類包括：·link用在未訪問的鏈接上?！isited用在已經(jīng)訪問過的鏈接上?！ctive用于獲得焦點的鏈接上?！over用于鼠標光標置于其上的鏈接。
返回14.3實踐向?qū)蝿?wù)14-1詩歌排版:《再別康橋》1.設(shè)計頁面結(jié)構(gòu)DIV是一種常用的構(gòu)造標記，經(jīng)常用于制作其他所有標記的容器。這里采用一個DIV標記，作為整個頁面的主“容器”，裝著內(nèi)容標記以固定它們在頁面的水平居中處呈現(xiàn)。用H1標記展現(xiàn)詩歌的標題，用P標記作為詩歌正文的主體標記。本頁面的結(jié)構(gòu)如圖14-29所示。圖14-29詩歌頁面結(jié)構(gòu)14.3實踐向?qū)蝿?wù)14-1詩歌排版:《再別康橋》2.制作HTML頁面①在頁面中插入一個DIV，使用“插入”菜單→“布局對象”→“DIV標簽”命令，彈出“插入DIV標簽”對話框，將一個DIV標簽插入到當前頁面中，ID命名為“poem”。②在此DIV標簽中，使用菜單命令“插入→HTML→文本對象→標題1”插入一個標題。輸入標題“再別康橋”后，在下一行錄入整首詩歌（換行采用SHIFT+ENTER）。也可以直接打開文件光盤素材文件夾中純HTML文件“14-6a.html”進行修改。14.3實踐向?qū)蝿?wù)14-1詩歌排版:《再別康橋》3.設(shè)置文本CSS規(guī)則①定義DIV#poem容器，讓它水平居中，需要利用到它的左右外邊距，自動撐開，建立一個僅對該文檔生效的規(guī)則，首先設(shè)置“CSS規(guī)則定義”對話框中的“背景”類別“background-color”為“#F8FFF0”，然后把“方框”的規(guī)則定義如圖14-31所示。將“邊框”設(shè)置成如圖14-32所示。②為了配合詩文效果，安裝一種中文書法字體“方正啟體簡體”。安裝字體的方法是將字體文件直接復(fù)制到系統(tǒng)盤的windows文件夾內(nèi)的fonts文件夾（XP和WIN7都適用）然后在Dreamweaver中添加該字體。③為H1標簽建立一個僅限該文檔使用的選擇器規(guī)則，在“類型”中，設(shè)置如圖14-33所示。④設(shè)置詩歌的文字居中，在“CSS樣式”面板中單擊按鈕
，新建一個復(fù)合規(guī)則“#poemp”，在“類型”中將字體設(shè)置為“方正啟體簡體”，字體大小“18px”，字體顏色“#666”。特別需要注意的“定位”類別設(shè)置如圖14-36所示。14.3實踐向?qū)蝿?wù)14-1詩歌排版:《再別康橋》4.設(shè)置背景規(guī)則①設(shè)置頁面背景水平平鋪②設(shè)置詩歌標題“再別康橋”背景圖片③設(shè)置詩歌正文背景圖片圖14-28詩歌美化效果1４.3實踐向?qū)蝿?wù)14-2圖文排版：制作廬山景點介紹頁面１.設(shè)計頁面結(jié)構(gòu)本頁面圖片和文字較多，適合采取圖文混排形式排版。在最外層是DIV容器，內(nèi)容正文用P標記，景點子標題也用P標記，圖片一左一右，從上到下間隔排列，第一個小標題向左浮動，第二個小標題向右浮動?？傮w規(guī)劃如圖14-43所示。圖14-43“廬山介紹”頁面結(jié)構(gòu)14.3實踐向?qū)蝿?wù)14-2圖文排版：制作廬山景點介紹頁面2.制作HTML頁面使用“插入”菜單→“布局對象”→“DIV標簽”命令，將一個DIV標簽插入到當前頁面中，ID命名為“l(fā)ushan”。在此DIV標簽中，先將各個小標題和正文內(nèi)容錄入或粘貼（標題與段落間的換行用enter，介紹文字段落內(nèi)部不換行）。完成文字部分后，在相應(yīng)的小標題后插入該景點的圖片。也可以直接打開光盤素材文件夾中“14-7a.html”文件。14.3實踐向?qū)蝿?wù)14-2圖文排版：制作廬山景點介紹頁面3.設(shè)置CSS規(guī)則①定義整個頁面的背景色。建立標簽規(guī)則“body”，設(shè)置“背景”類別中“background-color：#033”，“區(qū)塊”類別中“text-align：center”，“類型”類別中“font-size：13px”。②定義最外層方框的規(guī)則，使用ID規(guī)則，“#lushan”方框設(shè)置如圖14-44所示。“邊框”類別中設(shè)置“width:2px，style:solid，color:#CC0”?！氨尘啊鳖悇e中設(shè)置“background-color:#E9FEEB”。③定
溫馨提示
- 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當內(nèi)容，請與我們聯(lián)系，我們立即糾正。
- 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 2025年度馬鈴薯種植技術(shù)培訓(xùn)與推廣服務(wù)合同4篇
- 2025年度房產(chǎn)交易稅費墊付服務(wù)合同4篇
- 二零二五年度高校教師專業(yè)發(fā)展聘用合同書范本3篇
- 2025版路燈養(yǎng)護與社區(qū)安全監(jiān)控服務(wù)合同3篇
- 二零二五版開發(fā)商購房合同（帶房產(chǎn)增值保值承諾）3篇
- 二零二五年度陸運貨物運輸與環(huán)保技術(shù)研發(fā)合同3篇
- 二零二五年教育機構(gòu)學(xué)費收入還款協(xié)議合同范本3篇
- 二零二五年機器人控制系統(tǒng)保修與維護服務(wù)協(xié)議3篇
- 2025年新型材料鐵藝護欄研發(fā)與生產(chǎn)合作協(xié)議3篇
- 二零二五版賣場裝修工程投資合作協(xié)議3篇
- 2023年保安公司副總經(jīng)理年終總結(jié) 保安公司分公司經(jīng)理年終總結(jié)(5篇)
- 中國華能集團公司風(fēng)力發(fā)電場運行導(dǎo)則(馬晉輝20231.1.13)
- 中考語文非連續(xù)性文本閱讀10篇專項練習(xí)及答案
- 2022-2023學(xué)年度六年級數(shù)學(xué)（上冊）寒假作業(yè)【每日一練】
- 法人不承擔(dān)責(zé)任協(xié)議書（3篇）
- 電工工具報價單
- 反歧視程序文件
- 油氣藏類型、典型的相圖特征和識別實例
- 流體靜力學(xué)課件
- 顧客忠誠度論文
- 實驗室安全檢查自查表
評論
0/150
提交評論