HTML的誕生
HTML是怎么來的挤渔？
在1982年的時候荠察，萬維網(wǎng)的發(fā)明者Tim Berners-Lee爵士為了讓全世界的物理學(xué)家能夠方便的進(jìn)行合作與信息共享，造了HTML(HyperText Markup Language) 超文本置標(biāo)語言耗式。
在1991年3月昔馋，Tim Berners-Lee把HTML介紹給了給他在CERN(歐洲核子研究中心) 工作的朋友，當(dāng)時網(wǎng)頁瀏覽器被其世界各地的成員用來瀏覽CERN龐大的電話薄猛频。
然后在8年之后的1990年狮崩，博士發(fā)明了世界上第一個瀏覽器WorldWideWeb，也因此推動著互聯(lián)網(wǎng)高速發(fā)展鹿寻。
在WorldWideWeb問世之后的1993年NCSA推出了Mosaic瀏覽器并且迅速火了起來睦柴，成為第一個世界級應(yīng)用的瀏覽器，推動著互聯(lián)網(wǎng)發(fā)展毡熏。隨后跟著的有當(dāng)時的兩大霸主Netscapede Netscape瀏覽器與MicroSoft的Internet Explorer瀏覽器坦敌，這兩個瀏覽器在當(dāng)時掀起了一場互聯(lián)網(wǎng)瀏覽器大戰(zhàn)。這場戰(zhàn)爭的結(jié)果是以Internet Explorer全勝告終。但也因此大大的推動了互聯(lián)網(wǎng)的發(fā)展狱窘。
CSS的誕生
CSS是怎么來的杜顺？
就在承載HTML的瀏覽器迅猛發(fā)展的90年代，CSS (Cascading Style Sheet)也應(yīng)運而生蘸炸。不同的瀏覽器結(jié)合各自HTML 語法結(jié)構(gòu)實現(xiàn)了很多不同的外部樣式語法躬络。但隨著HTML的發(fā)展，為了滿足設(shè)計師的要求而增加了很多顯示功能搭儒，隨著這些功能的增加洗鸵，外部樣式語法作用越來越?jīng)]有意義。
在1994年10月10日仗嗦，CSS之父H?kon Wium Lie提出了 CSS 的最初建議膘滨，并且為 HTML 樣式在芝加哥的一次會議上正式提出了 CSS 。
在1996 年 12 月稀拐，W3C在經(jīng)過多方的討論之后火邓，推出了CSS1.0。這一規(guī)范一出現(xiàn)就引起了各方的注意德撬，隨即 MicroSoft 公司和 Netscape 公司紛紛表示自己的瀏覽器能夠支持 CSS1.0铲咨。
CSS的各個版本
CSS各版本的更新
-
CSS1.0在1997 年 由W3C發(fā)布，第一版主要規(guī)定了選擇器蜓洪、樣式屬性纤勒、偽類 / 對象幾個大的部分； -
CSS2.0/2.1在1998 年 由W3C發(fā)布隆檀，CSS2 規(guī)范是基于 CSS1 設(shè)計的摇天，擴(kuò)充和改進(jìn)了很多更加強大的屬性。包括選擇器恐仑、位置模型泉坐、布局、表格樣式裳仆、媒體類型腕让、偽類、光標(biāo)樣式歧斟； - 由于
CSS2經(jīng)歷了 9 年的時間（從 2002 年 8 月到 2011 年 6 月）才達(dá)到 Recommendation（推薦） 狀態(tài)纯丸，此后W3C為了加快那些已經(jīng)確認(rèn)沒有問題的特性的標(biāo)準(zhǔn)化速度，便作出了一項被稱為 Beijing doctrine 的決定静袖，將CSS模塊化觉鼻，并且按照每個模塊的進(jìn)度來標(biāo)準(zhǔn)化。所以從形式上來講勾徽，CSS3已經(jīng)不存在了』梗現(xiàn)在CSS 包括了修訂后的 CSS2.1 以及完整模塊對它的擴(kuò)充，模塊的 level（級別）數(shù)并不一致喘帚〕╂ⅲ可以在每個時間點上為 CSS 標(biāo)準(zhǔn)定義一個 snapshots（快照）。
下圖為CSS模塊化的發(fā)展進(jìn)程圖吹由，來自MDN
差點要成為CSS的語言
現(xiàn)在的CSS也是經(jīng)過一番爭斗才脫穎而出的
以下內(nèi)容翻譯于The Languages Which Almost Became CSS
第一個提案
早在1993年Mosaic瀏覽器1.0發(fā)布之前若未，當(dāng)時現(xiàn)有的瀏覽器已經(jīng)開始獨立處理HTML了，但是它們并沒有能給標(biāo)簽定制樣式的方式倾鲫，這就意味著你看到的標(biāo)簽長什么樣就長什么樣粗合，不能改。
所以在1993年的6月乌昔，Robert Raisch給www-talk郵件發(fā)了一個提案隙疚，希望創(chuàng)建一個“一種易于解析可以與Web文檔一起提供樣式信息的格式”，并給它起名叫RRP磕道。
格式如下：
@BODY fo(fa=he,si=18)
看不懂上面的代碼是情有可原的供屉。在gzipping之前的時代，網(wǎng)絡(luò)傳輸速度只有14.4K溺蕉，所以格式盡量壓縮都是合理的伶丐。這個特殊規(guī)則是將font family (fa)設(shè)置為helvetica (he)，將font size(si)設(shè)置為18 points疯特。
Viola 以及原始瀏覽器之戰(zhàn)
和流行的看法不一樣哗魂，Mosaic并不是第一個圖形瀏覽器，ViolaWWW才是漓雅。由Pei-Yuan Wei花了4天寫的录别。
以下是Pei-Yuan Wei創(chuàng)建的樣式表語言：
(BODY fontSize=normal
BGColor=white
FGColor=black
(H1 fontSize=largest
BGColor=red
FGColor=white)
)
web前端開發(fā)學(xué)習(xí)Q-q-u-n： 731771211，分享學(xué)習(xí)的方法和需要注意的小細(xì)節(jié)邻吞，不停更新最新的教程和學(xué)習(xí)方法（詳細(xì)的前端項目實戰(zhàn)教學(xué)視頻庶灿，PDF）
在這個例子中我們給body添加了顏色選擇器，并且給body中的h1添加了樣式吃衅。
值得一提的是PWP還是引用外部樣式表的方法提出者往踢，他提出的方法一直沿用至今。
<LINK REL="STYLE" HREF="URL_to_a_stylesheet">
不幸的是徘层，ViolaWWW只能運行在X Window System系統(tǒng)中峻呕，這個系統(tǒng)只在Unix中受歡迎。當(dāng)Mosaic移植到Windows上不久后就把ViolaWWW拋到身后了趣效。
Web之前的樣式表
早在互聯(lián)網(wǎng)之前就有對文檔樣式進(jìn)行修改的語言要求瘦癌。
正于你所知道的，HTML源于一個在互聯(lián)網(wǎng)之前就出現(xiàn)的語言跷敬，SGML讯私。早在1987年，美國國防部就決定研究SGML是否可以使文檔存儲和傳輸更加便捷，他們有大量的文檔需要處理斤寇。跟其他好的政府項目一樣桶癣，他們沒有時間可以浪費在起名上。這個團(tuán)隊最初叫計算機輔助后勤支持隊娘锁，后來叫計算機輔助采集和后勤支持隊牙寞，最后叫持續(xù)獲取和生命周期支持計劃。反正簡寫都是CALS莫秆。
CALS為SGML創(chuàng)建了一個叫FOSI（這是一個四字單詞簡寫间雀，但是因為年代久遠(yuǎn)，已經(jīng)不知道是哪四個單詞了）的語言來為文檔添加樣式镊屎。
例子如下：
<outspec>
<docdesc>
<charlist>
<font size="12pt" bckcol="white" fontcol="black">
</charlist>
</docdesc>
<e-i-c gi="h1"><font size="24pt" bckcol="red", fontcol="white"></e-i-c>
<e-i-c gi="h2"><font size="20pt" bckcol="red", fgcol="white"></e-i-c>
<e-i-c gi="a"><font fgcol="red"></e-i-c>
<e-i-c gi="cmd kbd screen listing example"><font style="monoser"></e-i-c>
</outspec>
如果你困惑docdesc或charlist惹挟，那么你要知道，www-talk的成員跟你有同樣的困惑缝驳。唯一給出上下文信息的是e-i-c匪煌，即element in context。FOSI值得注意的是引入了em作為字體單位党巾，現(xiàn)在已經(jīng)成為了很多熟悉CSS的人中更受歡迎的方法萎庭。
圖靈完備的樣式表
由于它的復(fù)雜性，FOSI被認(rèn)為是格式化文檔問題的臨時解決方案齿拂。長遠(yuǎn)的解決方案是創(chuàng)建一個基于函數(shù)式編程語言Scheme的新語言驳规，它可以做任何你能想象到的文檔轉(zhuǎn)換。這門語言叫DSSSL。
下面是語法：
(element H1
(make paragraph
font-size: 14pt
font-weight: 'bold'))
因為它是一門編程語言，所以你可以函數(shù)化：
(define (create-heading heading-font-size)
(make paragraph
font-size: heading-font-size
font-weight: 'bold))
(element h1 (create-heading 24pt))
(element h2 (create-heading 18pt))
并在樣式中使用數(shù)學(xué)結(jié)構(gòu)疤剑，例如“條帶化”表的行：
(element TR
(if (= (modulo (child-number) 2)
0)
… ;even-row
…)) ;odd-row
最后，讓你妒忌一下捻勉，DSSSL可以把繼承的值當(dāng)成變量進(jìn)行數(shù)學(xué)運算：
(element H1
(make paragraph
font-size: (+ 4pt (inherited-font-size))))
不幸的是，DSSSL擁有和跟所有Scheme類語言一樣的致命弱點：括號太多了刀森。此外踱启，當(dāng)它最終發(fā)布時，它可能過于完整研底，使瀏覽器開發(fā)人員感到害怕埠偿。 DSSSL規(guī)范包含210多個獨立的可以定制樣式的屬性。
為什么樣式表脫穎而出榜晦？
CSS 沒有父級選擇器（一種基于子元素的樣式給父元素設(shè)置樣式的方法）冠蒋。 這個問題在Stack Overflow上被頻繁的提問（這是其中一個）。但是事實證明乾胶，這個特性缺失是有理由的抖剿。特別在互聯(lián)網(wǎng)早期朽寞，讓網(wǎng)頁在完全加載完成之前被渲染，是很重要的斩郎。意思就是脑融，大家希望HTML加載完之前，就可以渲染已經(jīng)加載完的部分孽拷。
父選擇器意味著樣式得在HTML文檔一邊加載時吨掌，一邊更新半抱。像DSSSL這樣的語言如果實現(xiàn)了這個功能脓恕，因為它們可以對文檔進(jìn)行操作，所以也沒很可能就不能用了窿侈。
在1995年3月炼幔，Bert Bos作為第一個提出這個問題的人，還提供可行方案史简。他的提案中還包括了一個早期的笑臉表情包:-)乃秀。
這個語言有點像面向?qū)ο螅?/p>
*LI.prebreak: 0.5
*LI.postbreak: 0.5
*OL.LI.label: 1
*OL*OL.LI.label: A
使用.來指定直接子節(jié)點，使用* 來指定祖先節(jié)點圆兵。
他的語言還有一個很酷的屬性跺讯，就像這樣在樣式表中定義超鏈接：
*A.anchor: !HREF
在上面的例子中，指定link的目標(biāo)為其HREF的值殉农。像這種可控制鏈接等元素的行為在很多提案中都很流行刀脏。在Javascript還沒出來之前，沒有什么可控制元素的方法超凳，所以它們看起來是很合理的愈污。
一個函數(shù)式的提案，1994年被一位叫C.M. Sperberg-McQueen的紳士提出轮傍，里面包含了類似的行為暂雹。
(style a
(block #f) ; format as inline phrase
(color blue) ; in blue if you’ve got it
(click (follow (attval 'href))) ; and on click, follow url
他的語言還引入了content關(guān)鍵字作為從樣式表控制HTML元素內(nèi)容的一種方式，這個概念后來被引入到CSS 2.1中创夜。
可能還有什么
在我談到實際成為CSS的語言之前杭跪，還有另一種語言值得一提，因為它在某種程度上是早期Web開發(fā)者的夢想驰吓。
它就是PSL96揍魂，按照當(dāng)年的命名規(guī)范，1996年版的Presentation Specification Language棚瘟。PSL的核心很像CSS：
H1 {
fontSize: 20;
}
然而现斋，它很快就變得很有趣了。例如偎蘸，你不僅可以根據(jù)元素寬度來渲染它的位置庄蹋，也可以基于瀏覽器的實際寬度來渲染瞬内。
LI {
VertPos: Top = LeftSib . Actual Bottom;
}
甚至你可以使用元素左邊的兄弟姐妹來定制。
你還可以為樣式添加邏輯表達(dá)式限书。例如虫蝶，僅設(shè)置具有href的錨元素的樣式：
A {
if (getAttribute(self, "href") != "") then
fgColor = "blue";
underlineNumber = 1;
endif
}
這種樣式可以擴(kuò)展到我們今天用樣式來完成的各種事情：
LI {
if (ChildNum(Self) == round(NumChildren(Parent) / 2 + 1)) then
VertPos: Top = Parent.Top;
HorizPos: Left = LeftSib.Left + Self.Width;
else
VertPos: Top = LeftSib.Actual Bottom;
HorizPos: Left = LeftSib.Left;
endif
}
web前端開發(fā)學(xué)習(xí)Q-q-u-n： 731771211，分享學(xué)習(xí)的方法和需要注意的小細(xì)節(jié)倦西，不停更新最新的教程和學(xué)習(xí)方法（詳細(xì)的前端項目實戰(zhàn)教學(xué)視頻能真，PDF）
支持這功能的話或許真的可以實現(xiàn)內(nèi)容與樣式分離的夢想。遺憾的是這門語言拓展性太強扰柠，這就以為著不用瀏覽器的實現(xiàn)可能會不一樣粉铐。而且，它是以一系列的文章出現(xiàn)出現(xiàn)在學(xué)術(shù)界卤档，并沒有經(jīng)過www-talk郵件列表進(jìn)行討論蝙泼，所以，它永遠(yuǎn)不會出現(xiàn)在主流瀏覽器劝枣。
CSS之魂
一門語言汤踏，至少從名字上，直接引出了CSS舔腾，它叫CHSS (Cascading HTML Style Sheets)溪胶，提案在1994年被H?kon W Lie提出。
跟很多好主意一樣稳诚，這個原始提案非常瘋狂哗脖。
h1.font.size = 24pt 100%
h2.font.size = 20pt 40%
注意行尾的百分比，這個百分比是指當(dāng)前樣式表占用該值的“權(quán)重”采桃。例如懒熙，如果之前的樣式表已將h2字體大小定義為30pt，擁有60％普办，并且此樣式表將h2s設(shè)置為20px 40％工扎，則這兩個值將根據(jù)其權(quán)重百分比進(jìn)行組合在一起，大概就是26pt衔蹲。
很明顯肢娘，這個提案是在基于文檔的HTML頁面的時代，基于拖鞋的設(shè)計是無法在我們面向應(yīng)用的世界里發(fā)揮作用的舆驶。不過橱健，它已經(jīng)具備了樣式表應(yīng)該可以疊加的基本思想。換句話說沙廉，應(yīng)該可以將多個樣式表應(yīng)用于同一頁面拘荡。
它最初的形式被認(rèn)為是重要的，因為它讓用戶可以控制他們所看到的內(nèi)容撬陵。頁面有一個樣式表珊皿，并且Web用戶將擁有自己的樣式表网缝，這兩個樣式表一起渲染在頁面上。支持多個樣式表被視為一種維護(hù)Web個人自由的方法蟋定，而不是支持開發(fā)人員（他們?nèi)匀皇謩泳帉憜为毜腍TML頁面）的方式粉臊。
用戶可以控制該頁面作者的建議的權(quán)重，就如提案中的ASCII 圖那樣驶兜。
User Author
Font o-----x--------------o 64%
Color o-x------------------o 90%
Margin o-------------x------o 37%
Volume o---------x----------o 50%
像許多這些提案一樣扼仲，它包含了幾十年來不可能出現(xiàn)在CSS中的特性。例如抄淑，可以根據(jù)用戶的環(huán)境編寫邏輯表達(dá)式屠凶。
AGE > 3d ? background.color = pale_yellow : background.color = white
DISPLAY_HEIGHT > 30cm ? http://NYT.com/style : http://LeMonde.fr/style
在一個有點樂觀的未來場景中，瀏覽器會根據(jù)給定的內(nèi)容對你的相關(guān)性蝇狼，允許它以更大的尺寸展示給你看阅畴。
RELEVANCE > 80 ? h1.font.size *= 1.5
你知道接下來發(fā)生了什么
H?kon Lie繼續(xù)簡化他的提案倡怎，且和Bert Bos合作迅耘，并在1996年11月發(fā)布的CSS規(guī)范的第一版。最終他將創(chuàng)造CSS寫進(jìn)了他的博士論文里监署，也就是這個文檔幫助我寫了這篇文章颤专。
與許多其他提案相比，CSS的一個值得注意的事實是它的簡單性钠乏。它易于分析栖秕，易于編寫和輕松閱讀。與互聯(lián)網(wǎng)歷史上的許多其他例子一樣晓避，對于初學(xué)者來說簇捍，需要的是最容易上手的技術(shù)，而不是那些給更強大的專業(yè)人員用的技術(shù)俏拱。
它本身就給我們一個提醒暑塑，這是一個偶然發(fā)生的創(chuàng)新。例如锅必，僅添加了對上下文選擇器（body ol li）的支持事格，因為Netscape已經(jīng)有一種方法可以從超鏈接的圖像中刪除邊框，并且似乎有必要實現(xiàn)流行瀏覽器可以執(zhí)行的所有操作搞隐。這個功能本身就大大拖延了 CSS的實現(xiàn)驹愚，因為大多數(shù)瀏覽器在解析HTML時沒有保留標(biāo)簽的“堆棧”劣纲。這意味著必須重新設(shè)計解析器才能完全支持CSS逢捺。
像這樣的挑戰(zhàn)（以及廣泛使用非標(biāo)準(zhǔn)HTML標(biāo)簽來定義樣式）導(dǎo)致著CSS直到1997年才可使用，直到2000年3月才有瀏覽器完全支持它癞季。這跟每個開發(fā)者跟你說的一樣劫瞳，瀏覽器近幾年才真正標(biāo)準(zhǔn)化棠耕，這里距首次發(fā)布CSS已經(jīng)過去了21年（原文15年）了。
最終BOSS
IE 3以（有點可怕的）CSS支持著稱柠新。為了競爭窍荧，Netscape 4也考慮了CSS。但它還是決定通過將CSS轉(zhuǎn)換為JavaScript并執(zhí)行它來實現(xiàn)它恨憎，而不是將第三種（考慮HTML和JavaScript）蕊退。更有甚者，Web開發(fā)人員應(yīng)該可以訪問這個“JavaScript樣式表”中間語言憔恳。
語法是直接使用JavaScript瓤荔，然后添加了一些特定樣式的API：
tags.H1.color = "blue";
tags.p.fontSize = "14pt";
with (tags.H3) {
color = "green";
}
classes.punk.all.color = "#00FF00"
ids.z098y.letterSpacing = "0.3em"
你甚至可以定義一個每遇到一個標(biāo)簽就執(zhí)行一次的函數(shù)：
evaluate_style() {
if (color == "red"){
fontStyle = "italic";
} else {
fontWeight = "bold";
}
}
tag.UL.apply = evaluate_style();
web前端開發(fā)學(xué)習(xí)Q-q-u-n： 731771211，分享學(xué)習(xí)的方法和需要注意的小細(xì)節(jié)钥组，不停更新最新的教程和學(xué)習(xí)方法（詳細(xì)的前端項目實戰(zhàn)教學(xué)視頻输硝，PDF）
我們應(yīng)該簡化樣式和腳本之間分界線的想法是合理的，現(xiàn)在在React社區(qū)還出現(xiàn)了各種類似的思路程梦。
在當(dāng)時点把，JavaScript本身就是一種非常新的語言，但是通過一些逆向工程屿附，IE已經(jīng)在IE3中添加了對它的支持（如“JScript”）郎逃。
