網(wǎng)頁(yè)編程技術(shù)_第3章 css.ppt

1、通過(guò)本章學(xué)習(xí)，應(yīng)該掌握以下內(nèi)容： 什么是CSS CSS樣式和常用的selector 在網(wǎng)頁(yè)中使用CSS的方法 CSS的各種屬性,第3章 在網(wǎng)頁(yè)中使用CSS樣式,第3章 在網(wǎng)頁(yè)中使用CSS樣式,3.1 CSS簡(jiǎn)介 3.2 CSS樣式 3.3 在網(wǎng)頁(yè)中使用CSS的方法 3.4 CSS屬性,3.1 CSS簡(jiǎn)介,CSS（Cascading Style Sheet)層疊樣式表，它是一種格式化網(wǎng)頁(yè)的標(biāo)準(zhǔn)方式，它通過(guò)設(shè)置CSS屬性使網(wǎng)頁(yè)元素獲得各種不同效果。CSS不是一種程序設(shè)計(jì)語(yǔ)言，而只是一種用于網(wǎng)頁(yè)排版的標(biāo)識(shí)性語(yǔ)言，是對(duì)現(xiàn)有HTML語(yǔ)言功能的補(bǔ)充和擴(kuò)展。 CSS的主要功能是通過(guò)對(duì)HTML選擇器進(jìn)行設(shè)定，

2、來(lái)實(shí)現(xiàn)對(duì)網(wǎng)頁(yè)中的字體、字號(hào)、顏色、背景、圖像等其他元素的控制，使網(wǎng)頁(yè)能夠完全按照設(shè)計(jì)者的要求來(lái)顯示。,3.1.1 CSS的特點(diǎn),將格式和結(jié)構(gòu)分離 控制頁(yè)面布局 制作體積更小下載更快的網(wǎng)頁(yè) 將許多網(wǎng)頁(yè)同時(shí)更新 瀏覽器成為更友好的界面,3.1.2 在網(wǎng)頁(yè)中使用CSS的方式,在標(biāo)記符中直接嵌套樣式信息(內(nèi)嵌) HTML 標(biāo)記符的 style 屬性 在STYLE標(biāo)記符中定義樣式信息(插入) STYLE 標(biāo)記符 樣式定義 鏈接外部樣式表中的樣式信息(引入) LINK 標(biāo)記符 優(yōu)先級(jí) 內(nèi)嵌插入引入瀏覽器缺省設(shè)置,3.2 CSS樣式,3.2.1 CSS樣式表組成 3.2.2 幾種常用的selector,CS

3、S的定義由三部分構(gòu)成：選擇符selector、屬性property和屬性值value。其基本格式如下： selectorpropertyl：valuel；property2：value 2； selector（選擇符）表示需要應(yīng)用樣式的標(biāo)簽( 可以是HTML的標(biāo)簽,也可以是自己定義的標(biāo)簽) property表示由CSS標(biāo)準(zhǔn)定義的樣式屬性，value表示樣式屬性的值。,3.2.1 CSS樣式表組成,如: h1 font-family:宋體; font-style:italic; color: red; ,3.2.2 幾種常用的selector,HTML標(biāo)記符是最典型的selector類(lèi)型，網(wǎng)頁(yè)設(shè)

4、計(jì)者可以為某個(gè)或某些具體的HTML元素應(yīng)用樣式定義。如： BODYcolor：black 如果屬性的值是多個(gè)單詞組成的，必須在值前加上雙引號(hào)。如果需要對(duì)一個(gè)selector指定多個(gè)屬性時(shí)，應(yīng)使用分號(hào)將所有的屬性和值分開(kāi)。如： p font-family: sans serif;font-weight:bold,1HTML標(biāo)記符selector,使用CSS的標(biāo)記符設(shè)置CSS樣式的方法,可以對(duì)HTML的同一類(lèi)型的標(biāo)記元素設(shè)置統(tǒng)一的樣式;使用class類(lèi)選擇符和ID選擇符則可以對(duì)同一類(lèi)型的的標(biāo)記元素設(shè)置不同的樣式,以及為不同類(lèi)型的標(biāo)記元素設(shè)置相同的樣式。 class類(lèi)選擇符格式如下： selecto

