第3章 CSS技術(shù).ppt

1、第3章 CSS技術(shù),HTML標(biāo)記的不足之處 代碼繁瑣 格式的一致性差 可維護(hù)性差 網(wǎng)頁現(xiàn)實(shí)效果缺乏動(dòng)態(tài)性與交互性,層疊樣式表CSS （Cascading Style Sheet）,一.CSS的基礎(chǔ)知識(shí),CSS是為了簡化Web頁面的更新工作而誕生的，它的功能非常強(qiáng)大，它將讓網(wǎng)頁變得更加美觀，維護(hù)更加方便。CSS跟HTML一樣，也是一種標(biāo)記語言，甚至很多屬性都來源于HTML，它也需要通過瀏覽器解釋執(zhí)行。任何懂得HTML的人都可以掌握，非常容易。 CSS（Cascading Style Sheet，層疊樣式表）技術(shù)是一種格式化網(wǎng)頁的標(biāo)準(zhǔn)方式，它是HTML功能的擴(kuò)展，使網(wǎng)頁設(shè)計(jì)者能夠以更有效的方式設(shè)計(jì)

2、出更具表現(xiàn)力的網(wǎng)頁效果。,1. 樣式表和HTML的關(guān)系,樣式表(StyleSheets)技術(shù)誕生于1996年，全稱是層疊樣式表(Cascading StyleSheets，簡稱CSS)。那什么是樣式呢？樣式其實(shí)就是格式，對(duì)網(wǎng)頁來說，像文字的大小、顏色以及圖片位置等，都是網(wǎng)頁顯示信息的樣式。那層疊又是什么意思？意思是當(dāng)我們?cè)贖TML文件中引用數(shù)個(gè)定義樣式文件（CSS文件）時(shí)，若數(shù)個(gè)樣式文件間所定義的樣式發(fā)生沖突，將依據(jù)層次處理。 樣式表是HTML的表兄弟。樣式表的產(chǎn)生是由于最初的HTML標(biāo)準(zhǔn)還不盡人意，用HTML制作網(wǎng)頁就像是用畫筆繪制一幅圖畫，只有那些對(duì)網(wǎng)頁制作癡迷而執(zhí)著的人才可能精確地實(shí)現(xiàn)預(yù)

3、定的結(jié)果。正是在這種情況下，樣式表技術(shù)誕生了，樣式表的目的是為了“對(duì)布局、字體、背景和其他圖文效果實(shí)現(xiàn)更加精確的控制”。,HTML 4.0版本已經(jīng)包括了樣式表的內(nèi)容。樣式表正在逐漸改變?cè)O(shè)計(jì)、制作網(wǎng)頁的方法，為網(wǎng)頁創(chuàng)新奠定了基礎(chǔ)。 樣式表的宗旨就是將結(jié)構(gòu)和格式分離。樣式表將定義結(jié)構(gòu)和定義格式的兩部分相互分離，從而使網(wǎng)頁設(shè)計(jì)人員能夠?qū)W(wǎng)頁的布局施加更多的控制。HTML仍可以保持簡單明了的初衷，而樣式表代碼獨(dú)立出來后則從另一角度控制網(wǎng)頁外觀。 利用樣式表，可以將站點(diǎn)上所有的網(wǎng)頁都指向某個(gè)CSS文件，用戶只需要修改CSS文件中的某一行，那么整個(gè)站點(diǎn)都會(huì)隨之發(fā)生改變。這樣，通過樣式表就可以將許多網(wǎng)頁的風(fēng)

4、格格式同時(shí)更新，不用再一頁一頁地更新了。,樣式表的基本結(jié)構(gòu)是怎樣的？下面通過一個(gè)簡單的樣式表實(shí)例，讓你獲得對(duì)樣式表整體性的感性認(rèn)識(shí)。 首先建立一個(gè)簡單的HTML文件。,2. 樣式表的基本結(jié)構(gòu), 簡單的樣式表 樣式表 這是一個(gè)簡單的樣式表 ,現(xiàn)在，給這個(gè)HTML文件加一些樣式表。只需在標(biāo)簽之前插入以下代碼： 這樣就已經(jīng)制作出了使用樣式表的網(wǎng)頁。從瀏覽器中打開網(wǎng)頁（當(dāng)然首先要保證瀏覽器支持樣式表），網(wǎng)頁顯示效果如下圖所示。,簡單樣式表效果,由這個(gè)簡單的樣式表實(shí)例，可以看出： 一個(gè)樣式表由許多樣式規(guī)則組成的，用以告訴瀏覽器怎樣去顯示一個(gè)網(wǎng)頁文檔。 樣式表的核心是規(guī)則，樣式表的規(guī)則如下： 選擇符屬性1

5、:值1;屬性2:值2 如，h1color:green 這個(gè)規(guī)則就是告訴瀏覽器所有標(biāo)簽和之間的文字以綠色顯示。 其中h1就是選擇符，它是一個(gè)附帶樣式功能的HTML標(biāo)簽?；ɡㄌ?hào)中所包含的就是屬性，它用于定義實(shí)際的樣式，每個(gè)屬性包括兩部分：屬性名（如color）和屬性值（如green）。,我們可以使用四種方法將樣式表加入到網(wǎng)頁中，每種方法都有其不同的優(yōu)點(diǎn)： (1)將樣式表加入到HTML文件行中 (2)將樣式表嵌入到HTML文件的文檔頭中 (3)將一個(gè)外部樣式表鏈接到HTML文件上 (4)將一個(gè)外部樣式表輸入到HTML文件中 以上四種方法，可分成內(nèi)部樣式表（前兩者）及外部樣式表（后兩者）兩類。,3.如

