01 10
创建CSS样式表
与我们为HTML创建单独的文本文件的方式相同，您将为CSS创建一个文本文件。 如果您需要此过程的视觉效果，请参阅第一个教程。 以下是在记事本中创建CSS样式表的步骤：
- 在记事本中选择“文件”>“新建”以获取空白窗口
- 通过单击文件<另存为...将文件另存为CSS
- 导航到硬盘上的my_website文件夹
- 将“另存为类型：”更改为“所有文件”
- 将您的文件命名为“styles.css”（不要使用引号）并单击保存
02之10
将CSS样式表链接到您的HTML
一旦你的网站有了一个样式表，你需要将它关联到网页本身。 要做到这一点，你使用链接标签。 将以下链接标签放置在pets.htm文档的
标签中的任意位置：03之10
修复页边距
当你为不同的浏览器编写XHTML时，你会学到的一件事是，它们似乎都有不同的边界和规则来显示它们的显示方式。 确保您的网站在大多数浏览器中看起来一样的最佳方式是不允许边距之类的内容默认为浏览器选项。
我更喜欢在左上角开始我的页面，文本周围没有额外的填充或边距。 即使我要填充内容，我也会将边距设置为零，以便我以相同的空白页面开始。 为此，请将以下代码添加到styles.css文档中：
html，body {
margin：0px;
padding：0px;
border：0px;
left：0px;
top：0px;
}
04年10月
更改页面上的字体
字体通常是您想要在网页上更改的第一件事。 网页上的默认字体可能很难看，实际上是网页浏览器本身，所以如果你没有定义字体，你真的不知道你的页面会是什么样子。
通常，您可以更改段落的字体，有时也可以更改整个文档本身的字体。 对于本网站，我们将在页眉和段落级别定义字体。 将以下内容添加到您的styles.css文档中：
p，li {
字体：1em Arial，Helvetica，sans-serif;
}
h1 {
字体：2em Arial，Helvetica，sans-serif;
}
h2 {
字体：1.5em Arial，Helvetica，sans-serif;
}
h3 {
字体：1.25em Arial，Helvetica，sans-serif;
}
我以1em作为段落和列表项的基本尺寸，然后用它来为我的标题设置尺寸。 我不希望使用比h4更深的标题，但是如果您打算也想要设计它的样式。
10的10
让你的链接更有趣
对于未访问链接和访问链接，链接的默认颜色分别为蓝色和紫色。 虽然这是标准的，但它可能不适合您的网页的颜色方案，所以让我们改变它。 在您的styles.css文件中，添加以下内容：
一条链接 {
font-family：Arial，Helvetica，sans-serif;
颜色：＃FF9900;
文字修饰：下划线;
}
a：visited {
颜色：＃FFCC66;
}
a：悬停{
背景：#FFFFCC;
font-weight：bold;
}
我设置了三种链接样式，a：链接作为默认值，a：在访问时访问，更改颜色和a：悬停。 使用：悬停我有链接获取背景颜色，并大胆强调它是一个链接被点击。
06年10月
设计导航部分的样式
由于我们首先在HTML中放置了导航（id =“nav”）部分，我们先来设置它。 我们需要指出它应该有多宽，并在右边放宽一点，以便正文不会碰到它。 我还在它周围放置了一个边框。
将以下CSS添加到您的styles.css文档中：
#nav {
width：225px;
margin-right：15px;
边框：中等实心＃000000;
}
#nav li {
list-style：none;
}
.footer {
font-size：.75em;
明确：两者;
宽度：100％;
text-align：center;
}
列表样式属性在导航部分中设置列表以使其没有项目符号或数字，并且.footer将版权部分设置得更小并且在该部分中居中。
07的10
定位主要部分
通过绝对定位你的主要部分，你可以确定它将保持你想要它留在你的网页上的地方。 我制作了800像素的宽屏来容纳更大的显示器，但是如果您有更小的显示器，您可能想要缩小显示器的尺寸。
将下列内容放入styles.css文档中：
#main {
宽度：800px;
top：0px;
位置：绝对;
left：250px;
}
08年10月
造型您的段落
由于我已经在上面设置了段落字体，所以我想给每个段落增加一些额外的“踢”，让它更加突出。 我通过在顶部放置一个边框来突出显示该段落，而不仅仅是一个图像。
将下列内容放入styles.css文档中：
.topline {
边框顶部：厚实体＃FFCC00;
}
我决定将它作为一个名为“topline”的类来完成，而不是仅仅以这种方式定义所有段落。 这样，如果我决定我想要一个没有顶部黄线的段落，我可以简单地在段落标记中省略class =“topline”，并且它不会有顶部边框。
09年10月
造型图像
图像通常在它们周围有一个边框，除非图像是链接，否则这并不总是可见的，但我喜欢在CSS样式表中有一个自动关闭边框的类。 对于这个样式表，我创建了“noborder”类，并且文档中的大部分图像都是这个类的一部分。
这些图像的其他特殊部分是它们在页面上的位置。 我希望他们成为他们所在段落的一部分，而不使用表格来对齐它们。 最简单的方法是使用float CSS属性。
将下列内容放入styles.css文档中：
#main img {
向左飘浮;
margin-right：5px;
margin-bottom：15px;
}
。无边界 {
border：0px none;
}
正如你所看到的，在图像上也设置了边距属性，以确保它们不会与段落中旁边的浮动文本砸碎。
10 10
现在看看你的完成页面
保存完CSS后，您可以在Web浏览器中重新加载pets.htm页面。 您的页面应该与此图片中显示的页面类似，图片对齐并且导航页面左侧正确放置。
对于本网站的所有内部页面，请遵循相同的步骤。 您希望在导航中为每个页面设置一个页面。