(3)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代码的好处:

  1. 减小了文件的体积
  2. 减小了网络传输量和带宽占用
  3. 减小了服务器的处理的压力
  4. 提高了页面的渲染显示的速度

如下是代码压缩工具的网址:

https://tool.oschina.net/jscompress/

代码压缩工具的使用步骤:

(3)css语法

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

(3)css语法

上一篇:CSS外边距合并


下一篇:两栏布局三种方式实现