6、何在網(wǎng)頁中加入css,(1) 在行內(nèi)直接加入樣式,可以直接在HTML代碼行中加入樣式規(guī)則，這種方法適用于指定網(wǎng)頁內(nèi)的某一小段文字的顯示風(fēng)格。不過，利用這種方法定義樣式時(shí)，效果只可以控制該標(biāo)簽，其語法如下： ,(2) 把樣式表嵌入到文檔頭,在標(biāo)簽中，用設(shè)置style屬性的方法，一次只能控制一個(gè)標(biāo)簽的樣式，實(shí)在讓人看不出CSS對(duì)網(wǎng)頁設(shè)計(jì)有什么特別的效果。在這一節(jié)，我們將講述在文檔頭嵌入樣式表規(guī)則的方法，瀏覽器在整個(gè)HTML網(wǎng)頁中都執(zhí)行該規(guī)則。如果想對(duì)網(wǎng)頁一次性加入樣式表，就可采用該方法。 這種方法就是將所有的樣式表信息都列于HTML文檔的頭部，基本語法如：, . ,說明： 標(biāo)簽是用來說明所要定義的

7、樣式。type屬性是指定標(biāo)簽以CSS的語法定義。 樣式表基本格式中的type=text/css用于說明這是一段CSS規(guī)則代碼。 為了防止不支持CSS的瀏覽器將標(biāo)簽間的CSS規(guī)則當(dāng)成普通字符串，而顯示在網(wǎng)頁上，應(yīng)將CSS的規(guī)則代碼插入標(biāo)簽之間。 選擇符1.選擇符n：選擇符就是樣式的名稱，在這里選擇符可以使用HTML標(biāo)簽的名稱，所有HTML標(biāo)簽都可以作為CSS選擇符。 樣式屬性：定義樣式的屬性名稱,前面，我們介紹了在文檔頭嵌入樣式表規(guī)則的方法。這種方式定義出的樣式，將只限于在該HTML文件中，效益并不大。如果想要達(dá)到集中管理網(wǎng)站網(wǎng)頁樣式的目標(biāo)時(shí)，就必須將樣式定義在獨(dú)立的CSS文件中，并將該文件鏈接

8、或輸入到要運(yùn)用樣式的HTML文件。 這種方法就是將多個(gè)HTML文件都鏈接到一個(gè)樣式表文件。這個(gè)外部的樣式表將設(shè)定所有網(wǎng)頁的規(guī)則。如果改變樣式表文件中的某一個(gè)細(xì)節(jié)，所有網(wǎng)頁都會(huì)隨之改變。如果維護(hù)的站點(diǎn)很大，則這種方式絕對(duì)會(huì)有其用武之地。 它的使用方法是：創(chuàng)建一個(gè)普通的網(wǎng)頁，但不使用規(guī)則，而是在HTML文檔頭部使用標(biāo)簽。,(3) 鏈接到樣式表,基本語法如下： . ,說明： *.css為預(yù)先編寫好的樣式表文件。 外部樣式表文件中不能含有任何像或這樣的HTML標(biāo)簽。樣式表僅僅由樣式表規(guī)則或聲明組成。 在href屬性中可以使用絕對(duì)URL或者相對(duì)URL。 外部樣式表文件中，無須使用注釋標(biāo)簽。 如同發(fā)布HT

9、ML文件那樣，將這個(gè)CSS文件發(fā)布到服務(wù)器中。在網(wǎng)頁被打開時(shí)，瀏覽器將依照鏈接標(biāo)簽將含有鏈接外部樣式表文件的HTML網(wǎng)頁按照樣式表規(guī)則顯示。,17,單一的樣式可以通過多個(gè)樣式表給出，例如： 在這個(gè)例子中，3個(gè)樣式表組合成一個(gè)contemporary樣式，要將多個(gè)樣式表組合成一個(gè)單一樣式，必須在每個(gè)樣式表中使用相同的title。 當(dāng)樣式被應(yīng)用到很多的網(wǎng)頁時(shí)，采用鏈接到外部樣式表的方式是理想的。網(wǎng)頁制作者使用外部樣式表可以僅僅通過改變一個(gè)文件而改變整個(gè)網(wǎng)站的外觀；同樣，大多數(shù)瀏覽器會(huì)保存外部樣式表文件到緩沖區(qū)，從而提高了顯示網(wǎng)頁時(shí)的速度。,18,輸入樣式表的方法同鏈接到外部樣式表文件類似。其語法如

10、下： 說明： import語句后的“；”號(hào)是必須的。 要輸入的樣式表文件的擴(kuò)展名為.css。,(4) 輸入樣式表,19,我們介紹了四種樣式表的使用方法，這四種方法在使用上各有其特色，但當(dāng)這四種方法同時(shí)出現(xiàn)時(shí)，瀏覽器會(huì)以哪種方法為優(yōu)先使用呢？答案是在行內(nèi)直接加入樣式順序?yàn)樽罡摺Ｖ劣谄渌N的順序則是一樣的，如果其他三種方法同時(shí)出現(xiàn)，且各方法定義的樣式又都不同時(shí)，瀏覽會(huì)選擇較后定義的樣式來顯示。,20,(1) class類選擇符 class類選擇符用于指定標(biāo)簽屬于何種樣式類。 class類選擇符的使用語法如下:,4. class與id類選擇符,class、id類選擇符能給網(wǎng)頁制作者帶來極大的便利。

