第一章 基础

人类的好奇心总是促使我们捣鼓，捣鼓是最好做有效的学习CSS的方法

In this chapter you will learn about
? Structuring your code
? The importance of meaningful documentation
? Naming conventions
? When to use IDs and class names

? Microformats
? Different versions of HTML and CSS
? Document types, DOCTYPE switching, and browser modes

这一章我们将学习

- 结构化代码

- 有意义文档的重要性

- 命名规范

- 使用ID和Class的时机

- 微格式

- HTML和CSS的不同版本

- 文档类型， DOCTYPE 切换， 浏览器模式

结构化代码

有意义且结构良好的HTML对简化开发具有重要作用

As well as being easy for humans to understand, meaningful markup—otherwise known as
semantic markup—can be understood by programs and other devices. Search engines, for
instance, can recognize a headline because it is wrapped in h1 tags and assign more importance
to it. Screen reader users can rely on headings as supplemental page navigation.

用semantic Markup不如用meaningful Markup容易被人，搜索引擎，或设备理解

Most importantly for the context of this book, meaningful markup provides you with a simple way
of targeting the elements you wish to style. It adds structure to a document and creates an
underlying framework to build upon. You can style elements directly without needing to add other
identifiers, and thus avoid unnecessary code bloat.

而且meaningful markup 容易定位

HTML includes a rich variety of meaningful elements （有意义的元素）, such as
? h1, h2, and so on
? ul, ol, and dl

? strong and em
? blockquote and cite
? abbr, acronym, and code
? fieldset, legend, and label
? caption, thead, tbody, and tfoot

用Table还是用CSS布局总能引起大争论，现在明显胜负已分。

ID和Class名称

ID和Class名称， ID用于同一页面的唯一元素， Class可以用于同一页面的任意多个元素，类适合标识内容的类型或相似的条目

元素的ID和Class命名

一定要记住不要和表现有关而要和意义相关，说明元素是做什么用途而不是它看起来是什么，下面是一些例子

注意大小写要区分， 最好的方式是全部小写，如果有多个词，用连字符， 比如andy-budd

用ID还是Class

Class用于同一页面概念相似的元素， ID用于唯一元素

Div 和 Span

div 元素用来给文档增加结构，很多人误以为div没有语法意义。但是div其实代表division 并提供一个途径把文档分割成有意义的区间。

为了减少不必要的文档标记，只要在没有其他元素可以用时，采用div元素， 比如用 list 做一个main navigation ，没有必要把它包在div里面

<div class="nav">
<ul>
<li><a href="/home/">Home</a></li>
<li><a href="/about/">About Us</a></li>
<li><a href="/contact/">Contact</a></li>
</ul>
</div>
去除div，在 list里直接使用 class就好:
<ul class="nav">
<li><a href="/home/">Home</a></li>
<li><a href="/about/">About Us</a></li>
<li><a href="/contact/">Contact</a></li>
</ul>

Microformats

具体请参考 http://microformats.org  or google： Mircroformats：Empowering Your Mark-up for Web 2.0 by John Allsopp

不同版本的HTML和CSS

浏览器模式

standard 和quirks 模式，In standards mode, the browser renders a page according to the
specifications, and in quirks mode pages are displayed in a looser, more backward-compatible
fashion.

DocType 开关

The browser chooses which rendering method to use based on the existence of a DOCTYPE
declaration and the DTD being used. If an XHTML document contains a fully formed DOCTYPE,
it will normally be rendered in standards mode. For an HTML 4.01 document, a DOCTYPE
containing a strict DTD will usually cause the page to render in standards mode. A DOCTYPE
containing a transitional DTD and URI will also cause the page to render in standards mode,
while a transitional DTD without a URI will cause the page to render in quirks mode. A badly
formed or nonexistent DOCTYPE will cause both HTML and XHTML documents to be rendered
in quirks mode.

第二章  目标的样式

要用CSS样式化一个HTML元素，必须要定位一个元素， CSS的选择器就是这样的手段。

这章中，你要学到的

? Common selectors 普通选择器
? Advanced selectors 高级选择器
? New CSS 3 selectors 新的CSS3选择器
? The wonderful world of specificity and the cascade 特征和层叠的奇妙世界
? Planning and maintaining your style sheets 规划维护样式表
? How to comment your code 注释代码

普通选择器

最常用的选择器是 类型选择器  type selector和 子选择器 descendant selector。类型选择器用来选择某种类型元素.    

比如Paragraph, h1，只需要指定希望样式化的元素

p {color: black;}
h1 {font-weight: bold;}

子选择器允许选择 某个特定的或一组元素的子元素，

Descendant selectors allow you to target the descendants of a particular element or group of
elements. A descendant selector is indicated by a space between two other selectors.