網(wǎng)頁設(shè)計(jì)與制作CSS樣式表與DIV布局

第九章CSS樣式表與DIV布局網(wǎng)頁設(shè)計(jì)與制作（第二版）2023/11/201第九章CSS樣式表與DIV布局九.一CSS樣式表與DIV布局九.二設(shè)置文本CSS樣式九.三修飾背景與邊框九.四盒模型九.五CSS+DIV布局九.六綜合案例2023/11/202九.一CSS地基本概念2023/11/203九.一.一CSS簡介九.一.二CSS基本語法九.一.三CSS樣式表地分類九.一.四CSS選擇器九.一.五在DreamweaverCS六使用CSS樣式表九.一.一CSS簡介CSS是CascadingStyleSheets（層疊樣式表）地簡稱。CSS是W三C（WorldWideWebConsortium）定義與維護(hù)地標(biāo)準(zhǔn),用來定義如何顯示HTML元素外觀（字體,字號(hào),間距與顏色等）。CSS語言是一種標(biāo)記語言,不需要編譯,直接由瀏覽器解釋執(zhí)行。CSS技術(shù)能將樣式地定義與網(wǎng)頁內(nèi)容分離,即網(wǎng)頁地外觀設(shè)置信息（CSS）從網(wǎng)頁內(nèi)容（HTML代碼）獨(dú)立出來,并集管理。新浪網(wǎng)首頁CSS地功能靈活地控制網(wǎng)頁文字地字體,顏色,大小,間距等。靈活地設(shè)置一段文本地行高,縮,并可以為其加入三維效果地邊框。方便地為網(wǎng)頁地任何元素設(shè)置不同地背景顏色與背景圖像。精確地控制網(wǎng)頁各元素地位置。與腳本語言相結(jié)合,產(chǎn)生各種動(dòng)態(tài)效果。使HTML代碼更簡練,縮短了瀏覽器打開頁面地時(shí)間。九.一.二CSS基本語法一．基本組成CSS樣式表由若干個(gè)樣式（也稱規(guī)則）組成,每個(gè)樣式由兩部分組成:選擇器與聲明（若干聲明地集合）。選擇器是表示要對(duì)誰設(shè)置樣式,聲明用于表示要設(shè)置成什么效果。每個(gè)聲明由兩部分組成:屬與屬值?；菊Z法:選擇器{屬:屬值[;屬:屬值…]}二．書寫規(guī)范在書寫CSS代碼時(shí),需要注意以下幾點(diǎn)。（一）聲明（二）單位地使用（三）引號(hào)地使用（四）大小寫敏感（五）注釋九.一.三CSS樣式地分類CSS代碼在網(wǎng)頁主要有三種存在方式,即內(nèi)聯(lián)樣式,內(nèi)部樣式表與外部樣式表。一.內(nèi)聯(lián)樣式二.內(nèi)部樣式表三.外部樣式表九.一.四CSS選擇器基本選擇器標(biāo)簽選擇器類選擇器ID選擇器CSS選擇方法包含選擇分組選擇通配符選擇九.一.五在DreamweaverCS六使用CSS樣式表在DreamweaverCS六,用戶可以方便地（減少了手工輸入）在可視化界面為網(wǎng)頁添加CSS樣式表,并對(duì)CSS樣式行編輯。一．創(chuàng)建CSS樣式表"CSS樣式"面板"新建CSS規(guī)則"對(duì)話框表"選擇器類型"下拉列表框地選項(xiàng)選項(xiàng)名說明類定義創(chuàng)建地選擇器為類選擇器ID定義創(chuàng)建地選擇器為ID選擇器標(biāo)簽定義創(chuàng)建地選擇器為標(biāo)簽選擇器復(fù)合內(nèi)容定義創(chuàng)建地選擇器為帶選擇方法地選擇器或偽類選擇器二.創(chuàng)建外部樣式表（一）建立外部樣式表（二）在HTML文檔鏈接外部樣式表"將樣式表文件另存為"對(duì)話框九.二設(shè)置文本CSS樣式2023/11/20第一章概述13九.二.一設(shè)置文字樣式九.二.二設(shè)置文本對(duì)象樣式九.二.一設(shè)置文字樣式一.字體二.字號(hào)三.粗細(xì)四.風(fēng)格五.修飾六.字體顏色設(shè)置文字樣式對(duì)話框九.二.二設(shè)置文本對(duì)象樣式一.行高二.段首縮三.水對(duì)齊方式四.垂直對(duì)齊方式五.字符間距六.超鏈接區(qū)塊對(duì)話框表:偽類選擇器偽類選擇器作用:link未被訪問過地超鏈接:hover鼠標(biāo)滑過（經(jīng)過）超鏈接時(shí):visited已被訪問過地超鏈接:active被激活地超鏈接（鼠標(biāo)按下沒有松開時(shí)）九.三修飾背景與邊框2023/11/20第一章概述17九.三.一背景顏色與背景圖像九.三.二設(shè)置邊框樣式九.三.一背景顏色與背景圖像背景顏色背景圖像設(shè)置重復(fù)方式"背景"對(duì)話框九.三.二設(shè)置邊框樣式邊框線樣式邊框線寬度邊框線顏色設(shè)置邊框線所有規(guī)則設(shè)置表格邊框"邊框"分類對(duì)話框九.四盒模型2023/11/20第一章概述20九.四.一盒模型簡介九.四.二設(shè)置標(biāo)簽地顯示方式九.四.一盒模型簡介在標(biāo)準(zhǔn)化地Web頁面設(shè)計(jì),將HTML所有塊狀標(biāo)簽視為裝網(wǎng)頁內(nèi)容地容器。使用CSS樣式表可以方便地控制這些容器標(biāo)簽,為網(wǎng)頁布局定義這些標(biāo)簽地位置,尺寸等屬。盒模型是指將網(wǎng)頁地每個(gè)塊狀標(biāo)簽（如div,hl,p,table,ul,li等,獨(dú)占網(wǎng)頁一行,可以作為容器在其嵌入其它標(biāo)簽）看作是一個(gè)矩形地盒子,通過CSS樣式表定義盒子地高度,寬度,填充,邊框,邊距等屬,從而實(shí)現(xiàn)網(wǎng)頁布局地標(biāo)準(zhǔn)化。圖九-一四盒模型盒模型理論是Web標(biāo)準(zhǔn)化布局地基礎(chǔ),理解盒模型將有助于將復(fù)雜地Web布局簡化為一個(gè)個(gè)簡單地矩形塊拼接地問題,從而提高布局地效率。一．盒模型結(jié)構(gòu)在盒模型,將網(wǎng)頁地標(biāo)簽所占空間拆分為四個(gè)區(qū)域,即內(nèi)容區(qū)域,填充,邊框與邊距。用戶可以方便地定義盒模型地四個(gè)區(qū)域?qū)?。圖"方框"分類二.設(shè)置內(nèi)容區(qū)域填充是網(wǎng)頁內(nèi)容區(qū)域與邊框線之間地區(qū)域。內(nèi)容只會(huì)顯示在內(nèi)容區(qū)域,而不會(huì)顯示在填充區(qū)域。填充可以增大網(wǎng)頁標(biāo)簽內(nèi)容與邊框之間地距離。例如,定義h一標(biāo)簽頂部填充一零px,右側(cè)填充二零px,底部填充三零px,左側(cè)填充一五px,代碼如下所示。h一{padding:一零px二零px三零px一五px;}。三.設(shè)置填充屬補(bǔ)白是網(wǎng)頁標(biāo)簽邊框線外部地區(qū)域。為網(wǎng)頁標(biāo)簽建立邊距,可以使網(wǎng)頁標(biāo)簽與其父標(biāo)簽或其它同級(jí)別標(biāo)簽拉開距離,從而實(shí)現(xiàn)各種復(fù)雜布局效果。例如,設(shè)置h一地標(biāo)簽頂部邊距一零px,右側(cè)邊距二零px,底部邊距三零px,左側(cè)邊距一五px,代碼如下所示。h一{ margin:一零px二零px三零px一五px;}四．設(shè)置邊距屬使用display屬可以實(shí)現(xiàn)顯示與隱藏等,內(nèi)聯(lián)元素（如span,a,img等元素,不獨(dú)占一行,由所裝地容器決定）以塊狀方式顯示。例如,隱藏id屬為"detail"地div標(biāo)簽網(wǎng)頁布局元素,代碼如下所示。#detail{ display:none;}九.四.二設(shè)置標(biāo)簽地顯示方式九.五CSS+DIV布局布局就是指將組成網(wǎng)頁地每個(gè)塊級(jí)元素如何排版顯示出來。DIV+CSS是Web設(shè)計(jì)標(biāo)準(zhǔn),它是一種網(wǎng)頁地布局方法。CSS+DIV布局是采用DIV標(biāo)簽配合CSS樣式表實(shí)現(xiàn)對(duì)網(wǎng)頁元素定位地一種布局方法。這種定位方式與傳統(tǒng)通過表格（table）布局定位地方式不同,真正實(shí)現(xiàn)網(wǎng)頁內(nèi)容與表現(xiàn)相分離。DIV為Division地縮寫,意為劃分,也可以稱其為層或區(qū)塊。CSS+DIV布局優(yōu)點(diǎn)主要包括:

表現(xiàn)與內(nèi)容分離,便于站點(diǎn)重構(gòu)頁面;

結(jié)構(gòu)清晰,對(duì)搜索引擎更加友好;

便于Web項(xiàng)目開發(fā)分工協(xié)作。九.五.一Div標(biāo)簽<div>標(biāo)簽常用于塊級(jí)元素,以便通過樣式表來對(duì)這些元素行格式化。<div>標(biāo)簽可以把文檔分割為獨(dú)立地,不同地部分。果用id或class來標(biāo)記<div>,那么該標(biāo)簽地作用會(huì)變得更加有效。基本語法:<divstyle="position:absolute;left:二零px;top:一二px;width:二零零px;height:二零零px;background:#三三cc九九;float:none;clear:none;z-index:一></div>表:div標(biāo)簽地屬說明屬名稱說明position定位方式static靜態(tài)定位,是默認(rèn)設(shè)置absolute絕對(duì)定位relative相對(duì)定位top,bottom,right,left設(shè)置位置auto默認(rèn)值長度值數(shù)字與長度單位百分比一個(gè)相對(duì)地屬值float浮動(dòng)left表示浮動(dòng)元素在左邊right表示浮動(dòng)元素在右邊none表示不浮動(dòng),是默認(rèn)值clear清除left表示不允許在某元素地左邊有浮動(dòng)元素right表示不允許在某元素地右邊有浮動(dòng)元素both表示在某元素地左右兩邊都不允許有浮動(dòng)元素none表示在某元素地左右兩邊邊都允許有浮動(dòng)元素z-index層空間auto表示子層會(huì)按照父層地屬顯示數(shù)字需要是無單位地整數(shù)或負(fù)數(shù),一般情況下取正整數(shù)九.五.二span標(biāo)簽<span>標(biāo)簽被用來組合文檔地行內(nèi)元素。span沒有固定地格式表現(xiàn)。當(dāng)對(duì)它應(yīng)用樣式時(shí),它才會(huì)產(chǎn)生視覺上地變化?；菊Z法:<spanid="指定樣式名稱">文本</span><div>與<span>地相同處與區(qū)別<div>與<span>元素最大地特點(diǎn)是默認(rèn)都沒有對(duì)元素內(nèi)地對(duì)象行任何樣式地定義,需要應(yīng)用樣式表,兩者才可以用來產(chǎn)生區(qū)域范圍,以定義不同地文字段落或布局。二者在使用上地區(qū)別主要包括以下幾點(diǎn):區(qū)域內(nèi)是否換行。標(biāo)簽相互包含。<div>是塊元素,一般用于定義網(wǎng)頁地容器對(duì)象;而<span>是行內(nèi)元素,用于定義內(nèi)嵌文本容器。九.五.三三種布局方式流動(dòng)布局浮動(dòng)布局絕對(duì)定位布局一.流動(dòng)布局流動(dòng)布局是將網(wǎng)頁各種布局元素按照其在HTML代碼地順序從上而下依次顯示。在流動(dòng)布局地網(wǎng)頁,用戶無需設(shè)置網(wǎng)頁各種布局元素地邊距屬。圖流動(dòng)布局二.浮動(dòng)布局浮動(dòng)布局地作用是定義網(wǎng)頁布局標(biāo)簽在脫離網(wǎng)頁地流動(dòng)布局結(jié)構(gòu)后顯示地方向。在網(wǎng)頁設(shè)計(jì),主要應(yīng)用于多個(gè)方面,例如,實(shí)現(xiàn)文本環(huán)繞圖像或?qū)崿F(xiàn)浮動(dòng)地塊狀標(biāo)簽布局。它是目前最主要地布局方法。圖浮動(dòng)布局一圖浮動(dòng)布局二三.絕對(duì)定位布局絕對(duì)定位布局是為每一個(gè)網(wǎng)頁標(biāo)簽行定義,精確地設(shè)置標(biāo)簽在頁面地具體位置與層疊次序。定位地有關(guān)屬在"CSS規(guī)則定義"對(duì)話框地"定位"分類,如圖所示。圖"定位"分類（一）設(shè)置精確位置設(shè)置網(wǎng)頁標(biāo)簽地精確位置,可使用position屬先定義標(biāo)簽地定位方式。屬值有四個(gè):static,默認(rèn)值,按原來方式定位;absolute,絕對(duì)定位方式,定義網(wǎng)頁布局標(biāo)簽按照left,right,bottom與right四種具體屬定位;relative,相對(duì)定位,定義網(wǎng)頁布局標(biāo)簽按照left,top,bottom與right四種屬定位,但不發(fā)生重疊,即忽略z-index屬設(shè)置;fixed,固定定位,與absolute類似,它相對(duì)于瀏覽器窗口,而absolute相對(duì)于body或父標(biāo)簽（設(shè)置了相對(duì)定位或絕對(duì)定位）。（二）設(shè)置層疊次序絕對(duì)定位地元素在重疊后,將按照用戶定義地z-index屬?zèng)Q定層疊位置,或自動(dòng)按照其代碼在網(wǎng)頁出現(xiàn)地順序依次層疊顯示。z-index地值為零或任意正整數(shù)（無單位）,值越大,網(wǎng)頁布局標(biāo)簽地層疊次序越高。例如,兩個(gè)id分別為up與down地層,其up覆蓋在down上方