11、,21, 或者 ,22,下面是語法各部分的說明： *.a1.*.an：為定義的類選擇符名稱，通常在定義樣式時(shí)指定給樣式的名稱。其適用范圍是整個(gè)HTML文件中所有由class類選擇符所引用的設(shè)置。*符號(hào)也可以用HTML內(nèi)的標(biāo)簽替代（即標(biāo)簽1.標(biāo)簽n），此外*符號(hào)，在設(shè)置可以省略。 標(biāo)簽1.a1.標(biāo)簽n.an：為HTML的標(biāo)簽名稱，即前面提過的*符號(hào)，也可以用HTML內(nèi)的標(biāo)簽替代。不同點(diǎn)在于，若在定義class類選擇符前加上HTML的標(biāo)簽時(shí)，其適用范圍將只限于該標(biāo)簽所包含的內(nèi)容。,23,例如，在樣式表中可以定義這樣的類，代碼如下： .ppcolor:lime; font-family:黑體 p.p

12、tcolor:blue; font-family:仿宋 這些類可以使用class屬性在HTML中引用： 這是我們定義的PP類 這是我們定義的PT類 在這個(gè)例子中，pp類可以用于任何HTML標(biāo)簽，因?yàn)樗跇邮奖碇袥]有與特定的HTML標(biāo)簽關(guān)聯(lián)。而這個(gè)例子中pt類只能用于標(biāo)簽。 對(duì)于HTML文檔中在結(jié)構(gòu)上相同的部分，類是應(yīng)用樣式的有效辦法。,24,(2). id類選擇符 id類選擇符與class兩者最大的差別在于定義樣式名稱前的符號(hào),用class定義時(shí)為“*.樣式名稱”；若用id定義時(shí)為“#樣式名稱”。 id與class雖然在標(biāo)簽內(nèi)的定義寫法不太一樣，但基本上其顯示在網(wǎng)頁上的效果是一樣的。 id類選

13、擇符的使用語法如下: ,25,或者 下面是語法各部分的說明： (1) #a1.#an：為定義的類選擇符名稱，通常在定義樣式時(shí)指定給樣式的名稱。其適用范圍是整個(gè)HTML文件中所有由class類選擇符所引用的設(shè)置。 (2) 標(biāo)簽1.a1.標(biāo)簽n.an：為HTML的標(biāo)簽名稱，不同點(diǎn)在于，若在id選擇符前加上HTML的標(biāo)簽時(shí)，其適用范圍將只限于該標(biāo)簽所包含的內(nèi)容。,26,5. Div標(biāo)簽和Span標(biāo)簽,標(biāo)簽可用來定義網(wǎng)頁上的一個(gè)特定區(qū)域，在該區(qū)域范圍內(nèi)可包含文字、圖形、表格、窗體，甚至其他div等。在標(biāo)簽內(nèi)的所有內(nèi)容，都將調(diào)用此標(biāo)簽所定義出的樣式，且區(qū)域與區(qū)域間彼此是獨(dú)立的。 當(dāng)編寫HTML文件，要定

14、義區(qū)域間使用不同樣式時(shí)，就可以使用標(biāo)簽達(dá)到這個(gè)效果。 標(biāo)簽應(yīng)用于HTML文件，其語法如下： . 或者 . 在使用標(biāo)記時(shí)，可以使用width與height屬性設(shè)置區(qū)域的大小。,27,span標(biāo)簽,標(biāo)簽主要用來定義網(wǎng)頁上的區(qū)域，通常用于比較大范圍的設(shè)置，而標(biāo)簽也可以用在區(qū)段的定義，不過一般都是用在網(wǎng)頁中某一小段文件段落。其語法如下： . 或者 . span標(biāo)簽被加入到HTML中的主要目的是用于樣式表，所以當(dāng)樣式表失效時(shí)它就沒有任何作用。span標(biāo)簽可以使用clsss和id類選擇符。 與的差異： 在區(qū)域內(nèi)的對(duì)象與區(qū)域外的上下文會(huì)自動(dòng)換行；而區(qū)域內(nèi)的對(duì)象與區(qū)域外的上下文不會(huì)自動(dòng)換行。 與標(biāo)簽可同時(shí)使用

15、，但建議標(biāo)簽可包含，但最好不要包含標(biāo)簽，否則會(huì)造成標(biāo)簽的區(qū)域不完整，而形成斷行的現(xiàn)象。,28,6. CSS的幾個(gè)特性,1可以歸類CSS的規(guī)則 可以多個(gè)HTML標(biāo)簽采用同一樣式，例： h1,pfont-family:黑體 這項(xiàng)規(guī)則設(shè)定所有被和標(biāo)簽包含的網(wǎng)頁內(nèi)容將用黑體顯示。 2樣式表的規(guī)則具有繼承性 樣式表的規(guī)則可從母體延續(xù)到子體，例： bcolor:blue 這項(xiàng)規(guī)則告訴瀏覽器將所有之內(nèi)的文字用藍(lán)色顯示。但是在下列情況下，瀏覽器該如何處理呢？ 這是一個(gè)樣式表實(shí)例 對(duì)于標(biāo)簽并沒有設(shè)定樣式，但因?yàn)槲挥谥?，所以它將繼承母體設(shè)定的樣式，也以藍(lán)色顯示。,29,3情景選擇 如果想讓所有斜體顯示的文字（即

