第四章CSS層疊樣式表_第1頁
第四章CSS層疊樣式表_第2頁
第四章CSS層疊樣式表_第3頁
第四章CSS層疊樣式表_第4頁
第四章CSS層疊樣式表_第5頁
已閱讀5頁，還剩24頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

1、第四章 CSS層疊樣式表4.1 CSS的概述CSS是Cascading Style Sheets(層疊樣式表)的縮寫，其作用是提供為Web文檔添加樣式的簡單機制。這里的“樣式（Style）”，指的是Web文檔字體的大小、顏色、邊框、背景等顯示屬性；而“層疊（Cascading）”二字，指的是一個Web文檔的樣式可以從其它樣式表中繼承而來。關(guān)于這一點，我們會在本章的4.3節(jié)進行詳細的說明。那么，為什么我們需要學(xué)習(xí)CSS呢？或者說，CSS能夠為我們創(chuàng)建Web文檔帶來什么好處？第二章我們學(xué)習(xí)HTML語言基礎(chǔ)時，我們知道HTML 標簽被設(shè)計為定義Web文檔的布局和內(nèi)容。通過使用 <h1>、

2、<p>、<table> 這樣的標簽，HTML 的含義是表達“這是標題”、“這是段落”、“這是表格”之類的信息。然而對于Web文檔的設(shè)計師來說，這還不夠全面。Web文檔的設(shè)計者不僅僅希望通過HTML這樣的標記語言來設(shè)計Web文檔的布局和內(nèi)容，還希望通過某種方式設(shè)計Web文檔的顯示屬性，通過控制Web文檔的視覺效果（通常就是字體的大小，顏色的搭配，背景的選擇等）來表達自己獨特的、個性化的設(shè)計理念。于是HTML也提供了諸如<font size=” ” color=” ”>這樣的標簽以及與標簽搭配的顯示屬性（如”background, bgcolor”等）來實現(xiàn)這一

3、功能，但這樣做存在兩個問題：1不同的瀏覽器對顯示屬性的解釋不同，不同的瀏覽器提供不同的視覺標簽，并且同一屬性在不同的瀏覽器里還可能表達不同的視覺效果。2使用相對獨立的HTML所提供的顯示屬性，不利于整體效果的統(tǒng)一，修改起來也會比較麻煩。例如，假設(shè)我們要使某個<table>的第一列的所有表格單元（<td>）的背景色顯示為暗紅色，那么或許我們可以使用第二章學(xué)習(xí)的方法，使用<td bgcolor=”#b82222”>這樣的標簽來標記所有第一列的表格單元來達到這樣的目的。那么，如果有一天我們厭煩了這樣的視覺效果，而想將其背景色改為純藍色，我們就不得不使用<td

4、 bgcolor=”#0000ff”>這樣的標簽對所有第一列的<td>單元進行替換。假如這個<table>有20行或者更多好吧，你可以想象一下，這是一件多么讓人厭煩的工作。因此，我們需要一種能獨立于瀏覽器之外的、能夠統(tǒng)一設(shè)計并管理所有（不僅僅局限于一個Web文檔，而是在同一站點內(nèi)的所有Web文檔）相同類型的Web文檔內(nèi)容的視覺樣式的簡單機制，這就是CSS。通過這一章的學(xué)習(xí)，我們要學(xué)會CSS的基本語法，CSS的單位和屬性，以及CSS的“層疊”規(guī)則，并通過一些實例掌握CSS在Web頁面設(shè)計中的應(yīng)用。4.2 CSS基礎(chǔ)4.2.1 CSS基本語法CSS語言是一種標記語言,

5、它不需要編譯,可以直接由瀏覽器執(zhí)行，屬于瀏覽器解釋型語言。通常，解釋型語言的語法都比較簡單，CSS也正是如此。一般而言，我們可以先定義一個樣式（Style），然后再在html代碼中使用這個樣式。一個典型的樣式的定義由三部分組成，分別是：1 選擇符（Selector）：選擇符可以是多種形式，一般是你要定義樣式的HTML標記，例如BODY、P、TABLE等。你也可以簡單的理解為該樣式的名字。我們通過它定義一個樣式，也通過它使用該樣式。2 屬性（Property）：需要定義的顯示屬性，一個樣式中可定義多個顯示屬性。3 屬性值（Value）：各屬性的取值，包括單位。以下是一個樣式一般的語法格式：sel

6、ector property: value;例如：p color:blue;其中，p就是選擇符，它對應(yīng)HTML中的<p>標簽；color是屬性，表示需要設(shè)置<p>標簽中的內(nèi)容顏色；blue是屬性值，表示<p>標簽中的內(nèi)容顏色為純藍色。最后以一個分號“；”作為一個“屬性：值對”的結(jié)尾，一個選擇符可以包含多條屬性，屬性間以分號“；”間隔，例如：P color:blue; font-size:12px;定義了一個樣式之后，就可以在html代碼中使用這一樣式。樣式的使用（引用）共有三種方式，分別是：內(nèi)聯(lián)引用、內(nèi)部引用（嵌入）與外部引用。1CSS的內(nèi)聯(lián)引用內(nèi)聯(lián)，即把C

