学步园

写CSS时没法将所有属性都能记得下来,所以从CSS样式表中摘写下了一些常用的属性和样式,备用参考. 

css 属性 

字体 
div {color: #345456; } 文本颜色 
{ font-size: 12px; } 字体尺寸 
{ font-style: normal; } 字体样式 
{ font-weight:bold; } 文本字体的粗细 [值为normal默认值正常的字体 bold为粗体] 
{ text-decoration : underline; } 文本的装饰 
值为none :　 默认值。无装饰 
blink :　 闪烁 
underline :　 下划线 
line-through :　 贯穿线 
overline :　 上划线 
{line-height:6px; } 字体行高 即字体最底端与字体内部顶端之间的距离 
{letter-spacing:6px; } 文字之间的间隔 
{ word-spacing : 10; } 单词之间插入的空隔 

文本 
DIV { text-indent:2cm } 文本缩进 
{ vertical-align : middle; } 垂直对齐方式 
div { text-align : center; } 文本的对齐方式 
取值： 
left :　 默认值。左对齐 
right :　 右对齐 
center :　 居中对齐 
justify :　 两端对齐 
背景 
div { background: red no-repeat scroll 5% 60%; } 背景样式 
{ background-color: #98AB6F } 背景颜色 
{ background-image: url(Q.gif); } 背景图像 

{ background: url("1.gif"); background-position: top right; } 背景图像位置 
值 :　 top[上] center[中间] bottom[下] left[左] right[右] 也可用百分比 

{ background: url("1.gif"); background-repeat: repeat-y; } 背景图像是否及如何铺排 
repeat :　 默认值。背景图像在纵向和横向上平铺 
no-repeat :　 背景图像不平铺 
repeat-x :　 背景图像仅在横向上平铺 
repeat-y :　 背景图像仅在纵向上平铺 

定位 
div { position:relative; top:-3px } 对象的定位方式 
position:relative; 相对定位 
position:absolute; 绝对定位 
div { position:absolute; z-index:3; width:6px; } 对象的层叠顺序 
div { position: absolute; top: 1px; } 定位设置的父对象顶边相关的位置 
div { position: absolute; right: 1px; } 定位设置的父对象右边相关的位置 
div { position: absolute; bottom: 1px; } 定位设置的父对象底边相关的位置 
div { position: absolute; left: 1px; } 定位设置的父对象左边相关的位置 

尺寸 
div { width: 1px; } 设置对象的宽度 
{ max-width: 200px; } 设置对象的最大宽度 
{ min-width: 200px; } 设置对象的最小宽度 
div { height: 1px; } 设置对象的高度 
{ max-height: 200%; } 对象的最大高度 
{ min-height: 200px; } 对象的最小高度 

布局 
div { clear : left } 清理浮动 该属性的值指出了不允许有浮动对象的边 
值 none :　 默认值。允许两边都可以有浮动对象 
left :　 不允许左边有浮动对象 
right :　 不允许右边有浮动对象 
both :　 不允许有浮动对象 

div { float: right } 如何浮动 
取值： 
none :　 默认值。对象不飘浮 
left :　 文本流向对象的右边 
right :　 文本流向对象的左边 

div { overflow: scroll; height: 100px; width: 100px; } 设置当对象的内容超过其指定高度及宽度时如何管理内容 
取值： 
visible :　 默认值。不剪切内容也不添加滚动条。 
auto :　 在必需时对象内容才会被裁切或显示滚动条 
hidden :　 不显示超过对象尺寸的内容 
scroll :　 总是显示滚动条 

DIV { display: block; float: right; } 设置对象是否及如何显示 
取值： 
block : 块对象的默认值。将对象强制作为块对象呈递，为对象之后添加新行 
none : 隐藏对象。与 visibility 属性的hidden值不同，其不为被隐藏的对象保留其物理空间 
inline : 内联对象的默认值。将对象强制作为内联对象呈递，从对象中删除行 
inline-block : 将对象呈递为内联对象，但是对象的内容作为块对象呈递 
list-item : 将块对象指定为列表项目。并可以添加可选项目标志 
table-header-group : 将对象作为表格标题组显示 
table-footer-group : 将对象作为表格脚注组显示 

DIV { visibility: inherit; float: right; } 设置是否显示对象 
取值： 
inherit :　 默认值。继承父对象的可见性 
visible :　 对象可见 
hidden :　 对象隐藏 

外补丁 
body { margin: 10px; } 对象4边都是10像素的外补丁 
如{ margin: 10px 5px 4px 6px; } 则分别是上 右 下 左 的值 
取值： 
auto :　 取计算机值 
可用百分值 
body { margin-top: 10px; } 设置对象顶边的外补丁 
body { margin-right: 10px; } 设置对象右边的外补丁 
body { margin-bottom: 10px; } 设置对象底边的外补丁 
body { margin-left: 10px; } 设置对象左边的外补丁 

边框 
DIV { border: 25px; } 设置对象的边框样式 
{ border-color:#000; } 设置对象边框的颜色 
{ border-style: none; } 设置对象边框的样式 
取值： 
none :　 默认值。无边框。 
hidden :　 隐藏边框。IE不支持 
dotted :　 在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为点线。否则为实线 
dashed :　 在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为虚线。否则为实线 
solid :　 实线边框 
double :　 双线边框。两条单线与其间隔的和等于指定的 border-width 值 
groove :　 根据 border-color 的值画3D凹槽 
ridge :　 根据 border-color 的值画3D凸槽 
inset :　 根据 border-color 的值画3D凹边 
outset :　 根据 border-color 的值画3D凸边 
div { border-style: solid; border-width: 1px; } 设置对象边框的宽度 
div { border-top: 25px solid green; } 上边框的样式 
div { border-bottom: 25px solid green; } 下边框的样式 
div { border-right: 25px solid green; } 右边框的样式 
div { border-left: 25px solid green; } 左边框的样式 
div { border-top-color: red;} 上边框的颜色 

内补丁 
div { padding: 10px; } 设置对象四边的内补丁 
div { padding-top: 10px; } 设置对象上边的内补丁 
div { padding-bottom: 10px; } 设置对象下边的内补丁 
div { padding-right: 10px; } 设置对象右边的内补丁 
div { padding-left: 10px; } 设置对象左边的内补丁 
缩写 { padding: 10% 10% 10% 10%; } 分别是上 右 下 左 的值 

列表 
li { list-style: url("1.gif") inside circle; } 设置列表项目相关样式 

ul { display: list-item; list-style-position: inside; } 设置对象的列表项标记如何根据文本排列 
取值： 
outside :　 默认值。列表项目标记放置在文本以外，且环绕文本不根据标记对齐 
inside :　 列表项目标记放置在文本以内，且环绕文本根据标记对齐 

ul{ list-style-position: outside; list-style-image: url("1.gif"); } 设置对象的列表项标记图像 

ul { display: list-item; list-style-position: inside; } 设置对象的列表项所使用的预设标记 
取值： 
disc : 默认值。实心圆 
circle : 空心圆 
square : 实心方块 
decimal : 阿拉伯数字 
lower-roman : 小写罗马数字 
upper-roman : 大写罗马数字 
lower-alpha : 小写英文字母 
upper-alpha : 大写英文字母 
none : 不使用项目符号 

表格 
table { border-collapse: separate; } 设置表格的行和单元格的边是合并在一起还是按照标准的HTML样式分开 
取值： 
separate :　 默认值。边框独立（标准HTML） 
collapse :　 相邻边被合并 

table { border-collapse: separate; border-spacing: 10px; } 行和单元格的边在横向和纵向上的间距 

table caption { caption-side: top; width: auto; text-align: left; }设置表格table 的caption 对象是在表格的那一边 
取值： 
top :　 默认值。 caption 在表格的上边 
right :　 caption 在表格的右边 
bottom :　 caption 在表格的下边 
left :　 caption 在表格的左边 

css声明 
div { color:red!important } 指定样式规则的应用优先权 

CSS规则 
@import url(print.css); 指定导入的外部样式表 

CSS伪类[链接] 
a:link { font-size: 14pt; text-decoration: underline; color: blue; } 未被访问前的样式 
a:hover { font-size: 14pt; text-decoration: underline; color: blue; } 鼠标悬停时的样式 
a:active { font-size: 14pt; text-decoration: underline; color: blue; } 被用户激活(在鼠标点击与释放之间发生的事件)时的样式 
a:visited { font-size: 14pt; text-decoration: underline; color: blue; } 链接地址已被访问过时的样式 
a:focus { font-size: 14pt; text-decoration: underline; color: blue; } 成为输入焦点(该对象的 onfocus 事件发生)时的样式

容体女性网 http://www.rongti.com 为您摘录