5、r.classname property：value； 可以使用任何名稱(chēng)命名類(lèi)，但通常使用具體含義的名稱(chēng)。,2用戶(hù)定義的類(lèi)selector,.myh1 font-family:宋體; font-size:50pt; color:blue; H2.s1color: red, 類(lèi)選擇符 .myh1 font-family:宋體; font-size:50pt; color:blue; 通過(guò)類(lèi)定義的格式 myh1 沒(méi)有通過(guò)類(lèi)定義的格式 myh1 這個(gè)p標(biāo)簽使用了類(lèi)定義的格式 myh1 運(yùn)行效果見(jiàn)：類(lèi)選擇符的使用,3用戶(hù)定義的ID selector,當(dāng)網(wǎng)頁(yè)設(shè)計(jì)者想在整個(gè)網(wǎng)頁(yè)或幾個(gè)頁(yè)面上多處以相同樣式顯

6、示標(biāo)記符時(shí)，除了使用類(lèi)定義一個(gè)通用類(lèi)樣式以外，還可以使用ID定義樣式。ID選擇符的應(yīng)用和類(lèi)選擇符類(lèi)似，只要把CLASS換成ID即可。 要將一個(gè)ID樣式包括在樣式定義中，應(yīng)用一個(gè)#號(hào)作為ID名稱(chēng)的前綴，如下所示： #IDnameproperty：value 定義了ID樣式后，需要在引用該樣式的標(biāo)記符內(nèi)使用id屬性。,#red color:red; #green color:green; 這個(gè)段落是紅色。 這個(gè)段落是綠色。,注意：id 屬性只能在每個(gè) HTML 文檔中出現(xiàn)一次。那么如何使用ID Selector為多個(gè)元素使用相同的格式呢？,單獨(dú)的選擇器 #sidebar border: 1px d

7、otted #000; padding: 10px; 根據(jù)這條規(guī)則，id 為 sidebar 的元素將擁有一個(gè)像素 寬為1px的黑色點(diǎn)狀邊框，同時(shí)其周?chē)鷷?huì)有 10 個(gè)像素寬的 內(nèi)邊距（padding，內(nèi)部空白）。老版本的 Windows/IE 瀏 覽器可能會(huì)忽略這條規(guī)則，除非你特別地定義這個(gè)選擇器 所屬的元素： div#sidebar border: 1px dotted #000; padding: 10px; 舉例 ：ID選擇符用法1.html,一個(gè)選擇器，多種用法 即使被標(biāo)注為 sidebar 的元素只能在文檔中出現(xiàn)一次，這個(gè) id 選擇器作為派生選擇器也可以被使用很多次： #sideb

8、ar p font-style: italic; text-align: right; margin-top: 0.5em; #sidebar h2 font-size: 1em; font-weight: normal; font-style: italic; margin: 0; line-height: 1.5; text-align: right; 舉例 ：ID選擇符用法2.html,可以單獨(dú)對(duì)某種存在包含關(guān)系的元素定義樣式表，例如元素1里包含元素2，可以只對(duì)在元素1里的元素2定義，對(duì)單獨(dú)的元素1或元素2無(wú)定義，例如： TABLE Afont-size：10px 使用上規(guī)則后，在表格內(nèi)

9、的鏈接改變了樣式，文字大小為10像素，而表格外的鏈接的文字仍為默認(rèn)大小。,4包含selector /派生選擇器 (css2),下面是使用包含選擇器進(jìn)行的樣式定義: strong color: red; h2 color: red; h2 strong color: blue; 下面是它施加影響的 HTML： The strongly emphasized word in this paragraph isred. This subhead is also red. The strongly emphasized word in this subhead isblue. ,怎么樣將CSS應(yīng)用到H