7、SS樣式直接作用在html標簽中，例如： <p style="font-size:12px; color:blue;"> （該段落的文字大小為12個像素，其顏色為純藍色） </p>除了<BASEFONT>、<PARAM>和<SCRIPT>這三個html標簽外，STYLE屬性可以應(yīng)用于任意BODY元素(包括<BODY>標簽本身)。這個屬性將任何數(shù)量的CSS聲明當作自己的值，而每個聲明用分號“；”隔開。使用內(nèi)聯(lián)CSS的網(wǎng)頁制作者必須將<META>標簽里的CONTENT屬性設(shè)置為text/css，

8、而HTTP-EQUIV屬性設(shè)置為Content-Style-Type，例如:<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">注意: 中文網(wǎng)頁的標記為:<META HTTP-EQUIV="Content-Type" CONTENT="text/css">因為和需要展示的內(nèi)容混合在一起，內(nèi)聯(lián)樣式會失去一些樣式表的優(yōu)點。一般情況下，應(yīng)當盡量避免使用。需要注意的是，使用內(nèi)聯(lián)方式時，其樣式只在使用了style屬性的這一標簽中有效，在其它

9、的標簽中是無效的。例如： <p style="font-size:12px; color:blue;"> （該段落的文字大小為12個像素，其顏色為純藍色） </p> <p> （該段落的文字的顯示屬性為默認） </p>2CSS的內(nèi)部引用（嵌入）可以使用<style>標簽直接把CSS代碼加載到html文檔內(nèi)部，例如：<style type="text/css">/* -文字樣式開始- */* 定義在<P>標簽中的文字大小為12個像素，顏色為純藍色 */P color:blue

10、; font-size:12px; /* -文字樣式結(jié)束- */</style>在內(nèi)部引用樣式時，<style>標簽的type屬性必須設(shè)置為“text/css”。與內(nèi)聯(lián)方式不同的是，一旦在一個html頁面中定義了某個標簽的顯示屬性，則其在該頁面內(nèi)所有與之匹配的標簽中都有效。例如： <p> （該段落的文字大小為12個像素，其顏色為純藍色） </p> <p> （該段落的文字大小也為12個像素，其顏色為純藍色） </p>最后需要注意的是，通常<style>標簽應(yīng)放在HEAD部分。3CSS的外部引用外部引用CSS是最好

11、的引入CSS的方式（可以使代碼量最小，表現(xiàn)最統(tǒng)一，也是標準網(wǎng)頁設(shè)計W3C規(guī)范所推薦的）。內(nèi)聯(lián)引用雖然是一種快捷的方式，但是不利于以后的統(tǒng)一修改和表現(xiàn)的一致性，除了在需要使用樣式表的層疊以外，是不提倡使用的。CSS的外部引用可分為2種方式：一種是使用<link>標簽，一種是使用<style>標簽的“import”方法。使用<link>標簽<head><link rel="stylesheet" type="text/css" href="http:/localhost/style.css&qu

12、ot; /></head><LINK>標記應(yīng)放置在文檔的HEAD部分。“rel”屬性用于定義連接的文件和HTML文檔之間的關(guān)系。rel=“stylesheet”指定一個固定或首選的樣式而rel=“alternate stylesheet”定義一個交互樣式。固定樣式在樣式表激活時總被應(yīng)用，一般使用固定樣式。“href”屬性指出指定外聯(lián)的CSS文件的地址，可以為相對地址也可為絕對地址。需要注意的是，外聯(lián)的CSS文件不應(yīng)包含<head>或<style>這樣的html的標簽，只需要如：P color:blue; font-size:12px; 這樣

13、的代碼所組成的文件就可以了。使用import<head><style type="text/css">import url(http:/localhost/style.css);</style></head>url()中的地址仍然可以是相對地址，也可以是絕對地址。需要注意的是，import的CSS文件應(yīng)當放在<style>標簽的開始部分，這是由CSS的層疊規(guī)則所決定的。我們將在4.3節(jié)詳細解釋CSS的層疊規(guī)則。 4.2.2 CSS的選擇符可以通過不同的方式來定義和使用一個選擇符。一般來說，除了上面提到的基本方式以外

14、，選擇符還可分為以下五種類型：1.選擇符組 你可以把相同屬性和值的選擇符組合起來書寫，用逗號將選擇符分開，這樣可以減少樣式重復(fù)定義，例如：h1, h2, h3, h4, h5, h6 color: green （這個組里包括從<h1><h6>的所有的HTML標題元素，每個標題元素的文字都為綠色） p, table font-size: 9pt （段落和表格里的文字尺寸為9號字） 其效果完全等效于： p font-size: 9pt table font-size: 9pt 2.類選擇符 使用類選擇符你能夠把相同的元素分類定義不同的樣式。定義類選擇符時，在自定類的名稱前面

