CSS语法规范与代码风格

  • A+
所属分类:Web前端
摘要

CSS规则又两个主要的部分构成:选择器+一条或多条声明。采取小写。当选择器里是类名时,且类名由多个单词组成,则各个单词之间用“_”分隔。


CSS语法规范与代码风格

1. 语法规范

CSS规则又两个主要的部分构成:选择器+一条或多条声明。

CSS语法规范与代码风格

  • 选择器:用于指定CSS样式的HTML标签,花括号内的是设置的具体样式
  • 属性与属性值以键值对的形式出现
  • 属性与属性值之间用“:"分开
  • 键值对之间用“;”分开

2. 代码风格

2.1 展开格式

h5 {     color: red;     font-size: 16px; } 

2.2 样式大小写

采取小写。

2.3 空格规范

  • 属性值前面,冒号后面,保留一个空格
  • 选择器和花括号中间保留一个空格

2.4 命名规范

当选择器里是类名时,且类名由多个单词组成,则各个单词之间用“_”分隔。

style_red {     color: red; } 

2.5 书写规范

当使用并集选择器时,各个元素竖着写。

div, p, span {     color: red; } 

3. 属性的书写顺序

  1. 布局定位属性
    • display、position、float、clear、visibility、overflow
    • display第一个写
  2. 自身属性
    • width、height、margin、padding、border、background
  3. 文本属性
    • color、font、text-decoration、text-align、vertical-align、white-space、break-word
  4. 其它属性(CSS3)
    • content、cursor、border-radius、box-shadow、text-shadow、background: linear-gradient...