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

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

css 簡介

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

1. 歷史

1.1 質(zhì)疑

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

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

1.2 尋找

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

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

This would be some font broken up into columns

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

1.3 css 出世

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

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

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

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

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

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

2. 原理

2.1 瀏覽器渲染

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

  • HTML parser 生成 DOM 樹；
  • css parser 生成 style rules

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

2.2 css 解析器

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

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

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

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

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

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

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

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

4. 瀏覽器兼容性

4.1 原因

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

4.2 定義默認樣式

由于瀏覽器的 CSS 默認的樣式都不一致，所以簡單有效的方式是手動定義其默認樣式。定義默認樣式主要針對父元素，因為子元素會繼承父元素的樣式，直接定義父元素的樣式簡單便捷，例如：

實例演示
預(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; /*邊框*/
}
運行案例 點擊 "運行案例" 可查看在線運行效果

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

4.3 瀏覽器特有樣式

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

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

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

4.4 CSS Hack

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

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

以上舉了幾個代表性的 Hack 的例子，實際上花大力氣解決這些兼容性問題， 無非是給各個瀏覽器廠商填坑罷了，開發(fā)項目中一般不推薦使用過多的 Hack ，因為這會導(dǎo)致代碼生僻難懂，維護成本過高。

4.5 第三方庫

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

4.5.1 respond.js

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

4.5.2 rem.js

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

4.5.3 normalize.css

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

5. 小結(jié)

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