15、加一個點號。假如你想要兩個不同的段落，一個段落向右對齊，一個段落居中，你可以先定義兩個類： p.right text-align: right p.center text-align: center 然后用在不同的段落里，只要在HTML標記里加入你定義的class參數(shù)，例如： <p class="right"> （這個段落里的文本內(nèi)容是向右對齊的）</p> <p class="center">（這個段落里的文本內(nèi)容是居中排列的）</p> 注意：類的名稱可以是任意英文單詞或以英文開頭與數(shù)字的組合，一般以其功能

16、和效果簡要命名。類選擇符還有一種重要的用法，在選擇符中省略HTML標記名，這樣可以把幾個不同的元素定義成相同的樣式，例如： .center text-align: center （注意選擇符前有一個點號“.”）（定義.center的類選擇符為文字居中排列） 這樣的類可以被應(yīng)用到任何元素上。下面我們使<h1>元素（標題1）和<p>元素（段落）都歸為“center”類，這使兩個元素的樣式都跟隨“.center”這個類選擇符里的定義，例如：<h1 class="center">（這個標題是居中排列的）</h1> <p clas

17、s="center">（這個段落也是居中排列的）</p> 注意：這種省略HTML標記的類選擇符是我們以后最常用的CSS方法。使用這種方法，我們可以很方便的在任意元素上套用預(yù)先定義好的類樣式。3.ID選擇符在HTML頁面中ID參數(shù)指定了某個單一元素，ID選擇符是用來對這個單一元素定義單獨的樣式。 定義ID選擇符要在ID名稱前加上一個“#”號。和類選擇符相同，定義ID選擇符的屬性也有兩種方法。下面這個例子，ID屬性將匹配所有id="intro"的元素： #intro font-size:110%; font-weight:bold; col

18、or:#0000ff; background-color:transparent （字體尺寸為默認尺寸的110%；粗體；藍色；背景顏色透明） 下面這個例子，ID屬性只匹配id="intro"的段落<p>元素： p#intro font-size:110%; font-weight:bold; color:#0000ff; background-color:transparent ID選擇符的應(yīng)用和類選擇符類似，只要把CLASS換成ID即可。將上例中的類用ID替代：<p id="intro"> （這個段落向右對齊）</p>

19、; 注意：ID選擇符局限性很大，只能單獨定義某個元素的樣式，一般只在特殊情況下使用。 4.包含選擇符可以單獨對某種元素包含關(guān)系定義的樣式表，如元素1里包含有元素2。這種方式只對在元素1里的元素2定義有效，對單獨的元素1或元素2無定義，例如有如下定義： table a font-size: 12px （定義在表格<table>內(nèi)的鏈接<a>改變樣式，文字大小為12象素；而表格外的鏈接<a>的文字仍為默認大小，并且表格<table>內(nèi)的非鏈接文本的字體也不變。） 5.偽類與偽元素在我們上面所介紹的4種選擇符中，其實現(xiàn)是采用模式（pattern）匹配的

20、方式，這里的模式就是我們所定義的選擇符的名字和屬性。例如在前面介紹的類選擇符中，如果我們有如下定義：p.right text-align: right那么當我們在html代碼中使用如下<P>標簽時：<p class="right"> （這個段落里的文本內(nèi)容是向右對齊的）</p> 則段落里的文本內(nèi)容是向右對齊的。而之所以能夠?qū)崿F(xiàn)這樣的效果，是因為瀏覽器在解釋代碼時，p.right與<p class="right">被認為是一對匹配的模式。偽類或偽元素的實現(xiàn)機制與我們上面介紹的所有選擇符都不同。偽類或偽元素對元

21、素進行分類是基于特征(characteristics)而不是它們的名字、屬性或者內(nèi)容。下面我們分別介紹常用的偽類和偽元素。 類偽類的語法格式是selector: pseudo class property: value; ，簡單地用一個半角英文冒號（:）來隔開選擇符和偽類。常用的偽類有：:first-child ，:link，:vistited，:hover，:active，:focus，:lang由于first-child和lang不為IE（internet explorer）支持，我們介紹能夠安全使用的四個偽類。由于它們一般應(yīng)用在錨結(jié)點上，因此又被稱為錨偽類。下面是一個錨偽類的例子：a:l

22、ink color: red /* 未被訪問的鏈接 紅色 */a:visited color: green /* 已被訪問過的鏈接 綠色 */a:hover color: blue /* 鼠標懸浮在上的鏈接 藍色 */a:active color: white /* 鼠標點中激活鏈接 白色 */需要注意的是，首先，用于進行匹配的不是選擇符的名字<a>而是其行為（未訪問、已訪問等）；其次，由于CSS的層疊規(guī)則，其書寫順序是不能顛倒的，一定要按照a:link， a:visited， a:hover， a:actived的順序書寫。偽類也可以與類結(jié)合使用，這時其語法格式為selector

