你不懂得HTML與CSS的戀情發(fā)展史-創(chuàng)新互聯(lián)
HTML與CSS
樣式表的歷史科普
自從1990年代初HTML被發(fā)明，
作為HTML代碼輔助的樣式表，
就以各種形式出現(xiàn)；
最初，不同的瀏覽器結(jié)合了它們各自的樣式語言，
讀者可以使用這些樣式語言來調(diào)節(jié)網(wǎng)頁的顯示方式；
一開始樣式表是給讀者用的，
最初的HTML版本只含有很少的顯示屬性，
讀者來決定網(wǎng)頁應(yīng)該怎樣被顯示。
但隨著HTML的成長、為了滿足設(shè)計師的要求，
HTML獲得了很多特效顯示功能，
隨著這些功能的增加，
外來定義樣式的語言越來越?jīng)]有意義了。
1994年哈坤·利提出了CSS的最初的思路和建議，
即【Cascading Style Sheets】；
1995年伯特·波斯（Bert Bos）參與其中、
與哈坤合作設(shè)計CSS。
當時已經(jīng)有過一些樣式表語言的思想，
但CSS是第一個含有“層疊”概念的；
在CSS中，
一個文件的樣式可以從其他的樣式表中繼承下來，
讀者在有些地方可以使用他自己更喜歡的樣式，
在其他地方則繼承或“層疊”作者的樣式,
這種層疊的方式使作者和讀者都可以靈活地加入自己的設(shè)計、
同時也可以保留或混合各自的偏好。
當時W3C剛剛建立、對CSS的發(fā)展很感興趣，
甚至為此特地組織了一次討論會，
哈坤、波斯和其他一些人（比如微軟的托馬斯·雷爾登）
是這個項目的主要技術(shù)負責(zé)人。
1996年底12月CSS第一版本被出版。
1997年初，
W3C內(nèi)組織了由克里斯·里雷專門負責(zé)的CSS工作組，
開始討論第一版中沒有涉及到的問題，
其結(jié)果是1998年5月出版的第二版。
采用CSS+DIV進行網(wǎng)頁重構(gòu)，
相對與傳統(tǒng)的TABLE網(wǎng)頁布局而具有以下3個顯著優(yōu)勢：
1.
表現(xiàn)和內(nèi)容相分離，
將設(shè)計部分剝離出來放在一個獨立樣式文件中，
HTML文件中只存放文本信息，
頁面內(nèi)容更易于被檢索（也即易于被搜索引擎抓?。?；
2.
提高頁面瀏覽速度，
對于同一個頁面視覺效果，
采用CSS+DIV重構(gòu)的頁面，
容量要比TABLE編碼的頁面文件容量小得多，
從而減輕了瀏覽器的編譯負荷；
3.
易于維護和改版，
你只要簡單的修改幾個CSS內(nèi)的配置，
就可以重新設(shè)計整個網(wǎng)站的頁面。
附：一些通俗的概念解釋
【1】網(wǎng)址
現(xiàn)代網(wǎng)址通常指可供遠程訪問的網(wǎng)站地址，
但是最初的“網(wǎng)址”僅僅是指某臺交換機或服務(wù)器在網(wǎng)絡(luò)中的編號或名稱，
這個“網(wǎng)絡(luò)”甚至只是由兩臺各自具備獨立操作功能的電腦的互聯(lián)，
而現(xiàn)代則泛指一切具備遠程交互能力的計算或存儲網(wǎng)絡(luò)；
URL是指“統(tǒng)一資源定位符”，通常指向服務(wù)器的地址；
HTTP:則是支持http協(xié)議的網(wǎng)址；
FTP:是支持文檔傳輸協(xié)議的網(wǎng)址、GOPHER:針對gopher檢索、
HTTPS:則是增加了SSL加密的HTTP；
域名，
是由一串用點分隔的字符組成的Internet上某一臺計算機或計算機組的名稱，
用于在數(shù)據(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)平臺上、用可視化界面來展示信息，
這樣一整套流程需要一個工具或軟件來實現(xiàn)，
通常以瀏覽閱讀為主要功能的軟件稱為“瀏覽器”；
如果是以修改源碼或編譯代碼為主的軟件，
一般不會被稱為“瀏覽器”。
【4】樣式表
通過獨立的樣式配置、來定義可視化效果的參數(shù)，
使瀏覽器可以更快獲取視圖和控件的配置，
簡化了服務(wù)器數(shù)據(jù)的復(fù)雜度、
減輕了瀏覽器對數(shù)據(jù)解析重構(gòu)的負荷，
同時也提高了視圖和控件的配置代碼的重用性和規(guī)范化。
附：什么是CascadingStyleSheets（層疊樣式表）？
CSS == CascadingStyleSheets
(層疊樣式表)
CSS 語言是一種標記語言，
它可以直接由瀏覽器解釋執(zhí)行（屬于瀏覽器解釋型語言）。
在標準網(wǎng)頁設(shè)計中
CSS負責(zé)網(wǎng)頁內(nèi)容的表現(xiàn)；
CSS文件也可以說是一個文本文件，
它包含了一些CSS標記，
CSS文件必須使用css為文件名后綴；
可以通過簡單的更改CSS文件中的配置
來改變網(wǎng)頁的整體表現(xiàn)形式，
可以減少代碼量和工作量；
CSS標準是由W3C的CSS工作組制定和維護的。
附：常規(guī)的瀏覽器展示網(wǎng)頁的流程
1.
瀏覽器下載的順序是從上到下，
渲染的順序也是從上到下，
下載和渲染是同時進行的。
2.
在渲染到頁面的某一部分時，
其上面的所有部分都已經(jīng)下載完成
（并不是說所有相關(guān)聯(lián)的元素都已經(jīng)下載完）；
3.
如果遇到語義解釋性的標簽嵌入文件
（JS腳本，CSS樣式），
那么此時瀏覽器的下載過程會啟用單獨連接進行下載；
4.
下載后對腳本和樣式進行解析，
解析過程中暫停其后的元素的下載；
5.
樣式表在下載完成后，
將調(diào)用之前下載的所有樣式表一起進行解析，
并在解析完成后
對此前所有元素（含以前已經(jīng)渲染的）重新進行渲染；
6.
腳本和樣式中如有重定義，
其后定義的配置將覆蓋前定義配置。
渲染效率與下面三點有關(guān)：
1.css選擇器的查詢定位效率、
2.瀏覽器的渲染模式和算法、
3.要進行渲染內(nèi)容的大小。
附：瀏覽器對CSS的匹配原理
瀏覽器CSS匹配不是從左到右進行查找，
而是從右到左進行查找；
比如
DIV#divBoxpspan.red{color:red;}，
瀏覽器的查找順序如下：
先查找html中所有class=’red’的span元素，
找到后，再查找其父輩元素中是否有p元素，
再判斷p的父元素中是否有id為divBox的div元素，
如果都存在則根據(jù)CSS匹配。
瀏覽器從右到左進行查找的好處
是可以盡早過濾掉一些無關(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ī)則不但影響選擇器所定義的元素，
而且會被這些元素的后代繼承；
層疊性：
當一個Web頁面使用多個樣式表，
多個樣式表中的樣式可層疊為一個；
在多個樣式表之間所定義的樣式?jīng)]有沖突的時候，
瀏覽器會顯示所有的樣式。
優(yōu)先級：
當發(fā)生樣式定義沖突時，
瀏覽器首先會按照不同樣式規(guī)則的優(yōu)先級來應(yīng)用樣式；
同等優(yōu)先級下，以最后定義的樣式為準；
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)。
在實際使用時如果需要為某種元素定義樣式，
則往往使用元素選擇器；
如果要應(yīng)用樣式而不考慮具體設(shè)計的元素，
最常用的方法就是使用類選擇器。
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。
網(wǎng)站名稱：你不懂得HTML與CSS的戀情發(fā)展史-創(chuàng)新互聯(lián)
當前鏈接：http://jinyejixie.com/article24/jshje.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供關(guān)鍵詞優(yōu)化、網(wǎng)站設(shè)計公司、搜索引擎優(yōu)化、用戶體驗、網(wǎng)站內(nèi)鏈、網(wǎng)站維護
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容
- dedecms織夢arclist標簽的使用-創(chuàng)新互聯(lián)
- linux如何查看文件和目錄-創(chuàng)新互聯(lián)
- 利用mybatis-plus怎么實現(xiàn)一個代碼自動生成功能-創(chuàng)新互聯(lián)
- 原生js如何實現(xiàn)ajax請求和JSONP跨域請求-創(chuàng)新互聯(lián)
- 怎么用vbs將本地文件替換為在文件服務(wù)器上找到的新版本-創(chuàng)新互聯(lián)
- Matlab繪制累積分布函數(shù)(CDF)-創(chuàng)新互聯(lián)
- c++歸并排序詳解-創(chuàng)新互聯(lián)
- 移動化產(chǎn)品的用戶體驗思路 2022-07-01
- 微信開放搜索，用戶體驗和商業(yè)變現(xiàn)該如何協(xié)調(diào)？ 2022-08-06
- 成都如何對網(wǎng)站執(zhí)行內(nèi)容審核以改善網(wǎng)站用戶體驗 2023-03-09
- 上海網(wǎng)站建設(shè)：優(yōu)秀的網(wǎng)站用戶體驗該怎么做？ 2023-02-20
- 網(wǎng)站建設(shè)需把設(shè)計技巧融合用戶體驗中 2022-11-06
- 對于網(wǎng)站優(yōu)化中用戶體驗事項404頁面的設(shè)置也是至關(guān)重要 2014-10-27
- 網(wǎng)站提高用戶體驗做好這六點 2021-08-19
- 如何選擇一個用戶體驗好的網(wǎng)站空間 2021-12-25
- 電商網(wǎng)站提高用戶體驗的7大技巧 2022-05-13
- 提升網(wǎng)站用戶體驗度需要進行哪些操作？ 2016-10-26
- 一個好的網(wǎng)站必須具備優(yōu)質(zhì)的用戶體驗 2022-06-07
- APP開發(fā):導(dǎo)航設(shè)計提升用戶體驗該遵循哪些原則？ 2020-11-18