HTML 样式
通过使用 HTML4.0，所有格式化代码均可移出 HTML 文档，然后移入一个独立的样式表。
先来看一个例子，代码如下：
<head>
<style type="text/css">
h1 {color: red}
p {color: blue}
</style>
</head>
<body>
<h1>header 1</h1>
<p>A paragraph.</p>
</body>
页面上显示为:
header 1
A paragraph.
当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化。有以下三种方式来插入样式表：
外部样式表 link
当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
link : 定义资源引用
rel : 告诉浏览器引用的是一个样式表文件
type : 文件类型
href : 文件地址
内部样式表
当单个文件需要特别样式时，就可以使用内部样式表。你可以在 head 部分通过 <style> 标签定义内部样式表。
<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>
style : 定义样式定义
内联样式
当特殊的样式需要应用到个别元素时，就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。
<p style="color: red; margin-left: 20px">
This is a paragraph
</p>
优先级说明
(外部样式)External style sheet < (内部样式)Internal style sheet < (内联样式)In
HTML 表格
表格由 <table> 标签来定义。
每个表格均有若干行（由 <tr> 标签定义）。
每行被分割为若干单元格（由 <td> 标签定义）。
字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
如下代码：
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
页面上显示为:
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2
注释：border是表格的边框属性，如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。
表格的表头
表格的表头使用 <th> 标签进行定义。
大多数浏览器会把表头显示为粗体居中的文本：
<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
页面上显示为:
Heading Another Heading
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2
表格中的空单元格
在一些浏览器中，没有内容的表格单元显示得不太好。如果某个单元格是空的（没有内容），浏览器可能无法显示出这个单元格的边框。
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td></td>
<td>row 2, cell 2</td>
</tr>
</table>
注意：这个空的单元格的边框没有被显示出来。为了避免这种情况，在空单元格中添加一个空格占位符，就可以将边框显示出来。
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td> </td>
<td>row 2, cell 2</td>
</tr>
</table>
浏览器中显示如下：
row 1, cell 1 row 1, cell 2
row 2, cell 2
caption 元素定义表格标题
caption 标签必须紧随 table 标签之后。您只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。
<table border="3">
<caption>我的标题</caption>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
浏览器中显示如下：
我的标题
跨行或跨列
colspan和rowspan这两个属性用于创建特殊的表格。
1、colspan用来指定单元格横向跨越的列数。
横跨两列的单元格：
<table border="1">
<tr align="center">
<td>姓名</td>
<td colspan="2">电话</td>
</tr>
<tr>
<td>Bill</td>
<td>400 123</td>
<td>500 123</td>
</tr>
</table>
浏览器中显示如下：
姓名 电话
Bill 400 123 500 123
2、rowspan的作用是指定单元格纵向跨越的行数。
横跨两列的单元格：
<table border="1">
<tr align="center">
<td rowspan="2">姓名 </td>
<td>Mika</td>
</tr>
<tr>
<td>Bill</td>
</tr>
</table>
浏览器中显示如下：
姓名 Mika
Bill
练习题
1.下列方法表示调用外部样式表的是？（）
A、<style type="text/css">h1 {color: red }</style>
B、<link rel="stylesheet" type="text/css" href="css/style.css">
C、<p style="color: red; margin-left: 20px">style</p>
2.下面三种方法可以起到改变文档样式的是？（）
A、<style type="text/css">h1 {color: red }</style>
B、<link rel="stylesheet" type="text/css" href="css/style.css">
C、<p style="color: red; margin-left: 20px"></p>
D、以上三种都可以
3.如果下面三个都对<h1>添加了颜色的样式，文档中的h1将会是哪个设定的颜色值（）
A、<style type="text/css">h1 {color: red }</style>
B、<link rel="stylesheet" type="text/css" href="css/style.css">
C、<h1 style="color: blue;">style</h1>
4.html语言中，设置围绕表格的边框的宽度的标记是？（）
A、<table border=#>
B、<table cellspacing=#>
C、<table cellpadding=#>
D、<table width=60%>
2.表格标记的基本结构是？（）
A、<tr></tr>
B、<br></br>
C、<table></table>
D、<bg></bg>
3.设置表格的边框为0的HTML代码是？（）
A、<table cellspacing =0>
B、<table height=0>
C、<table border=0>
D、<table cellpadding =0>
4.设置表格的单元格间距为0的HTML代码是？（）
A、<table cellspacing =0>
B、<table height=0>
C、<table border=0>
D、<table cellpadding =0>
