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

视频教程观看地址:http://study.163.com/course/courseMain.htm?courseId=1003879015

我们的网页已经开始形成。现在我们要花一些时间学习如何设置字体大小,然后将第三方服务的自定义字体包括进来。在我们开始之前,我们应该组织我们的CSS。它开始变得复杂。所以为了让以后找起来方便,我们将添加一些CSS注释以及调整CSS结构。注释就相当于我们写学习笔记一样,在代码中写的注释实际上不会被浏览器编译。网站访问者也看不到我们写的注释,除非他们查看您的网页源代码。

书写代码注释是一个良好习惯,因为注释可以作为展示关于你编写代码的思维过程。也方便以后更容易维护你的代码,并修复错误,

所以,让我们来写第一个注释。在body选择器这里,我要写一个正斜杠,然后一个星号,再接一个星号,一个斜杠结尾。我可以在星号里输入任何我想要的,比如说site body,这就是注释,而且它不会被浏览器编译:

 
 
/*site body*/ body{ background-color:#fff; color:#999; }
所以如果我保存和刷新页面,它不应该改变任何东西。 注释不一定要在代码的正上方。我们也可以在代码行的末尾放置注释。所以例如我可以复制这个注释,我可以把它放在末尾。它不会影响到代码。
/*site body*/ body{ background-color:#fff;/*site body*/
现在,让我们继续注释我们之前添加的其余的代码。所以,在这里为我们的header选择器。我们说,这是一个绿色的标题,这将有助于我们记住我们在这里放置什么颜色。
/*green header*/ header{ background:#6ab47b; border-color:#599A68; }
在我们的nav之上,我要说:
/*移动设备上的导航背景*/ nav{
这是移动设备上的导航背景。在h1和h2,注释:
/*logo text*/ h1 , h2{
这是标志文字。 然后,添加链接选择器的注释:
/*links*/ a{ color:#6ab47b; }
然后我们有导航链接颜色的设置。所以让我们输入:nav link:
/*nav link*/ nav a{
然后我们有选定的导航链接颜色。所以让我们输入:选中的导航链接:
/*selected nav link*/ nav a.selected, nav a:hover{
现在,我们已经为一些重要的CSS规则添加了注释,这将使我们更容易更改颜色方案。 现在让我们来创建一些多行注释,用来帮助我们将代码分成更多可读的块。那么,如何添加多行注释呢? 让我们来到我们的代码的顶部,我打开一个注释,然后关闭它,我要在这里或星号输出一串星星,然后输入GENERAL,表示它是一个放置通用的CSS代码块的地方:
/* ******************************** GENERAL *********************************/   a {
然后,我们将这段多行注释复制,然后在Header选择器上粘贴,然后改为HEADING注释:
/* ******************************** HEADING *********************************/   /*green header*/ header{
然后在HEADING多行注释下粘贴多行注释,输入COLORS:
/* ******************************** HEADING *********************************/   /* ******************************** COLORS *********************************/
有了这些多行注释之后,我们就可以移动css代码了,我们把links移动到h1,h2的下面:
/*logo text*/ h1 , h2{ color:#fff; }   /*links*/ a{        color:#6ab47b; }
然后把nav background移动到header的下面:
/*green header*/ header{ background:#6ab47b; border-color:#599A68; }   /*移动设备上的导航背景*/ nav{        background:#599A68; }
然后把body放在header的上面,这样就更加连续了:
/*site body*/ body{        background-color:#fff;/*site body*/        color:#999; }   /*green header*/ header{ background:#6ab47b; border-color:#599A68; }
然后把logo放在多行注释heading下面:
/* ******************************** HEADING *********************************/   #logo{        text-align:center;        margin:0; }
最后再把a和wrapper的位置互换一下:
/* ******************************** GENERAL *********************************/ #wrapper{ max-width:940px; margin:0 auto; padding:0 5% }   a { text-decoration : none; }
跳转结构对网站来说是非常有意义的,如果你没有像我这样操作代码,实际上并不会影响网站的功能,但是当你的css文件更加复杂的时候,你会发现组织css代码结构是非常重要的。现在我们的代码可读性和可伸缩性都有了一定程度的提高。我们可以很容易找到对应的选择器。 更多精彩内容尽在视频中! 本文固定链接:http://www.oxox.work/web/html-css/css-comment/ | 虚幻大学

查看原文:http://www.oxox.work/web/html-css/css-comment/
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

虚坏叔叔

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值