CSSOO的思想及CSS框架的應用

?????? 前語：通過這次研究分析總結，個人對CSSOO的概念及應用的思路也更明確一些，是一個和大家共同學習的過程。

一、CSS框架

框架目的：

給出一個相對規范的開發方法，給出一些具體的可以操作流程內容，按照框架的思路來方便靈活的完成一個css設計。規劃了樣式應用的代碼組織模式，進行頁面布局的一種靈活的組合方式。

目前CSS框架：

國內比較出名好像是YUI。

• Blueprint
• YAML :: Yet Another Multicolumn Layout
• Yahoo UI Grids
• Elements CSS Framework

二、框架的應用

CSS能形成框架應用主要是歸功于樣式選擇器的層疊和繼承。

CSS的選擇器有：類型選擇器，后代選擇器，ID選擇器，類選擇器，高級選擇器（屬性選擇器，子選擇器，相鄰選擇器。瀏覽器支持不一）及這些選擇器的組合應用。

1、層疊和特殊性

?

那么這些選擇器在使用過程中，如何確定顯示內容的最終渲染效果？

這主要借助于CSS的層疊和特殊性。樣式表的應用規則如下：

1). 首先根據樣式表的重要度次序來應用樣式表，重要性從上到下降低
????????????? ！important的用戶樣式
????? ????????????? ！important的作者樣式
????? ????????????? 作者樣式
????? ????????????? 用戶樣式
????? ????????????? 瀏覽器定義的樣式

2）在確定樣式表的重要次序的基礎上根據特殊性覺得規則的應用。

每種選擇器被分配一個數字值。然后，將規則的每個選擇器的值加在一起，計算出規則的特殊性。

選擇器的特殊性分成四個成分等級：a、b、c和d。

l???????? 如果樣式是行內樣式，那么a = 1。

l???????? b = ID選擇器的總數。

l???????? c = 類、偽類和屬性選擇器的數量。

l???????? d = 類型選擇器和偽元素選擇器的數量。

使用這些規則可以計算任何CSS選擇器的特殊性。

表1-1給出一系列選擇器以及相應的特殊性

注：用style屬性編寫的規則總是比其他任何規則特殊；具有ID選擇器的規則比沒有ID選擇器的規則特殊；具有類選擇器的規則比只有類型選擇器的規則特殊；

3）如果兩個規則的特殊性相同，那么后定義的規則優先。

4) !important :如果應用這個規則，那你可以不管上面2，3兩點的復雜的規則了，但若過多的應用此!important將破壞樣式的層疊應用。

?

2、繼承，重載，抽象，實例

<父>

<元素 ?? (繼承上文)?? Class="A B ..."??? Id="ID"Style="屬性:值;">

??????? ???? <子>... </子>

?? </元素>

</父>

1.???

繼承，重載的對象是樣式的某一個屬性。

2.??? 上文環境：不由元素自身的class，id，style行里樣式決定的，由雨它所處的祖先級元素的環境而自動擁有的樣式屬性。

3.??? 元素的樣式屬性規則Class(A) ?<?Class(B) <?Class(…) < ID < Style，對于應用規則越往右，優先級越高。

元素首先會根據元素所在的上文擁有一些樣式屬性，

前面有的后面沒有的，后面默認繼承前面的樣式，

前面沒有的后面有的，可看作增加了私有的樣式

前面有的后面也有的，可看作重載了相同屬性的樣式。

4.??? 同類型的元素（相同標簽名），同類元素（塊，行元素）

5.??? 操作對象：應用某規則的元素及元素的后代。

6.??? 一個元素的樣式由其上文和該元素所設置的class，id，style行里樣式確定，且該元素的設置也將影響其后代元素的樣式屬性，

7.??? <父>的樣式設置，影響其所有的后代的部分屬性（共同擁有的那部分屬性），<元素>繼承、重載并私有新的樣式屬性，且在重載的部分中賦予<子>中由<父>確定的那部分新的樣式。

8.??? CSSOO類，類群。

CSSOO類：選擇器規則 {類主體}

選擇器規則：是各種選擇器的組合。

類主體：屬性：值;的集合。

CSSOO類只有屬性，沒有方法（擴展：如果擁有方法?js？c#？）

由CSSOO類組成的塊叫類群。

9.??? 模型應用

語義片段，CSSOO類群

10.父子元素的繼承，重載… 元素自身的class id style行里元素設置的繼承，重載。

11.實例化：符合選擇器規則的語義片段的應用。

?

?

?????? 抽象、繼承，重載，實例的我們是看不到一個明顯的過程的，沒有像程序一樣的顯示的聲明，一切都是思考后的一種結果。

