HTML+CSS编写静态网站-22 组织css文件并添加注释

HTML+CSS编写静态网站-22 组织css文件并添加注释

​ 我们的网页已经开始形成。现在我们要花一些时间学习如何设置字体大小，然后将第三方服务的自定义字体包括进来。在我们开始之前，我们应该组织我们的CSS。它开始变得复杂。所以为了让以后找起来方便，我们将添加一些CSS注释以及调整CSS结构。注释就相当于我们写学习笔记一样，在代码中写的注释实际上不会被浏览器编译。网站访问者也看不到我们写的注释，除非他们查看您的网页源代码。 书写代码注释是一个良好习惯，因为注释可以作为展示关于你编写代码的思维过程。也方便以后更容易维护你的代码，并修复错误， 所以，让我们来写第一个注释。在body选择器这里，我要写一个正斜杠，然后一个星号，再接一个星号，一个斜杠结尾。我可以在星号里输入任何我想要的，比如说site body，这就是注释，而且它不会被浏览器编译：

所以如果我保存和刷新页面，它不应该改变任何东西。 注释不一定要在代码的正上方。我们也可以在代码行的末尾放置注释。所以例如我可以复制这个注释，我可以把它放在末尾。它不会影响到代码。

现在，让我们继续注释我们之前添加的其余的代码。所以，在这里为我们的header选择器。我们说，这是一个绿色的标题，这将有助于我们记住我们在这里放置什么颜色。

在我们的nav之上，我要说：

这是移动设备上的导航背景。在h1和h2，注释：

这是标志文字。 然后，添加链接选择器的注释：

然后我们有导航链接颜色的设置。所以让我们输入：nav link：

然后我们有选定的导航链接颜色。所以让我们输入：选中的导航链接：

现在，我们已经为一些重要的CSS规则添加了注释，这将使我们更容易更改颜色方案。 现在让我们来创建一些多行注释，用来帮助我们将代码分成更多可读的块。那么，如何添加多行注释呢？ 让我们来到我们的代码的顶部，我打开一个注释，然后关闭它，我要在这里或星号输出一串星星，然后输入GENERAL，表示它是一个放置通用的CSS代码块的地方：

然后，我们将这段多行注释复制，然后在Header选择器上粘贴，然后改为HEADING注释：

然后在HEADING多行注释下粘贴多行注释，输入COLORS：

有了这些多行注释之后，我们就可以移动css代码了，我们把links移动到h1，h2的下面：

然后把nav background移动到header的下面：

然后把body放在header的上面，这样就更加连续了：

然后把logo放在多行注释heading下面：

最后再把a和wrapper的位置互换一下：

跳转结构对网站来说是非常有意义的，如果你没有像我这样操作代码，实际上并不会影响网站的功能，但是当你的css文件更加复杂的时候，你会发现组织css代码结构是非常重要的。现在我们的代码可读性和可伸缩性都有了一定程度的提高。我们可以很容易找到对应的选择器。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。