根据Mozilla Firefox推荐的css书写顺序:
显示属性:display,list-style,position,float,clear 自身属性:width,height,margin,padding,border,background 文本属性:color,font,text-decoration,text-align,vertical-align,white-space...
书写顺序实例:
display: ;
visibility: ;
float: ;
clear: ;
position: ;
top: ;
right: ;
bottom: ;
left: ;
z-index: ;
width: ;
min-width: ;
max-width: ;
height: ;
min-height: ;
max-height: ;
overflow: ;
margin: ;
margin-top: ;
margin-right: ;
margin-bottom: ;
margin-left: ;
padding: ;
padding-top: ;
padding-right: ;
padding-bottom: ;
padding-left: ;
border: ;
border-top: ;
border-right: ;
border-bottom: ;
border-left: ;
border-width: ;
border-top-width: ;
border-right-width: ;
border-bottom-width: ;
border-left-width: ;
border-style: ;
border-top-style: ;
border-right-style: ;
border-bottom-style: ;
border-left-style: ;
border-color: ;
border-top-color: ;
border-right-color: ;
border-bottom-color: ;
border-left-color: ;
outline: ;
list-style: ;
table-layout: ;
caption-side: ;
border-collapse: ;
border-spacing: ;
empty-cells: ;
font: ;
font-family: ;
font-size: ;
line-height: ;
font-weight: ;
text-align: ;
text-indent: ;
text-transform: ;
text-decoration: ;
letter-spacing: ;
word-spacing: ;
white-space: ;
vertical-align: ;
color: ;
background: ;
background-color: ;
background-image: ;
background-repeat: ;
background-position: ;
opacity: ;
cursor: ;
content: ;
quotes: ;
View Code
display 元素呈现方式
常用值: block 呈块元素显示 inline 呈行内元素显示 none 隐藏,不占位 inline-block 行内块元素 table 呈表格显示 不常用值: list-item,run-in,inline-table,inherit,table-row,table-cell,table-column,table-caption,table-row-group,table-header-group,table-footer-group,table-column-group 已废弃:compact,marker
visibility 元素是否可见
visible 元素可见,占位 hidden 元素不可见 collapse 在表格中使用(删除行或列,不影响布局,不占位置),其他元素时同hidden inherit 继承
float 浮动
none 不浮动
left 左float
right 右float
inherit 继承
clear 清除浮动
none 允许float
left 不允许左float
right 不允许右float
both 不允许左右float
inherit 继承
position 定位
static 没有定位
absolute{top,right,bottom,left,z-index} 绝对定位,相对于第一个定位父元素
relative{...} 相对定位,相对于正常位置定位
fixed{...} 固定定位,相对于浏览器窗口定位
inherit 继承
兼容fixed:
el { position: fixed; bottom: 0; right: 0; _position: absolute; _top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));}
ie6闪动:
*html { background-image:url(about:blank); background-attachment:fixed; }
width 宽
auto 默认 length px,em等单位 % 基于父元素 inherit 继承
min-width 最小宽度
length 最小宽度值 % 基于父元素 inherit 继承 兼容:el { min-width: 100px; width: auto!important; width: 100px;}
max-width 最大宽度
none 默认
length 最大宽度值
% 基于父元素
inherit 继承
兼容:el { max-width: 100px; _width: expression(this.offsetWidth > 100? '100px': true); }
height 高
auto 默认 length 单位值 % 基于父元素 inherit 继承
min-height 最小高度
auto 默认 length 单位值 % 基于父元素 inherit 继承 兼容:el { min-height: 100px; height: auto!important; height: 100px;}
max-height 最大高度
none 默认 length 单位值 % 基于父元素 inherit 继承
兼容:el { max-width: 100px; _width: expression(this.offsetWidth > 100? '100px': true); } |
overflow 内容溢出
visible 默认
hidden 裁剪内容,多余不可见
auto 裁剪内容,超出显示滚动条
scroll 裁剪内容,显示滚动条
inherit 继承
margin 外边距
auto 浏览器自动计算 length 单位值 % 基于父元素 inherit 继承 简写:el { margin: top right bottom left; }
padding 内边距
auto 浏览器自动计算 length 单位值 % 基于父元素 inherit 继承 简写: el { padding: top right bottom left; }
border 边框
所有边框属性: border-top: ; border-right: ; border-bottom: ; border-left: ; 简写: el { border: 1px #000 solid; } 边框宽: border-top-width: ; border-right-width: ; border-bottom-width: ; border-left-width: ; 简写: el { border-width: 1px; } 边框样式: border-top-style: ; border-right-style: ; border-bottom-style: ; border-left-style: ; 简写: el { border-style: solid; } 边框颜色: border-top-color: ; border-right-color: ; border-bottom-color: ; border-left-color: ; 简写: el { border-color: #000; }
outline 轮廓
outline-color 轮廓颜色 outline-style 轮廓样式 outline-width 轮廓宽度 简写: el { outline: 1px solid red; }
list-style 列表
list-style-type 标记 list-style-position 位置 list-style-image 图标 简写: el { list-style: type position image }
table-layout 定义表格算法
automatic 默认,由单元格内容决定 fixed 由表格宽或列宽决定 inherit 继承
caption-side 定义表格标题位置
top 默认,标题在表格之上
bottom 标题在表格之下
inherit 继承
border-collapse 是否合并边框
separate 默认,边框分开,不忽略border-spacing 和 empty-cells collapse 合并边框,忽略border-spacing 和 empty-cells inherit 继承
border-spacing 边框间距
length 边框间距(x, y),一个参数时默认y = x
inherit 继承
empty-cells 空单元格
show 默认,在空单元格周围绘制边框
hide 不在空单元格周围绘制边框
inherit 继承
font 字体
font-family 字体
font-size 字体大小
font-style 字体样式
font-weight 字体粗细
font-variant 是否以小型大写字母字体显示
font-stretch 字体收缩或拉伸
font-size-adjust 设置aspect值
简写 el { font: style variant weight size/line-height family; }
line-height 行高
normal 默认
number 数字,字体尺寸*数字
length 固定行高
% 基于当前尺寸
inherit 继承
text 文本
text-align 水平对齐方式
left 居左
right 居右
center 居中
justify 两边对齐
inherit 继承
text-decoration 文本装饰
none 默认
underline 下划线
overline 上划线
line-through 删除线
blink 闪烁
inherit 继承
text-indent 缩进
length 缩进值
% 基于父元素
inherit 继承
text-transform 文本大小写
none 默认
capitalize 以大写字母开头
uppercase 大写
lowercase 小写
inherit 继承
text-shadow 文本阴影
x 水平位置,必选,可以是负值
y 垂直位置,必选,可以是负值
blur 模糊半径
color 颜色
语法: el { text-shadow: 2px 2px 3px #000; }
letter-spacing 字间距
normal 默认,无额外字间距
length 字间距值
inherit 继承
word-spacing 单词间距
normal 默认,无额外单词间距
length 单词距值
inherit 继承
white-space 元素空白
normal 默认,无
pre 保留空白
nowrap 不换行
pre-wrap 保留空白,换行
pre-line 合并空白,保留换行
inherit 继承
vertical-align 竖向居中
baseline 默认,父基准线
top 上对齐
middle 中对齐
bottom 下对齐
length 值
% 基于line-height,可以负值
inherit 继承
sub 下标
super 上标
text-top 元素顶端与父元素顶端对齐
text-bottom 元素顶端与父元素底端对齐
color 颜色
颜色名称 red
颜色进制 #ccc
颜色rgb rgb(255, 0, 0)
inherit 继承
background 背景
background-color 背景颜色
background-position 背景图位置
background-size 背景图尺寸
background-repeat 背景重复方式
background-origin 背景图定位区域
background-clip 背景图绘制区域
background-image 背景图像
background-attachment 背景图是否固定
inherit 继承
opacity 透明度
value 透明度值0~1(IE:1~100)
inherit 继承
兼容:el { opacity: .5; filter: Alpha(opacity: 50); }
cursor 光标形状
default 默认光标 auto 浏览器默认 pointer 手型 text 指示文本 help 问号或气球 url 自定义光标 crosshair 十字线 move 可移动 wait 表或沙漏 e-resize 右|东 ne-resize 上/右 | 北/东 nw-resize 上/左 | 北/西 n-resize 上 | 北 se-resize 下/右 | 南/东 sw-resize 下/左 | 南/西 s-resize 下 | 北/西 w-resize 左 | 西
content 插入内容
none 无
normal 无
content 插入内容
inherit 继承
备注:content与伪元素:after 和:before配合使用
例如:在某元素内容之后添加内容 el:after { content: "我是被添加的内容"; }
quotes 设置引号嵌套
none string string string string 例如:' " ' ' " ' " ' " " ' ",代表双引号嵌套单引号 inherit 继承