第二章 CSS格式指导标准
2.1 CSS格式指导标准
1简介和约定(MUST、MUST NOT、SHOULD、SHOULD NOT、MAY)
2实施
所有CSS都应该通过外部资源文件加载，这样能控制缓存且能使HTML文件更小
禁止使用@import导入外部样式表，因为文件无法缓存，且会阻塞渲染
所有引入的外部样式文件必须存在(禁止使用占位符)
禁止使用CSS表达式
禁止使用CSS行为文件(HTC文件)
3基本规则
使用UTF-8编码
禁止使用内联CSS
禁止使用!important 会影响高级用户使用自定义的用户代理样式，也会影响其他开发者覆盖该CSS声明
不应使用通用选择器(*)，使用该选择器无法达到预期效果，还会破坏继承样式，对性能有影响
禁止在多个选择器组合中使用通用选择器(*)
不应在零值后面使用单位，此时不需要单位
可能的情况下应该多使用简写属性
除字体以外的其他元素都应该使用像素尺寸
4注释
文件注释应该遵循CSSDOC
注释包括：文件标题，简短描述，详细描述(可选)，关联项目，作者，版权信息，颜色信息(可选)
需要经过计算才能得到的值应该做一个内联注释
需要在不同文件同步更新的属性应该适当注释
5格式
一个规则中使用多个选择器，每个选择器声明应该占一行
浏览器厂商特定属性应该放置在其他所有属性之后
6命名
尽可能语义化，不要太过抽象
7文字排版
如果想以大写方式显示文件，必须使用text-transform属性
文字大小应该使用em单位
8颜色
使用十六进制颜色时，必须使用小写，这样能让gzip压缩的效果更好(大小写分析:www.websiteoptimization.com/speed/tweak/lowercase)
使用了背景图片的元素必须有一个备用的背景颜色
禁止对文字使用与背景色一样的文字颜色以达到隐藏的效果
2.2 CSS编写格式
2.2.1 单行与多行
2.2.2 缩进
2.2.3 制表符和空格
2.2.4 冒号和分号
2.3 注释和CSS元数据【编辑器Espresso】
2.3.1 现成的标准：CSSDOC
2.3.2 文件信息
2.3.3 内容目录
/*
1.可重用的class
2.结构
3.导航
4.链接
5.排版
...
*/
2.3.4 区块
/*Color-------------------------------------*/
2.3.5 配色方案
:link #9cff00 链接
headings #999999 标题
...
:focus #000000 焦点链接
2.3.6 文件夹路径
2.3.7 尺寸单位【文章：应用于web的排版样式元素】
流布局(fluid layout)
2.3.8 文档补丁和错误修正
Hack与Bug fix 记录
2.3.9 使用模版
文档信息部分，包括文件依赖关系、覆盖关系、命名空间约定等
内容目录，包含最常见的区块划分
配色方案，演示如何定义色值
一些区块，如Reusable、Structure、Typography等
2.4 class和id命名
2.4.1 语义化
errorMessage、sideContent
2.4.2 可接受的字符
下划线、连字符、字母和数字
2.4.3 约定俗成的惯例
.header .footer
2.4.4 大小写
驼峰式与连字符
2.5 命名空间
2.5.1 可重用的class
irpb-main irpb-hero
2.5.2 CSS命名空间模块
@namespace
1简介和约定(MUST、MUST NOT、SHOULD、SHOULD NOT、MAY)
2实施
所有CSS都应该通过外部资源文件加载，这样能控制缓存且能使HTML文件更小
禁止使用@import导入外部样式表，因为文件无法缓存，且会阻塞渲染
所有引入的外部样式文件必须存在(禁止使用占位符)
禁止使用CSS表达式
禁止使用CSS行为文件(HTC文件)
3基本规则
使用UTF-8编码
禁止使用内联CSS
禁止使用!important 会影响高级用户使用自定义的用户代理样式，也会影响其他开发者覆盖该CSS声明
不应使用通用选择器(*)，使用该选择器无法达到预期效果，还会破坏继承样式，对性能有影响
禁止在多个选择器组合中使用通用选择器(*)
不应在零值后面使用单位，此时不需要单位
可能的情况下应该多使用简写属性
除字体以外的其他元素都应该使用像素尺寸
4注释
文件注释应该遵循CSSDOC
注释包括：文件标题，简短描述，详细描述(可选)，关联项目，作者，版权信息，颜色信息(可选)
需要经过计算才能得到的值应该做一个内联注释
需要在不同文件同步更新的属性应该适当注释
5格式
一个规则中使用多个选择器，每个选择器声明应该占一行
浏览器厂商特定属性应该放置在其他所有属性之后
6命名
尽可能语义化，不要太过抽象
7文字排版
如果想以大写方式显示文件，必须使用text-transform属性
文字大小应该使用em单位
8颜色
使用十六进制颜色时，必须使用小写，这样能让gzip压缩的效果更好(大小写分析:www.websiteoptimization.com/speed/tweak/lowercase)
使用了背景图片的元素必须有一个备用的背景颜色
禁止对文字使用与背景色一样的文字颜色以达到隐藏的效果
2.2 CSS编写格式
2.2.1 单行与多行
2.2.2 缩进
2.2.3 制表符和空格
2.2.4 冒号和分号
2.3 注释和CSS元数据【编辑器Espresso】
2.3.1 现成的标准：CSSDOC
2.3.2 文件信息
2.3.3 内容目录
/*
1.可重用的class
2.结构
3.导航
4.链接
5.排版
...
*/
2.3.4 区块
/*Color-------------------------------------*/
2.3.5 配色方案
:link #9cff00 链接
headings #999999 标题
...
:focus #000000 焦点链接
2.3.6 文件夹路径
2.3.7 尺寸单位【文章：应用于web的排版样式元素】
流布局(fluid layout)
2.3.8 文档补丁和错误修正
Hack与Bug fix 记录
2.3.9 使用模版
文档信息部分，包括文件依赖关系、覆盖关系、命名空间约定等
内容目录，包含最常见的区块划分
配色方案，演示如何定义色值
一些区块，如Reusable、Structure、Typography等
2.4 class和id命名
2.4.1 语义化
errorMessage、sideContent
2.4.2 可接受的字符
下划线、连字符、字母和数字
2.4.3 约定俗成的惯例
.header .footer
2.4.4 大小写
驼峰式与连字符
2.5 命名空间
2.5.1 可重用的class
irpb-main irpb-hero
2.5.2 CSS命名空间模块
@namespace
第三章、基本原理
3.1 层叠：来源、重要性和继承
3.1.1 来源和重要性
用户代理：用户访问我们的代码所用的设备，通常情况下是Web浏览器
用户样式表：基于用户浏览器的特殊设置应用于页面的样式表，如设置大的字体或指定特殊字体
作者样式表：由CSS作者创建，是通过服务器返回的实际页面提供
3.1.2 继承
一种将属性值从父元素传递到子元素的方式
一个属性的最终值有四步计算结果：指定确定值(指定值)，分解一个继承值(计算值)，转换成绝对值(采用值)，根据本地环境的限制进行转化(实际值)
3.1.3 继承和通用选择器
通用选择器(*)匹配文档树中的任意单一元素(因为他不会匹配两个或两个以上的元素的组合或者零个元素)
3.2 特殊性
依赖特殊性而不是选择器的顺序，将使得样式表更易于编辑、维护，便于将来进行重构，同时也健壮
3.2.1 特殊性计算
a：如果该声明是在style属性中定义的，则为1，否则为0
b：等于id选择器的数目
c：等于属性选择器、class和伪class的数量
d：等于元素名和伪元素的数目
3.2.2 !important声明
如果在缩写中使用了!important声明，就等于用其重新逐个声明了每个属性
3.2.3 命名空间和特殊性
通过一个特殊的class、id或class/id前缀，将其分离出来
3.3 编码
三个地方可能出现问题
1、使用伪选择器添加内容，例如:after或:before
2、引用路径中包含特殊字符的图像或文件
3、包含特殊字符的注释
3.4 本地化
文字占多大位置可能是无法预知的
有些语言的文字方向是从右到左(RTL)
使用HTTP头字段accept-language通常可以检测到用户设备使用的语言
3.5 浏览器特定CSS
3.5.1 补丁或滤镜
1.盒模型补丁
2.下划线补丁：IE6以下版本
3.星号补丁：IE7以下版本
4.星号html补丁：IE4--IE6
5.子选择器补丁：IE6及以下版本不理解子选择器(>)
6.反斜杠补丁：IE for Mac
3.5.2 CSS表达式
缺点1：不仅是页面渲染和改变大小时，而且在页面滚动，甚至用户在页面上移动鼠标时，他们都参与运算
缺点2：依赖于JS工作
3.5.3 厂商特定扩展
-moz- Gecko内核
-webkit- Webkit内核
-apple- Safari
-ms- IE
-o- Opera
-khtml- Konqueror
3.5.4 媒体查询
@media screen and (max-width:320px)
@inport url(320.css) screen and (max-width:320px)
3.5.5 条件注释
<!--[if IE 8]>...<![endif]-->
<!--[if lt IE 8]>...<![endif]-->
<!--[if gt IE 8]>...<![endif]-->
<!--[if lte IE 8]>...<![endif]-->
<!--[if gte IE 8]>...<![endif]-->
3.6 何时以及如何使用补丁
3.6.1 “安全”补丁
在旧浏览器上使用CSS补丁是安全的做法
3.6.2 真实世界
/*
TODO:丢弃IE6支持时记得删除这行
*/_float:left;
3.7 服务器端用户代理检测
引荐网址【referrer】(该网站的用户是从哪个网址转到这里来的)、用户设备使用的语言、可接受的字符集
user-agent代表用户设备和环境信息的各项内容
3.8 一些浏览器渲染差异的例子
3.8.1 怪异模式
1.margin:auto 让元素在父元素内左右居中，而这在怪异模式下无效
2.表格的字体属性继承 一些早期的浏览器不会继承字体属性(font-size、font-style、font-variant和font-weight)
3.overflow 设置为visible 标准模式下容器尺寸不变，只是让内容溢出，怪异模式下容器将拉伸
4.class名称不区分大小写
5.颜色值 怪异模式下不允许带#号的颜色值
3.8.2 IE盒模型
IE5的问题：一个盒子的内边距和边框是从指定宽度和高度中减去的
3.8.3 hasLayout
决定元素如何描绘和约束自己的内容，与其他元素如何发生关系和互动，如何对应用程序事件/用户事件做出反应和进行传递
html body img table tr td th hr
input button select textarea fieldset legend
marquee frameset frame iframe embed object applet
绝对定位元素
浮动元素 内联块元素 滤镜
以下组合将触发hasLayout值为真
position: absolute
float: left/right
diaplay: inline-block
width: auto以外的任何值
zoom: normal以外的任何值
writing-mode: tb-rl
overflow: hidden/scroll/auto (IE7)
overflow-x/y: hidden/scroll/auto (IE7)
3.1.1 来源和重要性
用户代理：用户访问我们的代码所用的设备，通常情况下是Web浏览器
用户样式表：基于用户浏览器的特殊设置应用于页面的样式表，如设置大的字体或指定特殊字体
作者样式表：由CSS作者创建，是通过服务器返回的实际页面提供
3.1.2 继承
一种将属性值从父元素传递到子元素的方式
一个属性的最终值有四步计算结果：指定确定值(指定值)，分解一个继承值(计算值)，转换成绝对值(采用值)，根据本地环境的限制进行转化(实际值)
3.1.3 继承和通用选择器
通用选择器(*)匹配文档树中的任意单一元素(因为他不会匹配两个或两个以上的元素的组合或者零个元素)
3.2 特殊性
依赖特殊性而不是选择器的顺序，将使得样式表更易于编辑、维护，便于将来进行重构，同时也健壮
3.2.1 特殊性计算
a：如果该声明是在style属性中定义的，则为1，否则为0
b：等于id选择器的数目
c：等于属性选择器、class和伪class的数量
d：等于元素名和伪元素的数目
3.2.2 !important声明
如果在缩写中使用了!important声明，就等于用其重新逐个声明了每个属性
3.2.3 命名空间和特殊性
通过一个特殊的class、id或class/id前缀，将其分离出来
3.3 编码
三个地方可能出现问题
1、使用伪选择器添加内容，例如:after或:before
2、引用路径中包含特殊字符的图像或文件
3、包含特殊字符的注释
3.4 本地化
文字占多大位置可能是无法预知的
有些语言的文字方向是从右到左(RTL)
使用HTTP头字段accept-language通常可以检测到用户设备使用的语言
3.5 浏览器特定CSS
3.5.1 补丁或滤镜
1.盒模型补丁
2.下划线补丁：IE6以下版本
3.星号补丁：IE7以下版本
4.星号html补丁：IE4--IE6
5.子选择器补丁：IE6及以下版本不理解子选择器(>)
6.反斜杠补丁：IE for Mac
3.5.2 CSS表达式
缺点1：不仅是页面渲染和改变大小时，而且在页面滚动，甚至用户在页面上移动鼠标时，他们都参与运算
缺点2：依赖于JS工作
3.5.3 厂商特定扩展
-moz- Gecko内核
-webkit- Webkit内核
-apple- Safari
-ms- IE
-o- Opera
-khtml- Konqueror
3.5.4 媒体查询
@media screen and (max-width:320px)
@inport url(320.css) screen and (max-width:320px)
3.5.5 条件注释
<!--[if IE 8]>...<![endif]-->
<!--[if lt IE 8]>...<![endif]-->
<!--[if gt IE 8]>...<![endif]-->
<!--[if lte IE 8]>...<![endif]-->
<!--[if gte IE 8]>...<![endif]-->
3.6 何时以及如何使用补丁
3.6.1 “安全”补丁
在旧浏览器上使用CSS补丁是安全的做法
3.6.2 真实世界
/*
TODO:丢弃IE6支持时记得删除这行
*/_float:left;
3.7 服务器端用户代理检测
引荐网址【referrer】(该网站的用户是从哪个网址转到这里来的)、用户设备使用的语言、可接受的字符集
user-agent代表用户设备和环境信息的各项内容
3.8 一些浏览器渲染差异的例子
3.8.1 怪异模式
1.margin:auto 让元素在父元素内左右居中，而这在怪异模式下无效
2.表格的字体属性继承 一些早期的浏览器不会继承字体属性(font-size、font-style、font-variant和font-weight)
3.overflow 设置为visible 标准模式下容器尺寸不变，只是让内容溢出，怪异模式下容器将拉伸
4.class名称不区分大小写
5.颜色值 怪异模式下不允许带#号的颜色值
3.8.2 IE盒模型
IE5的问题：一个盒子的内边距和边框是从指定宽度和高度中减去的
3.8.3 hasLayout
决定元素如何描绘和约束自己的内容，与其他元素如何发生关系和互动，如何对应用程序事件/用户事件做出反应和进行传递
html body img table tr td th hr
input button select textarea fieldset legend
marquee frameset frame iframe embed object applet
绝对定位元素
浮动元素 内联块元素 滤镜
以下组合将触发hasLayout值为真
position: absolute
float: left/right
diaplay: inline-block
width: auto以外的任何值
zoom: normal以外的任何值
writing-mode: tb-rl
overflow: hidden/scroll/auto (IE7)
overflow-x/y: hidden/scroll/auto (IE7)
英文版书籍下载：
posted on
浙公网安备 33010602011771号