《HTML5+CSS3網(wǎng)頁(yè)制作教程》課件-第9章_第1頁(yè)
《HTML5+CSS3網(wǎng)頁(yè)制作教程》課件-第9章_第2頁(yè)
《HTML5+CSS3網(wǎng)頁(yè)制作教程》課件-第9章_第3頁(yè)
《HTML5+CSS3網(wǎng)頁(yè)制作教程》課件-第9章_第4頁(yè)
《HTML5+CSS3網(wǎng)頁(yè)制作教程》課件-第9章_第5頁(yè)
已閱讀5頁(yè)，還剩26頁(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)介

模塊9初識(shí)CSS9.1CSS簡(jiǎn)介9.2CSS基本語(yǔ)法9.3CSS的引入方式9.4案例：外部樣式表的引用思考與練習(xí)題

9.1CSS簡(jiǎn)介

9.1.1?CSS概念CSS的全稱(chēng)是“CascadingStyleSheets”，即層疊樣式表，它通過(guò)定義HTML元素的顯示方式來(lái)控制網(wǎng)頁(yè)的外觀(guān)。Web前端的三個(gè)核心技術(shù)分別是HTML、CSS和JavaScript，HTML定義了網(wǎng)頁(yè)的結(jié)構(gòu)，CSS控制網(wǎng)頁(yè)的外觀(guān)樣式，JavaScript控制網(wǎng)頁(yè)的行為。

9.1.2?CSS的發(fā)展

CSS最早是在1994年被提出的。

1996年，W3C正式推出了CSS1.0。

1998年，W3C正式推出了CSS2.0，以及之后的修訂版CSS2.1，是目前正在使用的版本。

2001年，W3C完成了CSS3工作草案，到目前為止該標(biāo)準(zhǔn)還沒(méi)有最終定稿，但是，現(xiàn)在新的瀏覽器已經(jīng)都支持CSS3屬性。CSS3新增的特性可以說(shuō)是最令人矚目的，包括新的屬性選擇器、偽類(lèi)選擇器；圓角、陰影、漸變等特殊樣式；過(guò)渡、變形、動(dòng)畫(huà)等動(dòng)態(tài)效果；新的布局方式，如多列布局、彈性盒布局和網(wǎng)格布局等。

9.2CSS基本語(yǔ)法

9.2.1?CSS語(yǔ)法規(guī)則任何語(yǔ)言都有自己的規(guī)范，CSS也不例外。CSS的語(yǔ)法格式如下：

【例9-1】CSS樣式示例。

上述代碼在瀏覽器中的預(yù)覽效果如圖9-1所示。

圖9-1CSS應(yīng)用示例

9.2.2?CSS注釋

和其他語(yǔ)言一樣，CSS也有注釋。合理的注釋有助于我們理解代碼，對(duì)后期的修改、編輯很有幫助。

CSS注釋的語(yǔ)法如下：

/*注釋的內(nèi)容*/

說(shuō)明：“/*”表示注釋的開(kāi)始，“*/”表示注釋的結(jié)束。CSS的注釋和HTML的注釋方式是不同的，大家可以查看前面章節(jié)來(lái)復(fù)習(xí)HTML是如何注釋的。

【例9-2】CSS注釋的應(yīng)用。

9.3CSS的引入方式

9.3.1?行內(nèi)樣式行內(nèi)樣式(也稱(chēng)內(nèi)聯(lián)樣式)，是通過(guò)HTML標(biāo)簽的style屬性來(lái)設(shè)置元素的樣式的，可用于為單個(gè)元素應(yīng)用專(zhuān)屬的樣式。

【例9-3】行內(nèi)樣式的應(yīng)用。

需要說(shuō)明的是，由于行內(nèi)樣式是定義在標(biāo)簽內(nèi)部的，不能做到HTML代碼和CSS樣式的分離，所以不推薦作為常規(guī)樣式使用。只有在個(gè)別標(biāo)簽需要應(yīng)用獨(dú)特樣式時(shí)，使用行

內(nèi)樣式才是比較合適的選擇。

9.3.2?內(nèi)部樣式

內(nèi)部樣式是指將CSS代碼集中寫(xiě)在HTML文檔的<head>頭部標(biāo)簽內(nèi)部，并且用<style>標(biāo)簽定義。

【例9-4】?jī)?nèi)部樣式的應(yīng)用。