16、被和標(biāo)識(shí)的文字）都以紅色顯示，但條件是只有當(dāng)這些斜體顯示的文字出現(xiàn)在通常的段落文字（即被標(biāo)識(shí)的文字）內(nèi)時(shí)。這就需要使用“情景選擇”來實(shí)現(xiàn)。通過“情景選擇”可設(shè)定一個(gè)可以執(zhí)行選擇說明的情景。 帶情景選擇的樣式表的格式如下： 情景標(biāo)簽 標(biāo)識(shí)符屬性:屬性值 其中的HTML代碼： 這是一個(gè)樣式表實(shí)例 這是一個(gè)樣式表實(shí)例 表示只將所有之內(nèi)斜體顯示的文字以紅色且大字體顯示。所以，之外斜體顯示的文字不會(huì)以紅色顯示，而之內(nèi)的文字則以指定字體顯示。,二. CSS的屬性,1 設(shè)置字體樣式 2 控制圖文布局 3 顏色及背景 4 美化網(wǎng)頁與超鏈接的設(shè)置 5 CSS定位,1. 設(shè)置字體樣式,(1) 字體屬性font-f

17、amily,在網(wǎng)頁編寫的過程中，若沒有對(duì)字體做任何設(shè)置時(shí)，瀏覽器將以默認(rèn)值的方式顯示。除了可利用HTML的標(biāo)簽設(shè)置字體外，還可以利用CSS的font-family屬性，設(shè)置要使用的字體。 語法： font-family:,., 說明： 瀏覽器將在字體列表中尋找字體1，如果訪問者的計(jì)算機(jī)中安裝了這種字體，就使用它；如果沒有安裝，則移向字體2，如果這種字體也沒有安裝，則移向第3種字體，以此類推。若瀏覽器完全找不到指定的字體時(shí)，則使用默認(rèn)字體。因此，應(yīng)該將一種常見的字體列在字體列表的最后。 在對(duì)英文字體進(jìn)行設(shè)置時(shí)，如果兩個(gè)英文單詞之間有空格時(shí)必須使用單引號(hào)（）或雙引號(hào)（）。,在HTML里,可以使用標(biāo)

18、簽,將網(wǎng)頁文字設(shè)置為斜體。而在CSS里，則可利用font-style屬性，達(dá)到字體風(fēng)格的變化。 語法： font-style:normal|italic|oblique font-style參數(shù)值說明,(2) 字體風(fēng)格font-style,(3) 字體變形font-variant,語法： font-variant:normal|small-caps font-variant參數(shù)值說明,(4) 字體加粗font-weight,在HTML里，可以利用標(biāo)簽，將文字設(shè)置為粗體。在CSS內(nèi)，則可利用font-weight屬性，設(shè)置字體的粗細(xì)。 語法： font- weight:normal|bold|b

19、older|lighter|100|200|300|400|500|600|70|800|900 font-weight參數(shù)值說明,利用HTML的標(biāo)簽只能設(shè)定7種字號(hào)，而在CSS中可以使用font-size屬性對(duì)文字的字號(hào)進(jìn)行隨心所欲的設(shè)置。 語法： font-size:| 說明： 絕對(duì)尺寸可以使用的單位有： ex（x-height）、in（英寸）、cm（厘米）、mm（毫米）、pt（點(diǎn)）和px（像素）。,(5) 字號(hào)的控制font-size,37, 如果不喜歡使用絕對(duì)尺寸，還可以用關(guān)鍵字來說明文字大小，共有7種關(guān)鍵字，相對(duì)應(yīng)于HTML標(biāo)簽中所用的數(shù)字參數(shù)。這7種關(guān)鍵字如下： xx-small

20、x-small small medium large x-large xx-large 利用這些參數(shù)，瀏覽器可以自由決定每一種關(guān)鍵字所適合的尺寸（在不同瀏覽器中它的大小是有區(qū)別的）。,38, 相對(duì)尺寸 相對(duì)尺寸只有兩種larger和smaller。 smaller參數(shù)告訴瀏覽器將當(dāng)前文字在關(guān)鍵字規(guī)格基礎(chǔ)上“縮小一級(jí)”。而larger參數(shù)的作用與smaller類似。 比例尺寸 還可以使用比例參數(shù)來設(shè)定文字大小，例如： pfont-size:15pt bfont-size:300% 這些規(guī)則的含義為：使所有包含在中的被標(biāo)識(shí)的文字的尺寸為尺寸設(shè)定值的3倍，即45pt。比例參數(shù)常用于從母體對(duì)象繼承參數(shù)

