CSS 属性

  1. 字体
  2. 文本
  3. 背景
  4. 定位
  5. 尺寸
  6. 布局
  7. 补丁
  8. 内容
  9. 滚动条
  10. 表格
  11. 边框
  12. 指针
  13. 其他

字体

属性   意义  示例
font / font 复合设置 font-style font-variant font-weight font-size line-height font-family
color / color 文字颜色 black
font-family /fontFamily  字体 宋体
font-size / fontSize 字号 10px
font-size-adjust / fontSizeAdjust 各字体使用原尺寸 none 使用原尺寸
大小
font-style / fontStyle 斜体 normal 正常、italic 斜体、oblique 倾斜 
font-weight / fontWeight 加粗 lighter, normal, bold, bolder
100/200/.../900
text-decoration / textDecoration   none 普通
blink 闪烁
underline 下划线
line-througn 贯穿线
overline 上划线
font-underline-position / textUnderlinePosition 下划线/上划线 below 文本下面,above 文本上面
text-shadow / textShadow 字体阴影,(CSS2) color length length opacity
颜色 水平延伸 垂直延伸 模糊距离
font-variant / fontVariant 小型大写字母 normal 普通,small-caps 小型大写字母
text-transform / textTransform 大小写设置 none 普通
capitalize 首字母大写
uppercase 全大写 
lowercase 全小写
line-height / lineHeight 行高 1, 2
letter-spacing / letterSpacing 字间距 normal 普通
尺寸
word-spacing / wordSpacing 单词间距 normal 普通
尺寸

文本

属性   意义  示例
text-indent 首行缩进 2em(缩进两字符)
text-overflow 超宽省略号 clip 直接裁剪
ellipsis 省略号
vertical-align / verticalAlign 垂直对齐方式 auto | baseline | sub | super | top | text-top | middle | bottom | text-bottom | length
text-align / textAlign 水平对齐 left, right, center, justify 两端对齐
layout-flow / layoutFlow 行文方向 horizontal 自左向右, vertical-ideographic 自上而下
writing-mode / writingMode 书写方向 lr-tb 水平方向自左向右,自上而下
tb-rl 垂直方向自上向下,自右向左
direction 文本方向 ltr 左 -> 右
rtl 左 <- 右
inherit 继承
unicode-bidi    
word-break / wordBreak 断行设置 normal 在单词之间断行
break-all 任意位置断行(中文)
keep-all 不换行(文字可能被裁剪)
line-break 日文换行规则  
white-space 空格处理方式 normal 忽略
pre 原样
nowrap 不自动换行
word-wrap 容器边界转行 normal 顶开容器边界
break-word 边界内换行
layout-grid 复合属性 layout-grid-mode layout-grid-type layout-grid-line layout-grid-char
layout-grid-char 字符网格尺寸 none
auto
长度
layout-grid-line 行网格尺寸 none
auto
长度
layout-grid-mode 网格选择 both 都启用
line 只启用行网格
char 只启用字符网格
none 不使用网格
layout-grid-type 网格类型 loose 只指定中文对齐网络
strict 日文
fixed 全部对齐网格 

背景

属性   意义  示例
background-attachment / backgroundAttachment 背景图象是否固定 scroll 随文字
fixed 在屏幕固定位置
background-color / backgroundColor 背景色 #RRGGBB, red
background-image / backgroundImage 背景图 url("sky.jpg")
background-position / backgroundPosition 背景图位置,双参数 %0 %0 左上角
水平位置 垂直位置
background-positionX / backgroundPositionX 背景图水平位置 left center right
background-positionY / backgroundPositionY 背景图垂直位置 top center buttom
background-repeat / backgroundRepeat 背景图是否重复显示 no-repeat 仅显示一次
repeat 铺满
repeat-x 水平铺满
repeat-y 垂直铺满
layer-background-color 背景颜色 transparent 透明
颜色
layer-background-image 背景图象 none 无背景图
url(url) 背景图象

定位

属性   意义  示例
position 定位方式 static 无特殊定位
absolute 设置绝对位置,拖出文档流
fixed 未支持
relative 对象不可层叠,偏移文档流
z-index 层叠顺序 auto
数值,数大者居上
top
right
bottom
left
  auto 无特殊定位
尺寸

尺寸

属性 意义 示例
height 高度 auto 默认值
尺寸
max-height 最大高度  
min-height 最小高度  
width 宽度  
max-width 最大宽度  
min-width 最小宽度  

布局

