複製鏈接
請複製以下鏈接發送給好友
https://baike.baidu.hk/item/css框架/7743650
複製
複製成功

css框架

鎖定
CSS框架是預先準備好的軟件框架，允許使用層疊樣式表語言更容易，更符合標準的進行網頁設計。大多數這些框架包含至少一個柵格設計（grid）。功能更強大的框架，還配備了更多的功能和附加的基於JavaScript的功能，但大多設計導向的和Unobtrusive JavaScript。本文從功能和充分的JavaScript框架區分它們。
兩個顯着和廣泛應用例子是Bootstrap和Foundation (framework)。其他awsm.css, Flexify, Materialize, Semantic UI。
一些更為大型的框架會使用CSS的解釋器。例如LESS和Sass。
中文名
css框架
產生原因
從最初只是定義文字顏色
定    義
是一系列 CSS 文件的集合體
特    徵
有固有的定義及開發特點
優    點
提高開發效率

目錄

  1. 1 產生原因
  2. 2 定義
  3. 3 特徵
  4. 4 開發順序
  5. 5 優缺點
  1. ▪ 優點
  2. ▪ 弊端
  3. 6 常用css框架
  4. ▪ 960gs
  5. ▪ YUI 2: Grids CSS
  6. ▪ 渴切-開源中文css框架
  1. ▪ Blueprint
  2. ▪ BlueTrip
  3. ▪ Bootstrap
  4. ▪ Elastic CSS
  5. ▪ Easy
  6. ▪ EZ-CSS
  1. ▪ Tripoli
  2. ▪ CleverCSS
  3. ▪ SenCSS

css框架產生原因

編寫css也是一樣，從最初只是定義文字顏色、內容排版，到定義所有的表現。css框架也漸漸被重視了，因為大家都認識到：從具象的表現中抽出抽象的模塊來重複使用，是減少用户下載、方便團隊及個人開發最重要的手段。

css框架定義

CSS 框架是一系列 CSS 文件的集合體，包含了基本的元素重置，頁面排版、網格佈局、表單樣式、通用規則等代碼塊,用於簡化web前端開發的工作，提高工作效率

css框架特徵

1.抽象出常用的css樣式,高再可用性,高移植性
2.有固有的定義,詳細的文檔及開發特點
3.高兼容性,可以兼容流行的瀏覽器
4.以css為主,但不一定全部是css,可能有一些js(或者其他)腳本用於兼容瀏覽器

css框架開發順序

a)格式化reset.css
格式化css的真正好處是能夠快速啓動工作，你可以在新的HTML文件裏引入框架，不用再處理重置padding 和 margin，實現統一的排版、瀏覽器下的相同表現。
b)佈局layout.css
定義頁面是二欄還是三欄，是全屏還是1024×768……
一個網站的設計可能有很多種佈局，但是大多數都是由幾個具有複用性的佈局組成，選擇性的引入所需要的佈局，可以很快地應用所期望的頁面佈局。
c) 基本樣式 type.css
定義body、h1-h6、a:link-a:active、p等的字體大小和顏色。
基本樣式的css引用，譬如將ul定義class為“ul-text”，用來展現相同的icon、行間距、鏈接色彩。
還可以像這樣應用：class=”ul-text square”，li前展現的是方型的icon。
d)表格修飾 table.css
定義table、tr、td、th、thead、tfoot、tbody、caption等標籤的表現。
和基本樣式一樣，但是表格在現有網站的展現形式幾乎都是處理數據，所以分開存放引用。譬如在table上應用table-style-1便是黑色邊框的表格，table-style-2便是黃色邊框的表格。
e)表單修飾 form.css
定義fieldset、label、button、input 、select、textarea這幾個標籤的表現。
大多數網站的表單、按鈕、輸入框幾乎都是一樣的。之所以引入這個css，是為了便於統一在各個瀏覽器中的展現。默認的按鈕、輸入框等在各個瀏覽器下的展現區別很大，雖然在格式化的css中已經初步的統一，但是輸入框的邊框，按鈕的樣式都是需要在這個css中定義的。無奈的是select無法做到統一，如果考慮到用js實現的話，這個成本太大了點。
f) 打印修飾 print.css
修飾打印輸出的頁面。
g) 包含其他css的css
frontpage.css、list.css、detail.css、register.css等等
根據各種引用去引入相應的css。譬如list頁面中沒有需要表格的修飾，那就不引入table.css。以節約代碼量。

css框架優缺點

css框架優點

