CSS基础:语法、注释以及注释的3个注意事项

你好,我是云桃桃。

一个希望帮助更多朋友快速入门 WEB 前端的程序媛。1枚程序媛,大专生,2年时间从1800到月入过万,工作5年买房。 分享成长心得。

259篇原创内容-公众号

后台回复“前端工具”可获取开发工具,持续更新中

后台回复“前端基础题”可得到前端基础100题汇总,持续更新中

今天我们来聊聊 CSS 语法,它是理解和编写 CSS 样式的基础,接着再聊聊 CSS 注释的写法。

好,那就一起来学习吧。

CSS 语法

CSS 的语法由选择器、属性和值组成,通常以规则集(Rule Set)的形式出现。每个规则集包含一个或多个选择器和一个声明块,由一系列以分号分隔的属性-值对组成。

规则集的一般形式如下:

selector { property1: value1; property2: value2; /* 更多属性-值对 */ }

选择器(Selector):用于指定应用规则的元素,可以是 1 个或者多个。可以是 HTML 元素名称、类、ID、属性,也可以是这些的组合。

属性(Property):定义要设置的样式属性的名称。

值(Value):为属性指定的样式值,可以是颜色、大小、字体等。

,声明块以{ }包裹,每个属性-值对由一个属性和一个值组成,用冒号(:)分隔,然后以分号(;)结束。

例如:

h1 {
  color: #0f0;
  font-size: 24px;
}

这段 CSS 规则将会选择所有 <h1> 元素,并设置它们的文本颜色为绿色,字体大小为 24 像素。

CSS 注释

CSS 注释是在样式表中用于注释或说明代码的部分,注释内容不会影响页面的显示效果,只是用于开发者之间或者开发者自己之间的文档说明。

CSS 注释以 /* 开始,以 */ 结束,可以跨越多行,也可以在一行内。它们可以包含任何文本,通常用于解释代码的目的、功能、作者、日期等。

以下是 CSS 注释的示例:

/* 这是一个示例注释 */
body {
  background-color: #f0f0f0; /* 设置页面背景色为浅灰色 */
}

/* 多行注释也可以跨越多行 */
/*
h1 {
  color: blue;
}
*/

在这个示例中,第一条注释解释了 body 元素的背景颜色的用途,第二条注释是一个多行注释,但是没有实际应用到代码中。

对于我们新手,在写的时候要注意以下 3 种错误写法:

错误写法 1:

/* 这是一个错误的注释漏掉了结尾标记
body {
    background-color: #ffffff;

错误原因: 这个注释漏掉了结束标记 */,导致后续的 CSS 代码都被当作注释,可能会影响到样式的正常应用。比如:

图片

错误写法 2:

/* 这是一个错误的注释,没有空格
body {
    background-color: #ffffff;
*/ }

错误原因: 注释不完全。注释一半花括号以及内容,另一半花括号就会不完整,代码上也有明显标识,比如:

图片

如果想注释元素的整条 CSS ,务必注释完全,不要丢三落四。代码写法一定要规范。

错误写法 3:

/* 这是一个错误的注释,注释内容包含CSS语法
body {
    /* 错误的注释嵌套 */
    background-color: #ffffff;
}

错误原因: 在 CSS 注释中,不能包含 CSS 语法,如上例中的 /* 错误的注释嵌套 */。正确的做法是避免在注释中使用 CSS 语法,否则可能导致解析错误或者注释无法正确闭合。

总之,正确的 CSS 注释写法应该是 /* 注释内容 */,在注释内容和注释标记之间应该有一个空格相对规范,不应该包含 CSS 语法,而且要确保注释的起始和结束标记匹配,避免出现语法错误和影响代码的可读性。

好了,以上,本文完。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/516670.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Vulnhub:WESTWILD: 1.1