21、值。,39,注意： 1在CSS中設(shè)置文字尺寸的單位很多，但有些瀏覽器對(duì)有些尺寸單位是不支持的，在使用時(shí)一定要注意。 2px單位所有的操作平臺(tái)都支持它，但因?yàn)樵L問者的屏幕分辨率的不同，網(wǎng)頁的顯示將可能不穩(wěn)定，字體可能大也可能小。 3pt是確定文字尺寸最好的單位，因?yàn)樗谒械臑g覽器和操作平臺(tái)上都適用。 4關(guān)鍵字這種尺寸單位在不同瀏覽器中它的大小是有區(qū)別的。 5低版本的瀏覽器不支持相對(duì)尺寸這種單位。,40,在CSS中通過text-transform屬性可以使網(wǎng)頁設(shè)計(jì)者能很容易的控制字母的大小寫。 語法： text-transform:uppercase|lowercase|capitalize|n

22、one text-transform參數(shù)值說明,(6) 文字的更改text-transform,41,語法： text-decoration:underline|overline|line-throungh|blink|none text-decoration參數(shù)值說明,(7) 文字修飾text-decoration,42,其中none參數(shù)也非常有用，它可以使鏈接的文字不以下劃線的形式顯示。 如，取消超級(jí)鏈接時(shí)帶下劃線的形式。 A:linktext-decoration:none A:activetext-decoration:none A:visitedtext-decoration:non

23、e,43,font屬性，可以同時(shí)設(shè)置許多跟文字有關(guān)的屬性。例如：字體、字體效果、字號(hào)、字體粗細(xì)等。 語法： font:font-family|font-style|font-variant|font-weight|font-size 說明： 字體屬性主要用作不同字體屬性的略寫。 可以同時(shí)設(shè)置多種屬性。 屬性與屬性之間必須利用（;）分號(hào)隔開。 實(shí)例： pfont:italic bold 12pt/14pt 隸書,宋體 指定該段為bold（粗體）和italic（斜體）隸書或宋體，12點(diǎn)大小，行高為14點(diǎn)。,(8) 字體屬性font,44,2. 控制圖文布局,樣式表中對(duì)圖文和布局的控制是指字符、單詞

24、和行與行之間是如何定位的，包括如何設(shè)定字與字之間、字母之間的距離，以及行距（垂直間距）、文字的對(duì)齊方式、邊距、邊框及浮動(dòng)對(duì)象等。,45,(1) 設(shè)置字間距及字母間距,語法： word-spacing:normal|長度單位 letter-spacing: normal|長度單位 說明： Word-spacing用于設(shè)置英文單詞之間的距離；letter-spacing用于設(shè)置英文字母之間的距離。 兩者可以使用前面講到的任何一種長度單位。 如果使用normal參數(shù)，將按照瀏覽器默認(rèn)設(shè)置顯示。,46,(2) 設(shè)置行距l(xiāng)ine-height,語法： line-height:normal|數(shù)字|長度單位

25、|比例 說明： 所用的參數(shù)是相鄰兩行的基準(zhǔn)線（基準(zhǔn)線就是英文小寫字母如x，a的下階線，但不包括諸如y，g等字母超過下階線的部分）之間的垂直距離。 所設(shè)定的參數(shù)取值將完全代替瀏覽器的默認(rèn)值。,47,實(shí)例： 1) 用數(shù)字設(shè)定行距 bfont-size=12pt;line-height:2 表示將利用字號(hào)來確定行距，將字號(hào)乘以設(shè)定的參數(shù)值，即12X2=24，所以在本例中行高將是24點(diǎn)。 2) 用長度單位設(shè)定行距 bline-height:11pt 3) 用比例設(shè)定行距 bfont-size:10pt;line-height:140% 表示行距是文字的基準(zhǔn)大小10pt的140%，即14pt。,48,語

26、法： text-align:left|right|center|justify vertical-align:top|bottom|text-top|text- bottom|baseline|middle|sub|super,(3) 文字對(duì)齊,49,說明： text-align屬性用于文字的水平對(duì)齊，但這項(xiàng)屬性只用于整塊的內(nèi)容，如、到和等。 text-align參數(shù)值說明,50, vertical-align屬性用于控制文字或其他網(wǎng)頁對(duì)象相對(duì)于母體對(duì)象的垂直位置。 vertical-align參數(shù)值說明,51,(4) 首行縮進(jìn)屬性text-indent,首行縮進(jìn)屬性通常被用來指定于一個(gè)文字段

27、落，第一行文字縮進(jìn)的距離，而瀏覽器的默認(rèn)值不縮進(jìn)。 語法： text-indent:數(shù)字|百分比 說明： 在IE瀏覽器中使用比例參數(shù)時(shí)，是相對(duì)于整個(gè)瀏覽器窗口的寬度，而不是相對(duì)于段落的寬度。,3. 顏色及背景,53,(1) 顏色屬性color,語法： color： 實(shí)例： h1color:blue h2color:#000080,54,在CSS里，可利用backgroud-color屬性，達(dá)到背景顏色的變化。 語法： background-color：|transparent（透明） 說明：初始值為transparent（透明）。 實(shí)例： bodybackground-color:white

28、h1background-color:#000080,(2) 背景顏色屬性,55,(3) 背景圖像屬性,在CSS里，可利用background-image屬性，將網(wǎng)頁背景以圖片的方式顯示。 語法： background-image：|none（無）,56,(4) 背景圖片重復(fù)屬性,背景圖片重復(fù)屬性決定一個(gè)指定的背景圖片如何被重復(fù)。 語法： background-repeat：repeat|repeat-x|repeat-y|no-repeat,57,background-repeat屬性參數(shù)值說明,58,(5) 固定背景圖片屬性,固定背景圖片屬性決定指定的背景圖片是跟隨內(nèi)容滾動(dòng)，還是保持固定。

