nel {
opacity: 0.8;
}
4.3 url()
[强制] url()
函数中的路径不加引号。
示例:
body {
background: url(bg.png);
}
[建议] url()
函数中的绝对路径可省去协议名。
示例:
body {
background: url(//baidu.com/img/bg.png) no-repeat 0 0;
}
4.4 长度
[强制] 长度为 0
时须省略单位。 (也只有长度单位可省)
示例:
/* good */
body {
padding: 0 5px;
}
/* bad */
body {
padding: 0px 5px;
}
4.5 颜色
[强制] RGB颜色值必须使用十六进制记号形式 #rrggbb
。不允许使用 rgb()
。
解释:
带有alpha的颜色信息可以使用 rgba()
。使用 rgba()
时每个逗号后必须保留一个空格。
示例:
/* good */
.success {
box-shadow: 0 0 2px rgba(0, 128, 0, .3);
border-color: #008000;
}
/* bad */
.success {
box-shadow: 0 0 2px rgba(0,128,0,.3);
border-color: rgb(0, 128, 0);
}
[强制] 颜色值可以缩写时,必须使用缩写形式。
示例:
/* good */
.success {
background-color: #aca;
}
/* bad */
.success {
background-color: #aaccaa;
}
[强制] 颜色值不允许使用命名色值。
示例:
/* good */
.success {
color: #90ee90;
}
/* bad */
.success {
color: lightgreen;
[建议] 颜色值中的英文字符采用小写。如不用小写也需要保证同一项目内保持大小写一致。
示例:
/* good */
.success {
background-color: #aca;
color: #90ee90;
}
/* good */
.success {
background-color: #ACA;
color: #90EE90;
}
/* bad */
.success {
background-color: #ACA;
color: #90ee90;
}
4.6 2D 位置
[强制] 必须同时给出水平和垂直方向的位置。
解释:
2D 位置初始值为 0% 0%
,但在只有一个方向的值时,另一个方向的值会被解析为 center。为避免理解上的困扰,应同时给出两个方向的值。background-position属性值的定义
示例:
/* good */
body {
background-position: center top; /* 50% 0% */
}
/* bad */
body {
background-position: top; /* 50% 0% */
}
5 文本编排
5.1 字体族
[强制] font-family
属性中的字体族名称应使用字体的英文 Family Name
,其中如有空格,须放置在引号中。
解释:
所谓英文 Family Name,为字体文件的一个元数据,常见名称如下:
示例:
h1 {
font-family: "Microsoft YaHei";
}
[强制] font-family
按「西文字体在前、中文字体在后」、「效果佳 (质量高/更能满足需求) 的字体在前、效果一般的字体在后」的顺序编写,最后必须指定一个通用字体族( serif
/ sans-serif
)。
解释:
更详细说明可参考本文。
示例:
/* Display according to platform */
.article {
font-family: Arial, sans-serif;
}
/* Specific for most platforms */
h1 {
font-family: "Helvetica Neue", Arial, "Hiragino Sans GB", "WenQuanYi Micro Hei", "Microsoft YaHei", sans-serif;
}
[强制] font-family
不区分大小写,但在同一个项目中,同样的 Family Name
大小写必须统一。
示例:
/* good */
body {
font-family: Arial, sans-serif;
}
h1 {
font-family: Arial, "Microsoft YaHei", sans-serif;
}
/* bad */
body {
font-family: arial, sans-serif;
}
h1 {
font-family: Arial, "Microsoft YaHei", sans-serif;
}
5.2 字号
[强制] 需要在 Windows 平台显示的中文内容,其字号应不小于 12px
。
解释:
由于 Windows 的字体渲染机制,小于 12px
的文字显示效果极差、难以辨认。
5.3 字体风格
[建议] 需要在 Windows 平台显示的中文内容,不要使用除 normal
外的 font-style
。其他平台也应慎用。
解释:
由于中文字体没有 italic
风格的实现,所有浏览器下都会 fallback 到 obilique
实现 (自动拟合为斜体),小字号下 (特别是 Windows 下会在小字号下使用点阵字体的情况下) 显示效果差,造成阅读困难。
5.4 字重
[强制] font-weight
属性必须使用数值方式描述。
解释:
CSS 的字重分 100 – 900 共九档,但目前受字体本身质量和浏览器的限制,实际上支持 400
和 700
两档,分别等价于关键词 normal
和 bold
。
浏览器本身使用一系列启发式规则来进行匹配,在 <700
时一般匹配字体的 Regular 字重,>=700
时匹配 Bold 字重。
但已有浏览器开始支持 =600
时匹配 Semibold 字重 (见此表),故使用数值描述增加了灵活性,也更简短。
示例:
/* good */
h1 {
font-weight: 700;
}
/* bad */
h1 {
font-weight: bold;
}