第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

慕少3449830 · 更新于 2020-12-21

css 簡(jiǎn)介

前邊介紹 JavaScript 的簡(jiǎn)史，本章我們介紹另一個(gè)跟 HTML 形影不離的技術(shù) CSS，它的存在感視乎沒(méi)有 JavaScript 那么強(qiáng)。如果說(shuō) JavaScript 是用戶交互的發(fā)動(dòng)機(jī)，那么 CSS 應(yīng)該就是衣服了，主要工作是修飾網(wǎng)頁(yè)。

1. 歷史

1.1 質(zhì)疑

當(dāng)您想到 HTML 和 CSS 時(shí)，您可能會(huì)認(rèn)為他們是一個(gè)共同體。事實(shí)上在 Tim Berners-Lee 于 1989 年首次創(chuàng)建萬(wàn)維網(wǎng)之后的多年中，沒(méi)有發(fā)明過(guò) CSS 之類的東西，最初的 HTML 根本無(wú)法使用樣式修飾網(wǎng)頁(yè)。

WWW 郵件列表的存檔中埋藏著一個(gè)臭名昭著的帖子，它是由 Marc Andreessen（網(wǎng)景瀏覽器聯(lián)合創(chuàng)世人） 于 1994 年編寫(xiě)的。在帖子中，Andreessen 表示，由于無(wú)法用 HTML 對(duì)網(wǎng)站進(jìn)行樣式設(shè)置，因此當(dāng)被問(wèn)及視覺(jué)設(shè)計(jì)時(shí)，他唯一可以告訴 Web 開(kāi)發(fā)人員的是 “很麻煩?！?在 10 年后，CSS 逐漸被一個(gè)新的網(wǎng)絡(luò)社區(qū)全面采用。這期間發(fā)生了什么事？

1.2 尋找

關(guān)于如何修飾網(wǎng)頁(yè)歷史上很多人提出過(guò)很多質(zhì)疑，但是，對(duì)于 Berners-Lee 來(lái)說(shuō)，這并不是優(yōu)先考慮的事情。相反，很多社區(qū)的網(wǎng)頁(yè)開(kāi)發(fā)人員提出過(guò)幾種技術(shù)選型方案，其中最著名的是 Pei-Yaun Wei，Andreesen 和 H?konWium Lie。以 Pei-Yuan Wei 為例，他于 1991 年創(chuàng)建了圖形化的 ViolaWWW 瀏覽器，并且將自己的樣式表語(yǔ)言集成到了瀏覽器中，他期望將語(yǔ)言變成 Web 的正式標(biāo)準(zhǔn)。雖然最終沒(méi)有實(shí)現(xiàn)，但是為其后的樣式表規(guī)范提供了一些啟發(fā)。

ViolaWWW 發(fā)布的同時(shí)，Andreessen 在他自己的瀏覽器 Netscape Navigator 中采用了不同的樣式實(shí)現(xiàn)方法。他沒(méi)有創(chuàng)建專門(mén)用于網(wǎng)站樣式的修飾語(yǔ)言，而是僅擴(kuò)展了 HTML 標(biāo)簽元素及其屬性。不幸的是，這種方式似乎使得 HTML 的標(biāo)簽變得極其復(fù)雜，看起來(lái)像這樣：

This would be some font broken up into columns

一時(shí)間百家爭(zhēng)鳴，各種技術(shù)方案應(yīng)運(yùn)而出，類似 RRP（一種支持縮寫(xiě)和簡(jiǎn)潔的樣式表語(yǔ)言）或 PSL96（一種實(shí)際上允許使用函數(shù)和條件語(yǔ)句的語(yǔ)言）一樣。這其中脫穎而出的想法是 H?konWium Lie 于 1994 年 10 月首次提出的，它被稱為層疊樣式表或 CSS。

1.3 css 出世

