第十章 CSS基礎(chǔ).ppt

第十章CSS基礎(chǔ) 本章內(nèi)容 10 1CSS簡(jiǎn)介10 2引入CSS方法10 3基本CSS選擇器10 4復(fù)合選擇器10 5其他選擇器10 6CSS繼承與層疊特性 10 1CSS簡(jiǎn)介 文檔結(jié)構(gòu)與圖片顯示的混合排列一直是HTML語言的一大缺陷 導(dǎo)致這一問題存在的原因之一是不同瀏覽器之間的不兼容性 為了讓網(wǎng)頁在各種平臺(tái)上都能夠正常顯示 人們需要一種新的規(guī)范 將顯示描述徹底獨(dú)立于文檔的結(jié)構(gòu) 即內(nèi)容結(jié)構(gòu)和格式控制相分離 為了響應(yīng)這個(gè)快速增長(zhǎng)的需求 W3C開始為HTML制定樣式表機(jī)制 也就是CSS 1996年12月17日 W3C標(biāo)準(zhǔn)化組織推出了CSS1 CascadingStyleSheetsLevel1 規(guī)范 立刻得到了微軟與網(wǎng)景公司的支持 CSS概念 CSS是CascadingStyleSheet的縮寫 翻譯成中文是層疊樣式表 有時(shí)簡(jiǎn)稱樣式表 它是控制網(wǎng)頁樣式并允許將樣式信息與網(wǎng)頁內(nèi)容分離的一種標(biāo)記性語言 內(nèi)容結(jié)構(gòu)和格式控制相分離 便于統(tǒng)一設(shè)計(jì)與管理頁面 CSS功能 彌補(bǔ)HTML對(duì)網(wǎng)頁格式化功能的不足 比如段落間距 行距等 字體變化和大小 頁面格式的動(dòng)態(tài)更新 排版定位 CSS優(yōu)點(diǎn) 除了對(duì)訪問者看到的文檔提供更多的控制外 CSS比起填寫格式標(biāo)志的方法來說 能更好地管理HTML文檔 將這些標(biāo)志放在CSS中時(shí) 文檔會(huì)更加整潔 CSS還可以減少開發(fā)和維護(hù)HTML文檔所用的時(shí)間 與手工格式化的文本段落相比 用戶可以只改變樣式當(dāng)中的樣式定義 這個(gè)定義就會(huì)作用在HTML文檔的各個(gè)地方 最后 CSS還提供了Web站點(diǎn)中文檔間的靈活性 即可以建立適用于站點(diǎn)中所有頁面的樣式表 也可以建立單個(gè)樣式表作用于某個(gè)HTML文檔 這個(gè)具體樣式表能覆蓋全局樣式表 另外 還可以進(jìn)一步調(diào)整各個(gè)樣式表以適應(yīng)特殊的文本樣式 例如 某個(gè)段落采用特殊的顏色 10 2引入CSS方法 在html中 引入css的方法主要4種 行內(nèi)式內(nèi)嵌式導(dǎo)入式鏈接式 行內(nèi)式 即在標(biāo)記的style屬性中設(shè)定css樣式 這種方式本質(zhì)上沒體現(xiàn)出css的優(yōu)勢(shì) 因此不推薦使用 style屬性規(guī)定元素的行內(nèi)樣式 inlinestyle style屬性將覆蓋任何全局的樣式設(shè)定 例如在標(biāo)簽或在外部樣式表中規(guī)定的樣式 基本語法 內(nèi)嵌式 在對(duì)頁面中各種元素的設(shè)置集中寫在和之間的 對(duì)于單個(gè)頁面來說 這種方式很方便 基本語法 語法解釋 選擇器 selector 通常是定義的HTML元素或標(biāo)簽 屬性 property 是定義改變的屬性 并且每個(gè)屬性都有一個(gè)值 屬性和值用冒號(hào)分開 并由花括號(hào)包圍 這樣就組成了一個(gè)完整的樣式聲明 declaration 優(yōu)缺點(diǎn) 優(yōu)點(diǎn) 速度快 所有的CSS控制都是針對(duì)本頁面標(biāo)簽的 沒有多余的 命令 再者不用外鏈 文件 直接在 文檔中讀取樣式 缺點(diǎn) 改版麻煩 單個(gè)頁面顯得臃腫 不能被其他 引用造成代碼量相對(duì)較多 維護(hù)也麻煩些 導(dǎo)入式 導(dǎo)入式格式如下 import mystyle css URL或 importurl mystyle css 語法解釋 后面的分號(hào) 一定要有 連接式 這種方法可以說是現(xiàn)在占統(tǒng)治地位的引入方法 如同瀏覽器中的IE 也是最能體現(xiàn)CSS特點(diǎn)的方法 最能體現(xiàn)DIV CSS中的內(nèi)容與顯示分離的思想 也最易改版維護(hù) 代碼看起來也是最美觀的一種 基本語法 導(dǎo)入式與連接式比較 1 連接式 會(huì)在裝載頁面主體部分之前裝載css文件 這樣顯示出來的網(wǎng)頁從一開始就是帶有樣式效果的 2 導(dǎo)入式 會(huì)在整個(gè)頁面裝載完成后再裝載CSS文件 對(duì)于有的瀏覽器來說 在一些情況下 如果網(wǎng)頁文件的體積比較大 則會(huì)出現(xiàn)先顯示無樣式的頁面 閃爍一下之后再出現(xiàn)設(shè)置樣式后的效果 從瀏覽者的感受來說 這是導(dǎo)入式的一個(gè)缺陷 3 建議 如果僅需要引入一個(gè)CSS文件 則使用連接方式 如果需要引入多個(gè)CSS文件 則首先用連接方式引入一個(gè) 目錄 CSS文件 這個(gè) 目錄 CSS文件中再使用導(dǎo)入式引入其他CSS文件 10 3基本CSS選擇器 10 3 1標(biāo)簽選擇器10 3 2類選擇器10 3 3ID選擇器 10 3 1標(biāo)簽選擇器 定義樣式 html標(biāo)簽名 property1 value1 property2 value2 實(shí)例 p color FF0000 font size 25px 10 3 2類選擇器 定義樣式 類名 property1 value1 property2 value2 套用類選擇器的樣式 網(wǎng)頁內(nèi)容注意 同值class屬性可以在每個(gè)HTML文檔中出現(xiàn)多次 10 3 3ID選擇器 定義樣式 ID名 property1 value1 property2 value2 套用ID選擇器的常用格式 網(wǎng)頁內(nèi)容注意 同值id屬性只能在每個(gè)HTML文檔中出現(xiàn)一次 10 4復(fù)合選擇器 10 4 1 并集 選擇器 分組選擇器 10 4 2 交集 選擇器 派生選擇器 10 4 3 后代 選擇器 派生選擇器 10 4 1 并集 選擇器 分組選擇器 將同樣的定義應(yīng)用于多個(gè)選擇符 可以將選擇符以逗號(hào)分隔的方式合并為組 語法格式 標(biāo)簽名 ID名 類名 property1 value1 property2 value2 實(shí)例p div a font size 12px 10 4 2 交集 選擇器 派生選擇器 交集 復(fù)合選擇器由兩個(gè)選擇器直接鏈接構(gòu)成 其結(jié)果是選中二者各自元素范圍的交集 其中第一個(gè)必須是標(biāo)記選擇器 第二個(gè)必須是類選擇器或者ID選擇器 兩個(gè)選擇器之間不能有空格 必須連續(xù)書寫 語法格式 標(biāo)簽選擇器 ID名或 類名 property1 value1 property2 value2 實(shí)例ul red font size 12px color FF0000 10 4 3 后代 選擇器 派生選擇器 由兩個(gè)或多個(gè)類型選擇符組成 并以空白相分隔 語法格式 Name1Name2 property1 value1 property2 value2 實(shí)例 oneli font size 12px 10 5其他選擇器 10 5 1通用選擇器10 5 2偽類選擇器10 5 2偽元素選擇器 10 5 1通用選擇器 是針對(duì)整個(gè)頁面所有內(nèi)容的選擇器 基本語法 property1 value1 property2 value2 10 5 2偽類選擇器 之所以稱之為偽類 是因?yàn)樗鼈冎付ǖ膶?duì)象在文檔中并不存在 它們指定的是元素的某種狀態(tài) 基本語法 標(biāo)簽名 元素名 property1 value1 property2 value2 a link 未訪問的鏈接樣式a visited 已訪問的鏈接樣式a hover 鼠標(biāo)指上時(shí)的樣式a active 活動(dòng)鏈接的樣式 偽類屬性表 綜合應(yīng)用 10 5 2偽元素選擇器 偽元素同偽類的情況類似 也是對(duì)文檔中虛構(gòu)的元素進(jìn)行定義 基本語法 標(biāo)簽名 元素名 property1 value1 property2 value2 偽元素屬性表 10 6CSS繼承與層疊特性 CSS繼承 指子標(biāo)簽會(huì)繼承父標(biāo)簽的所有樣式風(fēng)格 并可以在父標(biāo)簽樣式風(fēng)格的基礎(chǔ)上再次進(jìn)行修改 產(chǎn)生新的樣式 而子標(biāo)簽的樣式風(fēng)格完全不會(huì)影響父標(biāo)簽 層疊 指在同一個(gè)WEB文檔中可以有多個(gè)樣式表存在 當(dāng)擁有相同特殊性的規(guī)則應(yīng)用在同一個(gè)元素時(shí) 根據(jù)這些規(guī)則的先后順序 來決定其權(quán)重 CSS樣式層疊時(shí)的優(yōu)先級(jí) 內(nèi)嵌樣式 ID選擇器 class選擇器 標(biāo)記選擇器 內(nèi)層樣式表 外層樣式表 外部樣式表 越特殊的樣式 優(yōu)先級(jí)越高 當(dāng)優(yōu)先級(jí)相同時(shí) 以后者為準(zhǔn) 就近原則 CSS注釋 語法格式 注釋內(nèi)容 注釋符 不能交叉 且不能沒有結(jié)束符 本章總結(jié) 10 1CSS簡(jiǎn)介10 2引入CSS方法10 3基本