前端技術(shù)課件

1、第第11章章 CSS樣式表基礎(chǔ)樣式表基礎(chǔ) 11.1 CSS的概述的概述 11.2 CSS的使用的使用 11.3 插入插入CSS樣式表樣式表 11.4 編寫編寫CSS文件文件 HTML/CSS/JavaScript 標(biāo)準(zhǔn)教程實(shí)例版（第4版） 11.1 CSS的概述的概述 1 什么是什么是CSS？ 2 為什么要在網(wǎng)頁中加入為什么要在網(wǎng)頁中加入CSS？ 答案在課本答案在課本P.132-133 HTML/CSS/JavaScript 標(biāo)準(zhǔn)教程實(shí)例版（第4版） 第 章 11 11.1 CSS的概述的概述 11.1.1 CSS基本概念基本概念 11.1.2 CSS的特性的特性 HTML/CSS/JavaS

2、cript 標(biāo)準(zhǔn)教程實(shí)例版（第4版） 第 章 11 11.1 CSS的概述的概述 概述CSS的作用 內(nèi)容和樣式的分離，使得網(wǎng)頁設(shè)計(jì)趨于明了、簡潔。 彌補(bǔ)HTML對(duì)標(biāo)記屬性控制的不足，如：背景圖像重復(fù)的控制和標(biāo)題大 小的控制等。在HTML中可控制的標(biāo)題僅有7級(jí)，即h1h7，而利用 CSS可以任意設(shè)置標(biāo)題大小。 精確控制網(wǎng)頁布局，如行間距、字間距、段落縮進(jìn)和圖片定位等屬性。 提高網(wǎng)頁效率，因?yàn)槎鄠€(gè)網(wǎng)頁同時(shí)應(yīng)用一個(gè)CSS樣式，即減少了代碼的 下載，又提高了瀏覽器的瀏覽速度和網(wǎng)頁的更新速度。如圖11-1中的網(wǎng) 頁，內(nèi)容已定，如果CSS樣式不滿意，可以隨便修改，絲毫不會(huì)對(duì)內(nèi)容 有影響，而且這個(gè)CSS樣式

3、，也可以同時(shí)用到多個(gè)網(wǎng)頁內(nèi)容上。 CSS還有好多特殊功能，如鼠標(biāo)指針屬性控制鼠標(biāo)的形狀和濾鏡屬性控 制圖片的特效等。 HTML/CSS/JavaScript 標(biāo)準(zhǔn)教程實(shí)例版（第4版） 第 章 11 11.1.1 CSS基本概念基本概念 CSS（Cascading Style Sheet）即層疊樣式表，簡 稱樣式表。要理解層疊樣式表的概念先要理解樣式的概 念。樣式就是對(duì)網(wǎng)頁中的元素（字體、段落、圖像、列 表等）屬性的整體概括，即描述所有網(wǎng)頁對(duì)象的顯示形 式（例如，文字的大小、字體、背景及圖像的顏色、大 小等都是樣式）。層疊，就是指當(dāng)HTML文件引用多個(gè) CSS文件時(shí)，如果CSS文件之間所定義的樣

4、式發(fā)生了 沖突，將依據(jù)層次的先后來處理其樣式對(duì)內(nèi)容的控制。 HTML/CSS/JavaScript 標(biāo)準(zhǔn)教程實(shí)例版（第4版） 第 章 11 11.1.2 CSS的特性的特性 1繼承性繼承性 2層疊性層疊性 HTML/CSS/JavaScript 標(biāo)準(zhǔn)教程實(shí)例版（第4版） 第 章 11 11.2 CSS的使用的使用 11.2.1 CSS的基本語法的基本語法 11.2.2 CSS選擇符類型選擇符類型 11.2.3 選擇符的優(yōu)先級(jí)選擇符的優(yōu)先級(jí) HTML/CSS/JavaScript 標(biāo)準(zhǔn)教程實(shí)例版（第4版） 第 章 11 11.2.1 CSS的基本語法的基本語法 CSS基本語法 selector