CSS 之所以脫穎而出，是因?yàn)樗芎?jiǎn)單，特別是與某些最早的競(jìng)爭(zhēng)對(duì)手相比。CSS 遵循一種可預(yù)見(jiàn)的，寬容的格式，幾乎任何人都可以使用它。但是，CSS 的比較特殊的是它允許樣式層疊，層疊意味著樣式可以繼承并覆蓋先前已聲明的其他樣式，同時(shí)它又允許在同一頁(yè)面上使用多個(gè)樣式表。

Lie 認(rèn)為程序員和設(shè)計(jì)師都將在單獨(dú)的樣式表中定義樣式，瀏覽器可以充當(dāng)兩者之間的一種中介，并協(xié)商差異以呈現(xiàn)頁(yè)面。css 剛剛推出時(shí)，業(yè)界具有很多爭(zhēng)議，爭(zhēng)議點(diǎn)就在于剛剛提到的寬松性。

不久后，Lie 找到了另外一個(gè)合伙人 Bert Bos，Bos 創(chuàng)建了自己的 Argo 瀏覽器，并在此過(guò)程中創(chuàng)建了他自己的樣式表語(yǔ)言，該樣式表語(yǔ)言最終進(jìn)入了 CSS。兩者開(kāi)始制定更詳細(xì)的規(guī)范，最終向 W3C 新建的 HTML 工作組尋求幫助。花費(fèi)了幾年時(shí)間，到 1996 年底第一版 css 定稿。

1.4 應(yīng)用到瀏覽器

在 CSS 還只是一個(gè)草案的時(shí)候，網(wǎng)景的瀏覽器已經(jīng)支持了上述提到的具有復(fù)雜屬性標(biāo)簽的 HTML 元素，如 multicol，layer 和可怕的 blink 標(biāo)簽；另一方面，微軟的 Internet Explorer 已經(jīng)采用了一些 CSS 零碎的方式。但是他們的支持參差不齊，有時(shí)甚至是錯(cuò)誤的。在最初的 CSS 版本推出五年后，還沒(méi)有完全支持 CSS 的瀏覽器。

事情的轉(zhuǎn)機(jī)在 Tantek?elik 1997 年加入 Internet Explorer 之后。他成為了渲染引擎的首席開(kāi)發(fā)人員。從 2000 年開(kāi)發(fā)第 5 版開(kāi)始，?elik 和他的團(tuán)隊(duì)將重點(diǎn)放在 CSS 支持上。在此期間，?elik 經(jīng)常使用他們的瀏覽器與 W3C 成員和 Web 設(shè)計(jì)人員交談，以確保它們正確無(wú)誤。最終，在 2002 年 3 月，他們交付了用于 Internet Explorer 5。第一個(gè)完全支持 CSS Level 1 的瀏覽器。

2. 原理

2.1 瀏覽器渲染

說(shuō)到 css 的原理，就不能不提瀏覽器的渲染機(jī)制:
base64str
上圖可以看出，瀏覽器渲染可以分兩部分：

  • HTML parser 生成 DOM 樹(shù)；
  • css parser 生成 style rules

最后，dom 樹(shù)和 style rules 生成新的 render tree 渲染樹(shù)，然后繪制到瀏覽器中，展示出來(lái)。

2.2 css 解析器

上邊提到瀏覽器的渲染機(jī)制，可以看到 CSS 模塊負(fù)責(zé) CSS 腳本解析，并為每個(gè) Element 計(jì)算出樣式。Webkit 使用了自動(dòng)代碼生成工具生成了相應(yīng)的代碼，也就是說(shuō)詞法分析和語(yǔ)法分析這部分代碼是自動(dòng)生成的。這期間經(jīng)歷了以下幾個(gè)步驟：

  • 通過(guò)調(diào)用 CSSStyleSheet 的 parseString 函數(shù)，將上述 CSS 解析過(guò)程啟動(dòng)，解析完一遍后，把 Rule 都存儲(chǔ)在對(duì)應(yīng)的 CSSStyleSheet 對(duì)象中；
  • 由于目前規(guī)則依然是不易于處理的，還需要將之轉(zhuǎn)換成 CSSRuleSet。也就是將所有的純樣式規(guī)則存儲(chǔ)在對(duì)應(yīng)的集合當(dāng)中，這種集合的抽象就是 CSSRuleSet；
  • CSSRuleSet 提供了一個(gè) addRulesFromSheet 方法，能將 CSSStyleSheet 中的 rule 轉(zhuǎn)換為 CSSRuleSet 中的 rule ；
  • 基于這些個(gè) CSSRuleSet 來(lái)決定每個(gè)頁(yè)面中的元素的樣式；