23、.class:pseudo-class property: value，例如：a.tz:link color: red /* 未被訪問的鏈接 紅色 */a.tz:visited color: green /* 已被訪問過的鏈接 綠色 */a.tz:hover color: blue /* 鼠標懸浮在上的鏈接 藍色 */a.tz:active color: white /* 鼠標點中激活鏈接 白色 */偽元素偽元素是創(chuàng)造關(guān)于html語言能夠指定的文檔樹之外的抽象，例如html不提供訪問元素內(nèi)容第一字或者第一行的機制。偽元素允許設(shè)計師引用它們，并且還還提供設(shè)計師給在源文檔中不存在的內(nèi)容分配樣式（例

24、如：:before和:after能夠訪問產(chǎn)生的內(nèi)容）的機制。常見的偽元素有：:first-line，:first-letter，:before，:after由于偽元素的語法格式與偽類相同，因此本書不予詳細介紹。4.2.3 CSS的單位在CSS中，一共有七種類型的單位，分別是：長度單位、百分比單位、顏色單位、URLs、時間單位、頻率單位以及角度單位。下面分別介紹前四種常用單位。 1長度單位 一個長度的值由可選的正號" + "或負號" - "、接著的一個數(shù)字以及標明單位的兩個字母組成。在一個長度的值之中是沒有空格的，例如，1.3 em就不是一個有效的長度的值

25、，但1.3em就是有效的。一個為零的長度不需要兩個字母的單位聲明。 CSS中的長度單位有2種類型：相對值單位與絕對值單位。相對值單位確定一個相對于另一長度屬性的長度，表明了其長度單位會隨著它的參考值的變化而變化。因為它能更好地適應(yīng)不同的媒體，所以是首選的。以下是有效的相對單位: em (em，元素的字體的高度，其值相對于當前對象內(nèi)文本的字體尺寸。如當前行內(nèi)文本的字體尺寸未被人為設(shè)置，則相對于瀏覽器的默認字體尺寸。) ex (x-height，字母 "x" 的高度。其值相對于字符“x”的高度，此高度通常為字體尺寸的一半。如當前對行內(nèi)文本的字體尺寸未被人為設(shè)置，則相對于瀏覽器的

26、默認字體尺寸。) px (像素，相對于屏幕的分辨率) 絕對值長度單位視輸出介質(zhì)而定，所以遜色于相對單位。以下是有效的絕對單位: in (英寸，1英寸=2.54厘米) cm (厘米，1厘米=10毫米) mm (米) pt (點，1點=1/72英寸) pc (帕，1帕=12點)一般Web頁面上正文的字體大小為12px或9pt。值得注意的是，對于計算機的屏幕設(shè)備（顯示器）而言，像素(Pixel)或者說px是一個最基本的單位，其它所有的單位，都和像素成一個固定的比例換算關(guān)系。所有的長度單位基于屏幕進行顯示的時候，都統(tǒng)一先換算成為像素的多少，然后進行顯示。所以，就計算機的屏幕而言，相對長度和絕對長度沒有

27、本質(zhì)差別。任何單位其實都是像素，差別只是比例不同。但在其它不以像素作為其基本長度單位的設(shè)備中（如打印機），相對長度單位與絕對長度單位仍然是有差別的。 2百分比單位一個百分比值由可選的正號""或負號""、接著的一個數(shù)字，還有百分號"%"。在一個百分比值之中是沒有空格的。百分比值是相對于其它數(shù)值，同樣地用于定義每個屬性。最經(jīng)常使用的百分比值是相對于元素的字體大小，這時可以把百分比單位看作一個相對長度單位。例如：h1 font-size: 120% h1 font-size: 1.2em 這兩條定義的功能是一樣的，都是使一級標題標簽<

28、h1>中的字體大小按照預(yù)設(shè)的1.2倍顯示。 3顏色單位CSS中的顏色值可以劃分為兩大類：一種是關(guān)鍵字，一種是RGB格式的數(shù)字。Windows VGA(視頻圖像陣列)形成了16各關(guān)鍵字：aqua，black，blue，fuchsia，gray，green，lime，maroon，navy，olive，purple，red，silver，teal，white，and yellow。在進行CSS設(shè)計的時候，可以直接引用以上關(guān)鍵字，例如：div color:blue;div color:navy;RGB格式的顏色可以有四種形式，其中R代表紅色，G代表綠色，B代表藍色： #rrggbb (如，#0