10、TML文檔中呢?,有四種方法 在HTML文檔的標(biāo)簽內(nèi)嵌入CSS的定義 使用標(biāo)簽鏈接進(jìn)來(lái) 使用CSS的import 標(biāo)簽導(dǎo)入進(jìn)來(lái) 在HTML文件中直接加入,3.3 在網(wǎng)頁(yè)中使用CSS,3.3.1 在標(biāo)記符中直接嵌套樣式信息 (內(nèi)嵌）,在標(biāo)記符中直接嵌套樣式信息又稱(chēng)為“局部引用”，即將樣式直接嵌套在HTML標(biāo)記里使用的。用這種方法，可以很簡(jiǎn)單的對(duì)某個(gè)元素單獨(dú)定樣式。 使用style屬性可以在HTML標(biāo)記符中直接嵌入樣式定義，如下所示： , 內(nèi)嵌樣式表示例 離離原上草,一歲一枯榮。 野火燒不盡，春風(fēng)吹又生。 遠(yuǎn)方侵古道，晴翠接荒城。 又送王孫去，萋萋滿(mǎn)別情 效果演示：內(nèi)嵌樣式表示例,如果能將同類(lèi)的樣

11、式都統(tǒng)一定義，然后再具體應(yīng)用于網(wǎng)頁(yè)中的元素，那么就能體現(xiàn)出CSS的優(yōu)越性了。實(shí)際上，這正是CSS應(yīng)用于網(wǎng)頁(yè)的最常用方式，即在HEAD標(biāo)記符內(nèi)使用STYLE標(biāo)記符，然后在STYLE標(biāo)記符中定義樣式。這種應(yīng)用方式又稱(chēng)“內(nèi)部引用”。 定義樣式的方式為： selector property l：value l；property 2：value 2； 其中，selector表示樣式作用的對(duì)象，property和value則表示相應(yīng)CSS屬性和值的配對(duì)。,3.3.2 在STYLE標(biāo)記符中定義樣式信息（內(nèi)部引用）, first 通過(guò)類(lèi)定義的格式 myh1 ,3.3.3 引用外部樣式表中的樣式信息（外部引用）

12、,在STYLE標(biāo)記符中定義樣式對(duì)于單獨(dú)網(wǎng)頁(yè)的格式設(shè)置和維護(hù)很有效，但如果在一個(gè)大網(wǎng)站中，為每個(gè)頁(yè)面都定義類(lèi)似的樣式，顯然又是效率不高的，這時(shí)最好的辦法就是將重復(fù)在多個(gè)網(wǎng)頁(yè)中使用的樣式放在外部樣式表文件中，然后通過(guò)鏈接的方式引用其中的樣式。鏈接式樣式的優(yōu)點(diǎn)很明顯，網(wǎng)頁(yè)設(shè)計(jì)者可以在一個(gè)鏈接的CSS文件上作修改，然后所有引用它的網(wǎng)頁(yè)都會(huì)自動(dòng)更新。,引用鏈接外部樣式表中的樣式信息又稱(chēng)為“外部引用”。外部引用又可以分為鏈入外部樣式表和導(dǎo)入外部樣式表兩類(lèi)。 鏈入外部樣式表是把樣式表保存為一個(gè)樣式表文件，然后在頁(yè)面中用LINK標(biāo)記符鏈接到這個(gè)樣式表文件，這個(gè)LINK標(biāo)記符必須放到頁(yè)面的HEAD區(qū)內(nèi)。 導(dǎo)入外

13、部樣式表是指在內(nèi)部樣式表的STYLE里導(dǎo)入一個(gè)外部樣式表，導(dǎo)入時(shí)用import。 導(dǎo)入外部樣式表輸入方式比鏈入外部樣式表更有優(yōu)勢(shì)，實(shí)質(zhì)上它相當(dāng)于存在內(nèi)部樣式表中。,1、使用 標(biāo)簽導(dǎo)入外部的CSS文件,首先 要建立 將CSS 定義的內(nèi)容 存成一個(gè)單獨(dú)的 css 文件. 然后在網(wǎng)頁(yè)的中用 將css文件導(dǎo)入.,步驟1：新建mycss.css,#myh1 font-family:宋體; font-size:50pt; color:blue; ,步驟2：編寫(xiě)HTML文件，并用LINK標(biāo)記導(dǎo)入CSS文件 html 用LINK標(biāo)簽導(dǎo)入CSS定義 通過(guò)ID定義類(lèi)格式 myh1 ,2、使用import標(biāo)簽導(dǎo)入,

14、#myh1 font-family:宋體; font-size:50pt; color:blue; ,步驟1：mycss.css,步驟2：編寫(xiě)HTML文件，并用import導(dǎo)入 格式是： import url(“mycss.css”) 例如： 用import標(biāo)簽導(dǎo)入CSS定義 import url(mycss.css) /還可以有其他的CSS樣式定義 通過(guò)類(lèi)定義格式 myh1 ,CSS提供的5大類(lèi)屬性,(1) 字體屬性 (2) 顏色和背景屬性 (3)區(qū)塊屬性 (4)分級(jí)屬性 (5)鼠標(biāo)屬性 (6)濾鏡效果,3.4 CSS屬性,3.4.1 字體屬性 3.4.2 文本屬性 3.4.3 顏色與背景屬

15、性 3.4.4 布局屬性 3.4.5 定位和顯示屬性 7.4.6 鼠標(biāo)樣式屬性 7.4.7 列表樣式屬性 7.4.8 CSS濾鏡,字體屬性用于控制網(wǎng)頁(yè)中的文本的字符顯示方式，例如控制文字的大小、粗細(xì)以及使用的字體等。CSS中的字體屬性包括字體族科（font-family）、字體風(fēng)格（font-style）、字體變形（font-variant）、字體加粗（font-weight）、字體大?。╢ont-size）五個(gè)屬性。其中字體族科和字體大小屬性是比較常用的。,3.4.1 字體屬性,HTML中的字體格式設(shè)置回顧 1、 2、斜體(斜體) 黑體(黑體) 打字機(jī)字體程序變量xyz HTML指令例1 使

16、用鍵盤(pán)字符時(shí)a%#!() p text-indent: 20%; 作用于代碼塊: this is a paragragh ,文字修飾屬性可以對(duì)特定選項(xiàng)的文本進(jìn)行修飾，它的取值為：none、underline、overline、line-through、blink，默認(rèn)值為none，表示不加任何修飾。 underline表示添加下劃線； overline表示添加上劃線； line-through表示添加刪除線； blink表示添加閃爍效果。 注: 另外IE瀏覽器并不支持文字修飾屬性值blink（閃爍）。 語(yǔ)法格式如下： 例如: text-decoration 修飾超級(jí)鏈接,6文字修飾屬性（tex

17、t-decoration）,行高屬性決定了相鄰行之間的間距。其取值可以是數(shù)字、長(zhǎng)度或百分比，默認(rèn)值是normal。 當(dāng)以數(shù)字指定值時(shí)，行高就是當(dāng)前字體高度與該數(shù)字相乘的倍數(shù)。 如果指定具體的長(zhǎng)度值，則行高為該值。 如果用百分比指定行高，則行高為當(dāng)前字體高度與該百分比相乘。該屬性不允許使用負(fù)值。 語(yǔ)法格式如下： 舉例: line-height1 line-height2,7行高屬性 (line-height),文本轉(zhuǎn)換屬性用于轉(zhuǎn)換文本，取值為：capitalize、uppercase、lowercase、none，默認(rèn)值是none表示使用原始值。 capitalize值表示所選元素中文本的每個(gè)單

18、詞的首字母以大寫(xiě)顯示； uppercase值表示所有的文本都以大寫(xiě)顯示； lowercase值表示所有文本都以小寫(xiě)顯示。 語(yǔ)法格式如下： 舉例: text-transform,8文本轉(zhuǎn)換屬性(text-transform),9. white-space 屬性(了解),通過(guò)使用該屬性，可以影響瀏覽器處理字之間和文本行之間的空白符的方式。 實(shí)例: white-space-normal white-space-nowrap 簡(jiǎn)單的導(dǎo)航按鈕 使用列表實(shí)現(xiàn)導(dǎo)航,IE 7 以及更早版本的瀏覽器不支持該值,文本屬性綜合,10文本屬性綜合舉例,background屬性是一個(gè)組合屬性，可用于同時(shí)設(shè)置backgr

19、ound- color、background- image、background-attachment、background-position、background-repeat等背景屬性。 表示組合屬性時(shí)，設(shè)置的先后順序是background-color, background-image, background-repeat, background-attachment, background-position。 語(yǔ)法: body background: #00FF00 url(bgimage.gif) no-repeat fixed top; 實(shí)例: background,3.4.3 顏

20、色與背景屬性,1background屬性,2background-color屬性,這個(gè)屬性為HTML元素設(shè)定背景顏色，相當(dāng)于HTML中bgcolor屬性。 例如:body background-color:#99FF00;,用于設(shè)置HTML元素的背景圖案，取值為url或none。默認(rèn)值為none，即沒(méi)有背景圖案。該屬性相當(dāng)于HTML中BODY標(biāo)簽的background屬性，只是它可以定義更多元素的背景圖像。 語(yǔ)法格式: 實(shí)例: background-image,3background-image屬性,4background-attachment屬性 用于控制背景圖像是否隨內(nèi)容一起滾動(dòng)，取值為s

21、croll、fixed。默認(rèn)值為scroll，表示背景圖案隨著內(nèi)容一起滾動(dòng)；fixed表示背景圖案靜止，而內(nèi)容可以滾動(dòng)。 語(yǔ)法格式: bodybackground-image:url(flower.jpg); background-attachment:fixed,用于指定背景圖案相對(duì)于關(guān)聯(lián)區(qū)域左上角的位置,該屬性通常指定由空格隔開(kāi)的兩個(gè)值,也可以取預(yù)定義的關(guān)鍵值。 這個(gè)屬性和background-image屬性連在一起使用，決定了背景圖片的最初位置。 body background-image:url(flower.jpg); background-repeat:no-repeat; bac

22、kground-position:20px 60px 上面的代碼表示背景圖片的初始位置距離網(wǎng)頁(yè)最左面 20px，距離網(wǎng)頁(yè)最上面60px。 實(shí)例: background-position-center background-position-百分比形式,5background-position屬性,6background-repeat屬性,表示當(dāng)使用背景圖案時(shí)，背景圖案是否重復(fù)顯示。取值可以是：repeat表示在水平方向和垂直方向都重復(fù)，即像鋪地板一樣將背景圖案平鋪；repeat-x表示在水平方向上平鋪；repeat-y表示在垂直方向上平鋪；no-repeat表示不平鋪，即只顯示一幅背景圖案。

23、格式： bodybackground-image:url(flower.jpg); background-repeat:repeat-y 實(shí)例: background-repeat,3.4.4 布局屬性,網(wǎng)頁(yè)上的元素都有邊框，只是大部分缺省沒(méi)有顯示出來(lái)。CSS邊框?qū)傩栽O(shè)置包括三項(xiàng)：邊框顏色（color）、邊框樣式（style）和邊框?qū)挾龋╳idth），而邊框又包括四個(gè)方向：上（top）、下（bottom）、左（1eft）和右（right）。將邊框設(shè)置和方向組合起來(lái)，則構(gòu)成了多種屬性。如：border-bottom、border-bottom-color、border-bottom-style、

