精通CSS高级Web标准解决方案（第2版）学习笔记

精通CSS
高级Web标准解决方案（第2版）
第一章
基础知识
一、设计代码格式
1、如果元素有恰当的含义，就应该尽量使用他们。
h1,h2
ul,ol和dl
strong和em
abbr，acronym和code
fieldset、legend和label
caption、thead、tbody和tfoot
用标记的好处：
1，搜索引擎可以识别出标题并予以重视。
2，屏幕阅读器的用户可以依靠标题进行页面导航。
3，有意义的标记可以简便的将元素调整为你所需要的样式。它在文档中添加结构并且创建一个底层框架。可以直接设置元素的样式，而不需要添加其他标识符，因此避免了不必要的代码膨胀。

第二章
为样式找到应用目标

2.1常用的选择器

类型选择器

类型选择器也就是我们所说的元素选择器
最常见的 CSS 选择器是元素选择器。换句话说，文档的元素就是最基本的选择器。
例如：
p{color：red;}
h1{ font-weight:bold;}

后代选择器
后代选择器（descendant selector）又称为包含选择器。
根据上下文选择元素
我们可以定义后代选择器来创建一些规则，使这些规则在某些文档结构中起作用，而在另外一些结构中不起作用。

举例来说，如果您希望只对 h1 元素中的 em 元素应用样式，可以这样写：
h1 em {color:red;}

ID 选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
id 选择器以 "#" 来定义。
下面的两个 id 选择器，第一个可以定义元素的颜色为红色，第二个定义元素的颜色为绿色：
#red {color:red;}
#green {color:green;}

类 选择器
在 CSS 中，类选择器以一个点号显示：
.center {text-align: center}

子元素选择器
与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。
如果您不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，请使用子元素选择器（Child selector）。

例如，如果您希望选择只作为 h1 元素子元素的 strong 元素，可以这样写：

h1 > strong {color:red;}这个规则会把第一个 h1 下面的 strong 元素变为红色，但是第二个 strong 不受影响：

<h1>This is <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>

相邻同胞选择器

相邻同胞选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。
如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。

例如，如果要增加紧接在 h1 元素后出现的段落的上边距，可以这样写：

h1 + p {margin-top:50px;}这个选择器读作：“选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素”。

属性选择器

对带有指定属性的 HTML 元素设置样式。
可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性。

注释：Internet Explorer 7 （以及更高版本）在规定了 !DOCTYPE 的情况下支持属性选择器。IE6 及更低的版本不支持属性选择器。