1.目标
实例是一个个人主页，我们用 CSS 设定它的样式。以下是我用到的一些 CSS 属性，通过这些链接，你可以打开相应的 MDN 页面了解更多。
我使用了许多不同的选择器（样式元素），如 h1 和 h2，也为工作职务建立了一个类别。
尝试使用 CSS 更改这一页面的显示，试着修改已有属性的取值，删除一些规则，或添加新的样式。然后通过CSS 参考找到本文未提及的一些属性，尽管大胆尝试！
举例来说，你可以：
- 使用 CSS 的颜色关键词 hotpink，将一级标题设定为粉红色。
- 使用 CSS 颜色关键词 purple，为标题添加 10 像素宽的点线边距。
- 将二级标题设为斜体。
- 用#eeeeee 为联系人列表中的超链接添加背景颜色和一个 5 像素宽的紫色加粗边框。使用一些内边距属性，拉开正文与外边距的距离。
- 当鼠标在某些 HTML 元素上悬停时增加动画 (推荐改变颜色和字体)。
- 设置链接在鼠标悬停时变为绿色。
2 代码
styles.css
body {
font-family: Arial, Helvetica, sans-serif;
}
h1 {
color: hotpink;
font-size: 3em; /*字体大小相对单位*/
font-family: Georgia, "Times New Roman", Times, serif;
border-bottom: 10px solid purple;
/*border-bottom-width: 0.5px;*/
border-bottom-style: dotted;
}
.job-title {
color: #999999;
font-size: 1.5em;
font-weight: bold;
}
a:link {
color: #fb6542;
}
a:visited {
color: #fb6542;
}
a:hover {
text-decoration: none;
color:green;
}
h2 {
font-style: italic;
}
ul {
background-color: #eeeeee;
border: 5px solid;
border-color: purple;
font-weight: bold;
padding: 40px 20px;
}
a:hover {
text-decoration: none;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>开始学习 CSS</title>
</head>
<link rel="stylesheet" href="styles.css" />
<body>
<h1>Jane Doe</h1>
<div class="job-title">Web Developer</div>
<p>
Far far away, behind the word mountains, far from the countries Vokalia
and Consonantia, there live the blind texts. Separated they live in
Bookmarksgrove right at the coast of the Semantics, a large language
ocean.
</p>
<p>
A small river named Duden flows by their place and supplies it with the
necessary regelialia. It is a paradisematic country, in which roasted
parts of sentences fly into your mouth.
</p>
<h2>Contact information</h2>
<ul>
<li>Email: <a href="mailto:[email protected]">[email protected]</a></li>
<li>Web: <a href="http://example.com">http://example.com</a></li>
<li>Tel: 123 45678</li>
</ul>
</body>
</html>
3 结果
