數(shù)據(jù)庫設(shè)計(jì)與應(yīng)用第4章　CSS 基礎(chǔ)_第1頁
數(shù)據(jù)庫設(shè)計(jì)與應(yīng)用第4章　CSS 基礎(chǔ)_第2頁
數(shù)據(jù)庫設(shè)計(jì)與應(yīng)用第4章　CSS 基礎(chǔ)_第3頁
數(shù)據(jù)庫設(shè)計(jì)與應(yīng)用第4章　CSS 基礎(chǔ)_第4頁
數(shù)據(jù)庫設(shè)計(jì)與應(yīng)用第4章　CSS 基礎(chǔ)_第5頁
已閱讀5頁，還剩72頁未讀， 繼續(xù)免費(fèi)閱讀

付費(fèi)下載

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡介

CSS基礎(chǔ)第4章匯報(bào)人：***目錄CONTENTCSS核心基礎(chǔ)CSS樣式表的類型CSS選擇器CSS層疊性與繼承性CSS優(yōu)先級(jí)盒子模型元素的類型與轉(zhuǎn)換本章導(dǎo)讀一個(gè)美觀大方，簡約的頁面以及高訪問量的網(wǎng)站，是網(wǎng)頁設(shè)計(jì)者的追求。然而，僅通過

HTML來實(shí)現(xiàn)，是非常困難的，HTML語言僅定義了網(wǎng)頁的結(jié)構(gòu)，對(duì)于文本樣式?jīng)]有過多的涉及，這就需要一種技術(shù)，對(duì)頁面布局、字體、顏色、背景和其他圖文效果的實(shí)現(xiàn)提供更加精確的控制，這種技術(shù)就是

CSS。本章將對(duì)

CSS樣式規(guī)則、引入樣式表方法、CSS選擇器、CSS層疊性與繼承性、盒子模型、元素類型及轉(zhuǎn)換等進(jìn)行介紹，為布局網(wǎng)頁打下堅(jiān)實(shí)的基礎(chǔ)。第一節(jié)PART.01CSS核心基礎(chǔ)4.1.1什么是

CSSCSS是

cascadingstylesheets的縮寫，翻譯成中文是“層疊樣式表”，是一種網(wǎng)頁控制技術(shù)，采用

CSS技術(shù)，可以有效地對(duì)頁面布局，字體、顏色、背景和其他的效果實(shí)現(xiàn)更加精準(zhǔn)的控制。網(wǎng)頁最初使用

HTML定義頁面文檔及格式，如標(biāo)題標(biāo)記<h1>，段落標(biāo)記

<p>等，但這些標(biāo)記無法滿足更多的文檔樣式需求，為了解決這個(gè)問題，W3C在1997年公布

HTML4標(biāo)準(zhǔn)的同時(shí)，也公布了

CSS的第一個(gè)標(biāo)準(zhǔn)CSS1，在1998年5月發(fā)布了

CSS2版本，在這個(gè)樣式表中開始使用樣式表結(jié)構(gòu)，又過了6年，即2004年

CSS2.1正式推出，它在

CSS2的基礎(chǔ)上略微做了改動(dòng)。現(xiàn)在所使用的

CSS基本上是在

CSS2的基礎(chǔ)上發(fā)展而來的，2010年推出了一個(gè)全新的版本——CSS3，與之前的

CSS4.1.1什么是

CSS版本相比較，CSS3的變化是革命性的，而不是僅限于局部功能的修訂和完善，盡管

CSS3的有些特性還不能被很多瀏覽器支持，或者說是支持得不夠好，但是仍然讓我們看到了網(wǎng)頁樣式的發(fā)展方向和使命。簡單來說，CSS3通過幾行代碼就可以實(shí)現(xiàn)很多以前需要使用腳本才能實(shí)現(xiàn)的效果，這不僅簡化了設(shè)計(jì)師的工作，而且還加快了頁面載入速度。4.1.2CSS樣式規(guī)則使用

CSS對(duì)網(wǎng)頁進(jìn)行修飾，首先需要了解

CSS樣式規(guī)則，其基本語法如下：選擇器{屬性1：屬性值1;屬性2：屬性值2;屬性3：屬性值3;…}上述樣式規(guī)則中，選擇器用于指定

CSS樣式作用的

HTML對(duì)象，花括號(hào)

