《css與div任奇》PPT課件.ppt

1、第三章:div+css課程講解,講師：任奇,2012年10月29日星期一,第3章 DIV + CSS布局基礎(chǔ),3.1 CSS的基本語法,CSS（Cascading Style Sheet）的中文譯名是層疊樣式表。CSS用于控制網(wǎng)頁元素的外觀，CSS提供了豐富的樣式表現(xiàn)功能，如字體、段落、顏色、背景、布局等。使用DIV+CSS的布局方式改變了傳統(tǒng)html+table的布局方式。,DIV+CSS的布局方法簡單來說就是使用div標(biāo)簽作為容器，使用CSS技術(shù)來排布div標(biāo)簽的布局方法。,CSS語法中最基本的語法是選擇器的概念和選擇器的聲明。正確使用CSS選擇器能為建立標(biāo)準(zhǔn)的XHTML頁面帶來很多的好處

2、。本章還將講述CSS的繼承和層疊，理解和掌握這些概念是使用CSS樣式表的重要基礎(chǔ)。,1 選擇器,選擇器是CSS語法中最重要最基本的概念。使用選擇器可以指定XHTML文檔中特定標(biāo)簽應(yīng)用CSS樣式。選擇器有許多類型，包括標(biāo)簽選擇器、類選擇器、ID選擇器、全局選擇器、組合選擇器、繼承選擇器和偽類等。,（1）標(biāo)簽選擇器,一個(gè)XHTML文檔中有許多標(biāo)簽，例如p標(biāo)簽，h1標(biāo)簽等。若要使文檔中的所有p標(biāo)簽都使用同一個(gè)CSS樣式，就應(yīng)使用標(biāo)簽選擇器。下圖為標(biāo)簽選擇器的結(jié)構(gòu)。,（2）類選擇器,使用標(biāo)簽選擇器可以為整個(gè)XHTML文檔中的同一個(gè)標(biāo)簽指定相同的CSS樣式。但是在實(shí)際運(yùn)用中，XHTML文檔中的同一個(gè)標(biāo)簽

3、會被反復(fù)使用。若要為相同的標(biāo)簽賦予不同的CSS樣式就應(yīng)使用類選擇器。下圖為類選擇器的結(jié)構(gòu)。,（3）ID選擇器,ID選擇器和類選擇器相似，不同的是，ID選擇器不能復(fù)用。在一個(gè)XHTML文檔中，一個(gè)ID選擇器只能把其CSS樣式指定給一個(gè)標(biāo)簽。下圖為ID選擇器的結(jié)構(gòu)。,（4）全局選擇器,全局選擇器是一個(gè)星號。它能作用于XHTML文檔中的所有元素，即用全局選擇器聲明的CSS 樣式可以應(yīng)用于整個(gè)XHTML文檔的任何標(biāo)簽。下圖為全局選擇器的結(jié)構(gòu)。,（5）組合選擇器,標(biāo)簽選擇器、類選擇器和ID選擇器是可以組合起來使用的。一般的組合方式是標(biāo)簽選擇器和類選擇器組合，標(biāo)簽選擇器和ID選擇器組合。由于這兩種組合方式

4、的原理和效果一樣，所以只介紹標(biāo)簽選擇器和類選擇器的組合。組合選擇器只是一種組合形式，并不算是一種真正的選擇器，但在實(shí)際中經(jīng)常使用。,（6）繼承選擇器,學(xué)習(xí)使用繼承選擇器就必須先了解文檔樹和CSS的繼承。每個(gè)XHTML都可以被看作一個(gè)文檔樹，文檔樹的根部就是html標(biāo)簽，而head和body標(biāo)簽就是其子元素。在head和body里的其他標(biāo)簽就是html標(biāo)簽的孫子元素。整個(gè)XHTML就呈現(xiàn)一種祖先和子孫的樹狀關(guān)系。CSS的繼承是指子孫元素繼承祖先元素的某些屬性。 1文檔樹 2CSS的繼承 3繼承選擇器,（7）偽類,偽類也是選擇器的一種，但是用偽類定義的CSS樣式并不是作用在標(biāo)簽上的，偽類作用在標(biāo)簽

