Blueprint CSS框架初探.pdfVIP

福 建 电 脑 2010年第 2期 BlueprintCSS框架初探 赵江声 (厦门大学软件学院 福建 厦门 361005) 【摘 要】：CSS在网站前端设计中起着很重要的作用并且使用十分普遍，但在开发效率、风格统一和系统升级等方面 存在着诸多问题。本文正是从该背景 出发，对CSS框架进行简介，并对BlueprintCSS框架结构和内容作 了较为详细的阐述。 本文结合研发实践，对该框架的难点和疑点着重加以研究分析，对上述 问题加 以解决；本文还论述了相关可视化工具的原理 和使 用方法 。 【关键词】：CSS框架；前端设计；界面；字体大小；CSS；em；Boks 1、背景 ．Drint．css主要用于处理打印．提供一些打印的基本规则 。 在网站开发中．DIV+CSS是当今前端设计中最为流行的结 ． ie_css主要用于ie显示的兼容 ．修补一些在 ie版本 5、6、7 构：其中CSS负责美化页面和确定页面整体风格。所谓 CSS。就 中显示方面 的问题 是CascadingStyleSheets(层级样式表)的简称 。就其用途而言， 3Blueprint研究 利用其属性可以设置字体、颜色、背景等页面格式 ；利用其定位 3．1 文本字体大小及em 可以使页面布局更加规范、好看 ：利用滤镜可 以使页面产生多媒 在使用 BIueprintCSS框架 的过程 中．首先会产生一个很基 体效果。所以CSS在界面设计 中起着相当大的作用 。 础但是很重要的问题 ．就是字体大小的设定 因为大多数网站项 但随着 Web项 目的不断增多或者需要 团队开发大型的 目开发首先要设定字体尺寸．如果我们把 font—size设定为一固 Web项 目．很多项 目的负责人员或者开发人员越来越感到．CSS 定数值 比如 12Dx，用浏览器菜单 4查看 4文字大小，选择其 中 文件的开发工作量很大 ．因为几乎每个页面都需要有CSS文件 ： 的选项 ．并不能改变文字的大小．这对于觉得文字大小太大或太 如果每个开发人员各 自为战．编写各 自的CSS文件 ．这样网站风 小的用户来说用户体验是不好 的 而 em可以解决这个 问题 ，这 格的统一或升级改版就会面临难 以解决的困难 由此最近业界 个框架便是以em作为基本的字体大小单位 便引出CSS框架的概念。但 目前对其并没有严格 的定义。 网页文本大小(font—size)的单位有四种：px、pt、em、％。px在 CSS框架通常只是一些 CSS文件的集合 ．这些文件包括基 以前的Web页面设计中使用 比较普遍 ．而em其实并不常用 ．那 本布局 、表单样式 、网格或简单结构 、以及样式重置 。比如 ：ty． 么什么是 em?em是可伸缩的网页文本尺寸单位 ，一个 em即当 pography_css用于设定基本排版规则 ，grid_css用于设定 网格布 前 网页文本的大小。如果当前 网页文本大小为 12px，则 lem为 局 ，layout．css用于通常 的布局 ，form．css用于设定表单样式 ，而 12px．1．5em则为 18px。 genera1．css则用于设定通用规则 在该框架的设置排版样式的typography．CSS中．各种元素几 目前已经有一些 CSS框架 ．本质上它们并没有太多区别 ．只 乎都是以em为单位进行设置。例如 ： 是在功能划分、规则实现上有一些差异 所 以框架能帮助设计师 h1{font—size：3em；line—height：1；margin—bottom：0．5em；} 快速高效地书写CSS文档 ．可以将其理解成一套模板 。 h2{font-size：2em；margin-bottom：0．75em；} CSS框架 中较著名的有