作者：金步国



版权声明

本文作者是一位自由软件爱好者，所以本文虽然不是软件，但是本着 GPL 的精神发布。任何人都可以自由使用、转载、复制和再分发，但必须保留作者署名，亦不得对声明中的任何条款作任何形式的修改，也不得附加任何其它条件。您可以自由链接、下载、传播此文档，但前提是必须保证全文完整转载，包括完整的版权信息和作译者声明。

其他作品

本文作者十分愿意与他人共享劳动成果，如果你对我的其他翻译作品或者技术文章有兴趣，可以在如下位置查看现有作品的列表：

BUG报告，切磋与探讨

由于作者水平有限，因此不能保证作品内容准确无误，请在阅读中自行鉴别。如果你发现了作品中的错误，请您来信指出，哪怕是错别字也好，任何提高作品质量的建议我都将虚心接纳。如果你愿意就作品中的相关内容与我进行进一步切磋与探讨，也欢迎你与我联系。联系方式：MSN: csfrank122@hotmail.com

导入样式表的方法(示范)


<style type="text/css" media="all" title="应用于所有媒体的样式">
    @import url(/style/css/global.css); /*全局样式*/
    @import url(/style/css/skyblue.css); /*个性化样式*/
    body { background: url(img/body_bg.gif); } /*文档级样式*/
</style>

  • 目前受浏览器支持的设备类型仅有：all(所有)、print(打印机)、screen(计算机显示器)
  • 必须在外部样式文件开头使用形如 @charset "gb2312"; 的At规则来指定其自身使用的字符集。
  • @import


术语


超出 CSS 格式器范围的元素。 HTML中的 img, input, textarea, select, object 都是替换元素。 所有的替换元素且仅有替换元素才具有固有尺寸。 块级元素 display属性等于 block或 list-item的元素都是块级元素。 内联元素 display属性等于 inline的元素都是内联元素。 已定位元素 position属性不等于 static的元素。


选择符


