HTML/CSS学习汇总(5)

ID、Class、Div

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

Botswana

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

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

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

Scientist Discovers Important Cure

New Study Reveals The Importance of Sleep

使用时,选择器为.+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,例如:

The Way of the Deep

A Night in the Sky

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

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

.foreign {
font-color: #B097DD;
}

这个例子中,这么做的目的是,使一本书的颜色根据地域差别(国内和国外)做改变。

为了更好地维护和管理HTML代码,可以使用div标签:
div>

Alice In Wonderland


...


为div标签添加class属性:


Alice In Wonderland


...



为div标签添加样式:
div.container {
background-color: rgb(252, 255, 205);
font-family: Roboto, Helvetica, sans-serif;
}

h1.title {
color: #0D1A2F;
}

你可能感兴趣的:(HTML-CSS)