创建css样式表

与我们为HTML创建单独的文本文件的方式相同，您将为CSS创建一个文本文件。如果您需要此过程的视觉效果，请参阅第一个教程。以下是在记事本中创建CSS样式表的步骤：

1. 选择文件&gt；记事本中的新功能可获得空窗口
2. 单击“文件”将文件另存为CSS&lt；另存为。。。
3. 导航到硬盘上的“我的网站”文件夹
4. 将“另存为类型：”更改为“所有文件”
5. 将文件命名为“styles.css”（去掉引号），然后单击保存

将css样式表链接到html

一旦你有了网站的样式表，你就需要把它和网页本身联系起来。为此，请使用链接标记。将以下链接标记放置在

修正页边距

当您为不同的浏览器编写XHTML时，您将学到的一件事是，它们似乎都有不同的边距和显示规则。确保您的站点在大多数浏览器中外观相同的最佳方法是不允许将页边距之类的内容默认为浏览器选项。

我们更喜欢在左上角开始页面，文本周围没有额外的填充或边距。即使我们要填充内容，我们也会将边距设置为零，这样我们就可以从同一块白板开始。为此，请将以下内容添加到styles.css文档中：

html,body {margin: 0px;padding: 0px;border: 0px;left: 0px;top: 0px;}

更改页面上的字体

字体通常是您在网页上要更改的第一件事。网页上的默认字体可能很难看，实际上取决于web浏览器本身，因此如果不定义字体，您真的不知道页面的外观。

通常，您会更改段落上的字体，有时也会更改整个文档本身的字体。对于这个站点，我们将在标题和段落级别定义字体。将以下内容添加到styles.css文档中：

p, li {font: 1em Arial, Helvetica, sans-serif;}h1 {font: 2em Arial, Helvetica, sans-serif;}h2 {font: 1.5em Arial, Helvetica, sans-serif;}h3 {font: 1.25em Arial, Helvetica, sans-serif;}

我们以1em作为段落和列表项的基本大小，然后用它来设置标题的大小。我们不希望使用比h4更深的标题，但如果你打算这样做，你也会希望它的风格。

让你的链接更有趣

对于未访问的链接和已访问的链接，链接的默认颜色分别为蓝色和紫色。虽然这是标准的，但它可能不适合页面的颜色方案，所以让我们更改它。在styles.css文件中，添加以下内容：

a:link {font-family: Arial, Helvetica, sans-serif;color: #FF9900;text-decoration: underline;}a:visited {color: #FFCC66;}a:hover {background: #FFFFCC;font-weight: bold;}

我们设置了三种链接样式，默认为a:link，被访问时为a:visitored，我们更改颜色，以及a:hover。使用：悬停，我们让链接获得背景色，并加粗以强调它是要单击的链接。

设置导航部分的样式

由于我们将导航（id=“nav”）部分放在HTML的第一位，所以让我们首先对其进行样式设置。我们需要指出它应该有多宽，并在右边留出更大的边距，这样正文就不会碰到它。我们还在它周围加了一个边界。

将以下CSS添加到styles.CSS文档中：

#nav {width: 225px;margin-right: 15px;border: medium solid #000000;}#nav li {list-style: none;}.footer {font-size: .75em;clear: both;width: 100%;text-align: center;}

list style属性将导航部分内的列表设置为没有项目符号或数字，而.footer将版权部分的样式设置为更小并在该部分内居中。

主要部分的定位

通过绝对定位来定位你的主要部分，你可以确保它会准确地停留在你希望它停留在你的网页上的地方。我们将其设置为800px宽以容纳更大的显示器，但如果您有更小的显示器，您可能希望将其设置得更窄。

在styles.css文档中放置以下内容：

#main {width: 800px;top: 0px;position: absolute;left: 250px;}

设置段落的样式

因为我已经设置了上面的段落字体，所以我想给每个段落增加一点额外的“刺激”，使其更加突出。为此，我在顶部加了一个边框，突出显示了段落，而不仅仅是图像。

在styles.css文档中放置以下内容：

.topline {border-top: thick solid #FFCC00;}

我们决定将其作为一个名为“topline”的类来完成，而不仅仅是以这种方式定义所有段落。这样，如果我们决定让段落没有顶部黄线，只需在段落标记中去掉class=“topline”，它就不会有顶部边框。

设置图像的样式

图像周围通常有一个边框，除非图像是链接，否则这并不总是可见的，但我们希望CSS样式表中有一个类可以自动关闭边框。对于这个样式表，我们创建了“noborder”类，文档中的大多数图像都是这个类的一部分。

这些图像的另一个特殊部分是它们在页面上的位置。我们希望它们成为段落的一部分，而不使用表格来对齐它们。最简单的方法是使用float-CSS属性。

在styles.css文档中放置以下内容：

#main img {float: left;margin-right: 5px;margin-bottom: 15px;}.noborder {border: 0px none;}

如您所见，图像上还设置了边距属性，以确保它们不会与段落中它们旁边的浮动文本相撞。

现在看看你完成的页面

保存CSS后，可以在Web浏览器中重新加载pets.htm页面。您的页面应该与此图片中显示的页面相似，图像对齐，导航正确放置在页面左侧。

对于此站点的所有内部页面，请执行相同的步骤。您希望导航中的每个页面都有一个页面。