{}內(nèi)是對(duì)該對(duì)象設(shè)置的具體樣式，其中，屬性和屬性值以“鍵值對(duì)”的形式出現(xiàn)，屬性是對(duì)指定對(duì)象設(shè)置的樣式屬性，如字體大小、文本顏色等。屬性和屬性值之間用英文符號(hào)“：”連接，多個(gè)“鍵值對(duì)”之間使用英文符號(hào)“；”進(jìn)行區(qū)分。4.1.2CSS樣式規(guī)則例如：h2{font-size：14px;color：blue;}其中，h2為選擇器，表示

CSS樣式作用的

HTML對(duì)象為

<h2>標(biāo)簽，font-size和

color為

CSS屬性，分別表示字體的大小和顏色，14px和

blue是它們的值。CSS樣式中的選擇器嚴(yán)格區(qū)分大小寫，屬性和值不區(qū)分大小寫，按照書寫習(xí)慣一般將“選擇器、屬性和值”都采用小寫的方式。4.1.2CSS樣式規(guī)則如果屬性的值由多個(gè)單詞組成且中間包含空格，則必須為這個(gè)屬性值加上英文狀態(tài)下的引號(hào)，例如：p{font-family："TimesNewRoman";}為了提高代碼的可讀性，書寫

CSS代碼時(shí)，通常會(huì)加上

CSS注釋，例如：/*這是

CSS的注釋，此內(nèi)容不會(huì)顯示在瀏覽器中*/4.1.2CSS樣式規(guī)則在

CSS代碼中空格是不被解析的，花括號(hào)以及括號(hào)前后的空格可有可無，因此，可以使用空格鍵、Tab鍵、回車鍵等對(duì)樣式代碼進(jìn)行排版，提高代碼的可讀性。例如：h2{font-size：14px;color：blue;}等價(jià)于：h2{

font-size：14px;/*定義字體大小*/

color：blue;/*定義字體顏色*/}4.1.2CSS樣式規(guī)則注意屬性值和單位之間不允許出現(xiàn)空格，例如，下面的代碼是不正確的。h2{font-size：14px;}/*14和單位px之間有空格，不正確*/第二節(jié)PART.02CSS樣式表的類型使用

CSS修飾網(wǎng)頁元素時(shí)，首先需要引入

CSS樣式表，常用的引入方式有3種：內(nèi)聯(lián)樣式表、內(nèi)部樣式表和外部樣式表。4.2.1內(nèi)聯(lián)樣式表“內(nèi)聯(lián)樣式”又稱行內(nèi)樣式，是通過標(biāo)記的

style屬性來設(shè)置元素的樣式，其基本語法格式如下：<標(biāo)記名style="屬性1：屬性值1;屬性2：屬性值2;屬性3：屬性值3;">內(nèi)容</style>4.2.2內(nèi)部樣式表內(nèi)部樣式又稱內(nèi)嵌樣式，是將一個(gè)網(wǎng)頁文檔中所用到的

CSS都寫到網(wǎng)頁頭部標(biāo)記“<head>”和“</head>”中，具體做法是在“<head>”和“</head>”之間再添加一對(duì)“<style>”和“</style>”標(biāo)簽，然后將

CSS寫到“<style>”和“</style>”之間。其基本語法格式如下：<head><style>選擇器{屬性1：屬性值1;屬性2：屬性值2;屬性3：屬性值3;}</style></head>4.2.2內(nèi)部樣式表在該語法中，<style>標(biāo)記一般位于<head>標(biāo)記的<title>標(biāo)記之后，也可以把它放在

HTML文檔的任何地方，但是由于瀏覽器解析是從上到下解析代碼的，把

CSS代碼放在頭部便于提前被下載和解析，以避免網(wǎng)頁內(nèi)容下載后沒有樣式修飾帶來的尷尬。4.2.3外部樣式表外部樣式表是將

CSS代碼寫到一個(gè)擴(kuò)展名為“.css”的文件中，并在

HTML文檔中“調(diào)用”這個(gè)“.css”文件，從而實(shí)現(xiàn)

HTML代碼與CSS代碼的分離。實(shí)現(xiàn)這里的“調(diào)用”的方法是在

HTML文件的

<head>和

</head>標(biāo)簽之間使用

