首页 > 其他分享 >5. CSS注释(附带示例)

5. CSS注释(附带示例)

时间:2022-10-14 15:02:08浏览次数:47  
标签:示例 附带 标签 代码 注释 样式 设置 CSS

1. 前言

在代码中合理的添加注释是个非常好的习惯,通过注释您可以对代码加以解释说明(例如描述某段代码的功能、使用方法等),浏览器会自动忽略注释的内容。注释对开发人员非常重要,它可以帮助开发人员更快的理解代码的用途。

在 CSS 中注释以/*开头(起始符),以*/结尾(结束符),/**/是成对出现的,所有在/**/之间的内容都会被看作注释的内容。CSS 中的注释只有这一种写法,无论是在单行中使用还是跨越多行使用,只要保证注释的内容在/**/之间即可。例如:

/*单行注释*/

/*
    多行注释
*/

【示例】通过注释对 CSS 样式进行解释说明。

<!DOCTYPE html>
<html>
    <head>
        <title>编程帮</title>
        <style>
            /* 为所有 h1 标签设置 CSS 样式 */
            h1 {
                color: blue;        /*设置字体颜色为蓝色*/
                text-align: center; /*设置对齐方式为居中对齐*/
            }
            /* 为所有 p 标签设置 CSS 样式 */
            p {
                color: red;         /*设置字体颜色为红色*/
                font-size: 18px;    /*设置字体大小为 18 像素*/
            }
        </style>
    </head>  
    <body>
        <h1>编程帮</h1>
        <p>http://www.biancheng.net/</p>
    </body>
</html>

运行结果如下图所示:

在 CSS 中添加注释
图:在 CSS 中添加注释


因为浏览器会忽略注释中的内容,所以在开发或调试 CSS 代码时,如果您不希望某段 CSS 代码执行,也可以使用/* */将这段代码注释起来,这样浏览器就不会再执行这段 CSS 代码了,如下所示:

<!DOCTYPE html>
<html>
    <head>
        <title>编程帮</title>
        <style>
            /* 为所有 h1 标签设置 CSS 样式 */
            h1 {
                color: blue;        /*设置字体颜色为蓝色*/
                /*text-align: center;*/
            }
            /* 为所有 p 标签设置 CSS 样式 */
            p {
                /*color: red;*/
                font-size: 18px;    /*设置字体大小为 18 像素*/
            }
        </style>
    </head>  
    <body>
        <h1>编程帮</h1>
        <p>http://www.biancheng.net/</p>
    </body>
</html>

运行结果如下图所示:

注释程序中的代码
图:注释程序中的代码


上面示例中,我们将第 9 行与第 13 行代码中的 CSS 样式注释了,通过运行可以看出,注释中的 CSS 样式没有生效。

在 CSS 中添加注释的数量没有限制,您可以在自己认为需要的地方添加注释。但需要注意的是,在 CSS 中注释不能嵌套使用,注释开始符/*在遇到第一个注释结束符*/后就会结束注释,之后出现的*/会被浏览器当作 CSS 样式,这么做的后果就是会导致后续的 CSS 样式无法正常解析。

【示例】还使用上面的代码,并在 CSS 样式中将注释嵌套使用:

<!DOCTYPE html>
<html>
    <head>
        <title>编程帮</title>
        <style>
            /* 为所有 h1 标签设置 CSS 样式 */
            h1 {
                color: blue;        /*设置字体颜色为蓝色*/
                text-align: center; /*设置对齐方式为居中对齐*/
            }
            /*
                /*为所有 p 标签*/
            设置 CSS 样式 */
            p {
                color: red;         /*设置字体颜色为红色*/
                font-size: 18px;    /*设置字体大小为 18 像素*/
            }
        </style>
    </head>  
    <body>
        <h1>编程帮</h1>
        <p>http://www.biancheng.net/</p>
    </body>
</html>

运行结果如下图所示:

CSS注释不能嵌套使用
图:CSS注释不能嵌套使用


上面代码中,我们在第 11 ~ 13 行之间对注释进行了嵌套使用,通过运行结果可以看出,只有为<h1>标签设置的样式生效了,而为<p>标签设置的样式并没有生效。

 

标签:示例,附带,标签,代码,注释,样式,设置,CSS
From: https://www.cnblogs.com/jiajunling/p/16791593.html

相关文章

  • 4. HTML引用CSS(4种方法)
    1. 前言CSS样式需要引用到HTML中才能真正有效,那么如何才能在HTML中引用CSS呢?下面就来介绍一下。2.内嵌样式表您可以在HTML头部(<head>标签内)的<style>标签......
  • 视频直播系统源码,使用css修改input的文字提示语颜色
    视频直播系统源码,使用css修改input的文字提示语颜色 <style> /*Safari,ChromeWebKitbrowsers*/ input::-webkit-input-placeholder{color:#ccc;}/*火狐Mozilla......
  • 1. CSS是什么
    1.前言CSS是“CascadingStyleSheet”的缩写,中文意思为“层叠样式表”,它是一种标准的样式表语言,用于描述网页的表现形式(例如网页元素的位置、大小、颜色等)。CSS的主要......
  • 前端成神之路-CSS初识
    第01阶段.前端基础.CSS初识CSS层叠样式表学习目标理解css的目的作用css的三种引入方式应用css三种引用方式的书写通过样式规则给标签添加简单的样式1.HTML的局限性说起HTML,......
  • nginx负载均衡示例讲解
    有任何问题都可以留言咨询。 常用的几种负载均衡方法1、round-robin轮询方法。默认的负载均衡方法。顾名思义就是循环的一个个来。把应用程序的请求,循环的分发到不......
  • CSS实现水平垂直居中的方式汇总
    原文链接:CSS实现水平垂直居中的1010种方式(https://cloud.tencent.com/developer/article/2035014)一、目录1.1居中元素固定宽高使用absolute+负值marginabsol......
  • ASP中查询数据库记录写入XML文件示例
    把下面代码保存为Asp_XML.asp运行即可:<%'By Dicky 2005-03-22 21:52:18 AM QQ:25941 E-mail:[email protected] IsSql = ......
  • 网页制作CSS
     css基础知识(一)css样式表的定义(二)css样式表的语法Pre标签 (三)内部样式表(四)外部样式表(五)内联样式表 css样式表的定义 css:(CascadingStyleSheets)层叠样式......
  • 深入理解css 笔记(4)
    处理元素高度的方式跟处理宽度不一样。之前对border-box的修改依然适用于高度。而且很有用,但是通常最好避免给元素指定明确的高度。当明确设置一个元素的高度时,内容可能......
  • 我为什么喜欢原子化CSS
    用Unocss已经有几个月了,从使用者的角度来说说我为什么喜欢上了原子化css。类似“原子化css”的概念其实很早之前就有,比如Bootstrap的css工具类已经很接近现在的原子化css......