網(wǎng)頁設(shè)計與制作-第七章講稿_第1頁
網(wǎng)頁設(shè)計與制作-第七章講稿_第2頁
網(wǎng)頁設(shè)計與制作-第七章講稿_第3頁
網(wǎng)頁設(shè)計與制作-第七章講稿_第4頁
網(wǎng)頁設(shè)計與制作-第七章講稿_第5頁
已閱讀5頁，還剩57頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

《網(wǎng)頁設(shè)計與制作教程》作者：孟顯勇北京理工大學(xué)出版社第七章CSS基礎(chǔ)目前主流網(wǎng)頁設(shè)計技術(shù)是使用HTML語言的標(biāo)簽定義頁面結(jié)構(gòu)，使用CSS樣式表定義頁面的布局和樣式。早期HTML語言通過增加大量定義格式的標(biāo)簽和屬性，來實現(xiàn)樣式和格式的定義，這樣使代碼變得越來越復(fù)雜，但效果并不理想。例如，將文本轉(zhuǎn)換成圖像，或過多的使用表格實現(xiàn)排版。因此，HTML語言將原來大量的格式定義的工作都交由CSS樣式表來處理，因為，CSS可以實現(xiàn)豐富的樣式定義和精確的頁面對象排版。7.1CSS簡介CSS（CascadingStyleSheets）稱為層疊樣式表單，CSS按代碼的位置可以分為三種：內(nèi)聯(lián)樣式表、內(nèi)部樣式表、外部樣式表。CSS主要對布局、字體、顏色、背景等頁面元素的樣式實現(xiàn)更加精確的控制。通過修改CSS樣式文件，就可以實現(xiàn)整個站點內(nèi)引用此格式的頁面的樣式同時更新，即實現(xiàn)頁面格式的集中控制和管理。CSS具有很好的瀏覽器和平臺兼容性。使用CSS可以實現(xiàn)精確的樣式定義，并且樣式定義代碼簡練，執(zhí)行效率高。

HTML語言和CSS樣式結(jié)合可以使頁面結(jié)構(gòu)和格式定義分離，HTML語言定義頁面結(jié)構(gòu)和內(nèi)容，CSS來定義頁面的格式。7.1.1CSS分類內(nèi)聯(lián)樣式表

內(nèi)聯(lián)樣式表是由標(biāo)簽的style屬性定義的樣式，HTML絕大多數(shù)標(biāo)簽都具有style屬性，通過style屬性可以對網(wǎng)頁對象的格式進(jìn)行定義。內(nèi)聯(lián)樣式定義的格式只對此標(biāo)簽修飾對象有效。例如，代碼段：<Bstyle=“color:#FF0000;font-size:18px”>標(biāo)簽style屬性定義樣式</B>，對<B>標(biāo)簽的style屬性進(jìn)行定義，設(shè)置文字顏色為紅色，字體大小為18px。

7.1.1CSS分類內(nèi)部樣式表

內(nèi)部樣式表是使用<STYLE>標(biāo)簽在文檔頭部分的<HEAD></HEAD>標(biāo)簽中對格式進(jìn)行定義，內(nèi)部樣式表定義的樣式可以被本頁面的標(biāo)簽引用。程序【例7-1】在<STYLE>標(biāo)簽中定義<H1>和<P>標(biāo)簽的樣式，頁面中所有<H1>和<P>標(biāo)簽都可以引用定義的樣式，<H1>標(biāo)簽修飾的文字顯示紅色、宋體，<P>標(biāo)簽修飾的文字顯示綠色、字體大小為18px。7.1.1CSS分類內(nèi)部樣式表<HTML>

<HEAD>

<STYLE>

