溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
HTML與CSS
樣式表的歷史科普
自從1990年代初HTML被發(fā)明，
作為HTML代碼輔助的樣式表，
就以各種形式出現(xiàn)；
最初，不同的瀏覽器結(jié)合了它們各自的樣式語言，
讀者可以使用這些樣式語言來調(diào)節(jié)網(wǎng)頁的顯示方式；
一開始樣式表是給讀者用的，
最初的HTML版本只含有很少的顯示屬性，
讀者來決定網(wǎng)頁應(yīng)該怎樣被顯示。
但隨著HTML的成長、為了滿足設(shè)計(jì)師的要求，
HTML獲得了很多特效顯示功能，
隨著這些功能的增加，
外來定義樣式的語言越來越?jīng)]有意義了。
1994年哈坤·利提出了CSS的最初的思路和建議，
即【Cascading Style Sheets】；
1995年伯特·波斯（Bert Bos）參與其中、
與哈坤合作設(shè)計(jì)CSS。
當(dāng)時已經(jīng)有過一些樣式表語言的思想，
但CSS是第一個含有“層疊”概念的；
在CSS中，
一個文件的樣式可以從其他的樣式表中繼承下來，
讀者在有些地方可以使用他自己更喜歡的樣式，
在其他地方則繼承或“層疊”作者的樣式,
這種層疊的方式使作者和讀者都可以靈活地加入自己的設(shè)計(jì)、
同時也可以保留或混合各自的偏好。
當(dāng)時W3C剛剛建立、對CSS的發(fā)展很感興趣，
甚至為此特地組織了一次討論會，
哈坤、波斯和其他一些人（比如微軟的托馬斯·雷爾登）
是這個項(xiàng)目的主要技術(shù)負(fù)責(zé)人。
1996年底12月CSS第一版本被出版。
1997年初，
W3C內(nèi)組織了由克里斯·里雷專門負(fù)責(zé)的CSS工作組，
開始討論第一版中沒有涉及到的問題，
其結(jié)果是1998年5月出版的第二版。
采用CSS+DIV進(jìn)行網(wǎng)頁重構(gòu)，
相對與傳統(tǒng)的TABLE網(wǎng)頁布局而具有以下3個顯著優(yōu)勢：
1.
表現(xiàn)和內(nèi)容相分離，
將設(shè)計(jì)部分剝離出來放在一個獨(dú)立樣式文件中，
HTML文件中只存放文本信息，
頁面內(nèi)容更易于被檢索（也即易于被搜索引擎抓取）；
2.
提高頁面瀏覽速度，
對于同一個頁面視覺效果，
采用CSS+DIV重構(gòu)的頁面，
容量要比TABLE編碼的頁面文件容量小得多，
從而減輕了瀏覽器的編譯負(fù)荷；
3.
易于維護(hù)和改版，
你只要簡單的修改幾個CSS內(nèi)的配置，
就可以重新設(shè)計(jì)整個網(wǎng)站的頁面。
附：一些通俗的概念解釋
【1】網(wǎng)址
現(xiàn)代網(wǎng)址通常指可供遠(yuǎn)程訪問的網(wǎng)站地址，
但是最初的“網(wǎng)址”僅僅是指某臺交換機(jī)或服務(wù)器在網(wǎng)絡(luò)中的編號或名稱，
這個“網(wǎng)絡(luò)”甚至只是由兩臺各自具備獨(dú)立操作功能的電腦的互聯(lián)，
而現(xiàn)代則泛指一切具備遠(yuǎn)程交互能力的計(jì)算或存儲網(wǎng)絡(luò)；
URL是指“統(tǒng)一資源定位符”，通常指向服務(wù)器的地址；
HTTP:則是支持http協(xié)議的網(wǎng)址；
FTP:是支持文檔傳輸協(xié)議的網(wǎng)址、GOPHER:針對gopher檢索、
HTTPS:則是增加了SSL加密的HTTP；
域名，
是由一串用點(diǎn)分隔的字符組成的Internet上某一臺計(jì)算機(jī)或計(jì)算機(jī)組的名稱，
用于在數(shù)據(jù)傳輸時標(biāo)識計(jì)算機(jī)的電子方位
（有時也指地理位置，地理上的域名，指代有行政自主權(quán)的一個地方區(qū)域）。
也是一個IP地址上的“面具”。
【2】網(wǎng)頁
網(wǎng)頁是通過瀏覽器來閱讀的一個可視化的包含內(nèi)容和數(shù)據(jù)等信息的頁面；
網(wǎng)頁通過瀏覽器或其他可視化工具將服務(wù)器數(shù)據(jù)轉(zhuǎn)化成可視化的控件。
【3】瀏覽器
將外部數(shù)據(jù)解析、在終端系統(tǒng)平臺上、用可視化界面來展示信息，
這樣一整套流程需要一個工具或軟件來實(shí)現(xiàn)，
通常以瀏覽閱讀為主要功能的軟件稱為“瀏覽器”；
如果是以修改源碼或編譯代碼為主的軟件，
一般不會被稱為“瀏覽器”。
【4】樣式表
通過獨(dú)立的樣式配置、來定義可視化效果的參數(shù)，
使瀏覽器可以更快獲取視圖和控件的配置，
簡化了服務(wù)器數(shù)據(jù)的復(fù)雜度、
減輕了瀏覽器對數(shù)據(jù)解析重構(gòu)的負(fù)荷，
同時也提高了視圖和控件的配置代碼的重用性和規(guī)范化。
附：什么是CascadingStyleSheets（層疊樣式表）？
CSS == CascadingStyleSheets
(層疊樣式表)
CSS 語言是一種標(biāo)記語言，
它可以直接由瀏覽器解釋執(zhí)行（屬于瀏覽器解釋型語言）。
在標(biāo)準(zhǔn)網(wǎng)頁設(shè)計(jì)中
CSS負(fù)責(zé)網(wǎng)頁內(nèi)容的表現(xiàn)；
CSS文件也可以說是一個文本文件，
它包含了一些CSS標(biāo)記，
CSS文件必須使用css為文件名后綴；
可以通過簡單的更改CSS文件中的配置
來改變網(wǎng)頁的整體表現(xiàn)形式，
可以減少代碼量和工作量；
CSS標(biāo)準(zhǔn)是由W3C的CSS工作組制定和維護(hù)的。
附：常規(guī)的瀏覽器展示網(wǎng)頁的流程
1.
瀏覽器下載的順序是從上到下，
渲染的順序也是從上到下，
下載和渲染是同時進(jìn)行的。
2.
在渲染到頁面的某一部分時，
其上面的所有部分都已經(jīng)下載完成
（并不是說所有相關(guān)聯(lián)的元素都已經(jīng)下載完）；
3.
如果遇到語義解釋性的標(biāo)簽嵌入文件
（JS腳本，CSS樣式），
那么此時瀏覽器的下載過程會啟用單獨(dú)連接進(jìn)行下載；
4.
下載后對腳本和樣式進(jìn)行解析，
解析過程中暫停其后的元素的下載；
5.
樣式表在下載完成后，
將調(diào)用之前下載的所有樣式表一起進(jìn)行解析，
并在解析完成后
對此前所有元素（含以前已經(jīng)渲染的）重新進(jìn)行渲染；
6.
腳本和樣式中如有重定義，
其后定義的配置將覆蓋前定義配置。
渲染效率與下面三點(diǎn)有關(guān)：
1.css選擇器的查詢定位效率、
2.瀏覽器的渲染模式和算法、
3.要進(jìn)行渲染內(nèi)容的大小。
附：瀏覽器對CSS的匹配原理
瀏覽器CSS匹配不是從左到右進(jìn)行查找，
而是從右到左進(jìn)行查找；
比如
DIV#divBoxpspan.red{color:red;}，
瀏覽器的查找順序如下：
先查找html中所有class=’red’的span元素，
找到后，再查找其父輩元素中是否有p元素，
再判斷p的父元素中是否有id為divBox的div元素，
如果都存在則根據(jù)CSS匹配。
瀏覽器從右到左進(jìn)行查找的好處
是可以盡早過濾掉一些無關(guān)的樣式規(guī)則和元素。
firefox稱這種查找方式為
keyselector（關(guān)鍵字查詢），
所謂的關(guān)鍵字就是樣式規(guī)則中最后(最右邊)的規(guī)則，
上面的key就是span.red。
附：CSS樣式表的使用方式
HTML頁面有三種使用CSS樣式表的方式：
1、
內(nèi)聯(lián)樣式表：
樣式規(guī)定在單個的元素中，
寫在元素的style屬性里；
2、
內(nèi)部樣式表：
樣式定義在HTML頁面的頭元素中；
3、
外部樣式表：
將樣式定義在一個外部的CSS文件中，
然后由HTML頁面引用樣式表文件。
附：如何理解CSS樣式表的層疊性
CSS使用層疊（Cascade）的原則來考慮
繼承、層疊次序和優(yōu)先級
等重要特征，從而判斷相互沖突的規(guī)則中應(yīng)依據(jù)哪一個規(guī)則。
繼承性：
許多CSS的樣式規(guī)則不但影響選擇器所定義的元素，
而且會被這些元素的后代繼承；
層疊性：
當(dāng)一個Web頁面使用多個樣式表，
多個樣式表中的樣式可層疊為一個；
在多個樣式表之間所定義的樣式?jīng)]有沖突的時候，
瀏覽器會顯示所有的樣式。
優(yōu)先級：
當(dāng)發(fā)生樣式定義沖突時，
瀏覽器首先會按照不同樣式規(guī)則的優(yōu)先級來應(yīng)用樣式；
同等優(yōu)先級下，以最后定義的樣式為準(zhǔn)；
CSS樣式的優(yōu)先級如下所示（其中數(shù)字3擁有最高的優(yōu)先權(quán)）：
1、
瀏覽器缺省設(shè)置；
2、
外部樣式表（.css 文件）或者內(nèi)部樣式表（位于<head>元素內(nèi)部）；
3、
內(nèi)聯(lián)樣式（作為某個元素的style屬性的值）。
附：CSS選擇器中，元素選擇器和類選擇器的區(qū)別是什么？
在 CSS 中，選擇器是一種模式，
用于選擇需要添加樣式的元素。
元素選擇器是最常見的CSS選擇器，
即，文檔的元素就是最基本的選擇器；
選擇器通常是某個HTML元素，
比如<p>、<h2>、<em>、<a>等，
甚至可以是<html>元素本身。
類選擇器用于將樣式規(guī)則與附帶class屬性的元素匹配，
其中該class屬性的值為類選擇器中指定的值；
使用類選擇器時，首先需要定義樣式類，其語法為：
.className { }
所有能夠附帶class屬性的元素都可以使用此樣式聲明；
只需要將class屬性的值設(shè)置為“className”，
則可以將類選擇器的樣式與元素關(guān)聯(lián)。
在實(shí)際使用時如果需要為某種元素定義樣式，
則往往使用元素選擇器；
如果要應(yīng)用樣式而不考慮具體設(shè)計(jì)的元素，
最常用的方法就是使用類選擇器。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機(jī)網(wǎng)站二維碼
