表头的样式
虽然表格已经初具雏形，但是样式单一，我们已经添加了一些样式表，以使它有点更容易阅读。这个就是收尾工作。可以随意的去加入任何的style属性，你会在CSS课程期间学到更多关于这些东西。如果你想添加多个样式，你只需要用;分号分隔开就行。
<th style="font-size:12px; color:red"></th>说明
- 设置“著名怪物”，“出生年份”标签为斜体。
- 设置怪物出生年月标题为红色。
练习题：
<html>
<head>
<title>表格</title>
</head>
<body>
<table style="border-collapse:collapse;">
<thead>
<tr>
<th colspan="2" style="color:red">著名怪物出生年月</th>
</tr>
<tr style="border-bottom:1px solid black;">
<th style="padding:5px;">著名怪物</th>
<th style="padding:5px;border-left:1px solid black;"><em>出生年月</em></th>
</tr>
</thead>
<tbody>
<tr>
<td style="padding:5px;">金刚</td>
<td style="padding:5px;border-left:1px solid black;">1933</td>
</tr>
<tr>
<td style="padding:5px;">德古拉</td>
<td style="padding:5px;border-left:1px solid black;">1897</td>
</tr>
<tr>
<td style="padding:5px;">科学怪人的新娘</td>
<td style="padding:5px;border-left:1px solid black;">1944</td>
</tr>
</tbody>
</table>
</body>
</html>结果：
小结
我们已经学习了很多知识，可以做些什么呢？
- 创建一个HTML网页。
- 创建一个列表包含有序和无序。
- 可以把文本变成斜体和粗体。
- 改变颜色，大小，文本校准模式等style属性。
- 创建HTML表格。
练习题：
<html>
<head>
<title>Table Time</title>
</head>
<body>
<table style="border-collapse:collapse;">
<thead>
<tr>
<th colspan="2">怪物出生年月</th>
</tr>
<tr style="border-bottom:1px solid black;">
<th style="padding:5px;">怪物名称</th>
<th style="padding:5px;border-left:1px solid black;">出生年月</th>
</tr>
</thead>
<tbody>
<tr>
<td style="padding:5px;">King Kong</td>
<td style="padding:5px;border-left:1px solid black;">1933</td>
</tr>
<tr>
<td style="padding:5px;">Dracula</td>
<td style="padding:5px;border-left:1px solid black;">1897</td>
</tr>
<tr>
<td style="padding:5px;">Bride of Frankenstein</td>
<td style="padding:5px;border-left:1px solid black;">1944</td>
</tr>
</tbody>
</table>
</body>
</html>结果：
div层
<div>是提供给你使用的结构标签之一。简称区块，<div>允许你将你的页面添加到容器中。当你开始在下一单元中学习css的时候：你可以分别设计你的网站的不同部分！
看预览图的时候，你应该看到三个区块：一个红色，一个蓝色和一个绿色的。每个人都是自己的<div>容器。
说明：
在第10行，创建你自己的<div>，并设置其背景颜色：黄色，使用默认的宽度和高度。
<!DOCTYPE html>
<html>
<head>
<title>Result</title>
</head>
<body>
<div style="width:50px;height:50px;background-color:red"></div>
<div style="width:50px;height:50px;background-color:blue"></div>
<div style="width:50px;height:50px;background-color:green"></div>
<div style="width:50px;height:50px;backgroung-color:yellow"></div>
</body>
</html>结果：
链接
使用<div>后最终将允许您创建想工具条，菜单和更加直观的HTML对象。
就像图片，您可以通过点击包裹在<div></div>里面的<a></a>的标签。
说明：
将黄色的<div>链接到你最喜欢的网站！
<!DOCTYPE html>
<html>
<head>
<title>结果</title>
</head>
<body>
<div style="width:50px; height:50px; background-color:red"></div>
<div style="width:50px; height:50px; background-color:blue"></div>
<div style="width:50px; height:50px; background-color:green"></div>
<a href="http://www.baidu.com"><div style="width:50px; height:50px; background-color:yellow"></div></a>
</body>
</html>Span块
虽然<div>可以使你的网页变成单独样式的块，<span>允许你就像控制文本样式那样控制你的网页中更小的部分。例如，如果你总是希望你的段落的第一个字是红色的，你可以用每一个字中的<span></span>标签和使用CSS让它们变红。
说明：
现在，我们将继续使用style属性来进行颜色的改变，给<span>标签设置style="color:red"。请注意只有<span></span>标签之间的文字可以改变颜色！
练习题：
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<span style="color:red"><p>这段文字是黑色的，把它变成红色的。</p></span>
</body>
</html>结果：
让改变更大一些
这个标签是有一点棘手，虽然如此，可以通过例子对其进行学习。颜色只是其中的一个属性，可以选择性的与<span>标记改变，你也可以更改字体大小，字体，以及任何你所能想到的其他样式与属性。
说明：用<span>标签替换Impact，不能包含感叹号。
小结
除了已经学会的，还知道如下的知识：
1.划分网页可以使用<div>标签；
2.选择文本块，并使用<span>标记来改变它们的属性。
问题：
在接下来的过程之中，我们将看到如何采取多种样式，比如控制字体、字体颜色，和文字类型的定位，并把它放在它自己单独的文件。通过这样做，我们可以使用标签<div>和<span>，在我们的页面不用每次都要写style="color:red"。
练习题：
<!DOCTYPE html>
<html>
<head>
<title>讲故事</title>
<style type='text/css'>
p{
font-family:Garamond;
font-size:16px;
}
h3{
font-family:cursive;
color:#36648b;
text-align:center;
}
span{
color:#cc0000;
font-size:24px;
}
</style>
</head>
<body>
<h3>一个故事</h3>
<p><span>A</span>很久很久以前，有一个勇敢的年轻学生想要学习CSS... </p>
</body>
</html>结果：