29、0cc00；注意參數(shù)采用16進制，且為2位數(shù)，如不足2位應(yīng)在參數(shù)前填0) #rgb (如，#0c0，它就等于#00cc00) rgb(x,x,x) x是一個介乎0到255之間的十進制整數(shù) (如，rgb(0,204,0) rgb(y%,y%,y%) y是一個介乎0.0到100.0之間的整數(shù)，它代表的是某一原色相對于十進制數(shù)255的大小 (如，rgb(0%,80%,0%)，它就等于rgb(0%,80%*255,0%)即rgb(0,204,0)例如：div color:#0000FF;div color:#00F;div color:rgb(0,0,255)div color:rgb(0%,0%,1

30、00%)以上四種形式都表示<div>中的文本內(nèi)容以純藍色（div color:blue;）顯示。 4統(tǒng)一資源定位符URLs一個URL值的格式為：url(foo)，foo是一個URL（internet中某資源的地址，既可以是相對地址也可以是絕對地址）。URL可以選擇用單引號( ' )或者雙引號( " )，并且在URL之前或之后可以包含空格。例如：BODY background: url(style.gif) BODY background: url("style.gif") BODY background: url(http:/localhost

31、/ style.gif) 4.2.4 CSS的屬性CSS的屬性非常豐富，常用的有：字體屬性、顏色和背景屬性、文本屬性、邊距屬性、填充距屬性、邊框?qū)傩?、分級屬性以及鼠標屬性等。其屬性名以及屬性的含義見表4.1：表4.1 CSS的屬性1字體屬性（font）屬性名屬性含義屬性值font-family使用什么字體所有的字體，如宋體，仿宋體，MingLiu體等font-style字體是否斜體Normal、italic、obliquefont-variant是否用小體大寫Normal、small-capsfont-weight字體的粗細Normal、bold、bolder、lithter等font-siz

32、e字體的大小使用前面學(xué)過的長度單位。絕對長度單位和相對長度單位都可以使用2顏色和背景屬性屬性名屬性含義屬性值Color定義前景色在Web頁面中，前景色即頁面的文本顏色。它可以使用上面介紹的所有顏色單位Background-color定義背景色在Web頁面中，背景色一般指的就是文本之后的屏幕顏色。它也可以使用上面介紹的所有顏色單位Background-image定義背景圖案也可以簡寫為Background，其值是一個URL，可以使用相對路徑或絕對路徑Background-repeat背景圖案的重復(fù)方式當背景圖案的大小小于頁面的整體大小時，采用何種方式進行平鋪，其值為Repeat-x（橫向平鋪）、

33、repeat-y（縱向平鋪）、no-repeatBackground-attachment設(shè)置背景圖案的滾動方式當背景圖案的大小大于頁面的整體大小時，允許滾動背景圖案而不影響前景的顯示，其值為Scroll（拖動滾動條滾動）、Fixed（不允許滾動）Background-position背景圖案的初始位置Percentage、length、top、left、right、bottom等3文本屬性屬性名屬性含義屬性值Word-spacing單詞之間的間距Normal（默認）或使用前面介紹的長度單位Letter-spacing字母之間的間距同上Text-decoration文字的裝飾樣式None、un

34、derline、overlineline-through、blinkVertical-align垂直方向的位置Baseline、sub、super、toptext-top、middle、bottomtext-bottomText-transform文本轉(zhuǎn)換Capitalize（首字母大寫）、uppercase（大寫）Lowercase（小寫）、noneText-align對齊方式Left、right、center、justifyText-indent首行的縮進方式可使用前面介紹的長度單位以及百分比單位Line-height文本的行高Normal（默認）或使用前面介紹的長度單位以及百分比單位4邊

35、距屬性屬性名屬性含義屬性值Margin-top頂端邊距該屬性設(shè)定Web頁面正文的整體位置相對于瀏覽器的邊距。其值為auto（自動）或使用前面介紹的長度單位以及百分比單位Margin-right右側(cè)邊距同上Margin-bottom底端邊距同上Margin-left左側(cè)邊距同上5填充距屬性屬性名屬性含義屬性值Padding-top頂端填充距該屬性設(shè)定填充單元的位置相對于其容器的邊距。其值為auto（自動）或使用前面介紹的長度單位以及百分比單位Padding-right右側(cè)填充距同上Padding-bottom底端填充距同上Padding-left左側(cè)填充距同上6邊框?qū)傩詫傩悦麑傩院x屬性值Bor

36、der-top-width頂端邊框?qū)挾萒hin、medium、thick或使用長度單位Border-right-width右側(cè)邊框?qū)挾韧螧order-bottom-width底端邊框?qū)挾韧螧order-left-width左側(cè)邊框?qū)挾韧螧order-width一次定義寬度同上Border-color設(shè)置邊框顏色使用顏色單位Border-style設(shè)置邊框樣式None、dotted、dash、solid等Border-top一次定義頂端定義頂端的長度以及顏色?？墒褂瞄L度單位和顏色單位Border-right一次定義右側(cè)同上Border-bottom一次定義底端同上Border-left一次

