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