29、 語法： background-attachment：scroll|fixed 說明： scroll表示滾動(dòng)，fixed表示固定。初始值為scroll。,59,(6) 背景圖片的位置屬性,通過背景圖片的位置屬性background-position可以改變背景圖片的最初位置。 語法： background-position：|,60,說明： 以百分比方法設(shè)置background-position屬性的語法如下： background-position：x% y% 其中x%代表設(shè)置圖片的水平位置；y%代表圖片的垂直位置。初始值為0% 0%。 實(shí)例： Pbackground-position:70

30、% 50%;repeat-y;url(.picsky.jpg) 表示背景圖片的水平位置為70%，垂直位置為50%。,61, 以長度單位設(shè)置background-position屬性的語法如下： background-position：x y 使用長度單位可以對(duì)背景圖片的位置作出更精確的控制，可以設(shè)定水平和垂直定位起點(diǎn)。 實(shí)例： background-position:70px 10px;url(.picsky.jpg) 表示從左起70像素、垂直10像素的位置開始顯示圖像。 以關(guān)鍵字設(shè)置background-position屬性的語法如下： background-position： top|ce

31、nter|bottom|left|center|right （注：|表示或的意思，|表示二者同時(shí)使用，表示可搭配使用） 實(shí)例： background-position:right top;url(.picsky.jpg) 表示背景圖片的水平位置為100%，垂直位置為0%。,62,background-position屬性關(guān)鍵字方法的參數(shù)值說明,63,關(guān)鍵字方法與百分比方法對(duì)比表,64,(7) 背景,語法：background： 允許值：| 初始值：未定義 說明：背景屬性是一個(gè)更明確的背景關(guān)系屬性的略寫。以下是一些背景的聲明： bodybackground:white url(tree.jpg)

32、 h1background:#7fffd4 pbackground:url(tree.jpg)#f0f8ff fixed tablebackground:#0c0 url(tree.jpg) no-repeat bottom right,4. 美化網(wǎng)頁與超鏈接的設(shè)置,66,(1) 網(wǎng)頁鏈接屬性anchor,在CSS里，可以通過網(wǎng)頁鏈接屬性anchor來設(shè)置網(wǎng)頁鏈接文字的效果。,網(wǎng)頁鏈接屬性anchor語法說明,67,(2) 設(shè)置滾動(dòng)條屬性scrollbar,在CSS里，可以通過滾動(dòng)條屬性scrollbar來美化滾動(dòng)條。美化滾動(dòng)條的參數(shù)見下表所示，并搭配下圖說明。,流動(dòng)條,68,滾動(dòng)條scrol

33、lbar的參數(shù)說明,69,(3) 光標(biāo)屬性的設(shè)置cursor,在CSS中，可以通過光標(biāo)屬性cursor來設(shè)置光標(biāo)的圖形，cursor屬性共提供了16種屬性值，如下表所示。,70,71,(4) 邊框的設(shè)置,在CSS中，可以通過margin屬性、border屬性和padding屬性控制段落、圖片和表格等對(duì)象的樣式。如：邊框的寬度、顏色、樣式以及對(duì)象與邊框之間的空白距離。 上述三種屬性通常用于文件段落、圖片、表格與網(wǎng)頁邊界的空白距離，或者是設(shè)置表格內(nèi)的邊框及空白樣式等，如下圖所示。,72,邊框?qū)傩哉f明,73,其中： margin屬性：控制對(duì)象邊界與文件其他內(nèi)容的空白距離。 border屬性：控制表格

34、四邊邊框的寬度、顏色及樣式。 padding屬性：控制表格中的內(nèi)容或圖片與對(duì)象邊界的空白距離。 1)邊界的設(shè)置margin 通過margin屬性可以設(shè)定對(duì)象與四周文字之間的距離。 其語法如下： margin-(top、right、bootom、left)：長度|百分比|auto 說明： margin屬性有margin-top（頂部空白區(qū)域）、margin-bottom（底部空白區(qū)域）、margin-left（左邊空白區(qū)域）和margin-right（右邊空白區(qū)域）四個(gè)邊界屬性。通過設(shè)置這4項(xiàng)屬性，可以控制一個(gè)對(duì)象四周空白區(qū)域的大小。 可以使用任何長度單位。 如將邊距設(shè)為負(fù)值，就可以將兩個(gè)對(duì)象重

35、疊在一起。,74,利用margin屬性設(shè)置邊界值的方法有： 設(shè)置一個(gè)邊界值：若margin屬性只設(shè)置一個(gè)邊界值時(shí)，則上、右、下和左四個(gè)邊界都將調(diào)用此值。 實(shí)例： margin:2cm 設(shè)置對(duì)應(yīng)邊值：在margin屬性中設(shè)置對(duì)應(yīng)邊值，是指上邊界與下邊界、左邊界與右邊界為相對(duì)應(yīng)的邊界，所以若設(shè)置對(duì)應(yīng)邊其中一邊的值時(shí)，另一邊將調(diào)用此值。 實(shí)例： margin：2cm 4cm 上邊界與下邊界的值為2cm，左邊界與右邊界的值為4cm。 設(shè)置四個(gè)邊界值：利用margin屬性，順序輸入上、右、下、左邊界的值，就可以完成四個(gè)邊界的設(shè)置了。 實(shí)例： margin:20pt 30% 30px 2cm 上邊界為20

