css Blueprint是什么

PHP中文网 • 2025年3月12日 00:11:53 • 编程技术 • 阅读 2

Blueprint是一个css框架，它将布局（layout）、排版（typography）、组件（widget）、重置（reset）、打印（print）等分放到不同的CSS文件中。

本教程操作环境：windows7系统、Dell G3电脑。

推荐：css视频教程

Blueprint （CSS框架）

Blueprint 是一个CSS框架，其目的是减少你的CSS开发时间了。它给你的CSS了坚实的基础，具有易于使用的网格的基础上最高的项目，合理的排版，甚至打印样式表。

立即学习“前端免费学习笔记（深入）”；

在设计网页时要以 Blueprint 为指导，然后再设计或生成 HTML，以便将 Blueprint CSS 样式应用于 HTML 元素。实际上，由于 Blueprint 提供了强大的 CSS，因此可以在 HTML中设计网页，而不必使用图像设计程序来模拟最终页面，比如说 photoshop。从一定意义上说，Blueprint 提供了真正的所见即所得的（WYSIWYG）网页设计，因为原型将使用与最终站点相同的代码。

此外，由于 Blueprint 的主要作用是模拟打印页的外观，因此使用 Blueprint 进行交互式的设计的感觉更像是在使用 QuarkXPress 或 AdobeInDesign。Blueprint 样式基于像素和一个 18 像素的基线网格。借助设计天赋和努力，可以创建具有专业外观的页面。

样式例子

Blueprint 的默认网格是 950 像素宽，分为 24 个由 10 像素分隔线隔开的 30 像素宽的列：[(24 列 * 30 像素/列) + (23 分隔线 * 10 像素/分隔线) = 950 像素]。如果偏好或者需要更宽或更窄的网格或不同的列宽，Blueprint 提供了一个 Ruby 工具用于将 Blueprint 重新生成到需要的规范中。Ruby 工具还创建了一个网格图像，可以在 Photoshop中引用，并且压缩了最终的CSS以减小文件大小，从而缩短了传输时间和带宽。

通常，不应该编辑 Blueprint CSS 文件。而是应该在一个单独的文件定义自己的样式，并根据需要覆盖 Blueprint 代码。这是最后一个文件 css/custom.css 的作用，这个文件是作为代码的一部分创建和维护的。