5、property: value; property: value property: value 選擇符 屬性: 屬性值; 屬性: 屬性值 屬 性: 屬性值 p text-align:center; color:red; font-family:黑體 HTML/CSS/JavaScript 標(biāo)準(zhǔn)教程實(shí)例版（第4版） 第 章 11 11.2.1 CSS的基本語法的基本語法 語法說明 HTML/CSS/JavaScript 標(biāo)準(zhǔn)教程實(shí)例版（第4版） 第 章 11 11.2.1 CSS的基本語法的基本語法 語法說明 HTML/CSS/JavaScript 標(biāo)準(zhǔn)教程實(shí)例版（第4版） 第 章 11 11

6、.2.1 CSS的基本語法的基本語法 語法說明 HTML/CSS/JavaScript 標(biāo)準(zhǔn)教程實(shí)例版（第4版） 第 章 11 11.2.2 CSS選擇符類型選擇符類型 1類選擇符類選擇符 用類選擇符可以把相同的元素分類定義成 不同的樣式。在定義類選擇符時(shí)，在自定義 類名稱的前面加一個(gè)句點(diǎn)（.）。 類選擇符語法：標(biāo)記名.類名樣式屬性:取 值;樣式屬性:取值; HTML/CSS/JavaScript 標(biāo)準(zhǔn)教程實(shí)例版（第4版） 第 章 11 11.2.2 類類選擇符選擇符 這是我的段落1 這是我的段落2 HTML/CSS/JavaScript 標(biāo)準(zhǔn)教程實(shí)例版（第4版） 第 章 11 11.2.2

7、id選擇符選擇符 2id選擇符選擇符 在HTML文檔中，需要唯一標(biāo)識(shí)一個(gè)元素時(shí)，就會(huì) 賦予它一個(gè)id標(biāo)識(shí)，以便在對(duì)整個(gè)文檔進(jìn)行處理時(shí)能 夠很快地找到這個(gè)元素。而id選擇符就是用來對(duì)這個(gè) 單一元素定義單獨(dú)的樣式。其定義方法與類選擇符大 同小異，只需要把句點(diǎn)（.）改為井號(hào)（#），而調(diào)用 時(shí)需要把class改為id。 id選擇符語法：標(biāo)記名#標(biāo)識(shí)名樣式屬性:取值; 樣式屬性:取值; HTML/CSS/JavaScript 標(biāo)準(zhǔn)教程實(shí)例版（第4版） 第 章 11 11.2.2 id選擇符選擇符 剛才的代碼應(yīng)該如何改？剛才的代碼應(yīng)該如何改？ HTML/CSS/JavaScript 標(biāo)準(zhǔn)教程實(shí)例版（第4版

8、） 第 章 11 11.2.2 id選擇符選擇符 這是我的段落1 這是我的段落2 HTML/CSS/JavaScript 標(biāo)準(zhǔn)教程實(shí)例版（第4版） 第 章 11 11.2.3 選擇符的優(yōu)先級(jí)選擇符的優(yōu)先級(jí) 在應(yīng)用選擇符的過程中，可能會(huì)遇到同一個(gè)元素由 不同選擇符定義的情況，這時(shí)候就要考慮到選擇符的 優(yōu)先級(jí)。通常我們使用的選擇符包括id選擇符，類選 擇符。因?yàn)橐驗(yàn)閕d選擇符是最后被加到元素上的，所以優(yōu)選擇符是最后被加到元素上的，所以優(yōu) 先級(jí)最高，其次是類選擇符。先級(jí)最高，其次是類選擇符。!important語法主要用 來提升樣式規(guī)則的應(yīng)用優(yōu)先級(jí)。 HTML/CSS/JavaScript 標(biāo)準(zhǔn)教程