E|*][# id](. class)*[: link][: visited][: hover][: active] 伪元素 S[: first-letter][: first-line] 嵌套 S1 S2 ... O 群组 A1, A2, ... An

  • 符号含义：E(元素)、S(简单选择符)、O(简单选择符|伪元素)、A(简单选择符|伪元素|嵌套)
  • 竖线"|"表示或关系，方括号"[]"表示可选，圆括号"()"用于正则分组。
  • 所有标识符(元素名、类、ID)，都不能以 数字、连字符、下划线 开头，但是可以使用汉字。
  • 伪类仅可用于超连接。伪元素仅可用于块元素。嵌套顺序中可以夹杂其他元素。
  • 允许用于伪元素的属性仅有：字体属性、文本属性、前景背景属性。此外首字还可用：盒模型属性与float属性
  • 层叠权重：!important


属性值的数据类型


mm 或 pt 为单位(1 pt=0.353 mm)。 px em 为单位(等于当前 font-size计算值)，继承时使用计算值。 百分比 nn% URL url(URL) 颜色 #rrggbb 或 #rgb 字体列表 用逗号分割的字体名称优先级列表(次序：英文→中文→系列)，字体名称含有空格时必须用引号界定。 Georgia   "Palatino Linotype"   "Times New Roman" Arial   Tahoma   "Trebuchet MS"   Verdana "Courier New"   "Lucida Console" "Comic Sans MS" 宋体   仿宋_GB2312   黑体   楷体_GB2312 边框样式 none(默认) | dotted | dashed | solid | double | groove | inset | outset 内置列表项图标 disc(实心圆)| circle(空心圆)| square(方块)| decimal(数字)| lower-roman(小写罗马数字)| upper-roman(大写罗马数字)| lower-alpha(小写字母)| upper-alpha(大写字母)| none(无) 指针样式 auto| crosshair| default| pointer| move| wait| help| progress| not-allowed

[注意]对于速记属性，未指定的部分视为指定了默认值。


字体属性


字体速记

font : font-stylefont-weightfont-sizefont-family

继承

适用：所有元素

字体倾斜

font-style : normal|italic

继承

适用：所有元素

字体粗细

font-weight : normal|bold

继承

适用：所有元素

字体大小

font-size : 长度

继承

适用：所有元素

字体族

font-family : 字体列表

继承

适用：所有元素


文本属性


文本划线

text-decoration : none|(underline‖overline‖line-through)

非继承

适用：所有元素

字符间距

letter-spacing : normal|长度

继承

适用：所有元素

大小写转换

text-transform : none|capitalize|uppercase|lowercase

继承

适用：所有元素

首行缩进量

text-indent : 0|长度

继承

适用：块元素/表格单元格/内联块

行高

line-height : normal|缩放系数|长度|百分比

继承

适用：所有元素

缩放系数按指定值继承

百分比：相对于自身的font-size属性值

行高=文本高度+上下空白；normal大约相当于1.1～1.2的缩放系数。

水平对齐

text-align : left|right|center

继承

适用：块元素/表格单元格/内联块

垂直对齐

vertical-align : baseline|sub|super|top|text-top|middle|bottom|text-bottom|长度|百分比

非继承

适用：内联元素/表格单元格

百分比：相对于自身的line-height属性值

长度和百分比表示当前元素的基线相对于父元素基线的偏移量(上为正下为负，没有基线则使用底线)。


前景和背景属性


前景：内容+边框。背景：背景图+背景色。背景面积：内容+补白+边框。透明：补白/边框空隙/边界。

前景色

color : 颜色

继承

适用：所有元素

hr 元素默认不执行继承。由于IE的错误，表格与图片的边框也不执行继承。

背景速记

background : (transparent|颜色) (none|URL)? (0% 0%|(长度|百分比){2})? (repeat|repeat-x|repeat-y|no-repeat)? (scroll|fixed)?

非继承

适用：所有元素

速记含义：背景色 背景图 背景图位置 背景图平铺 背景图滚动

百分比：相对于盒子自身内容+补白区域的尺寸，将背景图与背景区域各自相同偏移量的点对齐。


列表属性


列表项样式

list-style : 内置列表项图标 (none|URL) (outside|inside)

继承

适用：列表项元素

速记含义：内置列表项图标 自定义列表项图标 图标位置


表格属性


表格布局算法

table-layout : auto|fixed

非继承

适用：table 元素

单元格边框模型

border-collapse : separate|collapse

继承

适用：表格元素


指针属性


指针样式

cursor : 指针样式

继承

适用：所有元素


盒模型属性


  • 由内到外的层次：内容 → 补白 → 边框 → 边界
  • 由上到下的层次：边框 → 内容+补白 → 背景图 → 背景色 → 边界

内容宽度|高度

width|height : auto|长度|百分比

非继承

适用：块元素/替换元素

百分比：相对于包含框的width|height属性值

内联盒子的高度与height属性无关

补白宽度

padding : 0|(长度|百分比){1,4}

非继承

适用：display不等于table-*的所有元素

百分比：相对于包含框的width属性值

边界宽度

margin : 0|(长度|百分比|auto){1,4}

非继承

适用：display不等于table-*的所有元素

百分比：相对于包含框的width属性值

上下边界宽度对非替换内联元素无效。将左右边界设为auto是将块元素居中的正确做法。

边框速记

border|border-top|border-bottom|border-left|border-right : 边框样式 长度 (颜色|transparent)?

非继承

适用：所有元素

速记含义：边框样式 边框宽度 边框颜色

当边框样式样式为none时，边框宽度自动强制为零。

边界重叠

边界重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容、补白、边框)重合在一起而形成一个单一边界。

常规流中两个或多个块级盒子的垂直相邻边界会重合。结果的边界宽度是相邻边界宽度中最大的值。如果出现负边界，则在最大的正边界中减去绝对值最大的负边界。如果没有正边界，则从零中减去绝对值最大的负边界。注意：相邻的盒子可能并非是由父子关系或同胞关系的元素生成。

