从HTML + CSS开始的CSS教程
这个简短的教程适用于那些想要开始使用CSS并且之前从未编写过CSS样式表的人。
它没有解释很多CSS。它只是解释了如何创建HTML文件，CSS文件以及如何使它们协同工作。之后，您可以阅读任何其他教程，以便为HTML和CSS文件添加更多功能。或者您可以切换到使用专用的HTML或CSS编辑器，这可以帮助您设置复杂的网站。
在本教程结束时，您将创建一个如下所示的HTML文件：
生成的HTML页面，颜色和布局都使用CSS完成。
请注意，我并不认为这很漂亮☺
看起来像这样的部分是可选的。它们包含示例中HTML和CSS代码的一些额外说明。开头的“警告！”标志表示这是比其他文本更高级的材料。
第1步：编写HTML
在本教程中，我建议您只使用最简单的工具。例如，记事本（在Windows下），TextEdit（在Mac上）或KEdit（在KDE下）都可以。一旦理解了这些原则，您可能希望切换到更高级的工具，甚至是商业程序，例如Style Master，Dreamweaver或GoLive。但是对于您的第一个CSS样式表，最好不要被太多高级功能分散注意力。
不要使用Word处理器，例如Microsoft Word或OpenOffice。它们通常会生成Web浏览器无法读取的文件。对于HTML和CSS，我们需要简单的纯文本文件。
第1步是打开文本编辑器（记事本，TextEdit，KEdit或其他任何你喜欢的东西），从一个空窗口开始，输入以下内容：
<！DOCTYPE html PUBLIC“ - // W3C // DTD HTML 4.01 // EN”><HTML><HEAD> <title>我的第一个样式页面</ title></ HEAD><BODY><！ - 网站导航菜单 - ><ul class =“navbar”> <li> <a href="index.html">主页</a> <li> <a href="musings.html"> Musings </a> <li> <a href="town.html">我的城镇</a> <li> <a href="links.html">链接</a></ UL><！ - 主要内容 - ><h1>我的第一个样式页面</ h1><p>欢迎来到我的风格页面！<p>它没有图像，但至少它有风格。它有链接，即使他们不去任何地方＆hellip;<p>这里应该有更多，但我不知道什么呢<！ - 在页面上签名并注明日期，这是唯一有礼貌的！ - ><地址> 2004年4月5日制作<br> 我自己。</ address></ BODY></ HTML>
实际上，您不必键入它：您可以将其从此Web页面复制并粘贴到编辑器中。
（如果您在Mac上使用TextEdit，请不要忘记告诉TextEdit文本是纯文本，方法是转到“格式”菜单并选择“生成纯文本”。）
上面HTML文件的第一行告诉浏览器这是什么类型的HTML（DOCTYPE表示DOCument TYPE）。在这种情况下，它是HTML版本4.01。
<和>中的单词称为标记，如您所见，文档包含在<html>和</ html>标记中。在<head>和</ head>之间，屏幕上没有显示各种信息的空间。到目前为止，它包含文档的标题，但稍后我们也将添加CSS样式表。
<body>是文档的实际文本所在的位置。原则上，除了<！ - 和 - >中的文本之外，其中的所有内容都将被显示，该文本用作对我们自己的评论。浏览器会忽略它。
在示例中的标签中，<ul>引入了“无序列表”，即，项目未编号的列表。<li>是“列表项”的开头。<p>是“段落”。<a>是“锚点”，它是创建超链接的原因。
KEdit编辑器显示HTML源代码。
如果你想知道<...>中的名字是什么意思，一个好的起点是HTML入门。但只是关于我们的示例HTML页面的结构的几句话。
“ul”是一个列表，每个项目有一个超链接。这将作为我们的“网站导航菜单”，链接到我们（假设的）网站的其他页面。据推测，我们网站上的所有页面都有类似的菜单。
“h1”和“p”元素构成此页面的唯一内容，而底部的签名（“地址”）将在网站的所有页面上再次相似。
请注意，我没有关闭“li”和“p”元素。在HTML中（但不是在XHTML中），允许省略</ li>和</ p>标签（我在这里做），使文本更容易阅读。但如果您愿意，可以添加它们。
我们假设这将是一个具有几个类似页面的网站的一页。对于当前网页来说，这个网页有一个链接到假设网站上其他页面的菜单，一些独特的内容和一个签名。
现在从“文件”菜单中选择“另存为...”，导航到要放置它的目录/文件夹（桌面很好）并将文件另存为“mypage.html”。不要关闭编辑器，我们将再次需要它。
（如果您在版本10.4之前在Mac OS X上使用TextEdit，您将看到一个选项不要在“另存为”对话框中附加.txt扩展名。选择该选项，因为名称“mypage.html”已包含扩展名。较新版本的TextEdit会自动注意.html扩展名。）
接下来，在浏览器中打开该文件。您可以按如下方式执行此操作：使用文件管理器（Windows资源管理器，Finder或Konqueror）查找文件，然后单击或双击“mypage.html”文件。它应该在您的默认Web浏览器中打开。（如果没有，请打开浏览器并将文件拖到其中。）
正如你所看到的，页面看起来很无聊......
第2步：添加一些颜色
您可能在白色背景上看到一些黑色文本，但这取决于浏览器的配置方式。因此，我们可以做的一件容易的事情就是增加一些颜色。（保持浏览器打开，我们稍后会再次使用它。）
我们将从HTML文件中嵌入的样式表开始。稍后，我们将把HTML和CSS放在单独的文件中。单独的文件很好，因为它可以更容易地为多个HTML文件使用相同的样式表：您只需要编写样式表一次。但是对于这一步，我们只将所有内容保存在一个文件中。
我们需要在HTML文件中添加一个<style>元素。样式表将位于该元素内。因此，返回编辑器窗口并在HTML文件的head部分添加以下五行。要添加的行以红色显示。
My first styled page
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>My first styled page</title>
<style type="text/css">
body {
color: purple;
margin: 0px 0px 25px; word-break: break-word; color: rgb(51, 51, 51); font-family: -apple-system, "SF UI Text", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; font-size: 16px;"> </style>
</head>
<body>
第一行说这是一个样式表，它是用CSS编写的（“text / css”）。第二行说我们为“body”元素添加样式。第三行将文本的颜色设置为紫色，下一行将背景设置为一种黄绿色。
CSS中的样式表由规则组成。每条规则有三个部分：
该选择器（在本例中：“体”），它告诉文档的哪些部分是由规则影响浏览器;
所述属性规定了布局的方面被设置了什么（在该示例中，“颜色”和“背景颜色”均为属性）;
和值（'purple'和'＃d8da3d'），它给出了style属性的值。
该示例显示可以组合规则。我们设置了两个属性，因此我们可以制定两个单独的规则：
body { color: purple }
body { margin: 0px 0px 25px; word-break: break-word; color: rgb(51, 51, 51); font-family: -apple-system, "SF UI Text", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; font-size: 16px;">但由于这两个规则都影响了身体，我们只写了一次“body”并将属性和值放在一起。
body元素的背景也将是整个文档的背景。我们没有给任何其他元素（p，li，address ...）任何明确的背景，所以默认情况下它们没有（或者：将是透明的）。'color'属性设置body元素的文本颜色，但body中的所有其他元素都继承该颜色，除非显式覆盖。（我们稍后会添加一些其他颜色。）
现在保存此文件（使用“文件”菜单中的“保存”）并返回浏览器窗口。如果按“重新加载”按钮，显示应从“无聊”页面变为彩色（但仍然相当无聊）页面。除了顶部的链接列表，文本现在应该是紫色的黄色背景。
现在，一个浏览器如何显示已添加某些颜色的页面。
可以通过多种方式在CSS中指定颜色。此示例显示了其中两个：按名称（“purple”）和十六进制代码（“＃d8da3d”）。大约有140种颜色名称，十六进制代码允许超过1600万种颜色。添加一丝风格可以解释这些代码的更多信息。
第3步：添加字体
另一件容易做的事情是在页面的各种元素的字体中做出一些区分。因此，让我们将文本设置为“Georgia”字体，除了h1标题，我们将给出“Helvetica”。
在网络上，你永远无法确定你的读者在他们的计算机上有什么字体，所以我们也添加了一些替代品：如果格鲁吉亚不可用，Times New Roman或Times也没关系，如果所有其他方法都失败了，浏览器可能会使用任何其他字体与衬线。如果没有Helvetica，则Geneva，Arial和SunSans-Regular的形状非常相似，如果这些都不起作用，浏览器可以选择任何其他无衬线的字体。
在文本编辑器中添加以下行：
!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>我的第一个样式页面</title>
<link rel="stylesheet" href="mystyle.css">
<style type="text/css">
body {
font-family: Georgia, "Times New Roman",
Times, serif;
color: purple;
margin: 0px 0px 25px; word-break: break-word; color: rgb(51, 51, 51); font-family: -apple-system, "SF UI Text", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; font-size: 16px;"> h1 {
font-family: Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif }
</style>
</head>
如果再次保存文件并在浏览器中按“重新加载”，则标题和其他文本现在应该有不同的字体。
现在主文本的字体与标题不同。
第4步：添加导航栏
HTML页面顶部的列表旨在成为导航菜单。许多网站在页面的顶部或侧面都有某种菜单，这个页面也应该有一个。我们将它放在左侧，因为这比顶部更有趣......
该菜单已在HTML页面中。它是顶部的<ul>列表。它中的链接不起作用，因为到目前为止我们的“网站”只包含一个页面，但现在并不重要。在一个真实的网站上，当然不应该有任何断开的链接。
所以我们需要将列表向左移动并将文本的其余部分向右移动一点，以便为它腾出空间。我们使用的CSS属性是'padding-left'（移动正文）和'position'，'left'和'top'（移动菜单）。
还有其他方法可以做到这一点。如果您在学习CSS页面上查找“列”或“布局” ，您将找到几个可立即运行的模板。但是这个可以用于我们的目的。
在编辑器窗口中，将以下行添加到HTML文件中：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>我的第一个样式页面</title>
<link rel="stylesheet" href="mystyle.css">
<style type="text/css">
body {
padding-left: 11em;
font-family: Georgia, "Times New Roman",
Times, serif;
color: purple;
margin: 0px 0px 25px; word-break: break-word; color: rgb(51, 51, 51); font-family: -apple-system, "SF UI Text", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; font-size: 16px;">ul.navbar {
position: absolute;
top: 2em;
left: 1em;
width: 9em }
h1 {
font-family: Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif }
</style>
</head>
如果再次保存文件并在浏览器中重新加载，则现在应该具有主文本左侧的链接列表。那已经看起来更有趣了，不是吗？
主要文本已移至右侧，链接列表现在位于其左侧，而不是上方。
'position：absolute'表示ul元素的位置与文档中之前或之后的任何文本无关，而'left'和'top'表示该位置是什么。在这种情况下，从顶部开始2em，从窗口左侧开始1em。
'2em'表示当前字体大小的2倍。例如，如果菜单显示为12点的字体，那么'2em'是24点。'em'是CSS中非常有用的单元，因为它可以自动适应阅读器碰巧使用的字体。大多数浏览器都有一个用于增加或减少字体大小的菜单：您可以尝试它并看到菜单随着字体的增加而增加，如果我们使用像素大小而不是这样的话。
第5步：设置链接样式
导航菜单仍然看起来像一个列表，而不是菜单。让我们为它添加一些风格。我们将删除列表项目符号并将项目移动到项目符号所在的左侧。我们还将为每个项目提供自己的白色背景和黑色方块。（为什么？没有特别的原因，只因为我们可以。）
我们还没有说明链接的颜色应该是什么，所以我们也要添加：蓝色表示用户尚未看到的链接，紫色表示已访问的链接：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>我的第一个样式页面</title>
<link rel="stylesheet" href="mystyle.css">
<style type="text/css">
body {
padding-left: 11em;
font-family: Georgia, "Times New Roman",
Times, serif;
color: purple;
margin: 0px 0px 25px; word-break: break-word; color: rgb(51, 51, 51); font-family: -apple-system, "SF UI Text", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; font-size: 16px;">ul.navbar {
list-style-type: none;
padding: 0;
margin: 0;
position: absolute;
top: 2em;
left: 1em;
width: 9em }
h1 {
font-family: Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif }
ul.navbar li {
background: white;
margin: 0.5em 0;
padding: 0.3em;
border-right: 1em solid black }
ul.navbar a {
text-decoration: none }
a:link {
color: blue }
a:visited {
color: purple }
</style>
</head>
传统上，浏览器显示带有下划线和颜色的超链接。通常，颜色类似于我们在此处指定的颜色：蓝色表示您尚未访问过的页面（或很久以前访问过的页面），紫色表示您已经看过的页面。
在HTML中，使用<a>元素创建超链接，因此要指定颜色，我们需要为“a”添加样式规则。为了区分访问链接和未访问链接，CSS提供了两个“伪类”（：link和：visited）。它们被称为“伪类”，以将它们与直接出现在HTML中的类属性区分开来，例如， class="navbar"在我们的示例中。
第6步：添加水平线
样式表的最后一个添加是一个水平规则，用于将文本与底部的签名分开。我们将使用'border-top'在<address>元素上方添加一条虚线：
<<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>我的第一个样式页面</title>
<link rel="stylesheet" href="mystyle.css">
<style type="text/css">
body {
padding-left: 11em;
font-family: Georgia, "Times New Roman",
Times, serif;
color: purple;
margin: 0px 0px 25px; word-break: break-word; color: rgb(51, 51, 51); font-family: -apple-system, "SF UI Text", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; font-size: 16px;">ul.navbar {
list-style-type: none;
padding: 0;
margin: 0;
position: absolute;
top: 2em;
left: 1em;
width: 9em }
h1 {
font-family: Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif }
ul.navbar li {
background: white;
margin: 0.5em 0;
padding: 0.3em;
border-right: 1em solid black }
ul.navbar a {
text-decoration: none }
a:link {
color: blue }
a:visited {
color: purple }
address {
margin-top: 1em;
padding-top: 1em;
border-top: thin dotted }
</style>
</head>
现在我们的风格很完整。接下来，让我们看一下如何将样式表放在单独的文件中，以便其他页面可以共享相同的样式。
第7步：将样式表放在单独的文件中
我们现在有一个带有嵌入式样式表的HTML文件。但是如果我们的网站增长，我们可能希望许多页面共享相同的样式。有一种比将样式表复制到每个页面更好的方法：如果我们将样式表放在单独的文件中，所有页面都可以指向它。
要制作样式表文件，我们需要创建另一个空文本文件。您可以从编辑器的“文件”菜单中选择“新建”，以创建一个空窗口。（如果您使用的是TextEdit，请不要忘记使用“格式”菜单再次将其设为纯文本。）
然后将HTML文件中<style>元素内的所有内容剪切并粘贴到新窗口中。不要复制<style>和</ style>本身。它们属于HTML，而不属于CSS。在新的编辑器窗口中，您现在应该拥有完整的样式表：
body {
padding-left: 11em;
font-family: Georgia, "Times New Roman",
Times, serif;
color: purple;
margin: 0px 0px 25px; word-break: break-word; color: rgb(51, 51, 51); font-family: -apple-system, "SF UI Text", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; font-size: 16px;">ul.navbar {
list-style-type: none;
padding: 0;
margin: 0;
position: absolute;
top: 2em;
left: 1em;
width: 9em }
h1 {
font-family: Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif }
ul.navbar li {
background: white;
margin: 0.5em 0;
padding: 0.3em;
border-right: 1em solid black }
ul.navbar a {
text-decoration: none }
a:link {
color: blue }
a:visited {
color: purple }
address {
margin-top: 1em;
padding-top: 1em;
border-top: thin dotted }
从“文件”菜单中选择“另存为...”，确保您与mypage.html文件位于同一目录/文件夹中，并将样式表另存为“mystyle.css”。
现在返回带有HTML代码的窗口。从<style>标记中删除所有内容，包括</ style>标记，并将其替换为<link>元素，如下所示：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>我的第一个样式页面</title>
<link rel="stylesheet" href="mystyle.css">
</ HEAD>
这将告诉浏览器样式表在名为“mystyle.css”的文件中找到，并且由于没有提到目录，浏览器将查找找到HTML文件的同一目录。
如果您保存HTML文件并在浏览器中重新加载它，您应该看不到任何更改：页面的样式仍然相同，但现在样式来自外部文件。
最后希望大家多多关注！