目录 信息收集 arp nmap nikto whatweb WEB web信息收集 dirmap enm4ulinux sumbclient get flag1 ssh登录 提权 横向移动 get root 信息收集 arp ┌──(root㉿ru)-[~/kali/vulnhub] └─# arp-scan -l Interface: eth0, type: EN10MB, MAC: 0…

Python 一步一步教你用pyglet制作“彩色方块连连看”游戏(续)

“彩色方块连连看”游戏(续) 上期讲到相同的色块连接&#xff0c;链接见&#xff1a; Python 一步一步教你用pyglet制作“彩色方块连连看”游戏-CSDN博客 第八步 续上期&#xff0c;接下来要实现相邻方块的连线&#xff1a; 首先来进一步扩展 行列的类&#xff1a; class R…

Template Basic

本系列均参考https://github.com/bonfy/go-mega/blob/master/02-template-basic.md 只是为了监督自己写的博客 这里就不介绍什么是模板了&#xff0c;一般来说&#xff0c;我们使用html文件作为我们的模板文件 我们首先创建一个 类似于这样的模板 package mainimport (&quo…

《数字图像处理》-上机 5 图像阈值化处理、霍夫变换及形态学算法

一、上机目的 学习图像阈值化处理、霍夫变换、形态学算法及编程实现方法 二、相关知识及练习 1、图像阈值化处理 图像阈值化&#xff08;Binarization&#xff09;旨在剔除掉图像中一些低于或高于一定值的像素&#xff0c;从而提 取图像中的物体&#xff0c;将图像的背景和…

ComfyUI ClipSeg插件报错- resize_image出错应该怎么办

上一篇刚介绍了这个插件&#xff0c;结果emm..很快发现事情并不简单...结果又报错了。 后台报错信息&#xff1a; Unused or unrecognized kwargs: padding. !!! Exception during processing !!! Traceback (most recent call last): File "F:\ComfyUI-aki\execution.p…

4.2总结

了解了部分Api的使用并学习了接口的API API API包含了较多种类&#xff08;System,Runtime等&#xff09; System其实就是一个工具类&#xff0c;提供了一些与系统相关的方法 下面有一些常间的System方法 方法名说明public static void exit (int status)终止当前运行的ja…

配置code-server和texlive实现网页写tex

使用overleaf太卡了&#xff0c;有云服务器或者nas小主机&#xff0c;配置自己的code-servertexlive&#xff0c;来写论文。 之前用服务器配置过自己的overleaf&#xff0c;感觉不是很好用&#xff0c;缺少东西。 一、思路 使用docker先安装一个ubuntu&#xff0c;用dockerfil…

基于Python的微博舆论分析,微博评论情感分析可视化系统,附源码

博主介绍&#xff1a;✌程序员徐师兄、7年大厂程序员经历。全网粉丝12w、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447;…

c 语言 插值搜索(Interpolation Search)

给定一个由 n 个均匀分布值 arr[] 组成的排序数组&#xff0c;编写一个函数来搜索数组中的特定元素 x。 线性搜索需要 O(n) 时间找到元素&#xff0c;跳转搜索需要 O(? n) 时间&#xff0c;二分搜索需要 O(log n) 时间。 插值搜索是对实例二分搜索的改进&#xff0c;…

(Mac/win)Lightroom Classic 2024---摄影师的必备工具,解锁图片处理新境界

Lightroom Classic 2024是一款由Adobe公司推出的专业照片编辑和管理软件。它提供了全面的照片处理工具&#xff0c;包括裁剪、色彩调整、滤镜等&#xff0c;并支持RAW格式编辑。该软件以强大的组织和管理功能闻名&#xff0c;允许用户通过关键字、标签等方式轻松查找和整理照片…

SAP新的扩展策略

在软件即服务&#xff08;SaaS&#xff09;应用的推动下&#xff0c;SAP Cloud优先的战略非常明显&#xff0c;随之带来的是SAP Clean core的战略&#xff0c;从经典的 ABAP 可扩展性模式转变为 SAP S/4HANA 现代可扩展性模式。那么Clean core战略到底是什么&#xff1f;新的扩…

