《HTML5+CSS3網(wǎng)頁制作教程》課件-第9章_第1頁
《HTML5+CSS3網(wǎng)頁制作教程》課件-第9章_第2頁
《HTML5+CSS3網(wǎng)頁制作教程》課件-第9章_第3頁
《HTML5+CSS3網(wǎng)頁制作教程》課件-第9章_第4頁
《HTML5+CSS3網(wǎng)頁制作教程》課件-第9章_第5頁
已閱讀5頁，還剩26頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡介

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

9.1CSS簡介

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

9.1.2?CSS的發(fā)展

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

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

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

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

9.2CSS基本語法

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

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

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

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

9.2.2?CSS注釋

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

CSS注釋的語法如下：

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

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

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

9.3CSS的引入方式

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

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

需要說明的是，由于行內(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代碼集中寫在HTML文檔的<head>頭部標(biāo)簽內(nèi)部，并且用<style>標(biāo)簽定義。

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

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

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

9.3.3?外部樣式

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

【例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：定義所引入文檔的類型，在這里需要指定為“text/css”，表示引入的外部文件為CSS樣式表。

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

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

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

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

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

(1)熟悉CSS基本語法。

(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的中文全稱是

。

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

、

和

。

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

、

和

。

三、判斷題

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

2.

溫馨提示

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

評(píng)論

0/150

提交評(píng)論