01 css规范及选择器规则

1. css简介

CSS通常称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。

CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。

2. css样式规则

css样式规则如下图：

在上面的样式规则中:

• 选择器用于指定CSS样式作用的HTML对象，花括号内是对该对象设置的具体样式。
• 属性和属性值以“键值对”的形式出现。
• 属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等。
• 属性和属性值之间用英文“:”连接。
• 多个“键值对”之间用英文“;”进行区分。

3. css书写规范

空格规范

• 选择器 与 { 之间必须包含空格。示例： .selector { }

• 属性名 与之后的 : 之间不允许包含空格， : 与 属性值 之间必须包含空格。示例：font-size: 12px;

选择器规范

• 当一个 rule 包含多个 selector 时，每个选择器声明必须独占一行。

/* good */
.post,
.page,
.comment {
   
    line-height: 1.5;
}


/* bad */
.post, .page, .comment {
   
    line-height: 1.5;
}

• 建议：选择器的嵌套层级应不大于 3 级，位置靠后的限定条件应尽可能精确。

/* good */
#username input {
   }
.comment .avatar {
   }

/* bad */
.page .header .login #username input {
   }
.comment div * {
   }

属性规范

• 属性定义必须另起一行。

/* good */
.selector {
   
    margin: 0;
    padding: 0;
}

/* bad */
.selector {
    margin: 0; padding