2009-6
5
这是一个简易的CSS中文速查表，在下面有提供html版本及一个非常全的CSS手册下载。
| 语法 |
|---|
| 语法 |
| selector {property: value;} |
| 引用外部样式表 |
| <link rel=”stylesheet” type=”text/css” href=”style.css” /> |
| 声明内部样式 |
|
<style type=”text/css”> selector {property: value;} </style> |
| 声明行内样式 |
|
<tag style="property: value"> |
| 一般性语法 | |
|---|---|
| Class | 类选择符 |
| ID | ID选择符 |
| div | 块状元素格式化 |
| span | 行内格式化 |
| color | 字体颜色 |
| cursor | 光标样式 |
| display |
block; inline; list-item; none
|
| overflow |
处理内容在容器中的溢出效果
visible, hidden, scroll, auto
|
| visibility |
visible, hidden
|
| 字体 | |
|---|---|
| font-style |
Italic, normal
|
| font-variant |
normal, small-caps
|
| font-weight |
bold, normal, lighter, bolder, 数字 (100-900)
|
| font-size | 字体大小 |
| font-family | 指定字体 |
| 文本 | |
|---|---|
| letter-spacing | 字符间距 |
| line-height | 两行基线之间的垂直距离 |
| text-align | 水平对齐方式 |
| text-decoration |
blink, line-through, none, overline, underline
|
| text-indent | 第一行缩进 |
| text-transform |
capitalize, lowercase, uppercase
|
| vertical-align | 垂直方向对其 |
| word-spacing | 英文单词的间距 |
| 盒模型 | |
|---|---|
|
height; width; margin-top; margin-right; margin-bottom; margin-left; padding-top; padding-right; padding-bottom; padding-left; |
| 边框 | |
|---|---|
| border-width | 边框的粗细 |
| border-style |
dashed; dotted; double; groove; inset; outset; ridge; solid; none
|
| border-color | 边框颜色 |
| 位置 | |
|---|---|
| clear |
指定了不允许有浮动对象的边
both, left, right, none
|
| float |
指定向某个方向浮动
left, right, none
|
| left |
元素据左边边界的距离
auto, length values (pt, in, cm, px)
|
| top |
元素距上边界的距离
auto, length values (pt, in, cm, px)
|
| position |
static, relative, absolute
|
| z-index |
设置元素的层叠顺序
auto, integer (higher numbers on top)
|
| BACKGROUND | |
|---|---|
| background-color | 背景颜色 |
| background-image | 背景图片 |
| background-repeat |
repeat, no-repeat, repeat-x, repeat-y
|
| background-attachment |
背景图片是否跟随元素滚动
scroll, fixed
|
| background-position |
(x y), top, center, bottom, left, right
|
| 列表 | |
|---|---|
| list-style-type |
列表的预设标记类型
disc; circle; square; decimal; lower-roman; upper-roman; lower-alpha; upper-alpha;
none |
| list-style-position |
预设标记在列表中的位置
inside; outside
|
| list-style-image | 在列表预设标记中使用图片 |
* 以上每个选择器列出的属性顺序就是该它在缩写声明时的顺序
上面速查表的HTML版本：CSS中文速查手册HTML版 [下载次数：270]
附上我认为最好的一个CSS手册（又全又精美）：CSS chm手册 [下载次数：348]
有朋友留言说上面的CSS手册下载下来是空白打不开，我测试了几遍，发现确实有这样的情况，估计有可能是后缀名或文件格式的原因，附上一个压缩版本：
CSS手册压缩包版 [下载次数：404]延伸阅读:
- Web设计字体尺寸转换速查表
- 使用CSS和JQuery轻松切换网页显示样式
- 改善CSS编码的5个在线幻灯片教程
- 一个简单的、循序渐进的CSS幻灯片教程
- Web设计中的中国传统色彩速查表
- Jquery Tools——不可错过的Jquery UI库（四）
- 用过的最好的一款jQuery速查表（PDF）
- 在网页中嵌入任意字体的解决方案
版权声明：
本站内容受著作权法保护。个人网站、blog转载时请遵循 “署名-非商业用途-保持一致” 的创作共用协议；商业网站或媒体未授权不得复制本站内容。
友情提示：
如对本文有任何疑问，或在示例的使用中遇到问题，或有好的建议，欢迎在下面留言共同学习，有问必答。
很不错哦，嘿嘿，顶一个。
呵呵，神飞大哥来捧场了，蓬荜生辉啊。
不知为什么我下载了你说的那本CSS.CHM，但打开后内容页面一个都看不到，也在其它时候遇到过，不知是怎么回事啊。
我测试了几遍，发现确实有时会有这样的情况，估计有可能是下载文件的后缀名或格式的原因。已经在文章最后附加了一个压缩版本的下载。
再次下载，可以打开，这本我看过了，说好看到还成，但不是CSS3的，之前我下过这本，因为有人说这是CSS3的手册。
不好意思，那个3本来指的是 这个手册是V3.0 版本。没料到会产生歧义， 原文中已经把3去掉
打开后显示为空白的童鞋，在下载的chm文件上点右键查看属性，里面有一个解除锁定，解除锁定以后就可以正常显示了。