5、的狀態(tài)上。由于很多瀏覽器支持不同類型的偽類，沒有一個(gè)統(tǒng)一的標(biāo)準(zhǔn)，所以很多偽類都不常被用到。但是有一組偽類是主流瀏覽器都支持的，就是超鏈接的偽類，包括:link:、:active、vistited和:hover。,2. 聲明,聲明是構(gòu)成CSS語句的一部分，聲明寫在選擇器之后。CSS的聲明寫在一對大括號中，其中包含CSS的屬性和值。聲明的寫法有明確的規(guī)則，若不遵守聲明的規(guī)則，則可能導(dǎo)致CSS樣式失效。以下為CSS聲明的規(guī)則： 聲明中屬性和值之間用冒號隔開； 聲明中可以包含多個(gè)屬性； 使用多重聲明時(shí)，每個(gè)聲明用分號隔開； 聲明的大括號必須書寫完整。,（1）多重聲明,多重聲明是指在對同一個(gè)選擇器設(shè)置屬

6、性時(shí)，可以把所有屬性寫在同一選擇器中，而不需要分開書寫。 如： h1color:blue;font-size:24px;font-weight:bold;,（2）集體聲明,集體聲明是指若樣式表中有多個(gè)選擇器使用相同的屬性設(shè)置，這些選擇器可以并列寫在一起。設(shè)置好網(wǎng)頁中某個(gè)元素的CSS樣式后，另外一個(gè)元素也要應(yīng)用相同的樣式。 如：.one,#two,pcolor:red;,3. CSS的層疊原理,CSS的全稱為Cascading Style Sheets，中文翻譯為層疊樣式表。學(xué)習(xí)CSS的層疊（cascading）是深入學(xué)習(xí)CSS原理的基礎(chǔ)。當(dāng)出現(xiàn)多個(gè)樣式共同作用于某個(gè)頁面元素時(shí)，就需要決定哪一個(gè)

7、會被應(yīng)用。CSS的層疊就是一個(gè)決定CSS樣式優(yōu)先級的規(guī)則。,（1）CSS樣式來源,在之前的實(shí)例中，每個(gè)XHTML文檔的外觀都是由CSS樣式表控制的。實(shí)際上除了網(wǎng)頁設(shè)計(jì)師制作的CSS樣式表外，還有其他樣式表影響著網(wǎng)頁文檔的外觀。在瀏覽器上運(yùn)行的網(wǎng)頁文檔受以下三個(gè)CSS樣式表控制外觀： 瀏覽器的默認(rèn)樣式 用戶自定義的樣式 網(wǎng)頁作者制作的樣式,（2）選擇器的優(yōu)先級,由于CSS的某些屬性有繼承性，一個(gè)頁面元素往往應(yīng)用了多個(gè)選擇器定義的CSS樣式。CSS的選擇器具有優(yōu)先級，用于決定哪個(gè)選擇器定義的樣式最終被應(yīng)用到頁面元素上。選擇器的優(yōu)先級可以簡單由高到低排列如下：,!important 最高 inlin

8、e style id selector class selector element selector * universal selector,（2）選擇器的優(yōu)先級, p font-size:22px; .name font-size:22px; #idname font-size:30px; 上海理工大學(xué) ,（3）!important語句,CSS2.0中使用重要規(guī)則提升聲明中某個(gè)屬性設(shè)置的優(yōu)先級。重要規(guī)則就是!important語句。在聲明的屬性設(shè)置中使用了!important語句，其優(yōu)先級最高。 如：pfont-size:24px !important; pfont-size:30px;

9、,（4）順序優(yōu)先級,當(dāng)出現(xiàn)多個(gè)相同的選擇器設(shè)置相同的屬性時(shí)，后定義的選擇器優(yōu)先級較高。 如：pfont-size:24px; pfont-size:30px;,通常定義樣式有4種方法： 1）、內(nèi)聯(lián)定義樣式：內(nèi)聯(lián)定義樣式是混合在HTML標(biāo)記里使用的樣式，即使用標(biāo)記的Style屬性定義的適用于該標(biāo)記的樣式，例如： 樣式實(shí)例 就是定義表格的單元格背景為綠色，單元格字體大小為12px，行距為20px。,4. 定義樣式,2）、定義內(nèi)部樣式塊對象：定義內(nèi)部樣式快就是針對頁面中某些公共元素的樣式比較類似，如果使用內(nèi)聯(lián)定義方法逐個(gè)元素地定義比較繁瑣，而且維護(hù)麻煩，此時(shí)就可以在網(wǎng)頁的和標(biāo)記之間插入一個(gè)塊對象來統(tǒng)

