css样式详解

1.字体 字体类型--- 字体大小--- font-size: 10px;(px是单位,可以有px(像素)、pt(点数)、im(英寸)、cm(厘米)、mm(毫米)、pc(12pt字)、em(字体高)、ex(字母x的字高)、%(百分比)) 字体样式--- font-style: normal; (normal(正常)、italic(斜体)、oblique(偏斜体)) 字体粗细--- font-weight: normal; (normal(正常)、bold(粗体)、bolder(特粗)、lighter(细体)、100(数字形式)) 字体变体--- font-variant: normal; (normal(正常)、small-caps(小型大写字母)) 字体行高--- line-height: normal; (normal(正常)、100px(数字形式)) 字体大小写--- text-transform: capitalize; (capitalize(首字母大写)、uppercase(大写)、lowercase(小写)、 none(无)) 字体修饰--- text-decoration: underline; (underline(下划线)、overline(上划线)、line-through(删除线)、blink(闪烁)、none(无)) 字体颜色--- color: #0000FF; LINE-HEIGHT:200% 就可以垂直居中了 2.背景 背景颜色--- background-color: #008080; 背景图像--- background-image: url(file:///C|/Documents and Settings/csq/桌面/save.gif); 背景是否重复--- background-repeat: no-repeat; (no-repeat(不重复)、repeat(重复)、repeat-x(横向重复)、repeat-y(纵向重复)) 附件--- background-attachment: fixed;(fixed(固定)、scroll(滚动)) 背景水平位置--- background-position: left(left(左对齐)、center(居中对齐)、right(右对齐)、100px(数字)) 背景垂直位置--- background-position: top(top(顶部)、center(居中)、bottom(底部)、100px(数字)) 备注:background-position: left top -- 背景位置可以合写 3.区块 单词间距--- word-spacing: normal(normal(正常)、100px(数字)) 字母间距--- letter-spacing: normal(normal(正常)、100px(数字)) 垂直对齐--- vertical-align: baseline(baseline(基线)、sub(下标)、super(上标)、top(顶部)、text-top(文本顶部)、middle(中线)、bottom(底部)、 text-bottom(文本底部)、10%(按比例对齐)、10(按数字对齐)) 文本对齐--- text-align: left(left(左)、right(右)、center(居中)、justify(两端对齐)) 字母缩进--- text-indent: 1; (10px(缩进大小)) 空格--- white-space: normal;(normal(正常)、pre(不保留)、nowrap(不换行)) 显示--- display: none; (none(不显示)、inline(内嵌)、block(块)、list-item(列表项)、run-in(追加部分)、compact(紧凑)、marker(标记)、 table(表格)、inline-table(内嵌表格)、table-row-group(表格行组)、table-header-group(表格标题组)、 table-footer-group(表格脚注组)、table-row(表格行)、table-column-group(表格列组)、table-column(表格列)、 table-cell(表格单元格)、table-caption(表格标题)) 4.方框 宽--- width: 150px;(100px(数字)、auto(自动)) 高--- height: 150; (100px(数字)、auto(自动)) 浮动--- float: left; (left(左对齐)、right(右对齐)、none(无)) 清除--- clear: left; (left(左对齐)、right(右对齐)、none(无)) 上下左右填充--- padding-top: 10px; padding-bottom: 20px; padding-left: 30px; padding-right: 40px; 上下左右边界--- margin-top: 10px; margin-bottom: 20px; margin-left: 30px; margin-right: 40px; 5.边框 上下左右边框样式--- border-top-style: dotted; border-bottom-style: dashed; border-left-style: solid; border-right-style: double; 属性:(dotted(点划线)、dashed(虚线)、solid(实线)、double(双线)、groove(糟状)、ridge(脊状)、inset(凹陷)、outset(凸出)) 上下左右边框宽度--- border-top-width: thin; border-bottom-width: medium; border-left-width: thick; border-right-width: 10pt; 属性:(thin(细)、medium(中)、thick(粗)、10pt(数字)) 上下左右边框颜色--- border-top-color: #008080; border-bottom-color: #0000A0; border-left-color: #800040; border-right-color: #8000FF; 边框显示样式: border-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset 参数值解释: none : 无边框。与任何指定的border-width值无关 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的值画菱形边框 inset : 根据border-color的值画3D凹边 outset : 根据border-color的值画3D凸边 6.列表 类型--- list-style-type: disc; (disc(原点)、circle(圆圈)、square(方块)、decimal(数字)、lower-roman(小写罗马数字)、 upper-roman(大写罗马数字))、 lower-alpha(小写字母)、 upper-alpha(大写字母)、none(无) 项目符号图像--- list-style-image: url(file:///C|/Documents and Settings/csq/桌面/add.gif); 位置--- list-style-position: inside;(inside(内)、outside(外)) 7.定位 类型 position : absolute(绝对); fixed(固定); relative(相对); static (静态);