html中什么是框架,什么是css框架
css框架對于一個小項目等頁面來說很臃腫,框架中可能有大部分你用不到的代碼。那么你對css框架了解多少呢?下面就讓學習啦小編來給你科普一下什么是css框架。
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框架的優缺點
優點
a) 提高開發效率。
b) 規范名稱定義,便于維護。
c) 規范項目開發流程
d)css代碼更清晰、簡單。html代碼更合理。
e) 大規模項目中可以減少用戶下載
弊端
a) 學習成本提高。你需要了解整個框架,需要閱讀框架的文檔。
b)css框架對于一個小項目等頁面來說很臃腫??蚣苤锌赡苡写蟛糠帜阌貌坏降拇a。
c)可能會無法幫助你的技術提高。太依賴框架,以至于很難排除bug。包括框架中本身就帶的bug。
d) 選擇自己需要的框架與開發框架都很痛苦。寫到后面發現越來越不靈活,越來越臃腫。
css框架的常見問題
1、頁面外部引用樣式過多。
譬如關于ul的margin定義,在格式化的css中會聲明為0,而在基本樣式的css中又可能會聲明margin:5px 10px;
所以在Yslow中會出現多次定義。
2、組件復用性的考量。
譬如表單定義的css中定義了所有表單的修飾,而假定在注冊這個頁面中只是需要這個css的百分之三十。那是否應切割出去那不要的百分之七十?
綜合以上的二個問題,個人認為解決的方式便是封裝,讓該有的有,不該有的沒有。盡量減少http連接數和css的大小。但如果徹底是這樣做的話,css的復用性又會變得很差,后期手工的封裝會很痛苦。
3、到底該不該支持em?
可見如要支持em,最大的目的是為了在瀏覽器中可以根據用戶的分辨率大小自由縮放,對于擁有超大顯示器的用戶與小顯示器的用戶是非常有用的。可是在采集我們用戶的瀏覽器數據后,發現分辨處于這二端的用戶非常少,可想而知,為這部分的用戶多花比正常開發一倍以上的時間顯然是件不劃算的事情,所以當初在開發tbsp的時候,我們團隊就決定了不支持em。當然這是個建議,我們也希望能使用em帶給用戶最好的感受。
看過“css框架優缺點”的人還看了:
總結
以上是生活随笔為你收集整理的html中什么是框架,什么是css框架的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: Xcode 秘籍 —— 很多 iOS 开
- 下一篇: 小技巧积累