36、pt，右邊界為30%，下邊界為30px，左邊界為2cm。,75,2)設(shè)置邊框的寬度border-width 在CSS里，可以利用border-width屬性來控制邊框的寬度。 語法1： border-width:thin|medium|thick|長度 說明：border-width的參數(shù)值thin代表細(xì)、medium代表中等、thick代表粗。 語法2： border-top-width:長度 border-bottom-width:長度 border-left-width:長度 border-right-width:長度,76,使用border-width屬性設(shè)置邊框的寬度有4種設(shè)置方法：

37、 設(shè)置一個(gè)值：四條邊框?qū)挾染褂猛粋€(gè)設(shè)置值。 設(shè)置兩個(gè)值：上邊框與下邊框?qū)挾日{(diào)用第一個(gè)值，右邊框與左邊框?qū)挾日{(diào)用第二個(gè)值。 設(shè)置三個(gè)值：上邊框?qū)挾日{(diào)用第一個(gè)值，右邊框與左邊框?qū)挾日{(diào)用第二個(gè)值，下邊框?qū)挾日{(diào)用第三個(gè)值。 設(shè)置四個(gè)值：四條邊框?qū)挾鹊恼{(diào)用順序，順序?yàn)樯?、右、下、左?77,3)設(shè)置邊框的顏色border-color border-color屬性用于設(shè)置邊框的顏色，它的使用方法與border-width相同。 語法1： border-color:#rrggbb border-color:#rrggbb #rrggbb #rrggbb #rrggbb 說明：其中第1種顏色為頂部邊框顏色

38、，其中第2種顏色為右邊邊框顏色，其中第3種顏色為底部邊框顏色，其中第4種顏色為左邊邊框顏色。 語法2： border-top-color:#rrggbb border-bottom-color:#rrggbb border-left-color:#rrggbb border-right-color:#rrggbb,78,4)設(shè)置邊框的樣式border-style border-style屬性用于設(shè)置邊框的樣式。 其語法設(shè)置如下： border- style:none|solid|double|dotted|dashed|groove|ridge|in set|outset,79,border-

39、style屬性設(shè)置值,80,5)設(shè)置邊框?qū)傩詁order 在CSS里，通過border屬性可以快速設(shè)置邊框的寬度、邊框顏色及邊框樣式。其語法如下： border:| 實(shí)例： border:1pt double #ff0000 設(shè)置邊框的寬度為1pt、樣式為雙直線、顏色為紅色。6)內(nèi)邊界的設(shè)置padding padding屬性主要是控制元素的內(nèi)容與元素外框內(nèi)緣的距離。其語法如下： padding-（top、right、bottom、left）:長度|百分比 說明：其用法與border-color相同。,5. CSS定位,82,(1) CSS定位屬性,在網(wǎng)頁上，利用HTML基本標(biāo)簽進(jìn)行文字和圖像的

40、定位是一件很困難的事情。即使使用表格標(biāo)簽，也不能保證定位的精確，因?yàn)闉g覽器和操作平臺(tái)的不同會(huì)使顯示的結(jié)果發(fā)生變化。 而利用樣式表的position屬性，就可以精確地設(shè)定對(duì)象的位置，還能將各對(duì)象進(jìn)行疊放處理。 語法： position:;left:;top:;width:;height:;visibility:;z-index:,83,說明： 1) position屬性用于對(duì)象的定位，它的參數(shù)值有absolute和relative兩種。 其中absolute表示絕對(duì)定位，絕對(duì)定位能精確設(shè)定對(duì)象在網(wǎng)頁中的獨(dú)立位置，而不考慮網(wǎng)頁中其他對(duì)象的定位設(shè)置，在絕對(duì)定位中對(duì)象的位置是相對(duì)于瀏覽器窗口而言的。

41、而relative表示相對(duì)定位。它所定位的對(duì)象的位置是相對(duì)于不使用定位設(shè)置時(shí)該對(duì)象在文檔中所分配的位置。即，相對(duì)定位的關(guān)鍵在于被定位的對(duì)象的位置是相對(duì)于它通常應(yīng)在的位置而言的。如果停止使用相對(duì)定位，則文字的顯示位置將恢復(fù)正常。 2) left屬性用于設(shè)定對(duì)象距瀏覽器窗口左邊的距離；top屬性用于設(shè)定對(duì)象距離瀏覽器窗口頂部的距離。,84,3) width屬性用于設(shè)定對(duì)象的寬度。因?yàn)槎ㄎ缓蟮膶?duì)象在網(wǎng)頁上顯示時(shí)仍然會(huì)從左到右一直顯示，利用寬度屬性就可以設(shè)定對(duì)字符向右顯示的限制。寬度屬性只在絕對(duì)定位時(shí)使用。 4) height屬性用于設(shè)定對(duì)象的高度。高度和寬度的設(shè)置類似，只不過是在垂直方向上進(jìn)行的。