?

CSS的繼承本身是指應用樣式的元素的后代會繼承該元素的某些屬性，這些屬性通常是父元素和子元素都有的屬性，一般是修飾方面的屬性，比如顏色，在結構排版方面的一般不會繼承。

要涉及框架的應用，可以將繼承的理解擴展開來，css本身的繼承只作為一個內在的方面。

下面分析理解CSSOO的繼承，及重載，抽象，實例。(個人將CSS的類面向對象的應用，稱為CSSOO.)

CSSOO的類可以理解為一條條樣式規則及規則組合。

形如：選擇器{屬性：值}。

.testClass1 {}

.testClass1 h1{}

.testClass1 p{}

#testId {}

層疊和特殊性為CSSOO提供應用規則，通過這種規則的組合，可以達到類面向對象化的效果。

有點需要指出，框架的應用必須形成有語義結構的html代碼結構模塊，下面會結合土豆網的一個box的代碼片段進行這個CSSOO的分析理解。

1)??????? 抽象
css的類class的自身定義就是提取元素中共用的東西放在一個class里面，以便需要相同表現的元素進行應用。這是css的自身的一種抽象應用。
css的類的規則定義是以： .test{屬性:值;}的方式定義的。比如給所用的img設置成3px red邊框，比如給 某些div，某些table設置共同的背景色等等。

CSSOO的抽象：

將公用的重復的東西抽象出來作為基類class。基類可以分成多個方面.

可以利用類型選擇器，和class類選擇器及高級選擇器的規則組合對樣式進行提取抽象，抽象出來的可以成為父類。

對于ID選擇器在抽象中盡量較少應用，因為id選擇器不利于抽象和繼承。如果應用id選擇器定義樣式，這個樣式類就相當于程序中的類加了sealed修飾符，無法被繼續。Id選擇器定義樣式類一般用于比較具體的類中。

?

抽象分為全局抽象和局部抽象。
全局抽象：

常是通過類型選擇器將元素的默認樣式重置統一成你想要表現出的樣式。以及為一些元素的包含關系進行一些樣式定義。如CSS框架應用中的reset.css，typography.css
比如：*{padding:0;margin:0}?,?div p {color:red;}

還有是通過class類定義一些比較傾向于某個方面的樣式，大多是表象樣式。這些樣式一般是與局部抽象無關的，但可以用于任何元素的樣式，這些類可以統一風格，增加使用靈活性。
局部抽象：

我們自行定義的一些語義模型，并對這些模型設置一個統一的樣式應用，如土豆網的box盒模型，為引用box盒模型的實例提供相同表現。

CSS框架除了提供分欄布局的模型外一般是不提供這些局部抽象的，局部抽象是根據我們的具體項目使用，定義一些模型。

上面的這些抽象都將作為一個父類來繼承。

2)??????? 繼承與重載

一個語義代碼結構不附加任何的行內樣式，不添加id選擇器，不添加class類，這個元素將按照CSS本身繼承特性擁有一些樣式。

當添加id或者class時，就可以理解為發生了繼承這一個行為，當添加的類中含有全局抽象中定義的屬性時，會按照層疊和特殊性的原則進行重載。

如：<div class="traffic car" id="mycar"></div>

traffic是抽象出來的交通工具的樣子， car里描述了一些小轎車特有的樣子，mycar是描述了我的車擁有的特征。

通過上面的一條html片段，基本能夠了解CSSOO的一個思想。

繼承的行為是在class="traffic car"這樣的過程中能夠發生的。

當car中擁有需要修改traffic里的一些外觀屬性時，就發生了重載，比如traffic將交通工具的顏色默認設置成黑色，而car里定義默認的顏色為紅色。就會放生重載。重載是針對已經擁有的屬性來說的。

繼承是兩方面，一種是隱式的集成，就是繼承全局抽中里，利用類型選擇器進行定義的樣式規則，另一種就是在如上面的html片段中產生的一種繼承行為，即car 繼承了traffic描述的交通工具的基本外觀特征。

3)??????? 實例：對于某一個元素應用是就是將這個元素實例化。簡單點理解，就是拷貝相同的語義結構代碼，并應有CSSOO的類規則。如果靈活實例化的問題，是一個CSS框架的好壞的關鍵, 也是判斷CSSOO的樣式框架是否合理一個標準。
以怎樣的一種方式進行實例化，是一個非常重要的可研究的地方。

3、結合土豆網box模型實例（未整理完）

?????? 左圖是土豆網BOX模型的語義片段。

三、CSS框架的組織

?

框架組織