37、定義左側(cè)同上Width定義寬度屬性auto（自動）或使用長度單位以及百分比單位Height定義高度屬性auto（自動）或使用長度單位Float文字環(huán)繞Left、right、noneClear文字環(huán)繞方式Left、right、none、both7分級屬性屬性名屬性含義屬性值Display定義是否顯示Block、inline、list-item、none（不顯示）White-space怎樣處理空白Normal、pre、nowrapList-style-type定義項目編號Disc（實心圓）、circle（空心圓）、square（正方形）等List-style-image定義項目編號的圖案none或

38、一個地址URLList-style-position項目編號的起始位置inside、outside8鼠標屬性屬性名屬性含義屬性值Cursor自動Auto定位“+”字Crosshair默認指針Default手形Hand移動Move箭頭朝右方e-resize箭頭朝右上方Ne-resize箭頭朝左上方Nw-resize箭頭朝上方n-resize箭頭朝右下方Se-resize箭頭朝左下方Sw-resize箭頭朝下方s-resize箭頭朝左方w-resize文本“I”形Text等待（默認沙漏圖案）Wait幫助（默認“？”圖案）Help4.2.5 CSS的過濾器CSS的過濾器主要用于定義對象的一些特殊的顯

39、示效果，而這些效果通常是需要使用圖片或動畫才可以做到的。它可以分為兩類：靜態(tài)過濾器與動態(tài)過濾器。由于動態(tài)過濾器需要結(jié)合在Script代碼中使用，因此本書主要介紹靜態(tài)過濾器。定義一個靜態(tài)過濾器的基本語法是：style="filter:filtername(fparameter1, fparameter2.)其中，filter是過濾器關(guān)鍵字，指出以下將要定義一個濾鏡；filtername是濾鏡的名字，IE支持14個濾鏡，如表4.2所示；fparameter是相對于該濾鏡的參數(shù)，不同的濾鏡其參數(shù)不同。表4.2 靜態(tài)過濾器的屬性過濾器屬性（filtername）過濾器描述參數(shù)參數(shù)描述Alph

40、a設(shè)定一定的透明度Opacity透明度級別,范圍是0-100, 0代表完全透明 is transparent, 100代表完全不透明FinishOpacity透明區(qū)域結(jié)束時的透明度級別Style代表透明區(qū)域的形狀特征，可設(shè)置的值是0（統(tǒng)一形狀），1（線性），2（矩形），3（長方形）StartX、StartY、FinishX、FinishY分別代表透明效果開始時的x坐標、y坐標；結(jié)束時的x坐標、y坐標Blur創(chuàng)造高速運動的模糊效果Add其值為“true或非0”；“false或0”Direction模糊效果按照順時針方向從0 - 315度，每45度為一個單位，默認值是向左的270度Strength

41、代表模糊深度的一個整數(shù)值Chroma制造特殊色彩的透明效果Color需要設(shè)為透明的顏色值，必須是對象中有的顏色值DropShadow創(chuàng)造陰影效果Color代表投射陰影的顏色OffX、OffY陰影的水平和垂直偏移量Positive一個布爾值。若值為true（非0），就為非透明像素建立陰影；為false（0），就為透明的像素建立陰影FlipH創(chuàng)造水平鏡像的效果無無FlipV創(chuàng)造垂直鏡像的效果無無Glow在物體邊緣整加發(fā)光效果Color指定發(fā)光的顏色Strength發(fā)光強度，從 0-100Gray去掉圖像的色彩效果無無Invert反轉(zhuǎn)對象的明度、亮度和飽和度效果無無Light放置光源的效果特殊（見注

42、1）特殊（見注1）Mask創(chuàng)造透明的遮罩效果color指定遮罩的顏色Shadow創(chuàng)造偏移的陰影效果Color代表陰影的顏色Direction設(shè)置投影的方向，按照順時針方向進行，0度代表垂直向上，然后每45度為一個單位。默認值是向左的270度。共8個方向Wave創(chuàng)造沿X軸波形扭曲效果Add一個布爾值，表示是否要為對象施加此濾鏡效果。true（非0)表示應(yīng)用，false（0）為不應(yīng)用Freq代表波形產(chǎn)生的頻率LightStrength代表施加在波紋上的光的強度Phase設(shè)置波形起始位置的偏移量，數(shù)值從0到100，0代表0度，100代表360度，25代表90度Strength代表波紋振幅的大小XRa

43、y僅顯示物體的邊緣效果無無*注1：light濾鏡的語法比較特殊，其發(fā)光效果也比較特殊，這里簡單說明如下： light濾鏡可以被用來模擬光源在物體上的投影效果，它一共有3種形式的光源效果，分別是泛光、錐形光和點光： AddAmbient(R,G,B,strength)在圖像周圍加入泛光，Ambient光是無方向的而且影響整個區(qū)域，太陽光發(fā)射的就是Ambient光。 其語法格式為： call object.style.filters.Light(n).addAmbient(R,G,B,strength) R、G、B決定了Ambient光的顏色數(shù)，strength決定了光投射的數(shù)量。 AddCone

