博客

前端干货 – 实用 CSS BACKGROUND 属性使用手册

background 属性是CSS中用于设置元素背景的属性,最简单的background属性名,是针对背景若干设定的合并简写,最早的CSS只能使用单一背景图片,而在现在却可以设置多个背景图片。而不用图片的话,最早的background只能使用纯色填充,现在却可以使用各种渐变效果。现在所用的模型来自于CSS Backgrounds and Borders Module Level 3所定义的规范,主要分成了8个子属性。

背景颜色之 background-color

background-color 是最早,最古老,最…常用的属性之一,取值是唯一的,颜色值。

背景图片之 background-image

background-image顾名思义是设置背景“图片”的,这里的图片并非我们通常意义上理解的“图片”,而是由CSS Image Values and Replaced Content Module所规定的一系列内容,用以替代CSS2中所规定的background-image属性与list-style-image属性中的url参数,或者作为伪元素content的值。现在浏览器也没有完全实现这些,可用的包括url()引用图片,和渐变“图片”,然后以逗号分隔所有图片(如果有)。

阅读全文

标准
博客

如何编写可维护的CSS

在参与规模庞大、历时漫长且参与人数众多的项目时,所有开发者遵守如下规则极为重要:

  • 保持 CSS 便于维护
  • 保持代码清晰易懂
  • 保持代码的可拓展性

为了实现这一目标,我们要采用诸多方法。

本文档第一部分将探讨语法、格式以及分析 CSS 结构;第二部分将围绕方法论、思维框架以及编写与规划 CSS 的态度。

CSS 文档分析

无论编写什么文档,我们都应当尽力维持统一的风格,包括统一的注释、统一的语法与统一的命名规范。

总则

尽量将行宽控制在 80 字节以下。渐变(gradient)相关的语法以及注释中的 URL 等可以算作例外,毕竟这部分我们也无能为力。

我倾向于用 4 个空格而非 Tab 缩进,并且将声明拆分成多行。

单一文件与多文件

有人喜欢在一份文件文件中编写所有的内容,而我在迁移至 Sass 之后开始将样式拆分成多个小文件。这都是很好的做法。无论你选择哪种,下文的规则都将适用,而且如果你遵守这些规则的话你也不会遇到什么问题。这两种写法的区别仅仅在于目录以及区块标题。

阅读全文

标准