<link>標(biāo)記來告訴瀏覽器去“調(diào)用”哪個(gè)“.css”文件。<link>標(biāo)記的格式如下：<linkrel="stylesheet"type="text/css"href="CSS文件的路徑">4.2.3外部樣式表在該語法中，<link>標(biāo)記需要放在

<head>頭標(biāo)記中，并且必須指定

<link>標(biāo)記的3個(gè)屬性，具體如下：href

：定義所鏈接外部樣式表文件的

URL。type：定義所鏈接文件的類型，在這里需要指定為“text/css”，表示鏈接的外部文件為

CSS樣式表。rel：定義當(dāng)前文檔與鏈接文檔之間的關(guān)系，在這里需要指定為“stylesheet”，表示被鏈接的文檔是一個(gè)樣式表文件。第三節(jié)PART.03CSS選擇器要想將

CSS樣式應(yīng)用于特定的

HTML元素，首先需要找到該目標(biāo)元素。在

CSS中，執(zhí)行這一任務(wù)的樣式規(guī)則部分稱為選擇器。4.3.1基礎(chǔ)選擇器1.標(biāo)記選擇器標(biāo)記選擇器是指用

HTML標(biāo)記作為選擇器，按標(biāo)記名稱分類，為頁面中某一類標(biāo)記指定統(tǒng)一的

CSS樣式。其基本語法格式如下：標(biāo)記名{屬性1：屬性值1;屬性2：屬性值2;屬性3：屬性值3;}該語法中，所有的

HTML標(biāo)記名都可以作為標(biāo)記選擇器，如

body、h1、p、strong等。用標(biāo)記選擇器定義的樣式對(duì)頁面中該類型的所有標(biāo)記都有效。4.3.1基礎(chǔ)選擇器1.標(biāo)記選擇器例如，可以使用

p選擇器定義