24、border-bottom-width、border-right-color、border-right-style、border-right-width等等。 可以通過(guò)border屬性設(shè)置邊框的寬度、樣式和顏色，如”border:2px ridge #ff00ff” ，也可以單獨(dú)為border的某一條邊進(jìn)行設(shè)置寬度、樣式和顏色。,1邊框?qū)傩?color取值：凡是顏色值都可以 style取值：solid、dotted、dashed、double、groove、ridge、inset、outset width取值：thin 、medium 、thick 以及長(zhǎng)度單位(10px) 實(shí)例: 所有邊框?qū)?/p>

25、性在一個(gè)聲明之中(border) 不同類(lèi)型的border-style 設(shè)置每一邊的不同邊框 所有右邊框?qū)傩栽谝粋€(gè)聲明之中 設(shè)置上邊框的顏色 設(shè)置左邊框的寬度(border-left-width),CSS邊界屬性包括邊界margin、下邊界margin-bottom、左邊界margin-left、右邊界margin- right以及上邊界margin-top。 margin-top 、margin-right、和margin-bottom、 margin-left屬性可以分別用來(lái)設(shè)置上、右、下、左邊界的寬度，它們的取值可以是長(zhǎng)度、百分比或auto。 長(zhǎng)度可以是任何長(zhǎng)度單位，比如像素、英寸、毫米或

