《CSS Mastery》 读书笔记 (1)

--本笔记中英混合，专业名词尽量不翻译，免得误解，如果不习惯，就不用往下看了，走好不送。

第一章 基础

人类的好奇心总是促使我们捣鼓，捣鼓是最好做有效的学习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.