不用说,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初学者指南感兴趣,请务必也让我们知道!