3. 優(yōu)先、繼承原則

css 的解析遵循 2 個(gè)原則，優(yōu)先原則和繼承原則。

  • 優(yōu)先原則：后解析的內(nèi)容會(huì)覆蓋前邊解析的內(nèi)容；

    • 同一個(gè)選擇器從上到下讀取 css 樣式；
    • 同一類選擇器從上往下執(zhí)行；
    • 不同類型的選擇器優(yōu)先級(jí)遵循先執(zhí)行低優(yōu)先級(jí)再執(zhí)行高優(yōu)先級(jí)；
    • 外部樣式與內(nèi)部樣式合并之后一起執(zhí)行，遵循從上往下的執(zhí)行順序；
    • 內(nèi)聯(lián)樣式最后執(zhí)行 - 優(yōu)先級(jí)最高；
    • 加！important 標(biāo)識(shí)最后執(zhí)行。

  • 繼承原則 - 嵌套的標(biāo)簽擁有外部標(biāo)簽的部分樣式，子元素繼承父元素的樣式。

    • 文本相關(guān)的樣式被繼承，其他的不能繼承；
    • 塊元素的寬度默認(rèn)繼承父元素的寬度，高度則自適應(yīng)。

4. 瀏覽器兼容性

4.1 原因

兼容性問(wèn)題是網(wǎng)站技術(shù)中老生常談的問(wèn)題，包括 HTML、JavaScript、CSS 都會(huì)出現(xiàn)兼容性問(wèn)題。導(dǎo)致這個(gè)問(wèn)題的根本原因是不同的瀏覽器廠商的內(nèi)核不同，導(dǎo)致對(duì) CSS 的解析效果不一致，繼而顯示效果千差萬(wàn)別。這里不去過(guò)分討論內(nèi)核不兼容的深層次原理，而是討論一下大的解決思路，主要包括 4 個(gè)方面，瀏覽器 CSS 樣式初始化、瀏覽器私有屬性，CSS hack 語(yǔ)法和第三方插件。

4.2 定義默認(rèn)樣式

由于瀏覽器的 CSS 默認(rèn)的樣式都不一致，所以簡(jiǎn)單有效的方式是手動(dòng)定義其默認(rèn)樣式。定義默認(rèn)樣式主要針對(duì)父元素，因?yàn)樽釉貢?huì)繼承父元素的樣式，直接定義父元素的樣式簡(jiǎn)單便捷，例如：

實(shí)例演示
預(yù)覽 復(fù)制
復(fù)制成功！
*{
    margin: 5px;/*外間距*/
    padding: 5px;/*內(nèi)間距*/
}
html {
    line-height: 150%;/**/ 
    -webkit-text-size-adjust: 100%; 
}
body {
    margin: 10px;/*外間距*/
}
a {
    background-color: transparent;/*背景色*/ 
}
img {
    border-style: none; /*邊框*/
}
運(yùn)行案例 點(diǎn)擊 "運(yùn)行案例" 可查看在線運(yùn)行效果

以上代碼針對(duì)全局的內(nèi)外間距、HTML 元素的行高、body 元素的外間距、鏈接元素的背景色、圖片元素的邊框樣式做同一定義。

4.3 瀏覽器特有樣式