CSS框架首選組織css的文件維護結構。通常將css按照邏輯及涉及的方面分化成幾個樣式表文件。一般會從以下幾個方面進行組織。

1.?????? 重置瀏覽器的默認風格。
這個應用主要是統一各種瀏覽器之間的默認設置的差異

2.?????? 組織一種部件的應用模型
比如豆瓣的導航模型，盒模型，包裝模型， blueprint框架的布局排版的組合應用

3.?????? 統一某些具體標簽元素及元素組合模型的表現。
比如，form表單里的各種控件標簽的表現風格；組合的盒模型，導航元素組合；自己設置的布局組合

4.?????? 創建通用css類。

5.?????? hack文件：主要是為平衡各個瀏覽器的版本bug的文件

比如blueprint中：

reset.css 充值樣式?
typography.css?排版
grid.css?布局（能作為框架的，這是個關鍵）
form.css??表單部件

還有：

widgets.css?? 在具體項目中定義的模型，如土豆網的box模型，pack包裝模型

一個css框架的好壞個人感覺主要在排版和項目中的模型是否有好的靈活的設計。

如果使用css框架？?（未整理完）

如果使用主要涉及到性能問題。
因為css分成多個文件，會增加http請求數，如果放到一個文件里面，又會降低框架使用的靈活性。

如何能做到靈活性？理想方案：一個帶參數的請求，服務器端動態選擇組合輸出文件。

結合Blueprint CSS 框架進行分析（未整理完）

Blurprint的靈活布局

和blueprint的grid.css進行分析,基于網格的布局

相關概念：

?????? 層疊：css的全稱為層疊樣式表（Cascading Style Sheets）。從命名可以看出層疊是樣式表非常重要的一個屬性。按照一定的規則，規則高的樣式會覆蓋規則低的樣式。

繼承(inheritance): 繼承（的規則）允許樣式不僅應用于某個特定的元素（父元素），而且應用于其后代（子元素）。

特殊性(specificity)：即某條CSS規則特殊性越高，它的樣式越優先被采用，網頁就會顯示它所指定的樣式。

瀏覽器樣式：不同的瀏覽器廠家，都會在瀏覽器中給所有的html文章設置一種共同的特征，比如：你是比爾蓋茨，你喜歡把IE的字體的大小設置成一個蘋果那么大（呵呵，夸張了）。正式由于瀏覽器默認樣式的存在，所以基本所有的CSS應用時為了統一絕大多數的默認樣式，都會對其進行重載。所以，css的框架里都會有一個reset.css重置一些默認的，及你想要統一的一些樣式。

用戶樣式：用戶是指訪問網站的人，由于瀏覽器會提供一些輔助功能，所以，用戶可以調整一些網站作者沒有定義的樣式屬性，比如調整字體為紅色，但這個前提是作者沒有定義過字體的顏色，如果定義了，那么用戶調整將不起作用。（如：IE: “工具”>”Internet選項”>“輔助功能“> “用戶樣式表”）。

作者樣式：就是指網站設計者設計的css樣式，根據樣式放置方式的不同，作者樣式分為內聯樣式，外聯樣式，內嵌樣式。三者的優先級是：內聯>內嵌>外聯.

內聯樣式：即行內樣式，在元素的style屬性中設置的樣式

外聯樣式：在header中用link標簽導入的樣式

內嵌樣式：在header中用<style>標簽編寫的樣式

!important規則：在任何聲明里利用這個規則聲明的，將擁有更高的優先級。

樣式應用規則：指通過一種選擇的規則，在編寫的樣式中確定哪種將最終應用在元素上，顯示出最后的效果。規則應用的對象是樣式的某個屬性，而不是用{ }括起來的內容，當樣式的某一個方面的屬性在不同的樣式中定義時，將按該規則進行選擇。

???????? CSSOO:個人對CSS的一種相似于面向對象應用的簡寫，指css的抽象，繼承，重載，實例的面向對象化的一種規則。

???????? CSSOO的對象及實例化：一個具有一定語義結構的html代碼塊模型，及引用的CSSOO的類的樣式規則應用。將這樣的一個代碼塊和規則拷貝到頁面中使用的過程，可以引申為對象的實例化的過程。

???????? 表象樣式：諸如字體大小，顏色方面的樣式屬性。

???????? 結構樣式：諸如長，寬，絕對定位，相對定位，等等確定元素將在屏幕的某個位置呈現的屬性。如width,height，padding， margin， border-width， float,display, clear，position等等

?

轉載于:https://www.cnblogs.com/tenero/archive/2008/05/29/1209772.html

總結

以上是生活随笔為你收集整理的【原创】CSSOO的思想及CSS框架的应用（未整理完）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。