10、一定義，頁面運(yùn)行時(shí)會自動引用。例如： body color:#333333;background-mage:url(“image/bg.gif”) ,3）、導(dǎo)入外部樣式表：導(dǎo)入外部樣式表是指在HTML文件頭部的標(biāo)記之間，利用CSS的import聲明引入外部樣式表。例如： h2 color:green 注意：導(dǎo)入外部樣式表必須在樣式表的開始部分，即在其他內(nèi)部樣式表上面。,4）、鏈入外部樣式表：鏈入外部樣式表是指在HTML文件的頭信息標(biāo)記之間，利用標(biāo)記連接到外部樣式表文件。例如： 一個(gè)外部樣式表文件可以應(yīng)用于多個(gè)頁面。當(dāng)你改變這個(gè)樣式表文件時(shí)，所有頁面的樣式都隨之而改變。在制作大量相同樣式頁面的網(wǎng)

11、站時(shí)，非常有用，不僅減少了重復(fù)的工作量，而且有利于以后的修改、編輯。,2、樣式的優(yōu)先級 依照后定義的優(yōu)先原則，所以優(yōu)先級最高的是內(nèi)嵌樣式，內(nèi)部樣式表高于導(dǎo)入外部樣式表，鏈入的外部樣式表和內(nèi)部樣式表之間是最后定義的優(yōu)先級高。,4.實(shí)例：簡單的豎型菜單,本實(shí)例講解如何制作一個(gè)簡單的豎型菜單。本例子中的菜單選項(xiàng)在靜態(tài)時(shí)是褐色，當(dāng)鼠標(biāo)滑過菜單選項(xiàng)時(shí)文字會放大變色，并且顯示灰色底色。本章實(shí)例主要是為了講解如何合理地使用選擇器。,3.2 DIV+CSS布局基礎(chǔ),在對CSS技術(shù)的基礎(chǔ)知識有了一定的掌握后就可以開始學(xué)習(xí)DIV+CSS的布局的方法。DIV+CSS的布局方法簡單來說就是使用div標(biāo)簽作為容器，使用

12、CSS技術(shù)來排布div標(biāo)簽的布局方法。常用的CSS布局方式有浮動、定位等。本節(jié)內(nèi)容包括： 了解DIV+CSS布局的流程 學(xué)習(xí)盒模型以及盒模型的基本元素 學(xué)習(xí)頁面元素的布局方式,1.DIV+CSS布局的流程,使用DIV+CSS的布局方法制作標(biāo)準(zhǔn)的XHTML頁面的一般流程如下：,首先確定網(wǎng)頁的布局結(jié)構(gòu)。 根據(jù)結(jié)構(gòu)，設(shè)定好XHTML文檔中用于排版的div 標(biāo)簽。 使用css樣式排布div標(biāo)簽。 重復(fù)上述步驟細(xì)分div標(biāo)簽內(nèi)的內(nèi)容。,2.了解盒模型,盒模型是DIV+CSS布局的基礎(chǔ)，要實(shí)現(xiàn)DIV+CSS布局必須了解盒模型的原理。在頁面上的每個(gè)元素都能看做一個(gè)容器，這個(gè)容器就是一個(gè)盒子。例如，p標(biāo)簽是一

13、個(gè)能裝文字的容器，它的高度就是所承載文字的高度。使用DIV+CSS布局，div標(biāo)簽就是布局中所用到的容器。大部分人認(rèn)為只有div標(biāo)簽?zāi)茏鳛槿萜鱽戆才挪季?。其?shí)在XHTML頁面中幾乎所用的標(biāo)簽都是容器，都能被當(dāng)作容器來使用。頁面上的每個(gè)容器都占有一定的位置，有一定的大小。頁面上的每個(gè)容器都會影響其他容器的排布，它們相互作用，從而形成一個(gè)頁面的布局。,（1）div標(biāo)簽的盒模型例子,以下以div標(biāo)簽的盒模型為例子，講述基本盒模型的基本概念。 divwidth:200px;height:200px;background:#ccc;padding:10px;border:10px solid red;m