有些瀏覽器的內(nèi)核有自己特有的 CSS 樣式，這種樣式只能被自己識(shí)別，利用這種特性可以定義一些 CSS 樣式用于兼容特有的瀏覽器版本，例如：

實(shí)例演示
預(yù)覽 復(fù)制
復(fù)制成功！

-ms-transform:rotate(-3deg); /*只兼容IE*/
-o-transform:rotate(-3deg); /*只兼容Opera*/
-webkit-transform:rotate(-3deg); /*只兼容Chrome/Safari*/
-moz-transform:rotate(-3deg); /*只兼容Firefox*/
運(yùn)行案例 點(diǎn)擊 "運(yùn)行案例" 可查看在線運(yùn)行效果

4.4 CSS Hack

Hack 類似于上邊提到的特有 CSS 樣式，區(qū)別在于 Hack 是針對(duì)標(biāo)準(zhǔn)的 CSS 加上特殊符號(hào)，用于被特有的瀏覽器識(shí)別，以下舉例：

實(shí)例演示
預(yù)覽 復(fù)制
復(fù)制成功！
a {
    _margin: 10px; /*前綴加  "_"  只能被 IE6 及以下版本 IE 識(shí)別*/
    *margin: 15px; /*前綴加 "*" , 只能被 IE7 識(shí)別*/
    margin: 12px\9; /*值后綴加 "\9" 被 IE6 及以上版本 IE 識(shí)別*/
    margin: 16px\0;/*值后綴加 "\0" 被 IE8以上版本的IE 以及 Opera15 以下版本識(shí)別 */
    
}
運(yùn)行案例 點(diǎn)擊 "運(yùn)行案例" 可查看在線運(yùn)行效果

以上舉了幾個(gè)代表性的 Hack 的例子，實(shí)際上花大力氣解決這些兼容性問(wèn)題， 無(wú)非是給各個(gè)瀏覽器廠商填坑罷了，開(kāi)發(fā)項(xiàng)目中一般不推薦使用過(guò)多的 Hack ，因?yàn)檫@會(huì)導(dǎo)致代碼生僻難懂，維護(hù)成本過(guò)高。

4.5 第三方庫(kù)

引入第三方庫(kù)可以解決一些兼容性問(wèn)題，方便快捷，成本較低，使用時(shí)只需要通過(guò)引入其 CSS 庫(kù)文件即可，不過(guò)具體是否能解決百分之百的兼容性問(wèn)題還需要具體使用測(cè)試。以下列舉一些第三庫(kù)：

4.5.1 respond.js

有些瀏覽器不支持 CSS 媒體查詢，要實(shí)現(xiàn)響應(yīng)式設(shè)計(jì)難度較大，這個(gè)庫(kù)可以幫助解決不兼容媒體查詢，具體使用方式只要引用這個(gè) JavaScript 庫(kù)即可，它的 GitHub 地址是 respond.js

4.5.2 rem.js

在 css3 中引入了字體單位 rem，這是一個(gè)相對(duì)單位，使用較為頻繁，但是一些老的瀏覽器不支持，所以需要引入第三方庫(kù) rem.js，使用時(shí)只要引入 JavaScript 庫(kù)文件即可。

4.5.3 normalize.css

由于不同的瀏覽器對(duì)于一些 CSS 的默認(rèn)樣式是不相同的，但是有時(shí)我們?yōu)榱思嫒菪孕枰鼈兊哪J(rèn)展現(xiàn)形式一致，所以簡(jiǎn)單的方案是引入一個(gè) CSS 庫(kù)，它的地址是 normalize.css。

5. 小結(jié)

本章通過(guò)介紹 CSS 的歷史來(lái)源，讓大家了解了 CSS 的發(fā)展歷程，然后簡(jiǎn)單說(shuō)明了 CSS 在瀏覽器中渲染視覺(jué)樣式的原理，最后提到了 CSS 在不同瀏覽器的兼容性情況及其解決方案。