但是边界的重叠也有例外情况：

  • 水平边界永远不会重叠。
  • 浮动盒子、绝对定位盒子、内联块盒子、根盒子的边界永不重叠。
  • overflow属性不等于visible的元素与它的非浮动子元素之间边界不发生重叠。


显示属性


显示类型

display : inline|block|list-item|table-header-group|table-footer-group|none

非继承

适用：所有元素

可见性

visibility : visible|hidden

继承

适用：所有元素

溢出模式

overflow : visible|hidden|scroll|auto

非继承

适用：非替换块元素/表格单元格/内联块


定位与布局属性


定位方式

position : static|relative|absolute

非继承

适用：所有元素

边界偏移量

top|bottom|left|right : 长度|百分比|auto

非继承

适用：已定位元素

百分比：垂直|水平相对于包含框的height|width属性值

绝对定位偏移量相对于上一级已定位盒子的内容边沿，相对定位偏移量相对于原始的位置。

浮动

float : none|left|right

非继承

适用：所有元素

浮动的盒子必须有一个显式的宽度(通过width属性指定，或对于替换元素具有固有宽度)，任何浮动盒子都成为一个块盒子。

避让浮动

clear : none|left|right|both

非继承

适用：块元素

Z轴顺序

z-index : auto|整数

非继承

适用：已定位元素

display, position, float

  1. 如果display等于none，则用户端必须忽略position和float。在这种情况下，元素不产生盒子。
  2. 否则，如果position等于absolute，则display与float皆强制为none(list-item保持不变)。盒子的位置由边界偏移量确定。
  3. 否则，如果float不等于none或该元素是根元素，则display强制为block(list-item保持不变)。
  4. 否则，使用指定的display属性。


HTML默认样式


html,body,div,  h1,h2,h3,h4,h5,h6,p,  ol,ul,dl,dt,dd,
frame,frameset,form,fieldset,  blockquote,address,hr,pre { display: block }
button,textarea,input,select { display: inline-block }
li           { display: list-item }
head         { display: none }
table        { display: table }
caption      { display: table-caption }
thead        { display: table-header-group }
tbody        { display: table-row-group }
tfoot        { display: table-footer-group }
tr           { display: table-row }
col          { display: table-column }
colgroup     { display: table-column-group }
td,th        { display: table-cell }

caption     { text-align: center }
th          { font-weight: bolder; text-align: center }

body     { margin: 8px }
blockquote      { margin-left: 40px; margin-right: 40px }
h4,p,blockquote,ul,fieldset,form,ol,dl { margin: 1.12em 0 }
h1       { font-size: 2em;    margin: 0.67em 0 }
h2       { font-size: 1.5em;  margin: 0.75em 0 }
h3       { font-size: 1.17em; margin: 0.83em 0 }
h5       { font-size: 0.83em; margin: 1.5em  0 }
h6       { font-size: 0.75em; margin: 1.67em 0 }

pre  { white-space: pre }

h1,h2,h3,h4,h5,h6,strong  { font-weight: bolder }

cite,em,var,address { font-style: italic }
pre,code,kbd,samp   { font-family: monospace }
sub,sup   { font-size: .83em }
sub   { vertical-align: sub }
sup   { vertical-align: super }
table      { border-spacing: 2px; }
thead,tbody,tfoot           { vertical-align: middle }
td, th          { vertical-align: inherit }
del             { text-decoration: line-through }
ins             { text-decoration: underline }
hr              { border: 1px inset }
ol, ul, dd        { margin-left: 40px }
ol              { list-style-type: decimal }
ol ul, ul ol, ul ul, ol ol    { margin-top: 0; margin-bottom: 0 }
:link, :visited { text-decoration: underline }
br:before { content: "\A" }
:before, :after { white-space: pre-line }
:focus { outline: thin dotted invert }