內(nèi)部樣式不像行內(nèi)樣式CSS代碼那樣和HTML代碼交織在一起，而是集中在一處，所以它在一定程度上做到了結(jié)構(gòu)和樣式的分離，但它仍然不是引用CSS樣式的最優(yōu)選擇，

一般只有當(dāng)HTML頁(yè)面擁有唯一的樣式時(shí)，即其他頁(yè)面不會(huì)使用相同樣式時(shí)，才推薦使用內(nèi)部樣式。

9.3.3?外部樣式

外部樣式就是把CSS代碼放在一個(gè)以.css為擴(kuò)展名的文件中，然后在HTML文檔中使用<link>鏈接標(biāo)簽來(lái)引入外部樣式表文件。

【例9-5】外部樣式的應(yīng)用。

注意：外部.css文件中不可包含任何HTML標(biāo)簽。在HTML中引入外部CSS文件使用的<link>鏈接標(biāo)簽需要放在<head>頭部標(biāo)簽內(nèi)部，并且必須指定<link>標(biāo)簽的三個(gè)屬性，具體如下：

(1)href：指定引入的外部樣式表文件的URL，可以是相對(duì)路徑，也可以是絕對(duì)路徑。

(2)rel：定義當(dāng)前HTML文檔與被引入文件之間的關(guān)系，在這里需要指定“stylesheet”，表示被引入的文件是一個(gè)樣式表文件。

(3)type：定義所引入文檔的類(lèi)型，在這里需要指定為“text/css”，表示引入的外部文件為CSS樣式表。

當(dāng)CSS樣式需要應(yīng)用于很多頁(yè)面時(shí)，外部樣式表將是理想的選擇。站點(diǎn)中的每個(gè)頁(yè)面使用<link>標(biāo)簽鏈接到同一個(gè)樣式表，這樣既節(jié)省了代碼，而且當(dāng)需要改變整個(gè)站點(diǎn)

的外觀(guān)時(shí)，只需要改變一個(gè)CSS文件即可。所以，在實(shí)際開(kāi)發(fā)中，為了提升網(wǎng)站的性能和可維護(hù)性，推薦使用外部樣式表。

9.4案例：外部樣式表的引用

【案例描述】有一個(gè)網(wǎng)頁(yè)，使用的是內(nèi)部樣式，現(xiàn)要將內(nèi)部樣式更改為外部樣式，如何操作？案例源文件參考“模塊9案例”?！究己酥R(shí)點(diǎn)】CSS基本語(yǔ)法、CSS的三種引入方式。

【練習(xí)目標(biāo)】

(1)熟悉CSS基本語(yǔ)法。

(2)掌握內(nèi)部CSS樣式的定義方法。

(3)掌握外部CSS樣式的定義方法。

【案例源代碼】

【運(yùn)行結(jié)果】

上述代碼在瀏覽器中的運(yùn)行結(jié)果如圖9-2所示。

圖9-2案例運(yùn)行結(jié)果

【案例分析】

內(nèi)部樣式是將CSS代碼定義在HTML文檔的頭部標(biāo)簽<head>內(nèi)部，使用<style>標(biāo)簽標(biāo)識(shí)。若要改為外部樣式，需要將<style>標(biāo)簽內(nèi)的CSS代碼保存在獨(dú)立的.css文件中，并且在HTML文件中改用<link>標(biāo)簽鏈接該CSS文件。

思考與練習(xí)題

一、選擇題1.代碼“<pstyle="font-size:14px;">”使用的CSS樣式引用方式是()。A.行內(nèi)樣式

B.內(nèi)部樣式C.鏈接外部樣式文件

D.以上都不是2.內(nèi)部樣式需要將CSS代碼放在()標(biāo)簽對(duì)內(nèi)。A.<meta></meta>

B.<style></style>C.<title></title>

D.<body></body>

3.鏈接外部樣式需要使用的標(biāo)簽是()。

A.<meta>

B.<style>

C.<title>

D.<link>

二、填空題

1.CSS的中文全稱(chēng)是

。

2.Web前端的三個(gè)核心技術(shù)分別是

、

和

。

3.在HTML中引入CSS共有三種方式，分別是

、

和

。

三、判斷題

1.目前CSS的最新版本是CSS5。()

2.

溫馨提示

  • 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)論