MATLAB 统计滤波(去除点云噪声)(55)

MATLAB 统计滤波法(去除点云噪声)(55) 一、算法介绍二、算法实现1.原理2.代码一、算法介绍 点云统计滤波,是一种常用的去噪点方法,原始的点云数据中包含多种噪点,无法直接使用,往往需要通过一些方法去除噪点,而统计滤波在这方面的使用非常广泛常见,下面是去噪点后的…

书生作业2

Task 1 生成200字以上的笑话&#xff0c;可以看到使用不同的提示词&#xff0c;会有不同的效果。 如果使用提示词“讲一个笑话.200字以上”&#xff0c; 会有偶发的输出较短的笑话的情况。 如果使用提示词“讲一个200字以上的笑话”时&#xff0c;结果相对稳定。 下载目前两种…

MinGW使用std::thread报错error: ‘thread‘ is not a member of ‘std‘

目录 问题描述简单的测试代码报错及解决 问题描述 在windows上用vscode编写c代码进行编译时&#xff0c;一直上报error: ‘thread’ is not a member of std’的错误&#xff0c;搜索该错误上报都是说c版本不匹配&#xff0c;然后我在task.json里面添加了-stdc11之后还是报错&…

【Vue】watch监听复杂数据,新值与旧值一样

问题 watch监听复杂数据&#xff0c;例如数组&#xff0c;旧值与新值一样 解决方案 监听回调里返回新数组&#xff0c;新、旧数组地址改变&#xff0c;得到的值也就不一样&#xff0c;例↓ ()>[...data] 码 test.js // 数据 const musicList ref([{ id: 540000200805…

STM32-05基于HAL库(CubeMX+MDK+Proteus)串行通信案例(中断方式接收命令)

文章目录 一、功能需求分析二、Proteus绘制电路原理图三、STMCubeMX 配置引脚及模式&#xff0c;生成代码四、MDK打开生成项目&#xff0c;编写HAL库的功能代码五、运行仿真程序&#xff0c;调试代码 一、功能需求分析 在中断机制实现按键检测的案例之后&#xff0c;我们介绍串…

Rust egui(4) 增加自己的tab页面

如下图&#xff0c;增加一个Sins也面&#xff0c;里面添加一个配置组为Sin Paraemters&#xff0c;里面包含一个nums的参数&#xff0c;范围是1-1024&#xff0c;根据nums的数量&#xff0c;在Panel中画sin函数的line。 demo见&#xff1a;https://crazyskady.github.io/index.…

3. python练习题3-自由落体

3. python练习题3-自由落体 【目录】 文章目录 3. python练习题3-自由落体1. 目标任务2. 解题思路3. 知识回顾-%占位符格式化处理3.1 概述3.2 占位符的多种用法3.3 格式化操作符辅助指令3.4 将整数和浮点数格式化为字符串 4. 解题思路4.1 球第1次下落4.2 球第2次下落 5. 最终代…

可能是最便宜的姿态传感器,国产三轴加速度计SC7A20

可能是最便宜的姿态传感器 三轴检测 批量参考价格&#xff1a;整盘单价&#xff1a;1.242&#xff0c;一个包装10K&#xff0c;希望厂家能出点数量少的包装&#xff0c;这一盘太多了&#xff1a;&#xff09; 特点 宽电压范围 1.71V-3.6V 1.8V 兼容数字 IO 口 低功耗模式下…

【论文精读】 GPT,GPT-2,GPT-3:大力出奇迹

系列文章目录 【论文精读】Transformer&#xff1a;Attention Is All You Need 【论文精读】BERT&#xff1a;Pre-training of Deep Bidirectional Transformers for Language Understanding 文章目录 系列文章目录一、前言二、GPT&#xff08;一&#xff09;文章概览&#xf…