「Blueprint CSS Framework入门教程」

基本原则

在你真正开发这个框架之前,你需要一些东西作为你的前期工作。

你需要哪些文件

我们需要下载CSS Framework先。你可以从这里下载。

打开你的zip/rar文件,你会看到很多文件,因为这并不单单是你的基础CSS Framework,而且还有很多其他特性,这些特性并不是我们这里要讨论的。

我们只需要screen.css,print和ie.css,你可以在blueprint文件夹找到它们。

不要编辑原始文件

我建议你不要修改这些css文件,因为他们是模版的一部分。一个模版在未来可能会有一些升级,如果你做了改动,你将不能方便的进行升级。

如何把blueprint加到你的网站

添加blueprint只需要添加下面几句代码。你需要把它们插入在标签里面。

<link rel="stylesheet" href="screen.css" type="text/css" media="screen, projection">
<link rel="stylesheet" href="print.css" type="text/css" media="print">
<!--[if IE]><link rel="stylesheet" href="ie.css" type="text/css" media="screen, projection"><![endif]-->

当然,你可能像加一些自定义的样式。我们必须建立另外一个独立的css文件,例如,你可以把文件命名为style.css。使用下面代码来添加文件到网页。

<link rel="stylesheet" href="style.css" type="text/css">

Blueprint可以做什么

在Blueprint的样式表里面,我们有很多样式,我会讲解最为重要的地方先—grid layout。

Container容器

我们需要从一个容器container开始,这个container宽度为950px,居中。添加24列到这个容器,每一列的宽度是30px,10px的margin添加到列的右边。

<div class="container"></div>

Columns列

你可以选择24列中的其中一种,例如,你可以选择4个div由4、12、4和4的列组成。下面是他们结构。

<div class="container">
<div class="span-4">Sidebar</div>
<div class="span-12">Content</div>
<div class="span-4">Photos</div>
<div class="span-4">Sponsors</div>
</div>

正如你们所见,blueprint使用span-x样式来决定你需要多少列。

Margin外边

每一列的margin-right都是10px。当我们离开这个结构的时候,最后一列也会有10px的margin-right,我们并不需要这样,因为这样会破坏我们的外观。

Blueprint有一种方案,使用.last样式可以解决这个问题。当你像下面那样加上last样式,你的外观将会呈现的很完美。

<div>
<div class="span-4">Sidebar</div>
<div class="span-12">Content</div>
<div class="span-4">Photos</div>
<div class="span-4 last">Sponsors</div>
</div>

样式化列

你已经知道怎样使用Blueprint建立结构,现在该加上padding和背景颜色。我们不能修改原始的screen.css和Blueprint.css文件,那么该怎么做呢?很简单,记得我叫你们建立的style.css文件吗?

首先我们必须弄一下我们的结构,css的id比class更重要,我们将会添加id到所有作为boxes的div里面。当我们使用id来作为选择器来样式化的时候,我们将会覆盖class的样式。

<div>
<div id="sidebar" class="span-4">Sidebar</div>
<div id="content" class="span-12">Content</div>
<div id="photos" class="span-4">Photos</div>
<div id="sponsors" class="span-4">Sponsors</div>
</div>

现在我们打开我们自定义的样式表(style.css或者你也可以i命名为其他名字),用id作为选择器来样式化,如果你并不知道我的意思,那么建议你从基础开始学习一下css。

我已经做了一个简单的布局和加了一些自定义的样式。请点击这里查看

更多的练习

Blueprint不单只是上面介绍的那么简单。举个例子,你可以添加class像.hide来隐藏元素,添加.highlight来给一个元素特定的背景颜色和高亮文本颜色,添加边框,默认的排版和表格样式已经是相当美观的。

用来定位的class也是可以添加的,不过,我还没有真正用上它们。一旦我在使用这个css框架有了更好的经验,我会接着发表关于Blueprint css Framework的文章来跟大家分享的。

阅读Blueprint相关文章

这里有很多相关的文章、教程和网站,所以,如果你想学习更多关于这个框架,看看下面的链接吧:

转载自: 我是咕噜比 版权所有
翻译自:http://divitodesign.com/css/blueprint-css-framework-learn-the-basics/