本文详细介绍了CSS规则，包括内嵌式样式表的书写规范，如选择器的使用、属性键值对的格式、样式块的定义等。同时强调了CSS代码的注意事项，如分号的必要性，代码格式的紧凑与展开形式，以及代码压缩工具的使用和好处。此外，还讨论了CSS代码的英文大小写和空格规范，提倡使用小写并遵循一定的空格约定，以提高代码可读性和维护性。
一、CSS规则
以内嵌式样式表为例：
（1）所有的 css 代码都必须书写在 <head> 标签内部的一对 <style> 标签内。
（2）css 在给某个标签设置样式前，必须使用选择器先选中标签。
（3）css 样式的属性，属性名和属性值的键值对写法为 k:v; 。
（4）给每个选择器添加的样式属性都必须写在一对大括号 {} 之内。
（5）给一个标签添加的所有需要的样式，都要在 {} 内部一一罗列出来
<head>
<style>
div{
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>二、CSS注意事项
a、分号必要性：每条属性后面的分号必须写，如果不写，会导致后面所有的代码加载错误。
b、 css 中所有属性与属性之间对空格、换行、缩进不敏感。
三、CSS注释
语法格式：/*中间部分为注释内容*/
vscode编辑器快捷键：ctrl+/
四、CSS样式格式
1.展开格式：开发过程使用，代码可读性强，便于调错。
<style>
div{
width: 100px;
height: 100px;
background-color: red;
}
</style>2.紧凑格式：上传服务器时使用，减少不必要的空白字符，压缩文件大小，利于传输。
<style>
div{width: 100px;height: 100px;background-color: red;}
</style>五、代码压缩工具：
前端代码压缩的好处？
压缩JS代码的好处:1.减小JS文件体积2.加快其传输速度
压缩css代码的好处：
- 减小了文件的体积
- 减小了网络传输量和带宽占用
- 减小了服务器的处理的压力
- 提高了页面的渲染显示的速度
如下是代码压缩工具的网址：
https://tool.oschina.net/jscompress/
代码压缩工具的使用步骤：
六、CSS代码英文大小写
CSS 中的英文可以使用大写，也可以使用小写。
小写形式：
<style>
div{
width: 100px;
height: 100px;
background-color: red;
}
</style>大写形式：
<style>
DIV{
WIDTH:100PX;
HEIGHT:100PX;
BACKGROUND-COLOR:RED;
}
</style>建议：css 中的选择器和样式属性名、属性值等都使用小写英文，特殊情况除外。
七、CSS代码空格规范
a、选择器与大括号 {} 之间保留一个空格。
b、 冒号后面，属性值前面，保留一个空格。
示例：
<style>
div {
width: 100px;
height: 100px;
background-color: red;
}
</style>
扫一扫
774
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
