weixin_33910460

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="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>欢迎来到我的风格页面！它没有图像，但至少它有风格。它有链接，即使他们不去任何地方＆hellip;这里应该有更多，但我不知道什么呢<！ - 在页面上签名并注明日期，这是唯一有礼貌的！ - ><地址> 2004年4月5日制作 我自己。</ address></ BODY></ HTML> 实际上，您不必键入它：您可以将其从此Web页面复制并粘贴到编辑器中。 （如果您在Mac上使用TextEdit，请不要忘记告诉TextEdit文本是纯文本，方法是转到“格式”菜单并选择“生成纯文本”。） 上面HTML文件的第一行告诉浏览器这是什么类型的HTML（DOCTYPE表示DOCument TYPE）。在这种情况下，它是HTML版本4.01。 <和>中的单词称为标记，如您所见，文档包含在<html>和</ html>标记中。在<head>和</ head>之间，屏幕上没有显示各种信息的空间。到目前为止，它包含文档的标题，但稍后我们也将添加CSS样式表。 <body>是文档的实际文本所在的位置。原则上，除了<！ - 和 - >中的文本之外，其中的所有内容都将被显示，该文本用作对我们自己的评论。浏览器会忽略它。 在示例中的标签中，<ul>引入了“无序列表”，即，项目未编号的列表。<li>是“列表项”的开头。是“段落”。<a>是“锚点”，它是创建超链接的原因。 KEdit编辑器显示HTML源代码。 <div class="image-package"> <a href="http://img.e-com-net.com/image/info8/5d5d7f81c6d2448e9b50b98e0f947fe1.png" target="_blank"><img class="uploaded-img" src="http://img.e-com-net.com/image/info8/5d5d7f81c6d2448e9b50b98e0f947fe1.png" alt="HTML + CSS开始，我的第一个网页_第2张图片" width="599" height="374" style="border:1px solid black;"></a> <div class="image-caption"> </div> </div> 如果你想知道<...>中的名字是什么意思，一个好的起点是HTML入门。但只是关于我们的示例HTML页面的结构的几句话。 “ul”是一个列表，每个项目有一个超链接。这将作为我们的“网站导航菜单”，链接到我们（假设的）网站的其他页面。据推测，我们网站上的所有页面都有类似的菜单。 “h1”和“p”元素构成此页面的唯一内容，而底部的签名（“地址”）将在网站的所有页面上再次相似。 请注意，我没有关闭“li”和“p”元素。在HTML中（但不是在XHTML中），允许省略</ li>和标签（我在这里做），使文本更容易阅读。但如果您愿意，可以添加它们。 我们假设这将是一个具有几个类似页面的网站的一页。对于当前网页来说，这个网页有一个链接到假设网站上其他页面的菜单，一些独特的内容和一个签名。 现在从“文件”菜单中选择“另存为...”，导航到要放置它的目录/文件夹（桌面很好）并将文件另存为“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

第一行说这是一个样式表，它是用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">

我的第一个样式页面

如果再次保存文件并在浏览器中按“重新加载”，则标题和其他文本现在应该有不同的字体。

现在主文本的字体与标题不同。

第4步：添加导航栏

HTML页面顶部的列表旨在成为导航菜单。许多网站在页面的顶部或侧面都有某种菜单，这个页面也应该有一个。我们将它放在左侧，因为这比顶部更有趣......

该菜单已在HTML页面中。它是顶部的

所以我们需要将列表向左移动并将文本的其余部分向右移动一点，以便为它腾出空间。我们使用的CSS属性是'padding-left'（移动正文）和'position'，'left'和'top'（移动菜单）。

还有其他方法可以做到这一点。如果您在学习CSS页面上查找“列”或“布局” ，您将找到几个可立即运行的模板。但是这个可以用于我们的目的。

在编辑器窗口中，将以下行添加到HTML文件中：

我的第一个样式页面

如果再次保存文件并在浏览器中重新加载，则现在应该具有主文本左侧的链接列表。那已经看起来更有趣了，不是吗？

主要文本已移至右侧，链接列表现在位于其左侧，而不是上方。

'position：absolute'表示ul元素的位置与文档中之前或之后的任何文本无关，而'left'和'top'表示该位置是什么。在这种情况下，从顶部开始2em，从窗口左侧开始1em。

'2em'表示当前字体大小的2倍。例如，如果菜单显示为12点的字体，那么'2em'是24点。'em'是CSS中非常有用的单元，因为它可以自动适应阅读器碰巧使用的字体。大多数浏览器都有一个用于增加或减少字体大小的菜单：您可以尝试它并看到菜单随着字体的增加而增加，如果我们使用像素大小而不是这样的话。

第5步：设置链接样式

导航菜单仍然看起来像一个列表，而不是菜单。让我们为它添加一些风格。我们将删除列表项目符号并将项目移动到项目符号所在的左侧。我们还将为每个项目提供自己的白色背景和黑色方块。（为什么？没有特别的原因，只因为我们可以。）

我们还没有说明链接的颜色应该是什么，所以我们也要添加：蓝色表示用户尚未看到的链接，紫色表示已访问的链接：

我的第一个样式页面

传统上，浏览器显示带有下划线和颜色的超链接。通常，颜色类似于我们在此处指定的颜色：蓝色表示您尚未访问过的页面（或很久以前访问过的页面），紫色表示您已经看过的页面。

在HTML中，使用元素创建超链接，因此要指定颜色，我们需要为“a”添加样式规则。为了区分访问链接和未访问链接，CSS提供了两个“伪类”（：link和：visited）。它们被称为“伪类”，以将它们与直接出现在HTML中的类属性区分开来，例如， class="navbar"在我们的示例中。

第6步：添加水平线

样式表的最后一个添加是一个水平规则，用于将文本与底部的签名分开。我们将使用'border-top'在

元素上方添加一条虚线：

我的第一个样式页面

现在我们的风格很完整。接下来，让我们看一下如何将样式表放在单独的文件中，以便其他页面可以共享相同的样式。

第7步：将样式表放在单独的文件中

我们现在有一个带有嵌入式样式表的HTML文件。但是如果我们的网站增长，我们可能希望许多页面共享相同的样式。有一种比将样式表复制到每个页面更好的方法：如果我们将样式表放在单独的文件中，所有页面都可以指向它。

要制作样式表文件，我们需要创建另一个空文本文件。您可以从编辑器的“文件”菜单中选择“新建”，以创建一个空窗口。（如果您使用的是TextEdit，请不要忘记使用“格式”菜单再次将其设为纯文本。）

然后将HTML文件中