创建CSS样式表
与我们为HTML创建单独的文本文件的方式相同，您将为CSS创建一个文本文件。如果您需要此过程的视觉效果，请参阅第一个教程。以下是在记事本中创建CSS样式表的步骤：
- 在记事本中选择“文件”>“新建”以获取空窗口
- 单击文件<另存为…将文件另存为CSS
- 导航到硬盘驱动器上的my_website文件夹
- 将“另存为类型：”更改为“所有文件”
- 将文件命名为“styles.css”（不要引号），然后单击“保存”
将CSS样式表链接到HTML
获得Web站点的样式表后，您需要将其与Web页面本身相关联。为此，请使用链接标记。将以下链接标记放在
你的pets.htm文件的标签：
03 of 10 当您为不同的浏览器编写XHTML时，您将学习的一件事是它们似乎都有不同的边距和规则来显示它们。确保您的网站在大多数浏览器中看起来相同的最佳方法是不允许边距等内容默认为浏览器选项。 我更喜欢在左上角开始我的页面，文本周围没有额外的填充或边距。即使我要填充内容，我也将边距设置为零，这样我就可以从相同的空白平板开始。为此，请将以下内容添加到styles.css文档中： 字体通常是您要在网页上更改的第一件事。网页上的默认字体可能很难看，实际上是Web浏览器本身，所以如果你没有定义字体，你真的不知道你的页面会是什么样子。 通常，您可以更改段落上的字体，有时也可以更改整个文档本身。对于此站点，我们将在标题和段落级别定义字体。将以下内容添加到styles.css文档中： 我开始使用1em作为段落和列表项的基本大小，然后使用它来设置标题的大小。我不希望使用比h4更深的标题，但是如果你计划你也想要它的样式。 对于未访问和访问过的链接，链接的默认颜色分别为蓝色和紫色。虽然这是标准的，但它可能不适合您页面的配色方案，所以让我们改变它。在styles.css文件中，添加以下内容： 我设置了三种链接样式，a：链接作为默认值，a：访问时访问它，我更改颜色，和a：悬停。使用：hover我有链接获得背景颜色，并大胆强调它是一个被点击的链接。 由于我们首先在HTML中放置导航（id =“nav”）部分，因此我们先将其设置为样式。我们需要指出它应该有多宽，并在右侧放置更宽的边距，这样主要文本就不会碰到它。我还在它周围放了一个边框。 将以下CSS添加到styles.css文档中： list-style属性将导航部分内的列表设置为没有项目符号或数字，而.footer样式将版权部分设置为更小并且在该部分中居中。 通过使用绝对定位定位主要部分，您可以确保它将保持在您希望它保留在网页上的确切位置。我制作了800px宽的可以容纳更大的显示器，但是如果你有一个更小的显示器，你可能想要缩小它。 将以下内容放在styles.css文档中： 由于我已经设置了上面的段落字体，我想给每个段落额外的“踢”以使它更好地脱颖而出。我这样做是通过在顶部放置一个边框来突出显示段落而不仅仅是图像。 将以下内容放在styles.css文档中： 我决定将其作为一个名为“topline”的类而不是仅以这种方式定义所有段落。这样，如果我决定我想要一个没有顶部黄线的段落，我可以简单地在段落标记中留下class =“topline”，它不会有顶部边框。 图像通常在它们周围有边框，除非图像是链接，否则这并不总是可见，但我喜欢在我的CSS样式表中有一个自动关闭边框的类。对于这个样式表，我创建了“noborder”类，文档中的大多数图像都是这个类的一部分。 这些图像的另一个特殊部分是它们在页面上的位置。我希望它们成为他们所在段落的一部分而不使用表格来对齐它们。最简单的方法是使用float CSS属性。 将以下内容放在styles.css文档中： 正如您所看到的，图像上还设置了边距属性，以确保它们不会与段落中旁边的浮动文本相混淆。 保存CSS后，可以在Web浏览器中重新加载pets.htm页面。您的页面应该与此图片中显示的页面类似，图像对齐，导航正确放置在页面左侧。 对此站点的所有内部页面执行相同的步骤。您希望导航中的每个页面都有一个页面。 修复页边距
更改页面上的字体
让你的链接更有趣
造型导航部分
定位主要部分
为你的段落设置样式
造型图像
现在看看你完成的页面
