CSS基础知识（上）

1.创建结构化、语义丰富HTML

语义化标记是优秀HTML文档的基础。

语义化标记意味着在正确的地方使用正确的元素，从而得到有意义的文档。

有意义的文档可以确保尽可能多的人都能够使用。

1.1 ID和class属性

为元素添加ID和class属性不一定能给文档增加含义或结构。这两个属性只是一种让其他因素来操作与解析文档的通用手段，CSS也可以利用这一手段。我们可以设置这些属性的值，即为其起名字。

“名不正则言不顺”，起什么名字意味着它是什么，或者应该怎么使用它。

<ul class="product-list">
    <li><a href="/product/1">Product 1</a></li>
    <li><a href="/product/2">Product 2</a></li>
    <li><a href="/product/3">Product 3</a></li>
</ul>

这里的product-list就意味着它是商品列表。

给元素添加类名时，即使类名明确用于样式，也不要体现出其视觉效果。正确的做法是让类名表示组件的类型。

一个ID只能应用到页面中的一个元素。

1.2 结构化元素

HTML5新增乐乐一批结构化元素：

• section
• header
• footer
• nav
• article
• aside
• main

关于如何正确使用这些新元素，建议看看这个网站：http://html5doctor.com

在没有合适的语义元素的情况下，div仍然是给内容分组的一个不错的选择。

有时候，我们会纯粹出于添加样式的目的而在文档中添加一个元素。

如果有更具语义的结构化元素，那么务必使用它们，需要添加样式时再给它们一个适当的类名。但是，如果你只需要一个无语义的元素作为额外的样式接入点，那就使用div。

仅需添加样式的情况中，也可以使用span。与div不同，span是文本级元素。

2.CSS选择符

有效且结构良好的文档是添加样式的基础。

类型选择符用于选择特定类型的元素，比如段落元素。

p {
    color : black;
}

后代选择符用于选择某个或某组元素的后代。后代选择符的写法是在两个选择符之间添加空格。

blockquote p {
    padding-left : 2em;
}

ID选择符

#intro {
    font-weight : bold;
}

<p id="intro">Happy Birthday, Andy</p>

类选择符

.intro {
	font-weight : bold;
}

<p class="intro">Happy Birthday, Andy</p>

2.1 子选择符与同辈选择符

子选择符只选择一个元素的直接后代，也就是子元素。

#nav > li {
  background: url(img/folder.png) no-repeat left top;
  padding-left: 20px;
}

<ul id="nav">
    <li><a href="/home/">Home</a></li>
    <li><a href="/services/">Services</a>
        <ul>
            <li><a href="/services/design/">Design</a></li>
            <li><a href="/services/development/">Development</a></li>
            <li><a href="/services/consultancy/">Consultancy</a></li>
        </ul>
    </li>
    <li><a href="/contact/">Contact Us</a></li>
</ul>

使用相邻同辈选择符，就可以选择位于某个元素后面，并与该元素拥有共同父元素的元素。

h2 + p {
  font-size: 1em;
  font-weight: bold;
  color: #777;
}

<h2>Peru Celebrates Guinea Pig festival</h2>
<p>The guinea pig festival in Peru is a one day event to ...</p>
<p>Guinea pigs can be fried, roasted or served in a casserole. </p>

>和+在这里被称为组合子（combinator）。

使用一般同辈组合子~可以选择h2元素后面的所有段落。

h2 ~ p {
  font-size: 1em;
  font-weight: bold;
  color: #777;
}

通常情况下，浏览器会按照元素在页面中出现的先后次序给它们应用样式，浏览器不支持向前选择同辈元素。

2.2 通用选择符

通用选择符可以匹配任何元素。通用选择符使用星号*表示。

* {
    padding:0;
    margin:0;
}

2.3 属性选择符

属性选择符基于元素是否有某个属性或者属性是否有某个值来选择元素。

input[type="submit"] {
	cursor: pointer;
}

<input type="submit" />

有时候，我们关心的是属性值是否匹配某个模式，而非某个特定值。这时候，通过给属性选择符中的符号前面加上特殊字符，就可以表达出想要匹配的值的形式了。

a[href^="http:"] /* 匹配以某些字符开头的属性值 */
img[src$=".jpg"] /* 匹配以某些字符结尾的属性值 */
a[href*="/about/"] /* 匹配包含某些字符的属性值 */
a[rel~=next] /* 匹配以空格分隔的字符串中的属性值 */
a[lang|=en] /* 选择开头是指定值或指定值后连着一个短划线的情况 */

属性选择符参考：http://www.runoob.com/css/css-attribute-selectors.html

2.4 伪元素

伪元素是特殊的选择符，它不是通过元素来表示的。

::first-letter → 选择一段文本的第一个字符

::first-line → 选择一段文本的第一行

::before → 对应着内容开头的元素

::after → 对应着内容结尾的元素

伪元素参考：http://www.runoob.com/css/css-pseudo-elements.html

2.5 伪类选择符

伪类选择符以一个冒号开头，用于选择元素的特定状态或关系。

a:link {
  color: blue;
}
a:visited {
  color: green;
}
a:hover, a:focus {
  color: red;
}
a:active {
  color: purple;
}

<a href="#">百度</a>

:target匹配的元素有一个ID属性，而且该属性的值出现在当前页面URL末尾的井号（#）后边。

:target伪类选择符参考：http://www.runoob.com/try/try.php?filename=trycss3_target

/* 反选伪类 */
.comment:target:not(.comment-downvoted) {
  background-color: #fffec4;
}

表单伪类根据用户与表单控件交互的方式，来反映表单控件的某种状态。

其他伪类：

• tr:nth-child(odd)

• tr:nth-child(even)

• tr:nth-child(3n+4)

• :nth-last-child(N)

• :first-child → 选择第一个子元素

• :last-child

• :only-child

• :only-of-type → 选择特定类型的唯一子元素

• :nth-of-type(N)

• :nth-last-of-type(N)

参考资料：

• 菜鸟教程
• w3school
• 《精通CSS》— [英] 安迪·巴德、[瑞典] 埃米尔·比约克隆德