一、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>