Web前端開發(fā)第7章：初識CSS31本章主要內(nèi)容CSS3概述CSS3功能在HTML中使用CSS案例：基于終端設(shè)備選擇不同樣式案例：基于瀏覽器選擇不同樣式21.CSS3概述CSS（CascadingStyleSheets），譯作“層疊樣式表”，是用于控制或增強網(wǎng)頁樣式并允許將樣式信息與網(wǎng)頁內(nèi)容分離的一種標(biāo)記性語言。使用CSS樣式可以控制許多僅使用HTML無法控制的屬性。當(dāng)在瀏覽器中打開一個HTML網(wǎng)頁時，瀏覽器將讀取該網(wǎng)頁中的HTML標(biāo)簽，并根據(jù)內(nèi)置的解析規(guī)則將網(wǎng)頁元素呈現(xiàn)出來。CSS決定瀏覽器將如何描述HTML元素的表現(xiàn)形式。31.1什么是CSS1.CSS3概述CSS的發(fā)展歷史經(jīng)過了四個階段:CSS1此版本中，已經(jīng)包含了font的相關(guān)屬性、顏色與背景的相關(guān)屬性、文字的相關(guān)屬性、box的相關(guān)屬性等。CSS2此版本中開始使用樣式表結(jié)構(gòu)。CSS2.1此版本在CSS2的基礎(chǔ)上略微做了改動，刪除了許多諸如text-shadow等不被瀏覽器所支持的屬性。CSS32010年逐步發(fā)布，具體情況參考：https:///Style/CSS。41.2CSS發(fā)展史1.CSS3概述CSS3的新功能：邊框特性多背景圖顏色與透明度多列布局與彈性盒模型布局盒子的變形過渡與動畫選擇器Web字體媒體查詢陰影51.3CSS3新特征1.CSS3概述CSS3的應(yīng)用范圍：所有主流桌面瀏覽器目前，InternetExplorer、Chrome、Firefox、Safari和Opera均支持各種CSS3功能。但是，只有瀏覽器的最新版本才能實際支持主要的CSS3功能。移動瀏覽器最新的智能手機操作系統(tǒng)均基本支持CSS3。包括IOS、Android、BlackBerry、WindowsPhone設(shè)備的默認(rèn)Web瀏覽器。實際上，移動瀏覽器具有一些CSS3功能的最佳支持能力。

注：并不是所有桌面和移動瀏覽器均以相同的方式支持所有的功能。61.3CSS3新特征1.CSS3概述CSS3Properties不同平臺不同瀏覽器對CSS3屬性的支持情況有所不同。71.4主流瀏覽器對CSS3的支持891.CSS3概述CSS3Selectors不用平臺不同瀏覽器對CSS3選擇器的支持情況也是不同的。101.4主流瀏覽器對CSS3的支持11121.CSS3概述隨著主流瀏覽器對CSS3支持到不斷增強，越來越多的互聯(lián)網(wǎng)公司開始在前端開發(fā)中加入CSS3來實現(xiàn)一些效果。比如，淘寶網(wǎng)首頁，使用CSS3圓角屬性，淘寶網(wǎng)排行榜首頁，使用了CSS3變形屬性，國外的一些互聯(lián)網(wǎng)公司更是在前端開發(fā)中引入了大量的CSS3效果。比如，國外比較流行的Twitter前端框架Bootstrap，該框架中使用的大量的CSS3效果，如CSS3動畫、陰影、圓角、選擇器、Web字體等。131.5誰在使用CSS32.CSS3功能CSS規(guī)范的前幾版完全包含了構(gòu)成CSS語言的元素的定義。在CSS3中，整個規(guī)范已經(jīng)被劃分為一組較短的規(guī)范，它們被稱為模塊（module）。CSS3中每個模塊為給定的功能子集方面提供定義。模塊方式允許CSS規(guī)范的某個特定部分能夠作為一個標(biāo)準(zhǔn)進(jìn)行審批和實施，這樣做的速度要快于將包含所有功能的大型規(guī)范作為一個標(biāo)準(zhǔn)進(jìn)行審批和實施的方式；而后面的方式無疑要花費更長的時間才能使得規(guī)范成為人們認(rèn)可的標(biāo)準(zhǔn)?？偠灾?，這意味著CSS3是一個不斷演化和完善的標(biāo)準(zhǔn)。142.1CSS3模塊1516172.CSS3功能使用CSS的優(yōu)勢：減少開發(fā)成本與維護(hù)成本提高頁面性能182.2使用CSS3的優(yōu)勢3.在HTML中使用CSS內(nèi)聯(lián)樣式是在元素屬性中設(shè)置樣式。此種方式很適合用于測試樣式和快速查看樣式效果，但是不推薦在整個文檔上使用此方法。在使用此方法時，必須在每一個元素上重復(fù)設(shè)置各個樣式，這樣既增加文檔大小，也增加文檔的更新和維護(hù)難度。例如，所有的<li>元素都設(shè)置了寬度大小，如果需要修改，就需要反復(fù)更改多處樣式定義內(nèi)容。193.1內(nèi)聯(lián)樣式20現(xiàn)場演示：案例7-01：在HTML中使用CSS的內(nèi)聯(lián)樣式3.在HTML中使用CSS嵌入樣式是通過在HTML文檔頭定義樣式單部分來實現(xiàn)的。通常不建議使用嵌入樣式，因為此方式必須在HTML文檔內(nèi)部定義樣式，如果此文檔的CSS樣式需要被其他HTML文檔使用，那么就必須重新定義。大量CSS嵌套在HTML文檔中，也會導(dǎo)致HTML文檔過大，造成網(wǎng)絡(luò)負(fù)擔(dān)過重。如果需要修改整站風(fēng)格時，必須對網(wǎng)站的每一個網(wǎng)頁進(jìn)行修改，不利于更新和管理。213.2嵌入樣式22現(xiàn)場演示：案例7-02：在HTML中使用CSS的嵌入樣式3.在HTML中使用CSS外部樣式是將所有樣式寫在一個外部文件中，在HTML文檔中使用<link>元素，將文件鏈接到需要設(shè)置樣式的文檔上。使用這種方法，只需要修改鏈接的文件，就可以完全改變網(wǎng)頁的整體風(fēng)格。此外，也可以使用這種方法修改或調(diào)整文檔，使之適應(yīng)不同環(huán)境或設(shè)備的顯示要求。233.3外部樣式24現(xiàn)場演示：案例7-03：在HTML中使用CSS的外部樣式3.在HTML中使用CSS隨著CSS的應(yīng)用重要性的增強，一個網(wǎng)站的CSS文件也就越來越多。如何規(guī)劃CSS文件的目錄和結(jié)構(gòu)，對于網(wǎng)站的性能有著重要的意義。常用