HTML/CSS学习汇总（5）

ID、Class、Div

对HTML的标签元素增加id属性，可以针对这个元素做样式的改变：

<h1 id="botswana">Botswana</h1>

修改样式时，只需将选择器改成#+id就行：

#botswana {
background-color: #56ABFF;
}

修改多个元素的样式时，可以为它们添加class属性：

<h1 class="science">Scientist Discovers Important Cure</h1>

<h1 class="science">New Study Reveals The Importance of Sleep</h1>

使用时，选择器为.+class的值：
.science {
font-family: Georgia, Times, serif;
color: #A3B4C5;
text-transform: uppercase;
}

当class相同的元素之间共享一些样式，但有些元素有些独特样式时，可以用标签+.+class的值来修改。例如class都为breaking的标题和段落共享相同字体，但段落的行高需要做一些改变：
.breaking {
font-family: Georgia, Times, serif;
}

p.breaking {
line-height: 1.3em;
}

若多个class共享相同样式：
.first, .last {
font-size: 20px;
}

一个元素也可同时拥有多个class，例如：
<h1 class="book domestic">The Way of the Deep</h1>

<h1 class="book foreign">A Night in the Sky</h1>

.book {
font-family: Georgia, serif;
}

.domestic {
font-color: #0902CC;
}

.foreign {
font-color: #B097DD;
}
这个例子中，这么做的目的是，使一本书的颜色根据地域差别（国内和国外）做改变。

为了更好地维护和管理HTML代码，可以使用div标签：
div>
<h1>Alice In Wonderland</h1>
<p> ... </p>
</div>

为div标签添加class属性：
<div class="container">
<h1 class="title">Alice In Wonderland</h1>
<p> ... </p>
</div>
为div标签添加样式：
div.container {
background-color: rgb(252, 255, 205);
font-family: Roboto, Helvetica, sans-serif;
}

h1.title {
color: #0D1A2F;
}