Before Coding [4] - HTML与CSS - 禅意花园
CSS 指层叠样式表 (Cascading Style Sheets)，样式定义如何显示 HTML 元素，样式通常存储在样式表中，把样式添加到 HTML 中，是为了解决内容与表现分离的问题。外部样式表可以极大提高工作效率，其通常存储在 CSS 文件中，多个样式定义可层叠为一。
样式解决了一个普遍的问题
HTML 标签原本被设计为用于定义文档内容。通过使用 <h1> 、 <p> 、 <table> 这样的标签，HTML 的初衷是表达“这是标题”、“这是段落”、“这是表格”之类的信息。同时文档布局由浏览器来完成，而不使用任何的格式化标签。
由于两种主要的浏览器（Netscape 和 Internet Explorer）不断地将新的 HTML 标签和属性（比如字体标签和颜色属性）添加到 HTML 规范中，创建文档内容清晰地独立于文档表现层的站点变得越来越困难。
为了解决这个问题，万维网联盟（W3C），这个非营利的标准化联盟，肩负起了 HTML 标准化的使命，并在 HTML 之外创造出样式（Style）。所有的主流浏览器均支持层叠样式表。
更多CSS的资源，可在 W3School 中获取： http://www.w3school.com.cn/css
神奇的CSS
不同CSS的能够使完全一样的HTML，变成完全不同的模样。比如在 mezzoblue.com 这个博客中，2003年5月7日的一篇博文里，作者提供了一个平台—— 《CSS Zen Garden》 ，完全一样的HTML，自己或读者们编写并提供各式各样的CSS文件，从而形成了200余个完全不同各式各样的网页。
![Before Coding [4] - HTML与CSS - 禅意花园](http://www.liuhaihua.cn/wp-content/uploads/2016/07/ABfy2un.jpg)
![Before Coding [4] - HTML与CSS - 禅意花园](http://www.liuhaihua.cn/wp-content/uploads/2016/07/AbY7Zf.jpg)
所以我们在说 HTML 的时候，通常不会脱离 CSS，CSS可以使得一个网页变得丰富多彩起来。
由于限于篇幅问题，且本书是以提供指导为主，所以本书不会详细去讲解基本的 HTML 与 CSS，所有语法知识都附有学习资源，请初学者们务必抽一些时间出来自学完成，否则后面的课程会无法跟上，将导致看完了本书也终会一无所获。
CSS禅意花园
![Before Coding [4] - HTML与CSS - 禅意花园](http://www.liuhaihua.cn/wp-content/uploads/2016/07/bYR7Jr.jpg)
《CSS禅意花园》这本书的作者是世界著名的网站设计师，书中的范例来自网站设计领域最著名的网站—— CSS Zen Garden （CSS禅意花园： http://www.csszengarden.com/ ）。全书分为两个主要部分。第1章为第一部分，讨论网站“CSS禅意花园”及其最基本的主题，包含正确的标记结构和灵活性规划等。第二部分包括6章，占据了书中的大部分篇幅。
每章剖析“CSS禅意花园”收录的6件设计作品，这些作品围绕一个主要的设计概念展开，如文字的使用等。通过探索36件设计作品面临的挑战和解决的问题，读者将洞悉主要的 Web 设计原则以及它们运用的CSS布局技巧，理解 CSS 设计的精髓，恰当地处理图形和字体来创建界面优美、性能优良且具有强大生命力的网站。
![Before Coding [4] - HTML与CSS - 禅意花园](http://www.liuhaihua.cn/wp-content/uploads/2016/07/JJZJj2B.jpg)
一个优秀的前端工程师，不在于技术有多高超，也不在于作品有多美，而在于设计理念是否独到、有创意。很明显，禅意花园，有利于培养我们形成优秀的设计思想。
优雅的前端开发框架——Bootstrap
既然 CSS 这么美好，肯定有一些已经定义好的优美的样式吧？
没错，那就是前端开发框架。网上有很多精美的框架，这里推荐一个开源免费主流的框架—— Bootstrap 。
Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。它由 Twitter 的设计师 Mark Otto 和 Jacob Thornton 合作开发，是一个 CSS/HTML 框架。Bootstrap 提供了优雅的 HTML 和 CSS 规范，它即是由动态 CSS 语言 Less 写成。Bootstrap 一经推出后颇受欢迎，一直是 GitHub 上的热门开源项目（ https://github.com/twbs/bootstrap ），截止至笔者写此节时，Star 数98000，Fork 数43500。
![Before Coding [4] - HTML与CSS - 禅意花园](http://www.liuhaihua.cn/wp-content/uploads/2016/07/VNJfEf.jpg)
具体使用方法，可以查看文档，在Bootstrap中文网上有很好的中文社区提供初学者学习： http://www.bootcss.com/
下载地址： http://v3.bootcss.com/getting-started#download
完美的图标字体——Font Awesome
![Before Coding [4] - HTML与CSS - 禅意花园](http://www.liuhaihua.cn/wp-content/uploads/2016/07/j6ZvmqU.jpg)
Font Awesome，官网上是这样介绍的：完美的图标字体，只为 Bootstrap 设计。使用 Font Awesome，可以很方便的为网页添加各式各样的图标。它同时也是 GitHub 上的热门项目： https://github.com/FortAwesome/Font-Awesome ，截止至笔者写此节时，Star 数43000，Fork 数7400。
一个字体文件，249个图标，一个字体文件包含了所有图标。Font Awesome 可以完整表达 web 页面上每个动作的含义。同时，用 CSS 控制样式，可以通过 CSS 能非常容易的改变这些图标的颜色、大小、阴影以及任何 CSS 能控制的属性。
![Before Coding [4] - HTML与CSS - 禅意花园](http://www.liuhaihua.cn/wp-content/uploads/2016/07/7Fzmq2V.jpg)
在使用 Bootstrap 的前提下，只需要下载 font-awesome.min.css 文件，然后在网页 <head> 部分加入下面的代码即可。
<link rel="stylesheet" href="../css/bootstrap.min.css">
<link rel="stylesheet" href="../css/font-awesome.min.css">
具体用法可以查看 FontAwesome 中文网提供的中文文档： http://www.bootcss.com/p/font-awesome/
下载地址： https://github.com/FortAwesome/Font-Awesome/archive/v3.2.1.zip
正文到此结束
热门推荐
相关文章
近期评论
-
666
-
文章和留言都翻到11页了 没有OOM
-
-
朋友，翻页到11页，及以后，会出现OOM，无法访问
-
-
-
-
版本号是多少，你可以下载哪个代码仓库，jdk选1.8 直接跑就行
-
-
Loading...
![[HBLOG]公众号](https://www.liuhaihua.cn/img/qrcode_gzh.jpg)