26、 em 百分?jǐn)?shù)是相對(duì)于父元素的 width 計(jì)算的 margin屬性可以同時(shí)指定上、右、下、左（以此順序）邊界的寬度。 如：Pmargin:lem 2em 3em 6em bodymargin:1em 3em 實(shí)例：margin margin-left,2邊界屬性,CSS填充屬性包括填充padding、左填充padding-left、右填充padding-right、上填充padding-top以及下填充padding-bottom。 padding-left、padding-right、padding-top和padding-bottom這四個(gè)屬性用于設(shè)置左、右、上、下填充區(qū)的寬度，取值可以

27、是長(zhǎng)度和百分?jǐn)?shù)。 長(zhǎng)度可以是任何長(zhǎng)度單位，比如像素、英寸、毫米或 em 百分?jǐn)?shù)值是相對(duì)于其父元素的 width 計(jì)算的 padding屬性用于同時(shí)指定上、右、下、左四個(gè)方向填充的寬度，如Ppadding:1em 2em 3em 4em,當(dāng)然也可以單獨(dú)為某個(gè)方向進(jìn)行設(shè)置,如: divpadding-right:1em;padding-bottom:1em,3填充屬性,CSS浮動(dòng)屬性包括float和clear： float屬性可以將元素的內(nèi)容浮動(dòng)到頁(yè)面左邊緣或右邊緣，該屬性的取值為：none、left、right，默認(rèn)值為none。 clear 屬性規(guī)定元素的哪一側(cè)不允許其他浮動(dòng)元素。取值可以是：