44、(x1,y1,z1,x2,y2,R,G,B,strength,spread)在圖像上增加一個錐形的光源。Cone光是有方向的而且只影響一指定的區(qū)域。 其語法格式為： call object.style.filters.Light(n).addCone(x1,y1,z1,x2,y2,R,G,B,strength,spread) x1、y1、z1代表光源的位置，x2、y2、z2代表目標點的位置。R、G、B代表光的顏色數(shù)，strength代表光投射的數(shù)量。 AddPoint(x,y,z,R,G,B,strength)在圖像上增加一個點光源,點光源就像一個燈泡發(fā)的光一樣.其語法格式為： call ob

45、ject.style.filters.Light(n).addPoint(x,y,z,R,G,B,strength) x、y、z代表點光源的位置，R、G、B代表光的顏色數(shù)，strength代表光投射的數(shù)量和范圍。 一旦定義了以上的光源屬性，就可以用如下的方法來設(shè)置或改變屬性。 ChangeColor(lightnumber, r,g,b, fAbsolute)ChangeColor將改變光源作用到物體上的色彩值。使用lightnumber標識被改變色彩的光源，r,g,b表示改變后的光源的色彩。fAbsoloute 是一個布爾值，如果值為true(非0)，則相關(guān)的光源色彩被改變到新的數(shù)值，如果值

46、為false(0)則相關(guān)的光源色彩被改變?yōu)樾碌臄?shù)值。 ChangeStrength(lightnumber, strength, fAbsolute)ChangeStrength 改變光源的強度。 ClearClear方法將清除所有的光源。 MoveLight(lightnumber, x, y, z, fAbsolute)MoveLight移動光源位置、目標點位置，對泛光等沒有影響。4.3 層疊樣式表的原則層疊樣式表的原則主要有2個，一個是繼承性，一個是其層疊優(yōu)先級。1層疊樣式表的繼承CSS的繼承規(guī)則非常簡單：一般情況下，所有在選擇符中嵌套的選擇符都會繼承外層選擇符指定的屬性值，除非另外更改

47、。例如，一個<BODY>定義了的顏色值也會應(yīng)用到段落<p>的文本中，除非<p>中另外定義了段落中文本的顏色值。有些情況是內(nèi)部選擇符不繼承周圍的選擇符的值，但理論上這些都是特殊的。例如，上邊界屬性是不會繼承的；直覺上，一個段落<p>也不會具有同<BODY>一樣的上邊界值。對于這些特殊的情況，請同學(xué)們在實際使用中自行總結(jié)。2層疊樣式表的層疊優(yōu)先級所謂層疊（Cascading）就是指在同一元素的同一屬性上，擁有多條CSS規(guī)則指定了值，這也是CSS之所以被稱為層疊樣式表的一個重要原因。例如我們首先使用CSS的內(nèi)部引用方式定義段落<p&g

48、t;的樣式：pcolor : yellow;然后我們又為定義了<p>的一個類“intro”：rocolor : blue;最后我們在html中有如下代碼：<p class="intro" style="color:red;">這段文字到底應(yīng)該是什么顏色呢？</p>我們看到，在上面的例子中，<p>既內(nèi)聯(lián)引用了一個樣式“style="color:red;"”，又通過類引用了“ro”，而我們又首先定義了<p>的通用樣式“pcolor : yellow;”。那么在

49、這個例子中，<p>中的文字到底是顯示為紅色還是藍色或者是黃色呢？要搞清楚這個問題，就必須理解CSS的層疊優(yōu)先級。難點是，CSS的層疊優(yōu)先級比較復(fù)雜，其算法步驟較多，影響優(yōu)先級的因素也比較多。我們這里只給出一個在一般情況下適用的、簡單的規(guī)則，對其完整算法有興趣的同學(xué)可以參閱W3G關(guān)于CSS層疊優(yōu)先級的解釋，其Web地址是：/TR/CSS21/cascade.html#specificity可以這樣簡單的理解CSS的層疊優(yōu)先級：優(yōu)先級按照以下因素從高到低為： 聲明“!important”關(guān)鍵字 CSS的來源：內(nèi)聯(lián)引用 > 內(nèi)部引用 > 外部引

50、用 CSS的位置：出現(xiàn)在后的總是比出現(xiàn)在前的具有更高的優(yōu)先級具有“!important”關(guān)鍵字的CSS具有最高優(yōu)先級；如果參與競爭的CSS都沒有聲明“!important”關(guān)鍵字，則判斷其來源：內(nèi)聯(lián)引用具有最高優(yōu)先級，其次是內(nèi)部引用，其次是外部引用；最后，在同一來源內(nèi)部，CSS出現(xiàn)的位置決定其優(yōu)先級的高低：出現(xiàn)在后的總是比出現(xiàn)在前的具有更高的優(yōu)先級。例如，在上面的那個例子中，由于所有參與競爭的CSS都沒有聲明“!important”關(guān)鍵字，因此用CSS的來源決定其優(yōu)先級。于是，上面段落<p>中的文本的顯示顏色應(yīng)為其內(nèi)聯(lián)CSS所定義的顏色，即紅色。如果我們修改一下其CSS定義：pco

