2023年6月21日发(作者：)

HTML+CSS开始，我的第⼀个⽹页从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”> 我的第⼀个样式页⾯</ title></ HEAD><BODY><！ - ⽹站导航菜单 - ><ul class =“navbar”> <li> <a href="">主页</a> <li> <a href=""> Musings </a> <li> <ahref="">我的城镇</a> <li> <a href="">链接</a></ UL><！ - 主要内容 - ><h1>我的第⼀个样式页⾯</ h1><p>欢迎来到我的风格页⾯！<p>它没有图像，但⾄少它有风格。它有链接，即使他们不去任何地⽅＆hellip;<p>这⾥应该有更多，但我不知道什么呢<！ -在页⾯上签名并注明⽇期，这是唯⼀有礼貌的！ - ><地址> 2004年4⽉5⽇制作</p><p> 我⾃⼰。</ 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页⾯的结构的⼏句话。“ul”是⼀个列表，每个项⽬有⼀个超链接。这将作为我们的“⽹站导航菜单”，链接到我们（假设的）⽹站的其他页⾯。据推测，我们⽹站上的所有页⾯都有类似的菜单。“h1”和“p”元素构成此页⾯的唯⼀内容，⽽底部的签名（“地址”）将在⽹站的所有页⾯上再次相似。请注意，我没有关闭“li”和“p”元素。在HTML中（但不是在XHTML中），允许省略</ li>和</ p>标签（我在这⾥做），使⽂本更容易阅读。但如果您愿意，可以添加它们。我们假设这将是⼀个具有⼏个类似页⾯的⽹站的⼀页。对于当前⽹页来说，这个⽹页有⼀个链接到假设⽹站上其他页⾯的菜单，⼀些独特的内容和⼀个签名。现在从“⽂件”菜单中选择“另存为...”，导航到要放置它的⽬录/⽂件夹（桌⾯很好）并将⽂件另存为“”。不要关闭编辑器，我们将再次需要它。（如果您在版本10.4之前在Mac OS X上使⽤TextEdit，您将看到⼀个选项不要在“另存为”对话框中附加.txt扩展名。选择该选项，因为名称“”已包含扩展名。较新版本的TextEdit会⾃动注意.html扩展名。）接下来，在浏览器中打开该⽂件。您可以按如下⽅式执⾏此操作：使⽤⽂件管理器（Windows资源管理器，Finder或Konqueror）查找⽂件，然后单击或双击“”⽂件。它应该在您的默认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第⼀⾏说这是⼀个样式表，它是⽤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 NewRoman或Times也没关系，如果所有其他⽅法都失败了，浏览器可能会使⽤任何其他字体与衬线。如果没有Helvetica，则Geneva，Arial和SunSans-Regular的形状⾮常相似，如果这些都不起作⽤，浏览器可以选择任何其他⽆衬线的字体。在⽂本编辑器中添加以下⾏：!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> 我的第⼀个样式页⾯如果再次保存⽂件并在浏览器中按“重新加载”，则标题和其他⽂本现在应该有不同的字体。

现在主⽂本的字体与标题不同。第4步：添加导航栏HTML页⾯顶部的列表旨在成为导航菜单。许多⽹站在页⾯的顶部或侧⾯都有某种菜单，这个页⾯也应该有⼀个。我们将它放在左侧，因为这⽐顶部更有趣......该菜单已在HTML页⾯中。它是顶部的