HTML頁面中所有段落的樣式，其代碼如下：p{font-size:14px;color:#666;font-family:"微軟雅黑";}上述

CSS樣式代碼用于設(shè)置

HMTL頁面中所有段落文本，字體大小為14像素，顏色為#666，字體為微軟雅黑。標(biāo)記選擇器的最大優(yōu)點(diǎn)是能快速為頁面中同類型的標(biāo)記統(tǒng)一樣式，同時(shí)這也是它的缺點(diǎn)，即不能設(shè)計(jì)差異化的樣式。4.3.1基礎(chǔ)選擇器2.類選擇器類選擇器使用“.”（英文點(diǎn)號(hào)）進(jìn)行標(biāo)識(shí)，后面緊跟類名，其基本語法格式如下：.類名{屬性1：屬性值1;屬性2：屬性值2;屬性3：屬性值3;}該語法中，類名即

HTML元素的

class屬性值，大多數(shù)

HTML元素都可以定義

class

屬性，類選擇器最大的優(yōu)勢是可以為元素對(duì)象定義單獨(dú)或相同的樣式。4.3.1基礎(chǔ)選擇器3.id選擇器id選擇器使用“#”進(jìn)行標(biāo)記，后面緊跟

id名，其基本語法如下：#id名{屬性1：屬性值1;屬性2：屬性值2;屬性3：屬性值3;}該語法中，id名即為

HTML元素的

id屬性值，大多數(shù)

HTML元素都可以定義

id屬性，元素的

id值是唯一的，只能對(duì)應(yīng)文檔中的某一個(gè)具體的元素。4.3.1基礎(chǔ)選擇器4.通配符選擇器通配符選擇器用“*”號(hào)表示，它是所有選擇器中作用范圍最廣的，能匹配頁面中所有的元素，其基本語法格式如下：*{屬性1：屬性值1;屬性2：屬性值2;屬性3：屬性值3;}例如，下面的代碼，使用通配符選擇器定義

CSS樣式，清除所有HTML標(biāo)記的默認(rèn)邊距。*{

margin:0;/*外邊距清零*/

padding:0;/*內(nèi)邊距清零*/}4.3.2復(fù)合選擇器書寫

CSS樣式表時(shí)，可以使用

CSS基礎(chǔ)選擇器選中目標(biāo)元素，但是在實(shí)際的網(wǎng)站開發(fā)中，一個(gè)網(wǎng)頁可能包含成千上萬的元素，如果僅使用CSS基礎(chǔ)選擇器，無法很好地組織頁面樣式，為此，CSS提供了幾種復(fù)合選擇器，以便實(shí)現(xiàn)更強(qiáng)、更方便的選擇功能。提示：復(fù)合選擇器是由兩個(gè)或多個(gè)基礎(chǔ)選擇器，通過不同的方式組合而成的。4.3.2復(fù)合選擇器1.標(biāo)簽指定式選擇器標(biāo)簽指定式選擇器又稱交集選擇器，由兩個(gè)選擇器構(gòu)成，其中第1個(gè)為標(biāo)記選擇器，第2個(gè)為

class選擇器或

id選擇器，兩個(gè)選擇器之間不能有空格，如

h3.special或

p#one。4.3.2復(fù)合選擇器2.后代選擇器后代選擇器用來選擇元素或元素的后代，其寫法就是把外層標(biāo)記寫在前面，內(nèi)層標(biāo)記寫在后面，中間用空格分隔，當(dāng)標(biāo)記發(fā)生嵌套時(shí)，內(nèi)層標(biāo)記就成為外層標(biāo)記的后代。4.3.2復(fù)合選擇器3.并集選擇器并集選擇器是各個(gè)選擇器用逗號(hào)連接而成的，任何形式的選擇器（包括標(biāo)記選擇器、類選擇器、id選擇器等），都可以作為并集選擇器的一部分，如果某些選擇器定義的樣式完全相同或部分相同，就可以利用并集選擇器為它們定義相同的

CSS樣式。4.3.3屬性選擇器和偽類1.屬性選擇器屬性選擇器通過屬性選擇元素，這些屬性既可以是標(biāo)準(zhǔn)屬性（HTML中默認(rèn)的屬性，如

<input>標(biāo)記中的

type屬性），也可以是自定義屬性，其基本語法格式如下：E[att]{sRules}

/*具有att屬性的E元素*/E[att="value"]{sRules}

/*屬性att=value的E元素*/E[att^="value"]{sRules}

/*屬性att以value開頭的E元素*/E[att$="value"]{sRules}

/*屬性att以value結(jié)尾的E元素*/E[att*="value"]{sRules}

/*屬性att包含value的E元素*/4.3.3屬性選擇器和偽類2.偽類選擇器CSS的元素選擇器除根據(jù)

id（#）、class（.）、屬性（[]）選取元素以外，還有很重要的一類，就是根據(jù)元素的特殊狀態(tài)選取元素。它們就是偽類，偽類是

CSS已經(jīng)定義好的，不能像類一樣隨意命名。選擇器:偽類{屬性1：屬性值1;屬性2：屬性值2;屬性3：屬性值3;…}4.3.3屬性選擇器和偽類2.偽類選擇器應(yīng)用最廣泛的偽類選擇器是超鏈接的4個(gè)偽類，見表4-1。表4-1常見的4個(gè)偽類偽裝說明：link未訪問超鏈接的狀態(tài)：hover鼠標(biāo)停留在超鏈接的狀態(tài)：visited已訪問超鏈接的狀態(tài)：active被激活超鏈接的狀態(tài)第四節(jié)PART.04CSS層疊性與繼承性CSS是層疊樣式表的簡稱，層疊性和繼承性是其基本特征，對(duì)于網(wǎng)頁設(shè)計(jì)來說，應(yīng)深刻理解和靈活使用這兩個(gè)概念，下面具體介紹

CSS的層疊性和繼承性。4.4.1層疊性所謂層疊性是指多種

CSS樣式的疊加。4.4.2繼承性所謂繼承性是指書寫

CSS樣式表時(shí)，子標(biāo)記會(huì)繼承父標(biāo)記的某些樣式，如文本顏色和字號(hào)。第五節(jié)PART.05CSS優(yōu)先級(jí)定義

CSS樣式時(shí)，經(jīng)常出現(xiàn)兩個(gè)或更多的規(guī)則應(yīng)用在同一元素上，這時(shí)就會(huì)出現(xiàn)優(yōu)先級(jí)的問題。其實(shí)

CSS為每一種基礎(chǔ)選擇器都分配了一個(gè)權(quán)重，其中，標(biāo)記選擇器具有權(quán)重1，類選擇器具有權(quán)重10，id選擇器具有權(quán)重100。使用不同的選擇器對(duì)同一個(gè)元素設(shè)置樣式，瀏覽器會(huì)根據(jù)選擇器的優(yōu)先級(jí)規(guī)則解析

CSS樣式，對(duì)于由多個(gè)基礎(chǔ)選擇器構(gòu)成的復(fù)合選擇器（并集選擇器除外），其權(quán)重為這些基礎(chǔ)選擇器的權(quán)重疊加。（詳見課本p94、95、96【例4.14】）此外，在考慮權(quán)重時(shí)，還需要注意一些特殊的情況，具體如下：（1）繼承樣式的權(quán)重為0。即嵌套結(jié)構(gòu)中，不管父元素樣式的權(quán)重多大，被子元素繼承時(shí)，他的權(quán)重都為0，也就是說子元素定義的樣式會(huì)覆蓋繼承來的樣式。（詳見課本p96、97【例4.15】）（2）行內(nèi)樣式優(yōu)先。應(yīng)用

style屬性的元素，其行內(nèi)樣式的權(quán)重非常高，可以理解為遠(yuǎn)大于100。（詳見課本p97【例4.16】）（3）權(quán)重相同時(shí)，CSS遵循就近原則，也就是說，靠近元素的樣式具有最大的優(yōu)先級(jí)，或者說排在最后的樣式優(yōu)先級(jí)最大。（詳見課本p98【例4.17】）（4）CSS定義了一個(gè)!important命令，該命令被賦予最大的優(yōu)先級(jí)，也就是說不管權(quán)重如何以及樣式位置的遠(yuǎn)近，!important都具有最大的優(yōu)先級(jí)。（詳見課本p99【例4.18】）第六節(jié)PART.06盒子模型盒子模型是

CSS網(wǎng)頁布局的基礎(chǔ)，它替代了傳統(tǒng)的表格布局，只有掌握盒子模型的各種規(guī)律，才可以更好地控制網(wǎng)頁中各個(gè)元素所呈現(xiàn)的效果。所謂盒子模型就是把

HTML頁面中的元素看作一個(gè)矩形盒子，也就是一個(gè)盛裝內(nèi)容的容器，每個(gè)矩形都由元素的內(nèi)容（content）、內(nèi)邊距（padding）、邊框（border）和外邊距（margin）組成。下面以手機(jī)盒子為例，分析盒子模型，如果把手機(jī)想象成

HTML元素，則手機(jī)盒子就是一個(gè)

CSS盒子模型，手機(jī)為

CSS盒子模型的內(nèi)容，填充泡沫的厚度為

CSS盒子的內(nèi)邊距，紙盒的厚度為

CSS盒子的邊框，如圖4-18所示。當(dāng)多個(gè)手機(jī)盒子放在一起時(shí)，它們之間的間距就是

CSS盒子模型的外邊距，如圖4-19所示。圖4-18手機(jī)盒子構(gòu)成圖4-19多個(gè)手機(jī)盒子在

CSS中，一個(gè)盒子模型由內(nèi)容（content）、邊框（border）、填充（padding）和邊界（margin）4個(gè)部分組成，盒子模型的相關(guān)屬性包括邊框?qū)傩?、?nèi)外邊距、背景屬性和寬高屬性，通過設(shè)置這些屬性可以使元素的表現(xiàn)形式更加多樣化。需要注意的是，雖然盒子模型擁有邊框、內(nèi)外邊距、背景、寬高這些屬性，但是并不要求每個(gè)元素都發(fā)展定義這些屬性，如圖4-20所示。圖4-20盒子屬性4.6.1盒子的寬和高網(wǎng)頁是由多個(gè)盒子排列而成的，每個(gè)盒子都有固定的大小，在CSS中使用寬度屬性