51、lor : yellow;rocolor : blue ! important;<p class="intro" style="color:red;">這段文字到底應(yīng)該是什么顏色呢？</p>那么，這段文字的顏色應(yīng)為帶有“!important”關(guān)鍵字的CSS所定義的顏色，即使用ro類將文字的顯示顏色設(shè)為藍色。4.4 設(shè)計實例CSS是一種強大的調(diào)控用戶界面的手段。在Web2.0規(guī)范中，W3C建議所有的客戶端頁面布局都應(yīng)采用CSS+DIV的方式來實現(xiàn)。在學(xué)習(xí)了第2，3章后，我們已經(jīng)對DIV有了一定的認識，但在前幾章的

52、內(nèi)容里我們的頁面布局方式采用的仍然是TABLE或IFRAME的方式，現(xiàn)在就讓我們來試試CSS+DIV的強大能力。本實例要求設(shè)計一個欄目鏈接列表，其功能是：當鼠標移動到鏈接所在行，鏈接文本顏色會改變，同時會在鏈接右下側(cè)顯示一個與鏈接相關(guān)的信息面板，信息面板中左邊有一幅圖片，圖片右側(cè)又有一系列與圖片相關(guān)的說明。下面說明其實現(xiàn)步驟及原理。1準備工作首先，我們需要做一些準備工作：在硬盤里建立一個新文件夾，名字任意，在本例中其名字為“實例”；接著在此文件夾中建立一個html文件，名字任意，本例中其名字為“css.htm”；然后在此文件的同級目錄新建一個文件夾，名字為“images”，用來存放需要顯示的圖

53、片；最后準備4張圖片，依次命名為：1.gif，2.gif，3.gif和4.gif，并將之存放在images目錄下。其大小在本例中為202×137，當然你也可以不按照此格式，只不過這樣就需要調(diào)整源代碼才能得到理想的顯示效果了。準備好后的文件如下圖所示：2源代碼準備工作完成后，我們通過文本編輯器或Dreamweaver等工具在css.htm中寫入如下代碼：<!下面是Web頁面的元信息-><!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Transitional/EN" "/

54、TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><!元信息結(jié)束，下面是其head部分-><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>CSS綜合實例</title><!下面是一個使用內(nèi)部引用方式定義的CSS-&g

55、t;<style type="text/css"><!-*margin:0px;padding:0px;body margin:10px;font-size: 13px;a:link color: #666;text-decoration: none;/*去除鏈接下劃線*/a:visited color: #666;text-decoration: none;a:hover color: #F90;h3 color: #FFF;background-color: #F90;width: 300px;padding-top:3px;text-align:ce

56、nter;ul width: 300px;border-top: 1px solid #F60;/*使其上邊有一線條，與標題h3吻合*/ul li padding:5px;border-bottom: 1px solid #CCC;list-style:none;/*去除列表樣式，這對于標準瀏覽器很重要*/a position: relative;/*設(shè)置其定位方法為相對定位，等一下內(nèi)部信息面板就可以相對它定位*/display:block;/*讓鏈接以塊狀呈現(xiàn)，這樣不用點中鏈接文字就可以響應(yīng)鏈接*/a div display: none;/*初始化信息面板不顯示*/a:hover backg

57、round:#fff;/*IE7以下版本A狀態(tài)偽類bug*/a:hover div position: absolute;padding:5px;display:block;width: 380px;/*給出寬度*/height: 140px;/*給出高度/left:150px;/*這是相對父級a的定位*/top: 20px;border: 1px solid rgb(255,154,0);background-color: rgb(255,255,255);a img width:202px;height:137px;border:none;/*去除圖片邊框，默認情況下，鏈接內(nèi)的圖片在標準瀏

58、覽器會出現(xiàn)邊框*/display:block;position: absolute;/*用絕對定位抽離正常文本流，不然在設(shè)計的時候考慮到不同瀏覽器正常顯示會更麻煩*/top:5px;/*這里的5px是與信息面板大盒子的填充一樣的*/left:5px;dl width: 160px;float:right;color: #999;line-height:20px;dl dd span font-weight: bold;color: #639;-></style></head><!CSS定義與head部分結(jié)束，下面是Web頁面的正文部分-><body><h3>仙劍奇?zhèn)b傳人物賞析</h3><ul><li><a href="#">01 定情<div><img src="images1.gif" alt="" /><dl><dd><span>人物：</span>趙靈兒與李逍遙</dd><dd><s

溫馨提示

  • 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)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論