9、實(shí)例版（第4版） 第 章 11 11.3 插入插入CSS樣式表樣式表 11.3.1 鏈入外部樣式表鏈入外部樣式表 11.3.2 內(nèi)部樣式表內(nèi)部樣式表 11.3.3 嵌入樣式表嵌入樣式表 11.3.4 導(dǎo)入外部樣式表導(dǎo)入外部樣式表 HTML/CSS/JavaScript 標(biāo)準(zhǔn)教程實(shí)例版（第4版） 第 章 11 11.3.1 鏈入外部樣式表鏈入外部樣式表 基本語法：基本語法： HTML/CSS/JavaScript 標(biāo)準(zhǔn)教程實(shí)例版（第4版） 第 章 11 11.3.1 鏈入外部樣式表鏈入外部樣式表 語法說明語法說明 rel=stylesheet是指在HTML文件中使用的是外部樣式表。 type=t

10、ext/css指明該文件的類型是樣式表文件。 href=URL ，可以為絕對(duì)地址或相對(duì)地址。 外部樣式表文件中不能含有任何HTML標(biāo)簽，如或 等。 CSS文件要和HTML文件一起發(fā)布到服務(wù)器上，這樣在用瀏覽器 打開網(wǎng)頁時(shí)，瀏覽器會(huì)按照該HTML網(wǎng)頁所鏈接的外部樣式表來 顯示其風(fēng)格。 HTML/CSS/JavaScript 標(biāo)準(zhǔn)教程實(shí)例版（第4版） 第 章 11 11.3.1 鏈入外部樣式表鏈入外部樣式表 特點(diǎn)特點(diǎn) 一個(gè)外部樣式表文件可以應(yīng)用于多個(gè)HTML文件。當(dāng) 改變這個(gè)樣式表文件時(shí)，所有網(wǎng)頁的樣式都隨之改變。 因此常用在制作大量相同樣式的網(wǎng)頁中，因?yàn)槭褂眠@種 方法不僅能減少重復(fù)工作量，而且方

11、便以后的修改和編 輯，有利于站點(diǎn)的維護(hù)。同時(shí)在瀏覽網(wǎng)頁時(shí)一次性將樣 式表文件下載，減少了代碼的重復(fù)下載。 HTML/CSS/JavaScript 標(biāo)準(zhǔn)教程實(shí)例版（第4版） 第 章 11 11.3.1 鏈入外部樣式表鏈入外部樣式表 推薦使用推薦使用link來引用外部的來引用外部的css，原因?yàn)椋海驗(yàn)椋?1、引用外部css文件，將使得html頁面的源代碼比起直接加入css樣式少很多 ，因?yàn)樗阉饕嬷┲肱佬芯W(wǎng)頁的時(shí)候是不爬行css文件的，這樣使得html源代 碼很少，使得蜘蛛爬行更快，增大了此網(wǎng)頁的權(quán)重，有利于排名。 2、瀏覽器下載網(wǎng)頁時(shí)候更快。用戶瀏覽此網(wǎng)頁的時(shí)候html源代碼和css文件 同

12、時(shí)下載，使得更加快速。 3、修改網(wǎng)頁的樣式方便，只需修改css文件即可修改網(wǎng)頁的樣式，如果在網(wǎng) 站項(xiàng)目中用此方法，因整站應(yīng)用了共用的css基本樣式，這樣修改整站風(fēng)格樣 式更加快捷方便。 HTML/CSS/JavaScript 標(biāo)準(zhǔn)教程實(shí)例版（第4版） 第 章 11 11.3.2 內(nèi)部樣式表內(nèi)部樣式表 基本語法基本語法 HTML/CSS/JavaScript 標(biāo)準(zhǔn)教程實(shí)例版（第4版） 第 章 11 11.3.2 內(nèi)部樣式表內(nèi)部樣式表 語法說明語法說明 標(biāo)記用來說明所要定義的樣式。 type=text/css說明這是一段CSS樣式代碼。 標(biāo)記的加入是為了防止一些不支持CSS的瀏覽器， 將與之間的C

