網(wǎng)頁(yè)設(shè)計(jì)CSS樣式表應(yīng)用.pptVIP

0,第四章 CSS樣式表應(yīng)用,主講：鐘杰卓,1,本章內(nèi)容概述,2,4.1 CSS簡(jiǎn)介,CSS的全稱(chēng)是Cascading Style Sheet，通常稱(chēng)為“層疊樣式表”。是網(wǎng)頁(yè)設(shè)計(jì)不可缺少的工具之一。 CSS是一組樣式，樣式的屬性在HTML元素中一次出現(xiàn)，并顯示在瀏覽器中。樣式可以定義在HTML文檔的標(biāo)記里，也可以放在外部附加文檔中，一個(gè)樣式表文檔可以用于多個(gè)頁(yè)面，甚至是整個(gè)站點(diǎn)，因此具有更好的易用性和擴(kuò)展性。 CSS可以減少開(kāi)發(fā)和維護(hù)HTML文檔所用的時(shí)間。增加了Web站點(diǎn)中文檔間的靈活性。,3,4.2 CSS語(yǔ)法基礎(chǔ),完成了網(wǎng)頁(yè)框架的構(gòu)建，下一步就應(yīng)該使用CSS來(lái)布局和修飾了。使用CSS的方法可以簡(jiǎn)單概括為： 選擇符：表示要定義樣式的對(duì)象，可以是元素本身，也可以是一類(lèi)元素或指定名稱(chēng)的元素。 選擇屬性：制定選擇符所具有的屬性，它是CSS的核心。CSS 2一共定義了150多個(gè)屬性，其中大部分屬性是用于任何選擇符。 定義屬性值：數(shù)值表示（25px）、百分比表式（20%）、范圍表示（top、right）,Selector property:value; property:value;,body color:#333; background-color:#eee;,4,4.2 CSS語(yǔ)法基礎(chǔ),CSS選擇符 類(lèi)型選擇器： 類(lèi)型選擇符就是網(wǎng)頁(yè)元素本身，定義時(shí)直接使用元素名稱(chēng)，如定義段落樣式，可以選擇p元素，即把p作為選擇符。在HTML和XHTML中，所有的元素都可以作為類(lèi)型選擇符來(lái)進(jìn)行定義： 定義了類(lèi)型選擇符，所定義的屬性會(huì)影響引用這個(gè)樣式的所有該元素的顯示效果。使用恰當(dāng)會(huì)非常省力，但如果考慮不周，貿(mào)然定義會(huì)給網(wǎng)頁(yè)設(shè)計(jì)增加無(wú)窮煩惱。,html /*/ color : #f60 ;font-size:14px ; Body /*/ Margin-left:0px; Margin-top:0px; Td /*/ Font-family:”宋體”,”黑體”;,5,4.2 CSS語(yǔ)法基礎(chǔ),id選擇符： CSS中的id是作為網(wǎng)頁(yè)中元素的“身份證”來(lái)使用的。因此它是唯一的，不同元素的id值不能重復(fù)。使用id選擇器能夠擴(kuò)展HTML和XHTML元素的顯示效果。為每個(gè)元素的具體對(duì)象定義不同的樣式，方便了用戶更加精細(xì)地控制頁(yè)面。 當(dāng)使用id選擇符時(shí)，應(yīng)先為元素定義一個(gè)id屬性： 在樣式表中，需要使用 # 號(hào)進(jìn)行標(biāo)識(shí)：,#lefttable color : #f60 ;font-size:14px ; border:1pt #999 solid;,6,4.2 CSS語(yǔ)法基礎(chǔ),class選擇符： class是一個(gè)集合名次，意味著在一個(gè)文檔中可以為不同類(lèi)型的元素定義相同的類(lèi)名。是先把具有相同樣式的元素統(tǒng)一為一類(lèi)。使用class選擇符可以實(shí)現(xiàn)代碼簡(jiǎn)化的目的，節(jié)約了了CSS代碼的編寫(xiě)，增強(qiáng)了代碼的可讀性。 當(dāng)使用class選擇符時(shí)，首先應(yīng)為每個(gè)元素定義class屬性： 在樣式表中，需要使用 . 號(hào)進(jìn)行標(biāo)識(shí)：,.red color : #ff0000;,7,4.2 CSS語(yǔ)法基礎(chǔ),群選擇符： 群選擇符不是一種選擇符的類(lèi)型，而是一種選擇符的使用方法。當(dāng)多個(gè)對(duì)象定義了相同的樣式時(shí)，可以把它們分成一組，以便簡(jiǎn)化代碼讀寫(xiě)，選擇符分組，可以用逗號(hào)把同組內(nèi)不同對(duì)象分割： 派生選擇符： 可以使用派生選擇器給一個(gè)元素里的子元素定義樣式，例如，給li下面的子元素a定義文字大小和顏色的樣式：,.dh1 a font-size:12px; color:#333333; ,p, td, li font-size:12px; ,8,4.2 CSS語(yǔ)法基礎(chǔ),偽類(lèi)： CSS中用四個(gè)偽類(lèi)來(lái)定義鏈接的樣式，分別是：a:link、a:visited、a:hover和a : active,a:link /* 定義超級(jí)鏈接的默認(rèn)樣式 */ font-size:12px; color:#c00; text-decoration:none; a:visited /* 定義訪問(wèn)過(guò)的鏈接樣式 */ font-size:12px; color:#c00; text-decoration:none; a:hover /* 定義鼠標(biāo)經(jīng)過(guò)的鏈接樣式 */ font-size:12px; color:#f30; text-decoration:underline; a:active /* 定義鼠標(biāo)按下的鏈接樣式 */ font-size:12px; color:#c00; text-decoration:none; ,9,4.2 CSS語(yǔ)法基礎(chǔ),在網(wǎng)頁(yè)中添加CSS的方法 CSS樣式可以以多種方式靈活地應(yīng)用到設(shè)計(jì)的頁(yè)面中，選擇方法根據(jù)設(shè)計(jì)的不同要求來(lái)指定。 行內(nèi)樣式表： 指將CSS樣式混合在HTML標(biāo)簽里使用，行內(nèi)樣式由HTML元素的style屬性支持，只需要將CSS代碼用分號(hào)隔開(kāi)，書(shū)寫(xiě)在style=“”之中既可。 此做法是先了CSS對(duì)元素的精確控制，但是沒(méi)有很好地將表現(xiàn)與內(nèi)容分離，所以不推薦這樣的用法。,10,4.2 CSS語(yǔ)法基礎(chǔ),內(nèi)部樣式表： 內(nèi)部樣式表也將CSS樣式編寫(xiě)到頁(yè)面中，不同的是，內(nèi)部樣式可以將樣式統(tǒng)一放置在一個(gè)固定的位置。這種CSS樣式控制的內(nèi)容一般位于HTML文件的頭部，即標(biāo)簽內(nèi)，并以開(kāi)始，以結(jié)束。,11,4.2 CSS語(yǔ)法基礎(chǔ),鏈接外部樣式表： 鏈接外部樣式表是CSS應(yīng)用的首選形式，將CSS樣式代碼單獨(dú)編寫(xiě)在一個(gè)獨(dú)立文件中，由頁(yè)面進(jìn)行調(diào)用，多個(gè)網(wǎng)頁(yè)可以同時(shí)使用一個(gè)樣式表文件。 Style.css文件內(nèi)容：,Body Background-color:#eeeeee; Margin-left:0px; Margin-top:0px; Td Font-size:12px; ,12,4.2 CSS語(yǔ)法基礎(chǔ),CSS字體屬性： 文字的屬性主要有字體樣式、字體大小、字體加粗等。,13,4.2 CSS語(yǔ)法基礎(chǔ),CSS文本屬性： 文本屬性指整段文本的樣式。包括單詞間隔、字符間隔、文本縮進(jìn)、行高等,14,4.2 CSS語(yǔ)法基礎(chǔ),CSS背景屬性：,15,4.2 CSS語(yǔ)法基礎(chǔ),CSS邊框?qū)傩裕?16,4.3 CSS布局基礎(chǔ),表現(xiàn)和結(jié)構(gòu)相分離 1.內(nèi)容 內(nèi)容就是頁(yè)面實(shí)際要傳達(dá)的真正信息，包含數(shù)據(jù)、文檔或者圖片等。注意這里強(qiáng)調(diào)的“真正”，是指純粹的數(shù)據(jù)信息本身。比如一個(gè)不包含輔助的信息,比如導(dǎo)航菜單、裝飾性圖片等。 2.結(jié)構(gòu)(Structure) 可以看到上面的文本信息本身已經(jīng)完整。但是混亂一團(tuán)，難以閱讀和理解，我們必須給它格式化一下。把它分成標(biāo)題、作者、章、節(jié)、段落和列表等。,17,4.3 CSS布局基礎(chǔ),3.表現(xiàn)(Presentation) 雖然定義了結(jié)構(gòu)，但是內(nèi)容還是原來(lái)的樣式?jīng)]有改變，例如標(biāo)題字體沒(méi)有變大，正文的顏色也沒(méi)有變化，沒(méi)有背景，沒(méi)有修飾。所有這些用來(lái)改變內(nèi)容外觀的東西，我們稱(chēng)之為“表現(xiàn)”。 4.行為(Behavior) 行為就是對(duì)內(nèi)容的交互及操作效果。例如，我們最熟悉不過(guò)的JavaScript。使用JavaScript我們可以使內(nèi)容動(dòng)起來(lái)，可以判斷一些表單提交，可以相應(yīng)你的一些操作。,18,4.3 CSS布局基礎(chǔ),所有HTML和XHTML頁(yè)面就是由“結(jié)構(gòu)、表現(xiàn)和行為”這三方面組成的。抽象一點(diǎn)理解，內(nèi)容是基礎(chǔ)層，然后是附加上去結(jié)構(gòu)層和表現(xiàn)層，作后再對(duì)它們做點(diǎn)“行為”：,19,4.3 CSS布局基礎(chǔ),傳統(tǒng)的HTML方法, 憶江南 ,20,4.3 CSS布局基礎(chǔ),web標(biāo)準(zhǔn)推薦的方法,憶江南 唐.白居易 江南好. 772846 ，字樂(lè)天. 據(jù)樂(lè)府雜錄. 此詞寫(xiě)江南春色.,21,4.3 CSS布局基礎(chǔ),用于布局的時(shí)候，它是一個(gè)控制表現(xiàn)的標(biāo)簽?；祀s在內(nèi)容和結(jié)構(gòu)中，使我們的內(nèi)容數(shù)據(jù)無(wú)法再利用。結(jié)構(gòu)與表現(xiàn)相分離帶來(lái)的好處主要有： 數(shù)據(jù)的多樣顯示。通過(guò)不同的樣式表適應(yīng)不同的設(shè)備，做到內(nèi)容與設(shè)備無(wú)關(guān) 保持整個(gè)站點(diǎn)的視覺(jué)一致性變得非常簡(jiǎn)單，修改樣式表就可以輕松改版; 由于結(jié)構(gòu)清晰，數(shù)據(jù)的集成、更新和處理更加方便靈活； 更有意義的搜索。,22,4.3 CSS布局基礎(chǔ),調(diào)用樣式表 在符合web標(biāo)準(zhǔn)的設(shè)計(jì)中，我們使用外部調(diào)用法，好處不言而喻，你可以不修改頁(yè)面只修改.css文件而改變頁(yè)面的樣式。如果所有頁(yè)面都調(diào)用同一個(gè)樣式表文件，那么改一個(gè)樣式表文件，可以改變所有文件的樣式。,23,4.3 CSS布局基礎(chǔ),CSS盒模型,24,4.3 CSS布局基礎(chǔ),CSS盒模型 CSS定義所有的元素都可以擁有像盒子一樣的外形和平面空間，即都包含邊界、邊框、補(bǔ)白、內(nèi)容區(qū)域、背景（包括背景色和背景圖片），這就是盒模型，它規(guī)范了網(wǎng)頁(yè)元素的顯示基礎(chǔ)。 在元素內(nèi)容與邊框之間的空白區(qū)域，被稱(chēng)為元素的補(bǔ)白(padding)，或內(nèi)邊距；在元素邊框之外的空白區(qū)域，稱(chēng)為邊界(margin)，或外邊距。 盒模型的提出，使網(wǎng)頁(yè)布局完全擺脫了表格的束縛，任何元素對(duì)象，無(wú)論是傳統(tǒng)的段落、列表、標(biāo)題、圖片，還是標(biāo)準(zhǔn)布局中的div和span新元素，都可以通過(guò)自己的屬性來(lái)實(shí)現(xiàn)布局，設(shè)置模型顯示效果,25,4.3 CSS布局基礎(chǔ),CSS盒模型 所有的網(wǎng)頁(yè)元素都可以包括四個(gè)區(qū)域：內(nèi)容區(qū)、補(bǔ)白區(qū)、邊框區(qū)和邊界區(qū)。在CSS中，可以增加補(bǔ)白、邊框和邊界的區(qū)域大小，而不影響內(nèi)容區(qū)域。,#box height:160px; width:260px; margin:60px; padding:60px; border:solid 60px #aaa; background-image:url(box.jpg); background-color:#CC99CC; ,26,4.3 CSS布局基礎(chǔ),CSS盒模型,27,4.3 CSS布局基礎(chǔ),盒模型的類(lèi)型 CSS把盒模型分為兩種基本形態(tài)：Block（塊狀）和Inline（內(nèi)聯(lián)或行內(nèi)）。 在默認(rèn)狀態(tài)下，塊狀元素的寬度為100%，而且后面隱藏附帶有換行符，使塊狀元素始終占據(jù)一行。 如：div、p 、table 、ul 、li 、ol 、dl 、h1-h6 內(nèi)聯(lián)元素沒(méi)有高度和寬度，因此也就沒(méi)有固定的形狀，定義它的width和height屬性無(wú)效。內(nèi)聯(lián)元素可以在行內(nèi)自由流動(dòng)，但它會(huì)遵循盒模型的基本規(guī)則，可以定義邊界、補(bǔ)白、邊框及背景。 如：a 、b 、em 、span 、img,28,4.3 CSS布局基礎(chǔ),盒模型的顯示類(lèi)型可以使用display屬性來(lái)定義。任何元素都可以通過(guò)display屬性改變默認(rèn)顯示類(lèi)型。display屬性的選項(xiàng)值如下： block：塊狀顯示，在元素后面添加換行符，也就是說(shuō)，其他元素不能在其后并列顯示。 none：隱藏顯示，此聲明不會(huì)為被隱藏的元素保留位置。 inline：內(nèi)聯(lián)顯示，在元素后面刪除換行符，多個(gè)元素可以在一行內(nèi)并列顯示。 list-item：具有塊狀特征的列表項(xiàng)目顯示，可添加可選項(xiàng)目標(biāo)志。,29,4.3 CSS布局基礎(chǔ),布局模型 布局模型與盒模型一樣都是CSS最基本、最核心的概念，CSS包含3種基本的布局模型：Flow、Layer和Float 1. Flow Model(流動(dòng)模型) 流動(dòng)模型是HTML默認(rèn)布局模型，在此模型中，元素本身是被動(dòng)的，隨著文檔流自上而下按順序動(dòng)態(tài)分布。流動(dòng)布局只能根據(jù)元素排列的先后順序來(lái)決定分布位置，要改變某個(gè)元素的位置，只能通過(guò)改變它在HTML文檔流中的分布位置。同時(shí)這種模式又是活動(dòng)的，它的位置隨時(shí)發(fā)生變化，當(dāng)我們?cè)谝粋€(gè)元素前面添加另一個(gè)元素，它的位置會(huì)向后推移。,30,4.3 CSS布局基礎(chǔ),2. Layer Model(層模型) Layer將頁(yè)面的內(nèi)容引入層，希望像圖像編輯器那樣精確定位網(wǎng)頁(yè)元素，擺脫HTML元素自然流動(dòng)帶來(lái)的弊端。然而網(wǎng)頁(yè)永遠(yuǎn)是一個(gè)活動(dòng)的窗口，沒(méi)法預(yù)知不同瀏覽者所使用的窗口大小，同時(shí)大部分網(wǎng)頁(yè)本身的大小也是無(wú)法預(yù)測(cè)和控制的。 3. Float Model(浮動(dòng)模型) 浮動(dòng)模型汲取了前兩者的優(yōu)點(diǎn)，希望在流動(dòng)和固定之間取得一個(gè)平衡，實(shí)現(xiàn)網(wǎng)頁(yè)布局的自適應(yīng)能力。,31,4.3 CSS布局基礎(chǔ),流動(dòng)布局模型 流動(dòng)布局模型的特征 任何沒(méi)有具體定義定位方式的元素，默認(rèn)都呈現(xiàn)流動(dòng)布局模式 塊狀元素都會(huì)在所處的包含元素內(nèi)自上而下按順序垂直延伸分布 內(nèi)聯(lián)元素都會(huì)在所處的包含元素內(nèi)從左到右水平分布顯示。,32,4.3 CSS布局基礎(chǔ),層布局模型 層布局模型中最核心的技術(shù)是元素的定位類(lèi)型。 該屬性取值可以包括：static、absolute、fixed和relative static：不定位，遵循默認(rèn)的流動(dòng)模型。 absolute：絕對(duì)定位，將元素從文檔流中拖出來(lái)，使用leftrighttopbottom屬性相對(duì)于其最接近的一個(gè)具有定位屬性的父包含塊進(jìn)行絕對(duì)定位。 fixed：固定定位。元素本身是固定的，不會(huì)隨瀏覽器窗口的滾動(dòng)條滾動(dòng)而變化。 relative：相對(duì)定位。通過(guò)leftrighttopbottom屬性確定元素在正常文檔流中的偏移位置。,div position:absolute; ,33,4.3 CSS布局基礎(chǔ),絕對(duì)定位包含塊 CSS包含塊是絕對(duì)定位的基礎(chǔ)。包含塊是對(duì)絕對(duì)定位元素提供坐標(biāo)偏移和顯示范圍的參照物，即確定絕對(duì)定位的偏移起點(diǎn)的參考。默認(rèn)狀態(tài)下，body元素就是一個(gè)大的包含塊，所有絕對(duì)定位的元素都是根據(jù)窗口來(lái)確定自己所處的位置和百分比大小顯示的。但是如果我們定義了某個(gè)元素為包含塊后，對(duì)于包含的絕對(duì)定