width和高度屬性

height可以對(duì)盒子的大小進(jìn)行控制。width和

height的屬性值可以為不同單位的數(shù)值或相對(duì)于父元素的百分比，實(shí)際工作中最常用的是像素值。4.6.2邊框?qū)傩詾榱朔指铐撁嬷械牟煌凶樱ǔ＝o元素設(shè)置邊框效果。在

CSS中，邊框?qū)傩园ㄟ吙驑邮剑╞order-style）、邊框?qū)挾龋╞order-width）、邊框顏色（border-color）、單側(cè)邊框?qū)傩?、邊框綜合屬性，見表4-2。表4-2邊框?qū)傩栽O(shè)置內(nèi)容樣式屬性常用屬性值上邊框border-top-style：樣式；border-top-width：寬度；border-top-color：顏色；border-top：寬度樣式顏色；下邊框border-bottom-style：樣式；border-bottom-width：寬度；border-bottom-color：顏色；border-bottom：寬度樣式顏色；4.6.2邊框?qū)傩栽O(shè)置內(nèi)容樣式屬性常用屬性值左邊框border-left-style：樣式；border-left-width：寬度；border-left-color：顏色；border-left：寬度樣式顏色；下邊框border-right-style：樣式；border-right-width：寬度；border-right-color：顏色；border-right：寬度樣式顏色；樣式綜合設(shè)置border-style：上[右下左]；none：無（默認(rèn)值）、solid：實(shí)線、dashed：虛線、dotted：點(diǎn)線、double：雙實(shí)線寬度綜合設(shè)置border-width：上[右下左]；像素顏色綜合設(shè)置border-color：上[右下左]；顏色值，#十六進(jìn)制、rgb（r，g，b），rgb（r%，g%，b%）邊框綜合設(shè)置border：四邊寬度四邊樣式四邊顏色4.6.2邊框?qū)傩哉f明：設(shè)置盒子模型邊框時(shí)，使用