13、SS代碼當(dāng)成普通的字符串顯示 在網(wǎng)頁中。 選擇符也就是樣式的名稱，這里的選擇符可以選用HTML標(biāo) 記的所有名稱。 HTML/CSS/JavaScript 標(biāo)準(zhǔn)教程實(shí)例版（第4版） 第 章 11 11.3.2 內(nèi)部樣式表內(nèi)部樣式表 特點(diǎn) 內(nèi)部樣式表方法就是將所有的樣式表信息 都列于HTML文件的頭部，因此這些樣式可 以在整個(gè)HTML文件中調(diào)用。如果想對(duì)網(wǎng)頁 一次性加入樣式表，即可選用該方法。 HTML/CSS/JavaScript 標(biāo)準(zhǔn)教程實(shí)例版（第4版） 第 章 11 11.3.3 嵌入樣式表嵌入樣式表 基本語法基本語法 HTML/CSS/JavaScript 標(biāo)準(zhǔn)教程實(shí)例版（第4版） 第 章

14、 11 11.3.3 嵌入樣式表嵌入樣式表 語法說明語法說明 HTML標(biāo)記就是頁面中標(biāo)記HTML元素的標(biāo) 記，例如body、p等。 style參數(shù)后面引號(hào)中的內(nèi)容就相當(dāng)于樣式 表大括號(hào)里的內(nèi)容。需要指出的是，style參數(shù)可 以應(yīng)用于HTML文件中的body標(biāo)記，以及除了 basefont、param和script之外的任意元素。 HTML/CSS/JavaScript 標(biāo)準(zhǔn)教程實(shí)例版（第4版） 第 章 11 11.3.3 嵌入樣式表嵌入樣式表 特點(diǎn) 利用這種方法定義的樣式，其效果只能 控制某個(gè)標(biāo)記。所以比較適用于指定網(wǎng)頁 中某小段文字的顯示風(fēng)格，或某個(gè)元素的 樣式。 HTML/CSS/Jav

15、aScript 標(biāo)準(zhǔn)教程實(shí)例版（第4版） 第 章 11 11.3.4 導(dǎo)入外部樣式表導(dǎo)入外部樣式表 基本語法基本語法 import url(外部樣式表文件地址); HTML/CSS/JavaScript 標(biāo)準(zhǔn)教程實(shí)例版（第4版） 第 章 11 11.3.4 導(dǎo)入外部樣式表導(dǎo)入外部樣式表 語法說明語法說明 import語句后面的“;”是不可省略的。 外部樣式表文件的文件擴(kuò)展名必須為.css。 樣式表地址可以是絕對(duì)地址，也可以是相對(duì) 地址。 HTML/CSS/JavaScript 標(biāo)準(zhǔn)教程實(shí)例版（第4版） 第 章 11 11.3.4 導(dǎo)入外部樣式表導(dǎo)入外部樣式表 特點(diǎn) 在使用中，某些瀏覽器可能會(huì)不

16、支持 導(dǎo)入外部樣式表的import聲明。所以 此方法不經(jīng)常用到。 HTML/CSS/JavaScript 標(biāo)準(zhǔn)教程實(shí)例版（第4版） 第 章 11 11.4 編寫編寫CSS文件文件 11.4.1 編寫頭部的CSS 11.4.2 編寫主體的CSS 11.4.3 編寫外部的CSS HTML/CSS/JavaScript 標(biāo)準(zhǔn)教程實(shí)例版（第4版） 第 章 11 11.4.1 編寫頭部的編寫頭部的CSS 這是我的段落1 課堂演示課堂演示 HTML/CSS/JavaScript 標(biāo)準(zhǔn)教程實(shí)例版（第4版） 第 章 11 11.4.2 編寫主體的編寫主體的CSS 這是我的段落1 課堂演示課堂演示 HTML/CSS/JavaScript 標(biāo)準(zhǔn)教程實(shí)例版（第4版） 第 章 11 11.4.3 編寫外部的編寫外部的CSS 1應(yīng)用鏈入外部樣式表方法在應(yīng)用鏈入外部樣式表方法在HTML文件內(nèi)調(diào)用外部定義的文件內(nèi)調(diào)用外部定義的CSS文件文件 css文件,命名為temp.css: 課堂演示課堂演示 HTML/CSS/JavaScript 標(biāo)準(zhǔn)教程實(shí)例版（第4版） 第 章 11 11.4.3 編寫外部的編寫外部的CSS 1應(yīng)用鏈