《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ù)免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

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

9.1CSS簡介

9.1.1?CSS概念CSS的全稱是“CascadingStyleSheets”，即層疊樣式表，它通過定義HTML元素的顯示方式來控制網(wǎng)頁的外觀。Web前端的三個核心技術分別是HTML、CSS和JavaScript，HTML定義了網(wǎng)頁的結構，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工作草案，到目前為止該標準還沒有最終定稿，但是，現(xiàn)在新的瀏覽器已經(jīng)都支持CSS3屬性。CSS3新增的特性可以說是最令人矚目的，包括新的屬性選擇器、偽類選擇器；圓角、陰影、漸變等特殊樣式；過渡、變形、動畫等動態(tài)效果；新的布局方式，如多列布局、彈性盒布局和網(wǎng)格布局等。

9.2CSS基本語法

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

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

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

圖9-1CSS應用示例

9.2.2?CSS注釋

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

CSS注釋的語法如下：

/*注釋的內容*/

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

【例9-2】CSS注釋的應用。

9.3CSS的引入方式

9.3.1?行內樣式行內樣式(也稱內聯(lián)樣式)，是通過HTML標簽的style屬性來設置元素的樣式的，可用于為單個元素應用專屬的樣式。

【例9-3】行內樣式的應用。

需要說明的是，由于行內樣式是定義在標簽內部的，不能做到HTML代碼和CSS樣式的分離，所以不推薦作為常規(guī)樣式使用。只有在個別標簽需要應用獨特樣式時，使用行

內樣式才是比較合適的選擇。

9.3.2?內部樣式

內部樣式是指將CSS代碼集中寫在HTML文檔的<head>頭部標簽內部，并且用<style>標簽定義。

【例9-4】內部樣式的應用。

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

一般只有當HTML頁面擁有唯一的樣式時，即其他頁面不會使用相同樣式時，才推薦使用內部樣式。

9.3.3?外部樣式

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

【例9-5】外部樣式的應用。

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

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

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

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

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

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

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

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

【練習目標】

(1)熟悉CSS基本語法。

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

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

【案例源代碼】

【運行結果】

上述代碼在瀏覽器中的運行結果如圖9-2所示。

圖9-2案例運行結果

【案例分析】

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

思考與練習題

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

B.內部樣式C.鏈接外部樣式文件

D.以上都不是2.內部樣式需要將CSS代碼放在()標簽對內。A.<meta></meta>

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

D.<body></body>

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

A.<meta>

B.<style>

C.<title>

D.<link>

二、填空題

1.CSS的中文全稱是

。

2.Web前端的三個核心技術分別是

、

和

。

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

、

和

。

三、判斷題

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

2.

溫馨提示

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

最新文檔

評論

0/150

提交評論