28、none、left、right、both，默認(rèn)值為none，表示允許浮動(dòng)元素在其旁邊；left表示跳過(guò)左邊的浮動(dòng)元素；right表示跳過(guò)右邊的浮動(dòng)元素，both表示跳過(guò)所有的浮動(dòng)元素。 實(shí)例： 創(chuàng)建無(wú)表格的首頁(yè) 使段落的首字母浮動(dòng)于左側(cè) 將帶有邊框和邊界的圖像浮動(dòng)于段落的右側(cè) 帶標(biāo)題的圖像浮動(dòng)于右側(cè),4、浮動(dòng)屬性,CSS定位屬性包括position、top、bottom、left、right和z-index，寬、高屬性包括width和height。 position屬性用來(lái)設(shè)定對(duì)象的定位方式，它的取值為：static（默認(rèn)值）、relative或absolute。 top和left屬性分別設(shè)定

29、元素上邊的垂直位置和設(shè)定元素左邊的水平位置。 width和height屬性可以控制元素的寬度和高度（此時(shí)position屬性必須指定為absolute？）。 z-index設(shè)定元素的折疊方式，即元素之間的堆疊效果設(shè)置。,3.4.5 定位和顯示屬性,1定位屬性和寬高屬性,當(dāng)position取值為relative時(shí)，元素仍然為文檔流的一部分，只不過(guò)其位置應(yīng)是相對(duì)于其原始位置進(jìn)行偏移,當(dāng)position取值為absolute時(shí)，元素將脫離文檔流進(jìn)行絕對(duì)定位，有可能定為后會(huì)遮蓋文檔流中的部分內(nèi)容,實(shí)例: 定位：相對(duì)定位 定位：絕對(duì)定位 使用固定值設(shè)置圖像的上邊緣 Z-index 低 不同優(yōu)先級(jí)的Z-i

30、ndex div-width-height,在CSS中，有兩個(gè)屬性可以控制元素的顯示和隱藏，即display屬性和visibility屬性。 display屬性確定一個(gè)元素是否應(yīng)顯示在頁(yè)面上，它的取值有多個(gè)，最常見(jiàn)的有none、block、inline和inlineblock，但不是所有的瀏覽器都支持。 visibility屬性有時(shí)也被分類(lèi)為定位屬性，用來(lái)控制定位的元素是否可見(jiàn)，取值包括：visible（可見(jiàn)）、hidden（隱藏）和inherit（繼承其父元素的visibility屬性值，所有的IE都不支持），默認(rèn)值為visible。 實(shí)例：display,2顯示屬性,CSS的鼠標(biāo)樣式屬性用