border-style、border-color、border-width綜合設(shè)置樣式、顏色和寬度時(shí)，必須按上右下左的順時(shí)針順序，省略時(shí)采用值復(fù)制的原則，即：一個(gè)值

：上右下左兩個(gè)值

：上下—左右三個(gè)值

：上—左右—下四個(gè)值

：上—右—下—左4.6.3內(nèi)邊距屬性在網(wǎng)頁設(shè)計(jì)中，為了調(diào)整內(nèi)容在盒子中的顯示位置，常需要設(shè)置元素內(nèi)邊距，所謂內(nèi)邊距指的是元素內(nèi)容與邊框之間的距離，也常稱為內(nèi)填充。在CSS中，padding屬性用于設(shè)置內(nèi)邊距，同邊框?qū)傩?/p>

border一樣，padding也是復(fù)合屬性，其相關(guān)設(shè)置方法如下。padding-top

：上內(nèi)邊距。padding-right

：右內(nèi)邊距。padding-bottom

：下內(nèi)邊距。padding-left

：左內(nèi)邊距。padding

：上內(nèi)邊距（右內(nèi)邊距、下內(nèi)邊距、左內(nèi)邊距）。4.6.3內(nèi)邊距屬性在上面的設(shè)置中，padding相關(guān)屬性的取值可以為

auto（默認(rèn)值）、不同單位的數(shù)值、相對(duì)父元素（或?yàn)g覽器）寬度的百分比%，實(shí)際工作中最常用的是像素值（px），允許使用負(fù)值。同邊框設(shè)置相關(guān)屬性一樣，使用復(fù)合屬性

padding定義內(nèi)邊距時(shí)，必須按順時(shí)針進(jìn)行值復(fù)制，若有一個(gè)值，則表示四個(gè)內(nèi)邊距均為該值；若有兩個(gè)值，則第一個(gè)值為上、下內(nèi)邊距，第二個(gè)值為左、右內(nèi)邊距；若有三個(gè)值，則第一個(gè)值為上內(nèi)邊距，第二個(gè)值為左、右內(nèi)邊距，第三個(gè)值為下內(nèi)邊距。4.6.4外邊距屬性頁面是由多個(gè)盒子排列而成的，要想拉開盒子與盒子之間的距離，合理地布局網(wǎng)頁，就需要為盒子設(shè)置外邊距，所謂外邊距指的是元素邊框與相鄰元素之間的距離，在

CSS

中

margin屬性為盒子設(shè)置外邊距，它是一個(gè)復(fù)合屬性，與內(nèi)邊距

padding的用法類似，設(shè)置外邊距的方法如下。margin-top

：上外邊距。margin-right

：右外邊距。margin-bottom

：下外邊距。margin-left

：左外邊距。margin

：上外邊距（右外邊距、下外邊距、左外邊距）。4.6.4外邊距屬性margin相關(guān)屬性，以及復(fù)合屬性

margin取1～4個(gè)值的情況與padding相同，但是外邊距可以使用負(fù)值，使相鄰的元素重疊。當(dāng)對(duì)塊級(jí)元素應(yīng)用寬度屬性

width，并將左右的外邊距都設(shè)置為

