标签:style http io 使用 ar java for 文件 数据
CSS 框架是一系列 CSS 文件的集合体,包含了基本的元素重置,页面排版、网格布局、表单样式、通用规则等代码块,用于简化web前端开发的工作,提高工作效率。
产生原因
互联网行业已经发展了多年,浏览器也从最早流行的NS到现在的FF3.IE7等等……前端开发工程师的职位也诞生了。近几年在web开发中,有个非常火的词——“框架”。YUI、JQuery、Prototype这些javascript框架在开发网站时,确实成为前端开发工程师的手中利器。为什么呢?因为框架是包含工具、函数库、约定,以及尝试从常用任务中抽象出可以复用的通用模块,让设计师与程序员避免重复开发。
编写css也是一样,从最初只是定义文字颜色、内容排版,到现在定义所有的表现。css框架也渐渐被重视了,因为大家都认识到:从具象的表现中抽出抽象的模块来重复使用,是减少用户下载、方便团队及个人开发最重要的手段。
css框架的特征
1.抽象出常用的css样式,高再可用性,高移植性
2.有固有的定义,详细的文档及开发特点
3.高兼容性,可以兼容流行的浏览器
4.以css为主,但不一定全部是css,可能有一些js(或者其他)脚本用于兼容浏览器
css框架的开发顺序
格式化css的真正好处是能够快速启动工作,你可以在新的HTML文件里引入框架,不用再处理重置padding 和 margins,实现统一的排版、浏览器下的相同表现。
定义页面是二栏还是三栏,是全屏还是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。
定义table、tr、td、th、thead、tfoot、tbody、caption等标签的表现。
和基本样式一样,但是表格在现有网站的展现形式几乎都是处理数据,所以分开存放引用。譬如在table上应用table-style-1便是黑色边框的表格,table-style-2便是黄色边框的表格。
定义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) 规范项目开发流程
e) 大规模项目中可以减少用户下载
css框架的弊端。
a) 学习成本提高。你需要了解整个框架,需要阅读框架的文档。
b) css框架对于一个小项目等页面来说很臃肿。框架中可能有大部分你用不到的代码。
c)可能会无法帮助你的技术提高。太依赖框架,以至于很难排除bug。包括框架中本身就带的bug。
d) 选择自己需要的框架与开发框架都很痛苦。写到后面发现越来越不灵活,越来越臃肿。
常用的css框架:
960 像素的页面宽度似乎成为了一种设计标准,在当前各种分辨率下,能够很好地展现网页内容。提供较为常用的尺寸来简化网页设计过程,使工作简单高效。
芒果曾经介绍过由雅虎开发小组推出的 YUI,而这个 YUI Grids CSS 正是其中的一部分。作为最著名的 CSS 框架之一,YUI Grids CSS 提供了四种预设页面宽度,六种预设模板。其中的负 Margin 技术,使用度量单位 em,清除布局浮动等技术非常值得学习和借鉴。
Blueprint 是一款成熟的 CSS 框架,它将布局 (layout)、排版 (typography)、组件 (widget)、重置 (reset)、打印 (print) 等分放到不同的 CSS 文件中。在网页设计时就减少了引入的代码,提高了页面加载效率。
BlueTrip 是一个集成了BluePrint & Tripoli 框架的做好的部分;Hartija 的打印样式; 960gs的简洁;Elements 图标的一个css框架。为你提供一个好用的样式集合和一个制作网站的通用的方法。这样你就可以集中精力搞设计了。
Elastic 是一个简单的 CSS 框架用来对网页进行布局。Elastic 可实现各种各样常见的网页布局。
市面上流行的JQUERY组件功能都被纳入其框架中,你只要直接使用这个框架,不用学习复杂的AJAX JQuery语法,非常方便。
EZ-CSS是一个轻量级,浏览器友好,易于使用的CSS框架。用于创建CSS+Div的页面复杂布局(layouts)。
Tripoli是一个用于HTML表现的通用css规范。通过重设和重建浏览器标准,Tripoli 为你的网站项目提供了一个标准的、跨浏览器表现的基础。
CleverCSS 是一个用于css的受Python启发的小型的标记语言,它可用于以整洁的和结构化的方式创建一个样式表。在很多方面它都比CSS2整洁和强大。与CSS最明显的区别是句法:它基于缩进而且不单调。虽然这显然违反了Python的规则,它依然是组织样式的很好的主意。
它为你CSS重复的部分提供了合理的样式,这样你就能更加关注于自己网站的样式。SenCSs不像其他CSS框架那样,它不包含各种杂乱的布局样式或是预定义的栅格系统,那SenCSs能刚什么呢?baseline, fonts, paddings, margins, tables, lists, headers, blockquotes, forms 等等都是SenCSs所能办到的
标签:style http io 使用 ar java for 文件 数据
原文地址:http://www.cnblogs.com/Hcjer/p/4024050.html