Anonim

不用说,Web开发是巨大的。 其中很大一部分是因为几乎每个人都在网络上。 但是,该领域的开发人员短缺,这就是为什么Web开发课程如此容易获得且免费的原因。 考虑到这一点,我们将向您展示HTML和CSS的全部含义。 更具体地说,我们将向您展示“类”的工作方式。

我们并没有从头开始,因为已经有大量的免费课程。 相反,我们将特别向您展示类的工作原理,因为这是设计网站样式的必要组成部分。 我们还认为,在发布Twitter的Bootstrap API之前,可能值得介绍一下,因为类也是其中的必需组件。

作为免责声明,如果您是HTML和CSS的新手,那么这可能不是一个好的开始。 如果您熟悉它,那么选择它应该不会太难。 但是,如果您正在寻找完整的初学者教程,则可以在线找到许多不错的选择。 仅举几例,有FreeCodeCamp,The Odin Project,CodeAcademy,Code School,Team Treehouse,Udacity等。 如果您确实选择开始研究其中之一,那么我强烈建议您坚持使用其中的一个(例如Free Code Camp)并在开始另一个之前先完成它,因为许多“基本”内容可能会重复。

顺便说一句,让我们深入探讨所有有关类的内容。

上课方式

类非常有用。 它们消除了样式HTML的重复性。 没有类,您将分别标记样式中的每个元素。 而且,如果您有两个相同的元素,但又想为每个元素设置不同的样式,该怎么办? 这将是一团糟。 这就是为什么我们要上课。 类为HTML添加了一些组织结构,使您可以保持代码相对干净。 不仅如此,而且类可以多次使用。 换句话说,您将不必两次创建相同的样式规则。

这是我们班级的样子 标签:

如您所见,在我们的body标签下,我们有两个

不同类别的元素。 首先

标签的类别为“ head1”,第二个标签的类别为“ head2”。因此,在我们的CSS中,不要仅对样式应用样式

元素,我们可以将样式应用于这些单独的类。 我们为什么要这样做?

主要原因是您不希望所有

元素具有相同的样式。 制作网站时,这会令人头疼,而且,网站看起来不会很好。 类允许我们将样式仅应用于标记的一个实例,而不是全部

文档中的标签。 那么,如何用HTML编写类? 像这样:

一些内容

您可以将“ class”属性添加到几乎任何HTML元素中。

大! 因此,我们有一些类,但是在它们的当前状态下,它们实际上什么也没做。 那是因为我们还没有在类中添加任何样式规则。 为此,我们需要创建一个单独的.css文档。 我将其称为main.css。 在该文档中,我们将对此类进行样式设置:

要选择我们要设置样式的类,请执行以下操作:

.head1 {颜色:红色; 文本对齐:居中; }

花括号中是我们应用于该类的所有“规则”(或样式)。 您可以在该类中放入许多不同的规则。 就我而言,我使用“颜色”规则将文本的颜色更改为红色,并使用“文本对齐”规则将文本居中。 您可以从Mozilla的开发人员网络中找到CSS规则及其文档的完整列表。

现在,我们的样式仍未应用于HTML文档中的类,这是因为我们尚未将两个文件链接在一起。 返回您的HTML文件,然后在 标记,您将希望通过执行以下操作链接CSS文件:

您的HTML文档应如下所示:

您的测试项目在网络上应如下所示:

有关执行这些步骤的更详细的视频,请参阅下文。

视频

结论

这就是课堂的全部内容! 他们真的很容易理解。 显然,在您访问的大型且受欢迎的网站上,课程中的规则要比我们介绍的要复杂得多,但它们的最基本形式就是它们的工作方式。

如果您有任何疑问或长期关注,请确保在下面的注释中或在PCMech论坛中让我们知道! 或者,如果您对PCMech上的完整HTML / CSS初学者指南感兴趣,请务必也让我们知道!

HTML和CSS中的类简介