auto時(shí)，可使塊級(jí)元素水平居中，實(shí)際工作中常用這種方式進(jìn)行網(wǎng)頁布局，例如：.header{width:960px;margin:0auto;}4.6.5背景屬性網(wǎng)頁能通過背景圖像給讀者留下深刻的印象，所以在網(wǎng)頁設(shè)計(jì)中，合理控制背景顏色和背景圖像至關(guān)重要。下面將詳細(xì)介紹

CSS控制背景樣式的方法。4.6.5背景屬性1.背景顏色在

CSS中，網(wǎng)頁元素的背景顏色使用

background-color屬性來設(shè)置，其屬性值與文本顏色的取值一樣，可使用預(yù)定義的顏色值、十六進(jìn)制#RRGGBB或

RGB代碼

rgb（r，g，b）。background-color的默認(rèn)值是transparent，即背景透明，這時(shí)子元素會(huì)顯示其父元素的背景。4.6.5背景屬性2.設(shè)置背景圖片網(wǎng)頁中不但可以使用背景顏色來填充網(wǎng)頁背景，而且還可以使用背景圖片來填充網(wǎng)頁。通過

CSS屬性，可以對(duì)背景圖片進(jìn)行精確的定位，background-image屬性用于設(shè)定標(biāo)記的背景圖片，其基本語法格式如下：background-image:none|url(url)其默認(rèn)屬性是無背景圖，當(dāng)需要使用背景圖時(shí)，可以使用

url進(jìn)行導(dǎo)入，url可以使用絕對(duì)路徑，也可以使用相對(duì)路徑。（詳見課本p110【例4.24】)4.6.5背景屬性2.設(shè)置背景圖片由運(yùn)行結(jié)果看出，背景圖片自動(dòng)平鋪，充滿整個(gè)網(wǎng)頁，并且覆蓋了背景顏色。在設(shè)置背景圖片時(shí)，一般同時(shí)設(shè)置背景顏色，這樣，當(dāng)某種原因?qū)е卤尘皥D片無法正常顯示時(shí)，可以顯示背景顏色。4.6.5背景屬性2.設(shè)置背景圖片1）設(shè)置背景圖片重復(fù)默認(rèn)情況下，背景圖片會(huì)自動(dòng)沿水平和豎直兩個(gè)方向平鋪，如果不希望背景圖片平鋪，或者只沿著一個(gè)方向平鋪，可以通過

background-repeat屬性來控制，該屬性的取值如下：repeat

：沿水平和豎直兩個(gè)方向平鋪（默認(rèn)值）no-repeat

：不平鋪（圖片位于元素的左上角，只顯示一次）repeat-x

：只沿水平方向平鋪repeat-y

：只沿豎直方向平鋪4.6.5背景屬性2.設(shè)置背景圖片2）設(shè)置背景圖片的位置默認(rèn)情況下，背景圖片的位置都是從設(shè)置了

background屬性的標(biāo)記（如

body）的左上角開始出現(xiàn)的，但在實(shí)際的網(wǎng)頁設(shè)計(jì)中，可以根據(jù)需要，直接指定背景圖片出現(xiàn)的位置，在

CSS中，可以通過

background-position屬性輕松地調(diào)整背景圖片的位置。background-position屬性的值通常設(shè)置為兩個(gè)，中間用空格隔開，用于定義背景圖片的水平和垂直方向的坐標(biāo)，其語法格式如下：background-position:水平位置垂直位置4.6.5背景屬性2.設(shè)置背景圖片2）設(shè)置背景圖片的位置（1）使用不同單位（最常用的是像素

px）的數(shù)值，直接設(shè)置圖片左上角元素中的坐標(biāo)，例如：“background-position：20px20px；”。（2）使用預(yù)定義關(guān)鍵字指定圖片在元素中的對(duì)齊方式。水平方向值

：leftcenterright。垂直方向值

：topcenterbottom。兩個(gè)方向值順序任意，若只有一個(gè)值則另一個(gè)默認(rèn)為

center。4.6.5背景屬性2.設(shè)置背景圖片2）設(shè)置背景圖片的位置（3）使用百分比按背景圖片左上角和元素的指定點(diǎn)對(duì)齊。使用精確值有嚴(yán)格的順序，第1個(gè)是

X坐標(biāo)值、第2個(gè)是

Y坐標(biāo)值，如果只有一個(gè)百分?jǐn)?shù)，則將其作為水平值，垂直值默認(rèn)為