31、于設(shè)置鼠標(biāo)移到元素上時(shí)的鼠標(biāo)形狀。通常情況下，鼠標(biāo)呈指向左上方的箭頭，而當(dāng)鼠標(biāo)移到超鏈接上時(shí)呈手的形狀。有了鼠標(biāo)樣式屬性，用戶(hù)就可以隨意地設(shè)定鼠標(biāo)的形狀。 CSS的鼠標(biāo)樣式是通過(guò)cursor樣式表屬性定義的，格式為： cursor：屬性值 cursor: url(路徑/*.cur) 實(shí)例：cursor.html,3.4.6 鼠標(biāo)樣式屬性,列表樣式屬性用于設(shè)置頁(yè)面中的列表格式。CSS中的列表樣式屬性包括：list-style、list-style-type、list-style-image以及l(fā)ist-style-position。 list-style-type屬性用于設(shè)置項(xiàng)目符號(hào)和編號(hào)樣式，

32、取值為：disc（默認(rèn)值，實(shí)心黑點(diǎn)）、circle（空心圓圈）、square（方塊）、decimal（十進(jìn)制數(shù)1，2，3等）、lower-roman（小羅馬數(shù)字）、upper-roman（大羅馬數(shù)字）、lower-alpha（小寫(xiě)字母）、upper-alpha（大寫(xiě)字母）和none（無(wú)）。 list-style-image自定義列表圖案： list-style-image:url(“”); list-style-position:,3.4.7 列表樣式屬性,實(shí)例: 在一個(gè)聲明中定義所有的列表屬性,濾鏡（filter）是CSS的一種擴(kuò)充。使用這種技術(shù)只用幾句代碼就可以把類(lèi)似于Photoshop中

33、的濾鏡效果添加到圖片、文本等HTML元素上。 filter樣式表的屬性定義為： filter：filtername（parameters） 常見(jiàn)的filter 屬性見(jiàn)下圖:,3.4.8 CSS濾鏡,1、Alpha濾鏡,該濾鏡可以實(shí)現(xiàn)各種溶入效果。 可以利用它作出淡入淡出的效果。 語(yǔ)法： filter：alpha（opacity=?，finishopacity=?，style=?，startX=?，startY=?，finishX=?，finishY=?） 說(shuō)明: opacity :代表圖象的起始透明度。值在0100 finishopacity: 指定結(jié)束時(shí)的透明度。值0100 style: 表

34、示透明區(qū)域的形狀特征，其中“0” 代表統(tǒng)一，“1”代表線形 “2” 代表放射狀，“3”代表矩形 startx 表示漸變透明效果的開(kāi)始X坐標(biāo)。startY, finishx ,finishy 實(shí)例：alpha,2、blur屬性,blur屬性的表達(dá)式： filter：blur（add=?，direction=?，strength=?） 參數(shù)說(shuō)明： add參數(shù)有兩個(gè)參數(shù)值：true和false,意思是指定圖片是否被改變成模糊效果。 direction參數(shù)用來(lái)設(shè)置模糊的方向。模糊效果是按照順時(shí)針?lè)较蜻M(jìn)行的。其中0度代表垂直向上，每45度一個(gè)單位，默認(rèn)值是向左的270度。角度方向的對(duì)應(yīng)關(guān)系見(jiàn)下表：,st

35、rength參數(shù)值只能使用整數(shù)來(lái)指定，它代表有多少像素的寬度將受到模糊影響。默認(rèn)值是5像素。 實(shí)例： blur,3、chroma屬性,chroma屬性可以設(shè)置一個(gè)對(duì)象中指定的顏色為透明色，它的表達(dá)式如下： filter：chroma（color=?） 實(shí)例：chroma,4、DropShadow屬性,DropShadow屬性是為了添加對(duì)象的陰影效果的。它實(shí)現(xiàn)的效果看上去就像使原來(lái)的對(duì)象離開(kāi)頁(yè)面，然后在頁(yè)面上顯示出該對(duì)象的投影?？匆豢此谋磉_(dá)式： filter：dropShadow（color=?，offx=?，offy=?， positive=?） 該屬性一共有四個(gè)參數(shù)： color代表投射陰影的顏色。 offx和offy分別X方向和Y方向陰影的偏移量。偏移量必須用整數(shù)值來(lái)設(shè)置。如果設(shè)置為正整數(shù)，代表X軸的右方向和Y軸的向下方向。設(shè)置為負(fù)整數(shù)則相反。 positive參數(shù)有兩個(gè)值：true為任何非透明像素建立可見(jiàn)的投影，false為透明的像素部分建立可見(jiàn)的投影。 實(shí)例： Dr