《商務(wù)網(wǎng)站設(shè)計(jì)與開(kāi)發(fā)》課件第03章 層疊樣式表_第1頁(yè)
《商務(wù)網(wǎng)站設(shè)計(jì)與開(kāi)發(fā)》課件第03章 層疊樣式表_第2頁(yè)
《商務(wù)網(wǎng)站設(shè)計(jì)與開(kāi)發(fā)》課件第03章 層疊樣式表_第3頁(yè)
《商務(wù)網(wǎng)站設(shè)計(jì)與開(kāi)發(fā)》課件第03章 層疊樣式表_第4頁(yè)
《商務(wù)網(wǎng)站設(shè)計(jì)與開(kāi)發(fā)》課件第03章 層疊樣式表_第5頁(yè)
已閱讀5頁(yè)，還剩17頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡(jiǎn)介

內(nèi)容3.1CSS簡(jiǎn)介3.2選擇符3.3CSS的層疊性與優(yōu)先次序3.4常用屬性及其應(yīng)用實(shí)例3.5CSS盒子模型和網(wǎng)頁(yè)布局方式3.6思考題3.1CSS簡(jiǎn)介層疊樣式表（CascaingStyleSheet，簡(jiǎn)稱(chēng)為CSS）是W3C組織所擬定出的一套標(biāo)準(zhǔn)的樣式語(yǔ)言規(guī)范。隨著CSS技術(shù)技術(shù)的使用，HTML頁(yè)面真正“活動(dòng)”了起來(lái)。而在HTML5中，一些純粹用作顯示效果的元素將取消，因?yàn)樗鼈冿@示效果的工作更適合由CSS來(lái)?yè)?dān)當(dāng)。作為一種用于網(wǎng)頁(yè)展示的樣式語(yǔ)言，CSS增加了更多的樣式定義方式來(lái)輔助HTML語(yǔ)言。通過(guò)CSS樣式表的定義，只要設(shè)定某種元素（如：表格、背景、連結(jié)、文字、按鈕、滾動(dòng)條等）的樣式，則各網(wǎng)頁(yè)相同種類(lèi)的元素將會(huì)呈現(xiàn)出相同的風(fēng)格。這種方式不僅加快了網(wǎng)站開(kāi)發(fā)的進(jìn)度，而且便于建立一個(gè)風(fēng)格統(tǒng)一的網(wǎng)站。3.1CSS簡(jiǎn)介CSS的定義可以直接放在HTML元素中，稱(chēng)為內(nèi)聯(lián)樣式。形式如下：<pstyle="color:sienna;margin-left:20px">Thisisaparagraph.</p>CSS的定義可以放在HTML文件的<style>元素中，稱(chēng)為內(nèi)部樣式表。形式如下：<head><style>body{background-color:yellow;}</style></head>CSS的定義也可以獨(dú)立保存在一個(gè)擴(kuò)展名為.css的文件中，通過(guò)鏈接的方式包含入網(wǎng)頁(yè)中，稱(chēng)為外部樣式表。形式如下：<head><linkrel="stylesheet"type="”text/css”"href="”foo.css”"></head>3.2選擇符一條CSS規(guī)則中包括兩個(gè)部分：一個(gè)選擇符（selector）和一個(gè)或多個(gè)描述（declaration），描述之間用分號(hào)隔開(kāi)。每一個(gè)描述中又包含屬性名（property）和屬性值（value）。語(yǔ)法如下：selector{property:value;property:value;....}下面的CSS規(guī)則中聲明了段落元素<p>的顯式方式，包括文本居中、黑色、arial字體。CSS中的注釋在“/*”和“*/”之間。p{text-align:center;color:black;font-family:arial;}在這個(gè)例子中，p是選擇符，text-align、color和font-family是屬性，并為這些屬性設(shè)置了相應(yīng)的屬性值。3.2選擇符（1）類(lèi)選擇符選擇符可以是一種HTML元素，例如“p”、“table”等，這些可以看作是HTML預(yù)定義的類(lèi)。例如下面的CSS規(guī)則：body{background:#fff;margin:0;padding:0;}p{color:#ff0000;}應(yīng)用了上述CSS的HTML文檔中所有的<body>元素（雖然只可能有一個(gè)）和所有的<p>元素都將無(wú)需聲明而自動(dòng)遵守上述的CSS規(guī)則。3.2選擇符（2）子類(lèi)選擇符選擇符可以是一種HTML元素的一部分實(shí)例，可以理解為基于該類(lèi)元素（基類(lèi)）的一個(gè)子類(lèi)。例如下面的CSS規(guī)則：td.fancy{background:#666;}p.rchild{text-align:right}在HTML應(yīng)用上述CSS規(guī)則時(shí)，必須聲明元素的class為某個(gè)子類(lèi)。例如下面代碼：<tdclass="fancy">ABC<td><pclass="rchild">p標(biāo)記中的內(nèi)容</p>如果在定義子類(lèi)時(shí)沒(méi)有給出基類(lèi)的名稱(chēng)，則可認(rèn)為它是任何基類(lèi)的子類(lèi)。例如下面的CSS規(guī)則：.cchild{text-align:center}3.2選擇符（3）嵌套類(lèi)選擇符選擇符可以是根據(jù)元素之間的嵌套關(guān)系而確定的類(lèi)，嵌套關(guān)系也可以理解為上下文關(guān)系。例如下面的CSS規(guī)則和相應(yīng)的HTML代碼：tda{text-align:center;}<tableborder="1"><tr><td><ahref="a.htm">FileA</a></td><td><ahref="b.htm">FileB</a></td></tr></table><ahref="c.htm">FileC</a>上述CSS規(guī)則意味著：只有在單元格中的超鏈接才會(huì)應(yīng)用文字居中的樣式，而其它的超鏈接則會(huì)忽略這一規(guī)則。3.2選擇符（4）id選擇符選擇符可以是HTML文檔中的一個(gè)特定元素，例如用“id”屬性標(biāo)識(shí)的某一個(gè)段落。這些可以看作是HTML元素類(lèi)的實(shí)例對(duì)象。例如下面的CSS規(guī)則和相應(yīng)的HTML代碼：#red{color:red;}#green{color:green;}<pid="red">這個(gè)段落是紅色。</p><pid="green">這個(gè)段落是綠色。</p>id屬性為red的p元素顯示為紅色，而id屬性為green的p元素顯示為綠色。3.2選擇符（5）偽類(lèi)與偽元素選擇符CSS偽類(lèi)（Pseudo-class）用于向某些選擇器添加特殊的效果。使用偽類(lèi)選擇符的語(yǔ)法如下：selector:pseudo-class{property:value;}偽類(lèi)描述:active向被激活的元素添加樣式。:hover當(dāng)鼠標(biāo)懸浮在元素上方時(shí)，向元素添加樣式。:link向未被訪(fǎng)問(wèn)的鏈接添加樣式。:visited向已被訪(fǎng)問(wèn)的鏈接添加樣式。3.2選擇符下面代碼給出了偽類(lèi)用于超鏈接的顯式效果，在不同的狀態(tài)下超鏈接的顏色不同：<html><head><styletype="text/css">a:link{color:#FF0000;}/*未訪(fǎng)問(wèn)的超鏈接*/a:visited{color:#00FF00;}/*已訪(fǎng)問(wèn)的超鏈接*/a:hover{color:#FF00FF;}/*鼠標(biāo)位于超鏈接之上*/a:active{color:#0000FF;}/*鼠標(biāo)在超鏈接上按鍵*/</style></head><body><ahref="default.jsp">這是一個(gè)由偽類(lèi)裝飾的超鏈接</a></body></html>3.2選擇符（6）選擇符分組如果需要將多個(gè)類(lèi)或id設(shè)置成相同的樣式，我們可以對(duì)多個(gè)選擇符進(jìn)行分組設(shè)置。被分組的選擇符用逗號(hào)隔開(kāi)，共享相同的聲明。下面的例子中所有的標(biāo)題元素都會(huì)以綠色進(jìn)行顯示，而段落和表格中的字體也被一起設(shè)定為9pt大小。h1,h2,h3,h4,h5,h6{color:green;}p,table{font-size:9pt}3.3CSS的層疊性與優(yōu)先次序CSS允許以多種方式規(guī)定樣式信息，包括內(nèi)聯(lián)樣式、內(nèi)部樣式表、外部樣式表等。如果在同一個(gè)HTML文檔內(nèi)部以不同的方式應(yīng)用了多個(gè)CSS的定義，且對(duì)同一個(gè)HTML元素存在不止一次樣式定義時(shí)，瀏覽器會(huì)使用哪個(gè)樣式呢？通常，這些來(lái)源不同的樣式將根據(jù)一定的優(yōu)先規(guī)則層疊于一個(gè)虛擬樣式表中，且其優(yōu)先順序從高到低為：內(nèi)聯(lián)樣式（在HTML元素內(nèi)部定義樣式）內(nèi)部樣式表（在HTML文檔頭部<style>元素中定義樣式）外部樣式表（在HTML文檔頭部<link>元素中鏈接CSS文件）瀏覽器默認(rèn)設(shè)置（每個(gè)瀏覽器都對(duì)各種元素有默認(rèn)的顯示樣式）3.3CSS的層疊性與優(yōu)先次序CSS文本屬性在CSS中，文本屬性可定義文本的外觀，如，改變文本的顏色、對(duì)齊文本、裝飾文本、對(duì)文本進(jìn)行縮進(jìn)等。屬性描述color設(shè)置文本的顏色text-indent規(guī)定文本塊首行的縮進(jìn)text-align對(duì)齊元素中的文本word-spacing設(shè)置字間距l(xiāng)etter-spacing設(shè)置字符間距text-transform控制元素中的字母text-decoration向文本添加修飾white-space設(shè)置元素中空白的處理方式direction設(shè)置文本方向3.4常用屬性及其應(yīng)用實(shí)例<styletype="text/css">p{line-height:0.5;text-indent:1cm;}h1{text-decoration:overline;}h2{text-decoration:line-through;}h3{text-decoration:underline;}h4{text-decoration:blink;}h5{letter-spacing:20px;}</style>……

<p>

清明

<h5>作者：杜牧</h5><h1>清明時(shí)節(jié)雨紛紛，</h1><h2>路上行人欲斷魂。</h2><h3>借問(wèn)酒家何處有，</h3><h4>牧童遙指杏花村。</h4></p>……3.4常用屬性及其應(yīng)用實(shí)例CSS表格屬性CSS樣式表中允許設(shè)置表格的屬性，以確定表格的布局。屬性描述border-collapse設(shè)置是否把表格邊框合并為單一的邊框border-spacing設(shè)置分隔單元格邊框的距離caption-side設(shè)置表格標(biāo)題的位置empty-cells設(shè)置是否現(xiàn)實(shí)表格中的空單元格table-layout設(shè)置顯示單元，行和列的算法3.5CSS盒子模型和網(wǎng)頁(yè)布局方式盒子模型對(duì)于CSS控制頁(yè)面起著舉足輕重的作用。熟練掌握盒子模型，以及盒子模型各個(gè)屬性的含義和應(yīng)用方法后，就可以輕松地控制頁(yè)面中每個(gè)元素的位置。下面將介紹盒子模型的概念及其屬性的含義和使用方法。CSS中盒子模型用于描述一個(gè)為HTML元素形成的矩形盒子。盒子模型是由margin（邊界）、border（邊框）、padding（空白）和content（內(nèi)容）4個(gè)屬性組成。3.5CSS盒子模型和網(wǎng)頁(yè)布局方式CSS的定位功能在網(wǎng)頁(yè)設(shè)計(jì)中，能否控制到各個(gè)模塊在頁(yè)面中的位置非常關(guān)鍵。這些模塊只有放置在正確的位置，網(wǎng)頁(yè)的布局看起來(lái)才夠美觀。網(wǎng)頁(yè)中的各種元素都必須有自己合理的位置，才能搭建出整個(gè)頁(yè)面的結(jié)構(gòu)。使用CSS的定位功能，可以相對(duì)地、絕對(duì)地或者固定地對(duì)任何一個(gè)元素進(jìn)行定位。在文本流中，任何一個(gè)元素都被文本流設(shè)置了其自身的位置，但通過(guò)CSS的定位就可以改變這些元素的位置。可以通過(guò)某個(gè)元素的上、下、左、右移動(dòng)對(duì)其進(jìn)行相對(duì)定位。進(jìn)行相對(duì)定位后，雖然元素的表現(xiàn)區(qū)脫離了文本流，但在文本流內(nèi)卻為該元素保留一塊空間位置，這個(gè)位置不能隨著文本流的移動(dòng)而移動(dòng)。3.5CSS盒子模型和網(wǎng)頁(yè)布局方式CSS的定位方式在CSS中對(duì)元素的定位，可以通過(guò)position屬性設(shè)置。static參數(shù)是所有元素定位的默認(rèn)值，無(wú)特殊定位，對(duì)象遵循HTML定位規(guī)則，不能通過(guò)z-index進(jìn)行層次分級(jí)。relative參數(shù)相對(duì)定位。對(duì)象不可層疊，可以通過(guò)left、right、bottom、top等屬性指定該元素在正常文檔流中的偏移位置，可以通過(guò)z-index進(jìn)行層次分級(jí)。absolute參數(shù)絕對(duì)定位。脫離文檔流，通過(guò)left、right、bottom、top等屬性進(jìn)行定位。選取其最近的父級(jí)定位元素，當(dāng)父級(jí)元素的position為static時(shí)，該元素將以body坐標(biāo)原點(diǎn)進(jìn)行定位，可以通過(guò)z-index進(jìn)行層次分級(jí)。fixed參數(shù)固定定位

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶(hù)所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶(hù)上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶(hù)上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶(hù)因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論