跳到主要内容
使用CSS进行样式化

使用CSS进行样式化

盖世的注意

虽然本教程涵盖了HTML和CSS样式化的基础知识，但仍然建议您在阅读本教程之前至少对HTML有一个小的了解。如果你想读这个教程，但仍然不确定什么是HTML，那么我建议你读我的<一个href＝"https://turbofuture.com/computers/Basic-HTML-Part-1-Hello-World" rel="noopener" onclick="return phoenixTrackClickEvent(this, event);" target="_blank">另一篇文章在开始这个之前。

<一个side class="m-in-content-ad-row l-inline mm-in-content-ad-row--in-content not-size-a not-size-b not-size-c" data-ad-group="in_content-0">

什么是CSS?

CSS代表级联样式表。与HTML类似，CSS是一种用于网页设计的工具。事实上，在设计一个漂亮的网站时，HTML和CSS是齐头并进的。两者之间的主要区别是HTML主要用于创建网站的内容，而CSS用于样式化该内容。HTML是创建网站的有用工具，但如果没有CSS，你的网站看起来会非常乏味。也就是说，人们可以使用其他工具来设计网站样式，但对于刚进入网页设计的人来说，CSS是一切的起点。

<一个side class="m-in-content-ad-row l-inline mm-in-content-ad-row--in-content not-size-a not-size-b not-size-c" data-ad-group="in_content-1">

HTML入门

为了使用CSS，我们首先需要在我们的网站上有一些内容。所以让我们开始创建一个简单的HTML文件和一些在网页上发现的更常见的元素。继续，打开你的文本编辑器，并创建一个新的命名为“index.html”。对于那些还没有找到自己喜欢的文本编辑器的人，我强烈建议使用括号来编写HTML和CSS。现在，复制并粘贴下面的代码到index.html文件中。

<一个side class="m-in-content-ad-row l-inline mm-in-content-ad-row--in-content not-size-a not-size-b not-size-c" data-ad-group="in_content-2"> 
< !文档类型超文本标记语言><超文本标记语言朗＝“en”><头>头><身体>身体>超文本标记语言>

这种文本在几乎所有HTML文件中都很常见。第一行的标记告诉互联网浏览器这是一个html文件，第2行和第9行的标记告诉浏览器这两个标记之间的所有内容都是用英语输入的html。在第3行和第5行标签之间，您将在web浏览器的选项卡中放置用于显示网站名称和徽标的代码。在第6行和第8行的标签之间是你要放置网站内容的地方。它实际上就是你网站的主体。

<一个side class="m-in-content-ad-row l-inline mm-in-content-ad-row--in-content not-size-a not-size-b not-size-c" data-ad-group="in_content-3">

用HTML添加一些内容

现在，我们有了网站的基本轮廓，是时候添加一些内容，使它更有趣一点。让我们从添加横幅到我们的网站开始。

< !文档类型超文本标记语言><超文本标记语言朗＝“en”><头>头><身体><div><h1>这是我的横幅文本h1>div>身体>超文本标记语言>

标签用于将网站的一部分与网站的其他部分分开。在这种情况下，我们使用div标签将横幅与网站的其余部分分开。

标签用于在您的网站上创建标题。可以使用六种不同的头文件(h1、h2、h3、h4、h5和h6)。标题之间最大的区别是文本大小。标题通常用于强调横幅文本和段落标题。现在，让我们添加一个导航栏，简称为navbar。

<一个side class="m-in-content-ad-row l-inline mm-in-content-ad-row--in-content not-size-a not-size-b not-size-c" data-ad-group="in_content-4"> 
< !文档类型超文本标记语言><超文本标记语言朗＝“en”><头>头><身体><div><h1>这是我的横幅文本h1>div><div><ul><李><一个href＝“index . html”>首页一个>李><李><一个href＝“info.html”>信息一个>李><李><一个href＝“contact.html”>联系一个>李><李><一个href＝“https://hubpages.com”>HUBPAGES一个>李>ul>div>身体>超文本标记语言>

同样，我们将使用

标记将导航栏分离为它自己的部分。
Baidu