50%。0%0%表示背景圖片左上角與元素左上角對(duì)齊。50%50%表示背景圖片

50%50%中心點(diǎn)與元素

50%50%的中心點(diǎn)對(duì)齊。20%30%表示背景圖片

20%30%的點(diǎn)與元素

20%30%的點(diǎn)對(duì)齊。100%100%表示圖片右下角與元素的右下角對(duì)齊，而不是圖片充滿元素。4.6.5背景屬性2.設(shè)置背景圖片3）設(shè)置背景圖片固定在網(wǎng)頁上設(shè)置背景圖片時(shí)，隨著頁面滾動(dòng)條的移動(dòng)，背景圖片也會(huì)跟著一起移動(dòng)，如果希望背景圖片固定在屏幕上，不隨著頁面元素滾動(dòng)，可以使用

background-attachment屬性來設(shè)置，其屬性值如下：scroll

：圖片隨頁面元素一起滾動(dòng)（默認(rèn)值）。fixed

：圖片固定在屏幕上，不隨頁面元素滾動(dòng)。4.6.5背景屬性2.設(shè)置背景圖片4）背景圖片的大小在以前的網(wǎng)頁設(shè)計(jì)中，背景圖片的大小是不可以控制的，如果想要圖片填充整個(gè)背景，需要事先設(shè)置一個(gè)較大的背景圖片，否則只能讓背景圖片以平鋪的方式來填充頁面元素。在

CSS3中，新增

background-size屬性，用來控制背景圖片的大小，其基本語法格式如下：background-size

:|<length>|<percentage>|cover|containbackground-size屬性參數(shù)值見表4-3。4.6.5背景屬性2.設(shè)置背景圖片4）背景圖片的大小表4-3background-size屬性的參數(shù)值參數(shù)值說明<length>由浮點(diǎn)數(shù)和單位標(biāo)識(shí)符組成的長度值，不可為負(fù)值<percentage>取0%～100%的值，不可為負(fù)值cover保證背景圖片本身的寬高比，將圖片縮放到正好完全覆蓋所定義的背景區(qū)域contain保證背景圖片本身的寬高比，將圖片縮放到寬度或高度正好適應(yīng)所定義的背景區(qū)域4.6.5背景屬性2.設(shè)置背景圖片5）背景的顯示區(qū)域在網(wǎng)頁設(shè)計(jì)中，如果能改變背景圖片的定位方式，使設(shè)計(jì)師能夠靈活地決定背景圖片應(yīng)該顯示的位置，會(huì)大大減少設(shè)計(jì)成本。在

CSS3中新增background-origin屬性用來完成背景圖片的定位。默認(rèn)情況下，background-position屬性總是以元素左上角原點(diǎn)作為背景圖片定位點(diǎn)，而使用

background-origin屬性可以改變這種定位方式，其基本語法格式為：background-origin：border-box|padding-box|content-box4.6.5背景屬性2.設(shè)置背景圖片5）背景的顯示區(qū)域background-origin屬性的參數(shù)值見表4-4。表4-3background-size屬性的參數(shù)值參數(shù)值說明border-box背景圖片相對(duì)于邊框盒來定位padding-box背景圖片相對(duì)于內(nèi)邊距框來定位content-box背景圖片相對(duì)于內(nèi)容框來定位4.6.5背景屬性2.設(shè)置背景圖片6）背景圖像裁切區(qū)域在

CSS3中，新增

background-clip屬性，用來定義圖像裁切的區(qū)域，其基本語法格式如下：background-clip：border-box|padding-box|content-boxbackground-clip屬性的參數(shù)值見表4-5。表4-5background-clip屬性的參數(shù)值參數(shù)值說明border-box背景被裁剪到邊框盒padding-box背景被裁剪到內(nèi)邊距框content-box背景被裁剪到內(nèi)容框4.6.5背景屬性2.設(shè)置背景圖片7）背景復(fù)合屬性除使用上述的屬性設(shè)置外，CSS中還可以使用復(fù)合屬性進(jìn)行背景圖片設(shè)置，即綜合設(shè)置與背景有關(guān)的屬性，可以一次性設(shè)定背景樣式，其語法格式如下：background:[background-color][background-image][background-repeat][backgroundattachment][background-position][background-size][background-clip][background-origin]4.6.5背景

溫馨提示

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

評(píng)論

0/150

提交評(píng)論