属性 意义 示例
clear 浮动对象设置 none 左右都可以有
left 左边不允许
right 右边不允许
both 左右都不允许
float 对象飘浮设置 none 默认值。对象不飘浮
left 文本流向对象的右边
right 文本流向对象的左边
clip 对象可视区域/裁剪 auto 无裁剪
rect(上 右 下 左) 指定裁剪坐标值,用 auto 即不裁剪,
注:必需 position:absolute
overflow 对象超限设置 visible 不裁剪,不添加滚动条
auto 裁剪或添加滚动条
hidden 不显示超出部分
scroll 总是显示滚动条
overflow-x 对象水平超限 同上
overflow-y 对象垂直超限 同上
display 显示设置 block 作为块对象,对象后添加新行
none 不显示对象
inline 内联对象,从对象是删除行
inline-block 内联对象,块对象呈现
visibility 显示设置 inherit 继承设置
visible 对象可视
hidden 对象隐藏

补丁/轮廓

属性   意义  示例
margin

margin-left
margin-right
margin-top
margin-bottom

外补丁 auto 自动
尺寸
padding 内补丁
padding-top / paddingTop
padding-right / paddingRight
padding-bottom / paddingBottom
padding-left / paddingLeft
各方向内补丁  
outline-color 轮廓颜色 颜色
invert 背景色的反色
outline-style 轮廓类型 none

dotted 点线
dashed 虚线
solid 实线
double 双线
groove 3D凹槽
ridge 3D凸槽
inset 3D凹边
outset 3D凸边

outline-width 轮廓宽度 medium 默认宽度
thin 小一些
thick 大一些
尺寸

内容

需要 CSS 2 支持。
属性 意义 示例
include-source 插入文档替代对象内容 url(url)
quotes 设定嵌套标记,单双引号 none
quotes:"<" ">" "'" "'"
content    
counter-increment    
counter-reset    

滚动条属性

IE5.5 及以上专有。

属性   意义  示例
overflow 滚动条 visible 显示
auto 自动
scroll 总是显示
hidden 不显示
scrollbar-3dlight-color / scrollbar3dLightColor 亮边框色  
scrollbar-highlight-color / scrollbarHighlightColor 3D界面亮边色  
scrollbar-darkshadow-color / scrollbarDarkShadowColor 暗边框色  
scrollbar-shadow-color / scrollbarShadowColor 3D界面暗边色  
scrollbar-arrow-color / scrollbarArrowColor 方向箭头色  
scrollbar-face-color / scrollbarFaceColor 3D表面色  
scrollbar-base-color / scrollbarBaseColor 基准色,其他颜色默认为自动  
scrollbar-track-color / scrollbarTrackColor 拖动区域色  

表格

属性   意义  示例
border-collapse / borderCollapse 单元格边框独立 separate 独立
collapse 合并
border-spacing / borderCollapse 单元格间距  
caption-side / borderCollapse 表格 caption 方向 top
right
bottom
left
empty-cells / emptyCells 空格边框 show 显示
hide 隐藏
table-layout /  表格自动算法 auto 自动宽度
fixed 固定宽度
speak-header / speakHeader 发声设置 once
always

边框属性

属性   意义  示例
border / border 宽度、样式、颜色合一 1px solid red
border-width / borderWidth 宽度 1px
border-style / borderStyle 样式 none 无边框

hidden 隐藏边框

dotted 点线

dashed 虚线

solid 实线

double 双线

groove 凹槽

ridge 凸槽

inset 凹边

outset 凸边

border-color / borderColor 颜色 #RRGGBB, red
border-方向 / borderTop

border-方向-width / borderTopWidth

border-方向-style / borderTopStyle

border-方向-color / borderTopColor

left

right

top

bottom

 

指针属性 cursor

  意义  示例/备注
auto 自动  
all-scroll 四箭头,中圆点 IE6
col-resize 左右箭头 IE6
crosshair 十字  
default 普通箭头  
hand 手形  
move 四箭头十字  
help 箭头带问号  
no-drop 手形加禁止 IE6
not-allowed 禁止 IE6
pointer 同 hand IE6
progress 沙漏箭头 IE6
row-resize 上下箭头 IE6
text 文本光标 I  
vertical-text 垂直文本 IE6
wait 沙漏  
*-resize * = w, s, n, e, ne, sw, se, nw w-resize
url(url) 自定义光标,后缀 .cur / .ani IE6

其他属性

属性   意义 
zoom 显示比例 normal, 1.0, 100%
className 类名  
ime-mode 输入法 auto 无影响
active 本地语言输入法
inactive 非本地语言输入法
disabled 禁用输入法