a) 提高開發效率。
b) 規範名稱定義，便於維護。
c) 規範項目開發流程
d)css代碼更清晰、簡單。html代碼更合理。
e) 大規模項目中可以減少用户下載

css框架弊端

a) 學習成本提高。你需要了解整個框架，需要閲讀框架的文檔。
b)css框架對於一個小項目等頁面來説很臃腫。框架中可能有大部分你用不到的代碼。
c)可能會無法幫助你的技術提高。太依賴框架，以至於很難排除bug。包括框架中本身就帶的bug。
d) 選擇自己需要的框架與開發框架都很痛苦。寫到後面發現越來越不靈活，越來越臃腫。

css框架常用css框架

css框架960gs

960 像素的頁面寬度似乎成為了一種設計標準，在當前各種分辨率下，能夠很好地展現網頁內容。提供較為常用的尺寸來簡化網頁設計過程，使工作簡單高效。

css框架YUI 2: Grids CSS

芒果曾經介紹過由雅虎開發小組推出的 YUI，而這個 YUI Grids CSS 正是其中的一部分。作為最著名的 CSS 框架之一，YUI Grids CSS 提供了四種預設頁面寬度，六種預設模板。其中的負 Margin 技術，使用度量單位 em，清除佈局浮動等技術非常值得學習和借鑑。

css框架渴切-開源中文css框架

渴切(Cutter.css)是一個開源中文 (X)HTML/CSS 框架 ,它的目的是減少你的css開發時間。它提供一個可靠的css基礎去創建你的項目,能夠用於網站的快速設計,通過重設和重建瀏覽器標準，可以讓每個網站防 止枯燥的跨瀏覽器兼容性測試。你可以將他理解成一套模板，裏面包含了大多數站點中所需要的那些css類。他很小，只有四個文件而已。總共不到6KB。

css框架Blueprint

Blueprint 是一款成熟的 CSS 框架，它將佈局(layout)、排版(typography)、組件 (widget)、重置 (reset)、打印 (print) 等分放到不同的 CSS 文件中。在網頁設計時就減少了引入的代碼，提高了頁面加載效率。

css框架BlueTrip

BlueTrip 是一個集成了BluePrint & Tripoli 框架的做好的部分；Hartija 的打印樣式； 960gs的簡潔；Elements 圖標的一個css框架。為你提供一個好用的樣式集合和一個製作網站的通用的方法。這樣你就可以集中精力搞設計了。

css框架Bootstrap

Bootstrap是Twitter推出的一個用於前端開發的開源工具包。它由Twitter的設計師Mark Otto和Jacob Thornton合作開發，是一個CSS/HTML框架。它是一款簡潔、直觀、強悍的前端開發框架，讓web開發更迅速、簡單。其自帶的js以及css可以完成絕大多數常用的網頁特效與響應功能，是一款不錯的框架。

css框架Elastic CSS

Elastic 是一個簡單的 CSS 框架用來對網頁進行佈局。Elastic 可實現各種各樣常見的網頁佈局。

css框架Easy

市面上流行的JQUERY組件功能都被納入其框架中，你只要直接使用這個框架，不用學習複雜的AJAX JQuery語法，非常方便。

css框架EZ-CSS

EZ-CSS是一個輕量級，瀏覽器友好，易於使用的CSS框架。用於創建CSS+Div的頁面複雜佈局（layouts）。

css框架Tripoli

Tripoli是一個用於HTML表現的通用css規範。通過重設和重建瀏覽器標準，Tripoli 為你的網站項目提供了一個標準的、跨瀏覽器表現的基礎。 [1] 

css框架CleverCSS

CleverCSS 是一個用於css的受Python啓發的小型的標記語言，它可用於以整潔的和結構化的方式創建一個樣式表。在很多方面它都比CSS2整潔和強大。與CSS最明顯的區別是句法：它基於縮進而且不單調。雖然這顯然違反了Python的規則，它依然是組織樣式的很好的主意。 [1] 

css框架SenCSS

它為你CSS重複的部分提供了合理的樣式，這樣你就能更加關注於自己網站的樣式。SenCSs不像其他CSS框架那樣，它不包含各種雜亂的佈局樣式或是預定義的柵格系統，那SenCSs能剛什麼呢？baseline, fonts, paddings, margins, tables, lists, headers, blockquotes, forms 等等都是SenCSs所能辦到的。 [1] 
參考資料
  • 1.    Awesome CSS Frameworks, an up-to-date collection of CSS frameworks categorized and ordered by popularity