14、argin:10px;,（2）基本盒模型,下圖所示為基本盒模型。在頁面中的所有元素都遵循該模型的設(shè)置方式。,（3）邊距,邊距用于設(shè)置頁面元素與其他元素的距離。CSS的margin屬性用于設(shè)置邊距距離。 1用長度單位設(shè)定margin的值，如：margin:20px; 2用百分比設(shè)定margin的值，如：margin:10%; 3邊距值的縮寫 4單邊距值 5邊距重疊,（4）補(bǔ)白,補(bǔ)白用于增加頁面元素邊框與內(nèi)容之間的空間。CSS的padding屬性用于設(shè)置補(bǔ)白。 1用長度單位設(shè)定padding的值 2用百分比設(shè)定padding的值,（5）邊框,邊框是頁面元素可視范圍的最外圈。邊框包圍的范圍包括頁面元

15、素的補(bǔ)白和內(nèi)容。CSS中提供了border-width、border-color、border-style三個(gè)設(shè)置邊框的屬性： 1邊框樣式 2邊框?qū)挾?3邊框顏色 4邊框縮寫,3. 頁面元素的布局,在了解基本盒模型后，就要開始進(jìn)入頁面元素布局的學(xué)習(xí)。頁面元素布局的核心是定位和浮動的基本原理以及塊級元素與行內(nèi)元素的區(qū)別。掌握了這些內(nèi)容就能對DIV+CSS布局的原理有相當(dāng)清晰的理解。,(1) 塊級元素與行內(nèi)元素,所有的XHTML頁面元素只有兩種，一是塊級元素一是行內(nèi)元素。塊級元素一般都從新行開始，它可以容納行內(nèi)元素和塊級元素。行內(nèi)元素只能容納文本或其他行內(nèi)元素。 使用CSS的display屬性（的

16、block和inline值）能使行內(nèi)元素和塊級元素相互轉(zhuǎn)換。,p background:#ccc;display:inline; 第一行文段 第二行文段 ,(2) CSS布局方式：常規(guī)流,CSS有三種基本的布局方式，分別是常規(guī)流、浮動和定位。所謂常規(guī)流（normal flow）是指頁面元素按照所在XHTML文檔的位置順序排列的布局方式。在沒有添加其他布局方式的情況下，頁面遵循常規(guī)流的布局方式。,(3) CSS布局方式：浮動,使用浮動布局是目前網(wǎng)頁制作中較為常用的方式。應(yīng)用了浮動的元素脫離原來的常規(guī)流模式。浮動的元素可以向頁面的左邊或者右邊移動，直到其邊緣接觸到其父元素的邊框或者另外一個(gè)浮動元素

17、的邊框。 CSS提供float屬性用于設(shè)置元素的浮動，它包含三個(gè)值，分別是left、right和none。設(shè)置浮動為left值，元素向頁面左邊浮動；設(shè)置浮動為right，元素向頁面右邊浮動；設(shè)置浮動為none，元素不浮動。, 兩個(gè)元素的浮動應(yīng)用,在頁面布局中，很多時(shí)候會使用兩個(gè)元素的浮動應(yīng)用。例如，頁面為兩分欄的結(jié)構(gòu)、圖文混排都應(yīng)用了兩個(gè)元素的浮動。, 多個(gè)元素的浮動應(yīng)用,在頁面布局中，多個(gè)元素的浮動常用于相冊排版、列表排版等。本例子有四個(gè)div標(biāo)簽，其中最外側(cè)的div標(biāo)簽是父元素，其余三個(gè)元素是子元素。, 清除浮動,使用浮動后，常產(chǎn)生很多意外的結(jié)果，因?yàn)楦拥脑貢撾x原來的常規(guī)流。浮動元素

18、可能會覆蓋一些非浮動的元素，這時(shí)需要使用CSS的clear屬性來清除浮動。clear屬性有四個(gè)值，分別是none、left、right和both，以下是四個(gè)值的意義。 none：允許兩邊都可以有浮動對象； both：不允許有浮動對象； left：不允許左邊有浮動對象； right：不允許右邊有浮動對象。,（4）CSS布局方式：相對定位,除了使用浮動布局外，常用的布局方式還有定位。CSS提供position屬性用于定位。使用position定位可以定義元素相對其父元素或者其他元素的精確位置。Position屬性共有四個(gè)關(guān)鍵字值，分別是static、absolute、relative和fixed。 其中static為默認(rèn)值，表示無定位，即塊保持在原來的位置上，通常不需要特別的去聲明它，但有時(shí)候遇到繼承的情況，我們不愿意見到元素所繼承的屬性影響本身，從而可以用position:static取消繼承，即還原元素定位的默認(rèn)值。 absolute代表絕對定位，relative代表相對定位，這兩種定位方式是最常用的。首先講述相對定位。, 單個(gè)元素的相對定