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