1.每一个 HTML 页面都有一个 body 元素。
通过将其 background-color 设置为黑色,我们可以证明 body 元素的存在。
我们可以通过将下面的代码添加到我们的 style 元素来做到这一点:
<style>
body {
background-color: black;
}
</style>
body 元素包含文档的所有内容(比如文本、超链接、图像、表格和列表等等。)
body 元素的内容会显示在浏览器中。
title 元素的内容会显示在浏览器的标题栏中。
2.记住,你可以像对其他 HTML 元素一样对你的 body 元素应用样式,并且所有其他元素将继承你的 body 元素的样式。
首先,创建一个文字为 Hello World 的 h1 元素。
然后,让我们通过向 body 元素的样式声明部分添加 color: green; 使页面上的所有元素的颜色为 green。
最后,通过向 body 元素的样式声明部分添加 font-family: Monospace; 将 body 元素的 font-family(字体)设置为 Monospace
<style>
body {
color: green;
font-family: Monospace;
}
</style>
<h1>
Hello World
</h1>
3.通过用空格分隔多个 class 属性,可对 HTML 元素应用多个 class 属性:
class="class1 class2"
注意:在 HTML 中这些 class 如何排序是无所谓的。
然而,在 <style> 部分中 class 声明的顺序却非常重要,第二个声明总是比第一个具有优先权。因为 .blue-text 是第二个声明,它覆盖了 .pink-text 属性。
<style>
body {
background-color: black;
font-family: Monospace;
color: green;
}
.pink-text {
color: pink;
}
.blue-text {
color: blue;
}
</style>
<h1 class="pink-text blue-text">Hello World!</h1>
4.给你的 h1 元素添加名为 orange-text 的 id 属性。记住,id 样式看起来是这样的:
<h1 id="orange-text">
在你的 h1 元素中保留 blue-text 和 pink-text 两个 class。
在你的 style 元素中为你的 orange-text id 创建一个 CSS 声明,就像下面例子中的样子:
brown-text {
color: brown;
}
注意:你声明的这个 CSS 在 pink-text类选择器的上面还是下面是无所谓的,因为 id 属性总是具有更高的优先级。
<style>
body {
background-color: black;
font-family: Monospace;
color: green;
}
.pink-text {
color: pink;
}
.blue-text {
color: blue;
}
orange-text{
color:orange;
}
</style>
<h1 class="pink-text blue-text" id="orange-text">Hello World!</h1>
5.试着用 in-line style(行内样式) 使 h1 元素变为白色。记住,行内样式看起来是这样的:
<h1 style="color: green">
<style>
body {
background-color: black;
font-family: Monospace;
color: green;
}
orange-text {
color: orange;
}
.pink-text {
color: pink;
}
.blue-text {
color: blue;
}
</style>
<h1 id="orange-text" class="pink-text blue-text" style="color:white">Hello World!</h1>
6.让我们来给 pink-text 元素的 color 声明加上关键字 !important,以便 100% 确保你的 h1 元素是粉色的。
举例如下:
color: pink !important;
<style>
body {
background-color: black;
font-family: Monospace;
color: green;
}
orange-text {
color: orange;
}
.pink-text {
color: pink !important;
}
.blue-text {
color: blue;
}
</style>
<h1 id="orange-text" class="pink-text blue-text" style="color: white">Hello World!</h1>