42、5) visibility屬性用于設(shè)定對(duì)象是否顯示。這條屬性對(duì)于被定位和未定位的對(duì)象都適用。 該屬性的參數(shù)有三種： isible:使對(duì)象可以被看見 hidden:使對(duì)象被隱藏 inherit：對(duì)象被繼承母體對(duì)象的可視性設(shè)置 6) z-index屬性用于在網(wǎng)頁上重疊文字和圖像。當(dāng)定位多個(gè)對(duì)象并將其重疊時(shí)，可以使用z-index來設(shè)定哪一個(gè)對(duì)象應(yīng)出現(xiàn)在最上層。z-index參數(shù)值使用整數(shù)，用于絕對(duì)定位或相對(duì)定位了的對(duì)象，也可以給圖像設(shè)定屬性。,85,divposition:absolute;left:200px;top:40px;width:150px 瀏覽器執(zhí)行到這項(xiàng)規(guī)則時(shí)，它將文字塊按照規(guī)則規(guī)

43、定的效果顯示，將段落的最大水平尺寸限制在150像素。 實(shí)例： h4visibility:hidden 控制用H4標(biāo)識(shí)的對(duì)象不可見。 當(dāng)一個(gè)對(duì)象被隱藏后，它仍然1要占據(jù)瀏覽器窗口中的原有空間。所以，如果將文字包圍在一幅被隱藏的圖像周圍，那么，其顯示效果將是文字包圍著一塊空白區(qū)域。 這條屬性在編寫腳本和增加網(wǎng)頁的動(dòng)態(tài)性方面很有用，比如可以使某段落或圖像只在鼠標(biāo)滑過時(shí)才顯示。,86,(2) CSS定位方法,通過CSS的定位屬性，可用來控制任何東西在網(wǎng)頁上或是說在窗口中的位置。 當(dāng)我們使用css定位屬性的時(shí)候，主要把它用在div標(biāo)簽。當(dāng)把文字，圖像或其他的對(duì)象放在div中，它可稱作為“div bloc

44、k”，或“div element”或“css-layer”，或干脆叫“l(fā)ayer”。而中文我們把它稱作“層次”。所以以后看到這些名詞的時(shí)候，就知道它們是指一段在div中的HTML。 使用div的方法跟使用其他標(biāo)簽的方法一樣： this is a div tag ,87,如果單獨(dú)使用div而不加任何CSS定位屬性，它在網(wǎng)頁中的效果和使用是一樣的。 但當(dāng)我們把css定位屬性用到div中去后，就可以嚴(yán)格設(shè)定它的位置。首先我們需要給這個(gè)可以被css定位屬性控制的div一個(gè)id或說是它的名字。比如說我們給下面這個(gè)div的名字是truck。給名字的目的是我們以后可以用JavaScript來控制它，比如說移

45、動(dòng)它或改變它的一些性質(zhì)等。 this is a truck 給層次取什么名字是隨意的，名字可以是任何英文字母和數(shù)字，但第一個(gè)必須是字母有兩種把CSS定位屬性應(yīng)用到div的方法。,88,1行間CSS 行間css是最常用的方法，它的基本語法為： this is a truck 實(shí)例： ,89,2外部樣式標(biāo)記 這種方法與行間CSS的最終結(jié)果是一樣的，它的基本語法為： this is a truck ,90,實(shí)例： . . ,三. CSS濾鏡,1 濾鏡簡介 2 Alpha濾鏡 3 Blur 濾鏡 4 Dropshadow濾鏡 5 Glow濾鏡 6 Gray、Invert和Xray濾鏡 7 FlipH，

46、FlipV濾鏡 8 Wave濾鏡 9 Shadow濾鏡 10 Mask濾鏡 11 Chroma濾鏡 12 轉(zhuǎn)換濾鏡,1. 濾鏡簡介,濾鏡（Filter）是技術(shù)的一種應(yīng)用，它可以用來改變圖形的外觀，以增加圖形的視覺效果。 濾鏡分為視覺濾鏡（Visual Filters）和轉(zhuǎn)換濾鏡（Transition Filters）兩大類。 視覺濾鏡只可以達(dá)到靜態(tài)的特效效果。只需在網(wǎng)頁內(nèi)使用CSS的定義語法，即可將此濾鏡效果加到網(wǎng)頁內(nèi)。 轉(zhuǎn)換濾鏡是用于兩畫面進(jìn)行轉(zhuǎn)換時(shí)所使用的特效，將產(chǎn)生動(dòng)態(tài)效果，除了在網(wǎng)頁中利用CSS的定義語法外，還必須配合Script語言（如：VBScript、JavaScript）以及事

47、件的概念，才能自如地使用轉(zhuǎn)換濾鏡，產(chǎn)生炫麗的效果。 由于濾鏡功能是在IE4.0版才開始提供的功能，所以只能在IE4.0以上的瀏覽器中使用，才能實(shí)現(xiàn)濾鏡的效果。 CSS的濾鏡很多，下面我們就對(duì)常用的一些CSS濾鏡作一些介紹。,2. Alpha濾鏡,Alpha濾鏡可以產(chǎn)生顏色透明及漸變的效果。 Alpha濾鏡的基本語法如下： style=filter:Alpha（opacity=value，style=value）“ Alpha濾鏡的參數(shù)設(shè)置如下表所示。,3. Blur 濾鏡,Blur濾鏡可以產(chǎn)生快速移動(dòng)的動(dòng)態(tài)模糊效果。Blur濾鏡的基本語法如下： style=filter:Blur(add=value,direction=value,strength=value)“ Blur濾鏡的參數(shù)設(shè)置如下表所示。,其中：參數(shù)direction用于設(shè)定動(dòng)態(tài)模糊效果的方向，總單位為36