Blueprint CSS Framework入门教程

出处：http://www.bestkrup.com/it_info/blueprint-css-framework-learnthebasics-tutorials.html

 

最近在学做wordpress主题，一直纠结于如何来布局，以前学css的时候也听说过css框架这个东西，也知道有个960gs的css framework，也练习过，后来也知道有其它一些css框架，后来听说了Blueprint，听介绍说蛮不错，但是搜索了一下，中文教程却不多，只好到google上面去搜索了，搜到这篇入门的教程，教的内容不多，看来国外的人也喜欢凑字数，无聊的做了简单的翻译，记录一下。

下面内容翻译自：http://divitodesign.com/css/blueprint-css-framework-learn-the-basics/

因为最近发表了一篇关于960 CSS Framework的文章”Learn The Basics”非常成功，我觉得有必要做个详细教程关于”如何开始使用CSS Framework。在使用它之前，很多人都不知道一些基础知识，这也是很平常的。现在是时候改变一下了。

在提到的文章中，很多人在评论里说他们喜欢Blueprint Css Framework多过960 gs。他们觉得Blueprint给予他们更加稳定和使用起来更加容易。这也是为什么我使用Blueprint有一个更好的样式和决定教你基础的工作原理。

这个教程只是给你一个对Blueprint Css Framework基础的入门。
在你使用CSS Framework之前，你必须懂得CSS。

基本原则

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

你需要哪些文件

我们需要下载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 class="container">
<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 class="container">
<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 last">Sponsors</div>
</div>

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

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

更多的练习

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

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