Pro CSS Techniques 读书笔记（一）

http://www.ctba.cn/blog/entry/2213

争取每天都抽时间整理记录下读书心得，不敢说贡献，只是希望能为需要的朋友提供些帮助。恩，就从今天开始吧。笔记涉及内容包括 CSS 工作原理的细节，设计技巧，优先级和级联，样式设计与布局，hack 和滤器（以及如何尽可能不使用它们），有效的代码维护和优化等。

Let's begin

什么是语义化标签(X)HTML

W3C 的定义是在万维网（WWW）上用于发布超文本的通用语。说的直白点就是：(X)HTML 是用来给你的文档内容提供情景和意义的，它是告诉我们这段内容是什么（或它的意义），而不是它看起来像什么。

为啥要编写语义化标签？

好的语义化标记能让站点更容易接入。不是所有的访客都能“看见”你的 CSS 和 JS 文件，但他们都能得到你的 (X)HTML 文件。对于屏幕阅读器、PDA、手机和其他设备，它们通常没有网络浏览器一样的显示支持，而使用语义标记，这些设备就可以用一种有意义的方式显示网页了。

另外就是搜索引擎爬虫，他同样是依靠标记来决定情景和不同关键字的权重。因此，如果你用 <font size="7"> 来设置标题而不是 <h1>，搜索引擎恐怕会比较难检索到它。

永远不要把结构标签用于外观设计！

避免使用外观标签：<font>, <b>, <i>, <u>，这些标签的作用是创建一个视觉效果，而在现代网络开发中这是 css 的任务，正确的方法是由指定了外观的 em 和 strong 去定义内容的意义。

避免 div 和 class 的堆积

1. 不要将单个元素包含进 <div> 中，这是对标记的一种浪费；

简单的例子：

<div id="nav">
   <ul>
      <li>扯谈新闻</li>
      <li>扯谈小组</li>
      <li>扯谈博客</li>
   </ul>
</div>

下面这种方式不是更好？使用更少的代码创建更多的结构

<ul id="nav">
   <li>扯谈新闻</li>
   <li>扯谈小组</li>
   <li>扯谈博客</li>
</ul>

2. 人们总是过度使用 class 定义风格而放弃更适合的标签

简单的例子：

<p class="address">
   北京市海淀区五道口华清嘉园
</p>

但其实你可以使用 address 标签

<address>
   北京市海淀区五道口华清嘉园
</address>

除此之外，这些标签你也应该熟悉：dl, dt, dd, blockquote, q, thead, tfoot, fieldset, cite, samp, kbd, abbr, acronym

总之，当你使用 div, span, class 特性时，应确保在 (X)HTML 中没有比他们更合适的元素了。


现代 web 文档的三层结构

HTML - Structure Layer
CSS - Presentation Layer
JavaScript - Behavior Layer

HTML 结构层，它包括文档的内容，以及表示文本各部分（如标题、段落、列表等）的语义信息；

CSS 外观层，它决定了你的文档以何种方式显示，包括布局、排版、颜色、装饰、图片、声音族等的详细信息；

JavaScripty 动作层，这一层主要是根据用户的动作，使用脚本（为了控制 DOM，一般是 JS）来更新、添加或删除文档中的某些项。

简单的例子：

扯谈博客 发表新日志的页面，标题、正文、类别及其后边的输入、选择框的显示是 HTML 中的文字内容，div, input, select 等标签完成的，而字体、字号、编辑区域的边框、背景颜色等是 CSS 完成的，当你直接点击“发布日志”后提示“日志内容为空”这个事件，是由 JavaScript 完成的。

第一篇先写这么多，可能会觉得有点小儿科，不要紧，后面的内容会更实际和丰富些，了解下基础和原理总没坏处:)