H1{color:#FF0000;font-family:"宋體"}

P{color:#00FF00;font-size:18px}

</STYLE>

</HEAD>

<BODY>

<H1>標(biāo)題樣式定義</H1>

<P>分段樣式定義</P>

</BODY>

</HTML>7.1.1CSS分類外部樣式表

外部樣式表是將樣式定義代碼單獨放到一個獨立的文件中，使用樣式定義的頁面都可以引用此樣式定義文件，樣式文件的擴(kuò)展名為.css。當(dāng)樣式定義的文件內(nèi)容發(fā)生改變時所有引用頁面都會自動更新，實現(xiàn)集中樣式定義和控制。7.1.1CSS分類外部樣式表定義獨立的外部樣式表style.css，程序（style.css）代碼如下：

p.redp{color:#FF0000;font-size:18px}

p.greenp{color:#00FF00;font-size:16px}

7.1.1CSS分類外部樣式表引用頁面程序（ch7-2.html）代碼如下：

<html>

<head>

<title>CSS樣式定義</title>

<linkhref="style.css"rel="stylesheet"type="text/css">

</head>

<body>

<pclass="greenp">定義段落文字為綠色，16px</p>

<pclass="redp">定義段落文字為紅色，18px</p>

</body>

</html>7.1.2CSS基本語法CSS是定義頁面格式的標(biāo)準(zhǔn)，具有嚴(yán)格的語法規(guī)范，CSS語法主要由三部分組成：選擇器、屬性和屬性值。CSS語法如下：

語法：selector{property:value;property:value;}

選擇器{屬性：屬性值;屬性：屬性值}

7.1.2CSS基本語法選擇器選擇器就是想要對其樣式定義的HTML標(biāo)簽，對HTML標(biāo)簽樣式定義后，頁面內(nèi)引用該標(biāo)簽的格式都會按照樣式表定義的樣式顯示效果。7.1.2CSS基本語法屬性和屬性值

CSS的屬性定義的是標(biāo)簽的屬性，例如，字體顏色，字體大小，頁邊空白等。例如，定義選擇器body的字體、大小和顏色，屬性font-family定義字體；屬性font-size定義大?。粚傩詂olor定義文本顏色。屬性與屬性值用冒號隔開，當(dāng)定義多個屬性和屬性值時，用分號隔開每個屬性。定義屬性代碼段如下：

body{

font-family:"宋體";

font-size:20px;

color:#FF0000;

}

7.1.3選擇器分類組合方式

CSS支持將相同屬性和屬性值賦給多個選擇器，選擇器與選擇器之間用逗號隔開，多個選擇器具有相同的樣式定義。例如，如下代碼段：

body,p,h1

{

font-family:“宋體”;

font-size:18px

}

組合方式定義的選擇器樣式相同，在網(wǎng)頁中<BODY>標(biāo)簽、<P>標(biāo)簽和<H1>標(biāo)簽樣式相同，代替默認(rèn)的標(biāo)簽格式，字體均為宋體，字體大小均為18px。7.1.3選擇器分類CLASS選擇器

CSS使用CLASS選擇器可以實現(xiàn)同一HTML標(biāo)簽定義不同樣式，同一樣式可以被不同HTML標(biāo)簽引用。例如，可以定義多個<H1>標(biāo)簽樣式，一種是文字居中對齊樣式，一種是文字居左對齊樣式，標(biāo)簽<H1>的樣式可以定義為：

h1.center{text-align:center}

h1.left{text-align:left}

其中，center和left為class名稱。在HTML代碼中要引用上述格式定義，需要標(biāo)簽<H1>設(shè)置class屬性引用樣式，如下代碼段：

<h1class="center">標(biāo)題居中顯示</h1>

<h1class="left">標(biāo)題居左顯示</h1>7.1.3選擇器分類CLASS選擇器可以設(shè)置成通用樣式，即不指定具體的HTML標(biāo)簽。格式為：“.選擇器名稱{屬性：屬性值;}”，例如，定義一個CLASS選擇器，代碼段如下：

．green{color:#00FF00}

這類CLASS樣式具有通用性，可以被多種HTML標(biāo)簽所引用，例如，green選擇器可以被<H1>、<B>和<td>等多種標(biāo)簽引用，代碼段如下：

<h1class="green">標(biāo)題文字為綠色</h1>

<bclass="green">加粗文字為綠色</b>7.1.3選擇器分類ID選擇器

CSS使用ID選擇器定義頁面某一對象的樣式，ID選擇器定義具有唯一性，即指向頁面唯一一個頁面對象，ID選擇器的定義格式為：“#選擇器名稱{屬性：屬性值;}”，定義ID選擇器代碼段如下：

#blue{color:#0000FF}

ID選擇器具有唯一性，只有ID號與ID選擇器名稱相同的HTML標(biāo)簽才可以引用此樣式，例如，blue選擇器可以被ID號為blue的標(biāo)簽引用，代碼段如下：

<h1id="blue">標(biāo)題文字為藍(lán)色</h1>

在頁面中只有<H1>的ID號為blue時才能引用ID選擇器“#blue”，其實質(zhì)是給ID號為blue的對象設(shè)置樣式，樣式名為blue7.1.3選擇器分類CLASS和ID選擇器的區(qū)別

雖然CLASS和ID選擇器都可以實現(xiàn)樣式的定義，但它們之間存在著較大區(qū)別，ID選擇器在頁面內(nèi)只能用一次，定義頁面上唯一一個對象的樣式，具有唯一性。而CLASS選擇器可以在一個頁面內(nèi)引用多次，CLASS定義的樣式可以應(yīng)用于多種HTML標(biāo)簽。雖然在網(wǎng)頁設(shè)計過程中，在一個網(wǎng)頁中多個對象引用同一個ID選擇器不會出錯，但當(dāng)使用Javascript或Vbscript通過ID號來調(diào)用上述對象時將出現(xiàn)錯誤。ID選擇器主要應(yīng)用于頁面布局的樣式定義，布局的對象在頁面只定義一次，例如，頁眉，主體或頁腳。CLASS選擇器主要應(yīng)用于頁面文字的排版。7.1.4CSS偽類CSS偽類是一種特殊的類選擇器，其主要功能是指在不同狀態(tài)下定義不同的網(wǎng)頁效果。

偽類定義樣式

偽類的語法結(jié)構(gòu)是：

Selector:pseudo-class

{property:

value}

選擇器：偽類{屬性：屬性值}7.1.4CSS偽類偽類與類不同，偽類的名稱在CSS中已經(jīng)定義，偽類名稱不能隨意創(chuàng)建，偽類名稱是對頁面對象狀態(tài)的描述，實質(zhì)上偽類是選擇器在某個特殊狀態(tài)下的樣式定義。例如，超級鏈接有四種狀態(tài)，包括link，visited，active，hover，定義超級鏈接的偽類如下：

a:link{color:#0000FF}/*未訪問的鏈接*/

a:hover{color:#00FF00}/*鼠標(biāo)指向鏈接*/

a:active{color:#FFFF00}/*鼠標(biāo)激活鏈接*/

a:visited{color:#FF0000}/*已訪問的鏈接*/7.1.4CSS偽類上述代碼定義了超級鏈接的四個狀態(tài)樣式，當(dāng)鏈接未訪問時顯示藍(lán)色，當(dāng)鼠標(biāo)指向鏈接時顯示綠色，當(dāng)鼠標(biāo)點擊激活鏈接時顯示黃色，當(dāng)鏈接訪問之后顯示紅色。另外，層疊樣式表單的樣式是有層次和順序的，如果不能出現(xiàn)上述效果需要檢查定義順序，依次為a:link，a:visited，a:hover，a:actived，如果將visited放到最后將不會出現(xiàn)上述效果，因為visited的優(yōu)先級高于hover，執(zhí)行后面visited將忽略前面的低優(yōu)先級的hover。7.1.4CSS偽類偽類和選擇符混用

CSS可以將偽類和類組合起來實現(xiàn)多個狀態(tài)樣式的定義，可以實現(xiàn)在同一頁面中制作不同的超級鏈接效果，類選擇器和偽類可以混合使用，格式如下：

selector.class:pseudo-class

{property:value}

選擇器﹒類：偽類{屬性：屬性值}7.1.4CSS偽類定義兩種偽類，類名分別為blue和blueline，樣式定義如下：

a.blue:link{color:#0000FF}/*未訪問鏈接藍(lán)色有下劃線*/

a.blue:visited{color:#FF0000}/*已訪問鏈接紅色有下劃線*/

a.blueline:link{color:#0000FF;text-decoration:none}/*未訪問鏈接無下劃線*/

a.blueline:visited{color:#FF0000;text-decoration:none}/*已訪問鏈接無下劃線*/

定義兩個鏈接，分別使用上述不同樣式定義，引用上述樣式的代碼段如下：

<aclass="blue"href="introduct.html">公司簡介</a>

<aclass="blueline"href="product.html">產(chǎn)品簡介</a>

7.1.5創(chuàng)建CSS文件一般網(wǎng)頁設(shè)計通常使用外部樣式表的方式，將樣式定義獨立放到CSS文件中，整個站點的頁面調(diào)用樣式表，實現(xiàn)整個站點統(tǒng)一樣式?？梢允褂肈reamweaver設(shè)計制作CSS樣式表，選擇菜單欄的【新建】→【新建文檔對話框】，類別選擇【CSS樣式表】，創(chuàng)建所選樣式表。7.2CSS屬性CSS樣式屬性主要包括字體屬性、文本屬性、顏色背景屬性、邊框?qū)傩?、容器屬性、分類屬性和鼠?biāo)屬性等。7.2.1CSS結(jié)構(gòu)模式CSS結(jié)構(gòu)具有明顯的層次特征，在一個CSS布局模塊內(nèi)，由外到內(nèi)可以分為頁邊距、邊框、間隙、頁面對象，其中間隙是頁面對象外邊界與邊框之間的距離，頁面對象是指網(wǎng)頁中文字、圖像、視頻等。圖7-2CSS結(jié)構(gòu)7.2.1CSS結(jié)構(gòu)模式CSS邊距屬性(margin)是指頁面對象外邊框與其它頁面元素外邊框之間的距離，即相鄰兩個頁面對象外邊框之間距離。用來設(shè)置一個元素所占空間的邊緣到相鄰元素之間的距離。可以用cm,mm,in,pt,

pc為單位。CSS邊框?qū)傩?border)是指頁面對象外邊框線的寬度，一般以像素為單位。CSS間隙屬性(padding)是指頁面對象的外邊緣與邊框線之間的距離，一般單位為像素。

CSS背景屬性是指邊框線以內(nèi)的背景顏色或圖像。7.2.2字體屬性CSS字體屬性和屬性功能見表7-1所示。

7.2.3文本屬性CSS文本屬性和屬性功能見表7-2所示。

表7-1字體屬性和功能屬性功能屬性值font-family字體名稱“宋體”、"TimesNewRoman"等font-size字體大小18pt、18px、80%等color字體顏色RGB值font-style字體樣式normal,italicfont-weight字體濃淡bold、lighter、normal或數(shù)值font-variant字體變量Normal、small-capsfont字體屬性包含字體顏色、大小、樣式等表7-2文本屬性和功能屬性功能屬性值text-align文本對齊Left、right、center、justify(兩端對齊)text-decoration文本修飾None、underline、overline、line-throughtext-indent文本縮進(jìn)可以用cm,mm,in,pt,

pc，em,ex,px百分比line-height行高可以用cm,mm,in,pt,

pc，em,ex,px百分比letter-spacing字符間距可以用cm,mm,in,pt,

pc，em,ex,px7.2.4背景屬性CSS背景屬性和屬性功能見表7-3所示。

表7-3背景屬性和功能屬性功能屬性值background-color背景顏色RGB值background-image背景圖像URLbackground-repeat背景重復(fù)repeat-x背景圖片橫向重復(fù)、repeat-y背景圖片豎向重復(fù)、no-repeat背景圖片不重復(fù)background-attachment背景依附與background-image屬性結(jié)合使用，決定圖片是隨內(nèi)容滾動，還是固定不動。background-position背景位置與background-image屬性結(jié)合使用，用于圖片定位。background背景包括：background-color,background-image,background-repeat,backgroundattachment,background-position。7.2.5邊距屬性CSS定義邊距屬性和屬性功能如表7-4所示。

表7-4邊距屬性和功能屬性功能屬性值margin-left左邊距可以用cm,mm,in,pt,

pc,px百分比margin-right右邊距可以用cm,mm,in,pt,

pc,px百分比margin-top上邊距可以用cm,mm,in,pt,

pc,px百分比margin-bottom下邊距可以用cm,mm,in,pt,

pc,px百分比margin邊距可以用cm,mm,in,pt,

pc,px百分比7.2.6邊框?qū)傩訡SS定義邊框?qū)傩院蛯傩怨δ苋绫?-5所示。

表7-5邊框?qū)傩院凸δ軐傩怨δ軐傩灾礲order-style邊框風(fēng)格None、dotted、dashed、solid、double、groove、ridge、inset、outsetborder-width邊框?qū)挾萴edium、thin、thick長度單位cm,mm,in,pt,

pc，em,ex,

pxborder邊框包含：border-width,border-style和border-color7.3CSS定位CSS可以實現(xiàn)頁面對象的定位和浮動，CSS對頁面對象的定位是指頁面元素相對于父元素、其它元素或瀏覽器窗口的位置。CSS有三種基本的定位機(jī)制：普通文檔流、浮動和絕對定位。普通文檔流機(jī)制是指頁面中元素的位置由元素在HTML代碼中的位置決定，即按照元素先后順序來排定位置，是CSS的默認(rèn)定位機(jī)制。7.3CSS定位一、普通文檔流

HTML頁面中包含多種對象，每個對象為一個獨立的塊，整個頁面由相對獨立的塊元素構(gòu)成。普通文檔流定位中，塊元素的位置由元素在HTML頁面中的位置決定。塊元素從上到下依次顯示，塊與塊之間用頁邊距margin定義。7.3CSS定位二、定位

相對定位relative

相對定位是在普通文檔流定位基礎(chǔ)上，以原來在文檔流中的位置為起點進(jìn)行定位。移動后頁面元素所占區(qū)域包括文檔流定位區(qū)域和移動后區(qū)域。例如，#remove{top:20px;left:20px;position:relative;}，此樣式定義的頁面元素左邊距為20像素，上邊距為20像素。7.3CSS定位絕對定位absolute

CSS具有明顯的層次結(jié)構(gòu)，絕對定位就是相對已經(jīng)定位的最近祖先元素進(jìn)行定位的方式，如果沒有祖先元素，絕對定位相對于頁面畫布或HTML頁面定位。絕對定位不受普通文檔流的限制，可以在頁面上四個方向上移動，移動過程中可能覆蓋其它底層頁面元素，可以通過改變Z-Iindex屬性來控制頁面塊元素的疊放次序。7.3CSS定位固定定位fixed

固定定位是指頁面的塊元素相對于瀏覽器窗口定位，其余的特點與絕對定位相似。7.3CSS定位默認(rèn)定位static

position的默認(rèn)值，一般不設(shè)置position屬性時，會按照正常的文檔流進(jìn)行定位。7.3CSS定位三、浮動

浮動元素的邊框可以實現(xiàn)左右移動，當(dāng)元素的外邊框遇到其它元素外邊框時停止浮動。浮動元素的外邊框不受普通文檔流的約束。7.4Position屬性CSS使用position屬性實現(xiàn)定位，position的四個屬性值分別是：relative，absolute，fixed，static。7.4.1相對定位relative相對定位是相對于文檔流的位置進(jìn)行移位的定位方式。例如，定義inner_1的position屬性為relative時，產(chǎn)生的移位效果如圖7-3所示，inner_2的position屬性沒有定義，其位置不會因為inner_1的位置改變而改變，但其部分位置會被inner_1的對象覆蓋。圖7-3相對定位7.4.2絕對定位absolute絕對定位是指頁面對象相對于最近外層對象或父對象進(jìn)行定位。絕對定位根據(jù)外層對象定位分兩種情況：

當(dāng)inner_1的外層對象external設(shè)置了position屬性，并且position的屬性值為absolute或者relative時，此時inner_1相對于外層對象external進(jìn)行定位，即inner_1移動的參照物是外層對象。如果external設(shè)定了margin，border，padding等屬性，inner_1將以external的padding開始的位置作為定位起點，即padding的左上角作為定位起點。7.4.3固定定位fixed

可以將CSS固定定位看作是一種特殊的absolute定位，即fixed定位是以body作為定位參照物，即以瀏覽器的窗口為起始點進(jìn)行定位。程序【例7-5】實現(xiàn)CSS屬性position的固定定位，如圖7-5所示，是在Opera瀏覽器中測試的效果。7.5Float屬性CSS通過float屬性來定義頁面對象的浮動效果，網(wǎng)頁中的浮動對象與周圍文字相對獨立，文字可以圍繞浮動對象顯示。浮動對象仍然是文檔流的一部分，與position屬性的相對定位類似。float屬性主要屬性值包括：none表示對象不浮動，left表示對象浮動到左邊，right表示對象浮動到右邊。7.5Float屬性用float屬性定義的頁面對象，浮動范圍會隨著瀏覽器的大小和分辨率的變化而改變，而用position屬性定義的對象不會隨瀏覽器大小變化，因此，float屬性布局比position布局更為靈活一些，div布局主要使用float屬性實現(xiàn)。7.5Float屬性CSS中將頁面標(biāo)簽分為塊級元素和行級元素，塊級元素可以顯示在頁面的任何位置，以塊為單位，行級元素受行的約束，顯示在一行中，多個行級元素可以顯示在一行中。例如，常用標(biāo)簽<P>、<DIV>、<H1>屬于塊級標(biāo)簽，常用標(biāo)簽<A>、<BR>、<IMG>屬于行級標(biāo)簽。7.5Float屬性塊級元素總是從新的一行開始，大小和邊距都可以調(diào)整，默認(rèn)寬度是占其父級對象的100%，也可以約束寬度。行級元素和塊級元素可以相互轉(zhuǎn)換，如果需要一個行級元素從新行開始，可以將其轉(zhuǎn)換為塊級元素，即設(shè)置display=block；如果希望塊級元素與其它元素顯示在一行中，可以將其轉(zhuǎn)換為行級元素，即設(shè)置display=inline。7.5Float屬性CSS樣式表中float屬性可以對行級標(biāo)簽的位置屬性

溫馨提示

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

評論

0/150

提交評論