CSS 大全

 

字体属性：(font)
大小 font-size: x-large;(特大) xx-small;(极小) 一般中文用不到，只要用数值就可以，单位：PX、PD
样式 font-style: oblique;(偏斜体) italic;(斜体) normal;(正常)
行高 line-height: normal;(正常) 单位：PX、PD、EM
粗细 font-weight: bold;(粗体) lighter;(细体) normal;(正常)
变体 font-variant: small-caps;(小型大写字母) normal;(正常)
大小写 text-transform: capitalize;(首字母大写) uppercase;(大写) lowercase;(小写) none;(无)
修饰 text-decoration: underline;(下划线) overline;(上划线) line-through;(删除线) blink;(闪烁)
常用字体： (font-family)
"Courier New", Courier, monospace, "Times New Roman", Times, serif, Arial, Helvetica, sans-serif, Verdana
背景属性： (background)
色彩background-color: #FFFFFF;
图片background-image: url();
重复background-repeat: no-repeat;
滚动background-attachment: fixed;(固定) scroll;(滚动)
位置background-position: left(水平) top(垂直);
简写方法 background:#000 url(..) repeat fixed left top;
区块属性： (Block)
字间距letter-spacing: normal; 数值
对刘text-align: justify;(两端对齐) left;(左对齐) right;(右对齐) center;(居中)
缩进text-indent: 数值px;
垂直对齐vertical-align: baseline;(基线) sub;(下标) super;(下标) top; text-top; middle; bottom; text-bottom;
词间距word-spacing: normal; 数值
空格white-space: pre;(保留) nowrap;(不换行)
显示display:block;(块) inline;(内嵌) list-item;(列表项) run-in;(追加部分) compact;(紧凑) marker;(标记) table; inline-table; table-raw-group; table-header-group; table-footer-group; table-raw; table-column-group; table-column; table-cell; table-caption;(表格标题)
方框属性： (Box)
width:; height:; float:; clear:both; margin:; padding:;     顺序：上右下左
边框属性： (Border)
border-style: dotted;(点线) dashed;(虚线) solid; double;(双线) groove;(槽线) ridge;(脊状) inset;(凹陷) outset;
border-width:; 边框宽度
border-color:#;
简写方法border：width style color;
列表属性： (List-style)
类型list-style-type:    disc;(圆点) circle;(圆圈) square;(方块) decimal;(数字) lower-roman;(小罗码数字) upper-roman; lower-alpha; upper-alpha;
位置list-style-position: outside;(外) inside;
图像list-style-image: url(..);
定位属性： (Position)
Position: absolute; relative; static;
visibility: inherit; visible; hidden;
overflow: visible; hidden; scroll; auto;
clip: rect(12px,auto,12px,auto) (裁切)

css属性代码大全
一 CSS文字属性：
color : #999999; /*文字颜色*/
font-family : 宋体,sans-serif; /*文字字体*/
font-size : 9pt; /*文字大小*/
font-style:itelic; /*文字斜体*/
font-variant:small-caps; /*小字体*/
letter-spacing : 1pt; /*字间距离*/
line-height : 200%; /*设置行高*/
font-weight:bold; /*文字粗体*/
vertical-align:sub; /*下标字*/
vertical-align:super; /*上标字*/
text-decoration:line-through; /*加删除线*/
text-decoration: overline; /*加顶线*/
text-decoration:underline; /*加下划线*/
text-decoration:none; /*删除链接下划线*/
text-transform : capitalize; /*首字大写*/
text-transform : uppercase; /*英文大写*/
text-transform : lowercase; /*英文小写*/
text-align:right; /*文字右对齐*/ 
text-align:left; /*文字左对齐*/
text-align:center; /*文字居中对齐*/
text-align:justify; /*文字分散对齐*/
vertical-align属性
vertical-align:top; /*垂直向上对齐*/
vertical-align:bottom; /*垂直向下对齐*/
vertical-align:middle; /*垂直居中对齐*/
vertical-align:text-top; /*文字垂直向上对齐*/
vertical-align:text-bottom; /*文字垂直向下对齐*/
二、CSS边框空白
padding-top:10px; /*上边框留空白*/
padding-right:10px; /*右边框留空白*/
padding-bottom:10px; /*下边框留空白*/
padding-left:10px; /*左边框留空白
三、CSS符号属性：
list-style-type:none; /*不编号*/
list-style-type:decimal; /*阿拉伯数字*/
list-style-type:lower-roman; /*小写罗马数字*/
list-style-type:upper-roman; /*大写罗马数字*/
list-style-type:lower-alpha; /*小写英文字母*/
list-style-type:upper-alpha; /*大写英文字母*/
list-style-type:disc; /*实心圆形符号*/
list-style-type:circle; /*空心圆形符号*/
list-style-type:square; /*实心方形符号*/
list-style-image:url(/dot.gif); /*图片式符号*/
list-style-position: outside; /*凸排*/
list-style-position:inside; /*缩进*/
四、CSS背景样式：
background-color:#F5E2EC; /*背景颜色*/ 
background:transparent; /*透视背景*/
background-image : url(/image/bg.gif); /*背景图片*/
background-attachment : fixed; /*浮水印固定背景*/
background-repeat : repeat; /*重复排列-网页默认*/
background-repeat : no-repeat; /*不重复排列*/
background-repeat : repeat-x; /*在x轴重复排列*/
background-repeat : repeat-y; /*在y轴重复排列*/
指定背景位置
background-position : 90% 90%; /*背景图片x与y轴的位置*/
background-position : top; /*向上对齐*/
background-position : buttom; /*向下对齐*/
background-position : left; /*向左对齐*/
background-position : right; /*向右对齐*/
background-position : center; /*居中对齐*/
五、CSS连接属性：
a /*所有超链接*/
a:link /*超链接文字格式*/ 
a:visited /*浏览过的链接文字格式*/
a:active /*按下链接的格式*/
a:hover /*鼠标转到链接*/
鼠标光标样式：
链接手指 CURSOR: hand
十字体 cursor:crosshair
箭头朝下 cursor:s-resize
十字箭头 cursor:move
箭头朝右 cursor:move
加一问号 cursor:help
箭头朝左 cursor:w-resize
箭头朝上 cursor:n-resize
箭头朝右上 cursor:ne-resize
箭头朝左上 cursor:nw-resize
文字I型 cursor:text
箭头斜右下 cursor:se-resize
箭头斜左下 cursor:sw-resize
漏斗 cursor:wait
光标图案(IE6)   p {cursor:url("光标文件名.cur"),text;}
六、CSS框线一览表：
border-top : 1px solid #6699cc; /*上框线*/
border-bottom : 1px solid #6699cc; /*下框线*/
border-left : 1px solid #6699cc; /*左框线*/ 
border-right : 1px solid #6699cc; /*右框线*/
以上是建议书写方式,但也可以使用常规的方式 如下:
border-top-color : #369 /*设置上框线top颜色*/
border-top-width :1px /*设置上框线top宽度*/
border-top-style : solid/*设置上框线top样式*/
其他框线样式
solid /*实线框*/
dotted /*虚线框*/
double /*双线框*/
groove /*立体内凸框*/
ridge /*立体浮雕框*/
inset /*凹框*/
outset /*凸框*/
七、CSS表单运用：
文字方块 
按钮 
复选框 
选择钮 
多行文字方块 
下拉式菜单 选项1选项2
八、CSS边界样式：
margin-top:10px; /*上边界*/
margin-right:10px; /*右边界值*/
margin-bottom:10px; /*下边界值*/
margin-left:10px; /*左边界值*/
 
CSS 属性： 字体样式(Font Style)
序号 中文说明 标记语法
1 字体样式 {font:font-style font-variant font-weight font-size font-family} 
2 字体类型 {font-family:"字体1","字体2","字体3",...} 
3 字体大小 {font-size:数值|inherit| medium| large| larger| x-large| xx-large| small| smaller| x-small| xx-small} 
4 字体风格 {font-style:inherit|italic|normal|oblique} 
5 字体粗细   {font-weight:100-900|bold|bolder|lighter|normal;} 
6 字体颜色   {color:数值;}
7 阴影颜色 {text-shadow:16位色值}
8 字体行高   {line-height:数值|inherit|normal;}
9 字 间 距   {letter-spacing:数值|inherit|normal}
10 单词间距 {word-spacing:数值|inherit|normal}
11 字体变形 {font-variant:inherit|normal|small-cps } 
12 英文转换 {text-transform:inherit|none|capitalize|uppercase|lowercase}
13 字体变形 {font-size-adjust:inherit|none} 
14 字体 {font-stretch:condensed|expanded|extra-condensed|extra-expanded|inherit|narrower|normal| semi-condensed|semi-expanded|ultra-condensed|ultra-expanded|wider} 
文本样式(Text Style)
序号 中文说明 标记语法
1 行 间 距 {line-height:数值|inherit|normal;} 
2 文本修饰 {text-decoration:inherit|none|underline|overline|line-through|blink}
3 段首空格   {text-indent:数值|inherit}
4 水平对齐 {text-align:left|right|center|justify} 
5 垂直对齐 {vertical-align:inherit|top|bottom|text-top|text-bottom|baseline|middle|sub|super} 
6 书写方式 {writing-mode:lr-tb|tb-rl} 
背景样式
序号 中文说明 标记语法
1 背景颜色 {background-color:数值}
2 背景图片 {background-image: url(URL)|none}
3 背景重复 {background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}
4 背景固定 {background-attachment:fixed|scroll}
5 背景定位 {background-position:数值|top|bottom|left|right|center}
6 背影样式 {background:背景颜色|背景图象|背景重复|背景附件|背景位置}
框架样式(Box Style) 
序号 中文说明 标记语法
1 边界留白 {margin:margin-top margin-right margin-bottom margin-left}
2 补　　白 {padding:padding-top padding-right padding-bottom padding-left}
3 边框宽度 {border-width:border-top-width border-right-width border-bottom-width border-left-width}　　
宽度值： thin|medium|thick|数值
4 边框颜色 {border-color:数值 数值 数值 数值}　　数值：分别代表top、right、bottom、left颜色值
5 边框风格 {border-style:none|hidden|inherit|dashed|solid|double|inset|outset|ridge|groove}
6 边　　框 {border:border-width border-style color}
   上 边 框 {border-top:border-top-width border-style color}
   右 边 框 {border-right:border-right-width border-style color}
   下 边 框 {border-bottom:border-bottom-width border-style color}
   左 边 框 {border-left:border-left-width border-style color}
7 宽　　度 {width:长度|百分比| auto}
8 高　　度 {height:数值|auto}
9 漂　　浮 {float:left|right|none}
10 清　　除 {clear:none|left|right|both}
分类列表
序号 中文说明 标记语法
1 控制显示 {display:none|block|inline|list-item}
2 控制空白 {white-space:normal|pre|nowarp}
3 符号列表 {list-style-type:disc|circle|square|decimal|lower-roman|upper-roman|lower-alpha|upper-alpha|none}
4 图形列表 {list-style-image:URL}
5 位置列表 {list-style-position:inside|outside}
6 目录列表 {list-style:目录样式类型|目录样式位置|url}
7 鼠标形状 {cursor:hand|crosshair|text|wait|move|help|e-resize|nw-resize|w-resize|s-resize|se-resize|sw-resize}

 

 

 

 

 

 

 

1、字体属性(type)
font-family(使用什么字体)
font-style(字体的样式，是否斜体)：normal/italic/oblique
font-variant(字体大小写)：normal/small-caps
font-weight(字体的粗细)：normal/bold/bolder/lithter
font-size(字体的大小)：absolute-size/relative-size/length/percentage
 
2、颜色和背景属性(backgroud)
color(定义前景色，例如：p{color:red})
background-color(定义背景色)
background-image(定义背景图片)
background-repeat(背景图案重复方式)：repeat-x/repeat-y/no-repeat
background-attachment(设置滚动)：scroll(滚动)/fixe(固定的)
background-position(背景图案的初始位置)：percentage/length/top/left/right/bottom
 
3、文本属性：(block)
定义间距：
word-spacing(单词之间的距离)
letter-spacing(字母之间的距离)
text-decoration(定义文字的装饰)：nore/underline/overline/line-through/blink
vertical-align(元素在垂直方向的位置)：baseline(基线)/sub/super/top/text-top/middle/bottom/text-bottom
text-transform(使文本转换为其它方式)：capitalize(大写)/uppercase(首字母大写)/lowercase(小写)/none
text-align(文字的对齐)：left/right/center/justify
text-indent(文本的首行缩进)length/percentage
line-height(文本的行高):normal/numbet/lenggth/percentage(百分比)
定义超链接：
a：link {color:green;text-decoration:nore}(未访问过的状态)
a：visited {color:ren;text-decoration:underline;16pt}(访问过的状态)
a:hover {color:blue;text-decoration:underline;16pt}(鼠标激活的状态)
 
4、块属性(block)
边距属性：
margin-top(设置顶边距)
margin-right(设置右边距)
margin-bottom(设置底边距)
margin-left(设置左边距)
填充距属性：
padding-top设置顶端真充距)
padding-right设置顶端真充距)
padding-bottom设置顶端真充距)
padding-left设置顶端真充距)
 
5、边框属性(border)
border-top-width(顶端边框宽度)
border-right-width(右端边框宽度)
border-bottom-width(底端边框宽度)
border-left-width(d左边框宽度)
border-width(一次定义边框宽度)
border-color(设置边框颜色)
border-style(设置边框样式)
border-top(一次定义顶端各种属性)
border-right(一次定义右端各种属性)
border-bottom(一次定义底端各种属性)
border-left(一次定义左端各种属性)
图文混排：
width(定义宽度属性)
height(定义高度属性)
float(文字环绕在一个元素的四周)
clear(定义某一边是否有环绕)
 
6、项目符号和编号(list)
display(定义是否显示)
white-space(怎样处理空白部分)：normal/pre/nowrap
list-style-type(在列表前加项目符号)disc(圆点)/circle(圈)/square（方形）
/decimal（阿拉伯数字）/lower-roman(小写罗马数字)/upper-roman(大写罗马数字)/lower-alpha(小写英文字母)/upper-alpha(大写英文字母)/nore
list-style-tyle(在列表前加图案):<url>/none
list-style-position(决定列表项中第二行的起邕位置)
list-style(一次性定义所有属性)
 
7、定位（positioning） 即层属性
Type：设定对象的定位方式。
有三种方式：Absolute（绝对定位）、Relative（相对定位）、Static（无特殊定位）。相对应的CSS属性是”position”。
Visibility：设定对象定位层的最初显示状态。有三种状态：Inherit（继承父层的显示属性）、Visible（对象可视）、Hidden隐藏对象。相对应的CSS属性是”visibility”。
Z-Index：设置对象的层叠顺序。编号较大的层会显示在编号较小的层上边。变量值可以是正值也可以是负值。相对应的CSS属性是”z-index”。
Overflow：设置如果层的内容超出了层的大小时如何处理。有四种处理方式：visible，增加层的大小，从而将层的所有内容显示出来；hidden，保持层的大小不变，将超出层的内容剪裁掉；Scroll，总是显示滚动；Auto，只有在内容超出层的边界时才显示滚动条。相对应的CSS属性是”overflow”。 Placement：设置对象定位层的位置和大小。可以分别设置left（左边定位）、top（顶部定位）、width（宽）、height（高）。相对应的CSS属性分别是”left; top; width; height”。Clip：定义定位层的可视区域。区域外的部分为不可视区，为透明的。可以理解为在定位层上放一个矩形遮罩的效果。相对应的CSS属性是”clip”。
 
8、扩展（Extensions）
Pagebreak：在打印的时候强迫在样式控制的对象前后换页。
Before：设置对象前出现的页分割符。设置为always时，始终在对象之前插入页分割符。相对应的CSS属性是”page-break-before”。
After：设置对象后出现的页分割符。设置为always时，始终在对象之后插入页分割符。相对应的CSS属性是”'>。
注意：以上IE5仅支持always值和空白值（null）。
Cursor：当鼠标滑过样式控制的对象时改变鼠标形状。可以设置为hand（手型）、crosshair（“十”型）、text （“I”型）、wait（等待）、default（默认）、help（帮助）、e-resize（东箭头）、ne-resize（东北箭头）、n-resize（北箭头）、nw-resize（西北箭头）、w-resize（西箭头）、sw-resize（西南箭头）、s-resize（南箭头）、se-resize（东南箭头）和auto（自动）。
 
CSS滤镜属性
 
Filter：在样式中加上滤镜特效。由于此属性内容比较多，我们将到下一章单独对滤镜介绍。
1.Alpha：设置透明度
Alpha(Opacity=?, FinishOpacity=?, Style=?, StartX=?, StartY=?, FinishX=?, FinishY=?)
Opacity：透明度级别，范围是0-100，0代表完全透明，100代表完全不透明。FinishOpacity：设置渐变的透明效果时，用来指定结束时的透明度，范围也是0 到 100。Style：设置渐变透明的样式，值为0代表统一形状、1代表线形、2代表放射状、3代表长方形。StartX和StartY：代表渐变透明效果的开始X和Y坐标。 FinishX和FinishY：代表渐变透明效果结束X和Y 的坐标。
2.BlendTrans：图像之间的淡入和淡出的效果
BlendTrans(Duration=?) Duration：淡入或淡出的时间。注意：这个滤镜必须配合JS建立图片序列，才能做出图片间效果。
3.Blru：建立模糊效果
Blur(Add=?, Direction=?, Strength=?) Add：是否单方向模糊，此参数是一个布尔值，true（非0）或false（0）。 Direction：设置模糊的方向，其中0度代表垂直向上，然后每45度为一个单位。 Strength：代表模糊的象素值。
4.Chroma：把指定的颜色设置为透明
Chroma(Color=?) Color：是指要设置为透明的颜色。
5.DropShadow：建立阴影效果
DropShadow(Color=?, OffX=?, OffY=?, Positive=?) Color：指定阴影的颜色。OffX：指定阴影相对于元素在水平方向偏移量，整数。 OffY：指定阴影相对于元素在垂直方向偏移量，整数。 Positive：是一个布尔值，值为true（非0）时，表示为建立外阴影；为false(0)，表示为建立内阴影。
6.FlipH：将元素水平反转
7.FlipV：将元素垂直反转
8.Glow：建立外发光效效果
Glow(Color=?, Strength=?)
Color：是指定发光的颜色。
Strength：光的强度，可以是1到255之间的任何整数，数字越大，发光的范围就越大。
9.Gray：去掉图像的色彩，显示为黑白图象
10.　　Invert：反转图象的颜色，产生类似底片的效果
11.　　Light：放置光源的效果，可以用来模拟光源在物体上的投影效果 注意：此效果需要用JS设置光的位置和强度。
12.　　Mask：建立透明遮罩
Mask(Color=?) Color：设置底色，让对象遮住底色的部分透明。
13.　　RevealTrans：建立切换效果
RevealTrans(Duration=?, Transition=?)
Duration：是切换时间，以秒为单位。
Transtition：是切换方式，可设置为从0到23。
注意：如果做页面间的切换效果，可以在<head>区加上一行代码：<Meta http-equiv=Page-enter content=revealTrans(Transition=?,Duration=?) >。如果用在页面里的元素必须配合JS使用。
14.　　Shadow：建立另一种阴影效果 Shadow(Color=?, Direction=?) Color：是指阴影的颜色。
Direction：是设置投影的方向，0度代表垂直向上，然后每45度为一个单位。
15.　　Wave：波纹效果
Wave(Add=?, Freq=?, LightStrength=?, Phase=?, Strength=?) Add：表示是否显示原对象，0表示不显示，非0表示要显示原对象。 Freq：设置波动的个数。LightStrength：设置波浪效果的光照强度，从0到100。0表示最弱，100表示最强。 Phase：波浪的起始相角。从0到100的百分数值。（例如：25相当于90度，而50相当于180度。） Strength：设置波浪摇摆的幅度。
16.　　Xray：显现图片的轮廓，X光片效果
注意：在使用CSS滤镜时，必须使用在有区域的元素，比如表格，图片等。而文本，段落这样没有区域的元素不能使用CSS滤镜，对这样的元素我们可以设置元素的Height和Width样式或坐标来实现。"

 

 

 

 

 

 

 

一、文件规范

1、文件均归档至约定的目录中（具体要求以豆瓣的CSS规范为例进行讲解）：

所有的CSS分为两大类：通用类和业务类。通用的CSS文件，放在如下目录中：

?基本样式库 /css/core
?通用UI元素样式库 /css/lib
?JS组件相关样式库 /css/ui
业务类的CSS是指和具体产品相关的文件，放在如下目录中：

?读书 /css/book/
?电影 /css/movie/
?音乐 /css/music/
?社区 /css/sns/
?小站 /css/site/
?同城 /css/location/
?电台 /css/radio/
外联CSS文件适用于全站级和产品级通用的大文件。内联CSS文件适用于在一个或几个页面共用的CSS。另外一对具体的CSS进行文档化的整理。如：

?util-01 reset /css/core/reset.css
?util-02 通用模块容器 /css/core/mod.css
?ui-01. 喜欢按钮 /css/core/fav_btn.css
?ui-02. 视频/相册列表项 /css/core/media_item.css
?ui-03. 评星 /css/core/rating.css
?ui-04. 通用按钮 /css/core/common_button.css
?ui-05. 分页 /css/core/pagination.css
?ui-06. 推荐按钮 /css/core/rec_btn.css
?ui-07. 老版对话框 /css/core/old_dialog.css
?ui-08. 老版Tab /css/core/old_tab.css
?ui-09. 老版成员列表 /css/core/old_userlist.css
?ui-10. 老版信息区 /css/core/notify.css
?ui-11. 社区用户导航 /css/core/profile_nav.css
?ui-12. 当前大社区导航 /css/core/site_nav.css
?ui-13. 加载中 /css/lib/loading.css
2、文件引入可通过外联或内联方式引入

link和style标签都应该放入head中，原则上，不允许在html上直接写样式。避免在CSS中使用@import，嵌套不要超过一层。

?外联方式：<link rel=”stylesheet” href=”…” />（类型声明type=”text/css”可以省略）
?内联方式：<style>…</style> （类型声明type=”text/css”可以省略）
3、文件名、文件编码及文件大小

?文件名必须由小写字母、数字、中划线组成
?文件必须用UTF-8编码，使用UTF-8（非BOM），在HTML中指定UTF-8编码，在CSS中则不需要特别指定因为默认就是UTF-8。
?单个CSS文件避免过大（建议少于300行）
二、注释规范

1、文件顶部注释（推荐使用）

/*
* @description: 中文说明
* @author: name
* @update: name (2013-04-13 18:32)
*/
2、模块注释

模块注释必须单独写在一行

/* module: module1 by 张三 */
…
/* module: module2 by 张三 */
3、单行注释与多行注释

单行注释可以写在单独一行，也可以写在行尾，注释中的每一行长度不超过40个汉字，或者80个英文字符。

/* this is a short comment */
多行注释必须写在单独行内

/*
* this is comment line 1.
* this is comment line 2.
*/
4、特殊注释

用于标注修改、待办等信息

/* TODO: xxxx by name 2013-04-13 18:32 */
/* BUGFIX: xxxx by name 2012-04-13 18:32 */
5、区块注释

对一个代码区块注释（可选），将样式语句分区块并在新行中对其注释。

/* Header */
/* Footer */
/* Gallery */
三、命名规范

使用有意义的或通用的ID和class命名：ID和class的命名应反映该元素的功能或使用通用名称，而不要用抽象的晦涩的命名。反映元素的使用目的是首选；使用通用名称代表该元素不表特定意义，与其同级元素无异，通常是用于辅助命名；使用功能性或通用的名称可以更适用于文档或模版变化的情况。

?/* 不推荐: 无意义 */ #yee-1901 {}
?/* 不推荐: 与样式相关 */ .button-green {}.clear {}
?/* 推荐: 特殊性 */ #gallery {}#login {}.video {}
?/* 推荐: 通用性 */ .aux {}.alt {}
常用命名（多记多查英文单词）：page、wrap、layout、header(head)、footer(foot、ft)、content(cont)、menu、nav、main、submain、sidebar(side)、logo、banner、title(tit)、popo(pop)、icon、note、btn、txt、iblock、window(win)、tips等。

ID和class命名越简短越好，只要足够表达涵义。这样既有助于理解，也能提高代码效率。

?/* 不推荐 */ #navigation {}.atr {}
?/* 推荐 */ #nav {}.author {}
类型选择器避免同时使用标签、ID和class作为定位一个元素选择器；从性能上考虑也应尽量减少选择器的层级。

?/* 不推荐 */ul#example {}div.error {}
?/* 推荐 */#example {}.error {}

命名时需要注意的点：

?规则命名中，一律采用小写加中划线的方式，不允许使用大写字母或 _
?命名避免使用中文拼音，应该采用更简明有语义的英文单词进行组合
?命名注意缩写，但是不能盲目缩写，具体请参见常用的CSS命名规则
?不允许通过1、2、3等序号进行命名
?避免class与id重名
?id用于标识模块或页面的某一个父容器区域，名称必须唯一，不要随意新建id
?class用于标识某一个类型的对象，命名必须言简意赅。
?尽可能提高代码模块的复用，样式尽量用组合的方式
?规则名称中不应该包含颜色（red/blue）、定位（left/right）等与具体显示效果相关的信息。应该用意义命名，而不是样式显示结果命名。
1、常用id的命名：

(1) 页面结构

?容器: container
?页头：header
?内容：content/container
?页面主体：main
?页尾：footer
?导航：nav
?侧栏：sidebar
?栏目：column
?页面外围控制整体布局宽度：wrapper
?左右中：left right center
(2) 导航

?导航：nav
?主导航：mainbav
?子导航：subnav
?顶导航：topnav
?边导航：sidebar
?左导航：leftsidebar
?右导航：rightsidebar
?菜单：menu
?子菜单：submenu
?标题: title
?摘要: summary
(3) 功能

?标志：logo
?广告：banner
?登陆：login
?登录条：loginbar
?注册：regsiter
?搜索：search
?功能区：shop
?标题：title
?加入：joinus
?状态：status
?按钮：btn
?滚动：scroll
?标签页：tab
?文章列表：list
?提示信息：msg
?当前的: current
?小技巧：tips
?图标: icon
?注释：note
?指南：guild
?服务：service
?热点：hot
?新闻：news
?下载：download
?投票：vote
?合作伙伴：partner
?友情链接：link
?版权：copyright
2、常用class的命名：

(1) 颜色:使用颜色的名称或者16进制代码，如

?.red { color: red; }
?.f60 { color: #f60; }
?.ff8600 { color: #ff8600; }
(2) 字体大小,直接使用”font+字体大小”作为名称，如

?.font12px { font-size: 12px; }
?.font9pt {font-size: 9pt; }
(3) 对齐样式,使用对齐目标的英文名称，如

?.left { float:left; }
?.bottom { float:bottom; }
(4) 标题栏样式,使用”类别+功能”的方式命名，如

?.barnews { }
?.barproduct { }
四、书写规范

1、排版规范

(1) 使用4个空格，而不使用tab或者混用空格+tab作为缩进；
(2) 规则可以写成单行，或者多行，但是整个文件内的规则排版必须统一；

单行形式书写风格的排版约束：

?如果是在html中写内联的css，则必须写成单行；
?每一条规则的大括号 { 前后加空格 ；
?每一条规则结束的大括号 } 前加空格；
?属性名冒号之前不加空格，冒号之后加空格；
?每一个属性值后必须添加分号; 并且分号后空格；
?多个selector共用一个样式集，则多个selector必须写成多行形式 ；
多行形式书写风格的排版约束：

?每一条规则的大括号 { 前添加空格；
?多个selector共用一个样式集，则多个selector必须写成多行形式；
?每一条规则结束的大括号 } 必须与规则选择器的第一个字符对齐；
?属性名冒号之前不加空格，冒号之后加空格；
?属性值之后添加分号；
2、属性编写顺序

?显示属性：display/list-style/position/float/clear …
?自身属性（盒模型）：width/height/margin/padding/border
?背景：background
?行高：line-height
?文本属性：color/font/text-decoration/text-align/text-indent/vertical-align/white-space/content…
?其他：cursor/z-index/zoom/overflow
?CSS3属性：transform/transition/animation/box-shadow/border-radius
?如果使用CSS3的属性，如果有必要加入浏览器前缀，则按照 -webkit- / -moz- / -ms- / -o- / std的顺序进行添加，标准属性写在最后。
?链接的样式请严格按照如下顺序添加： a:link -> a:visited -> a:hover -> a:active
3、规则书写规范

?使用单引号，不允许使用双引号;
?每个声明结束都应该带一个分号，不管是不是最后一个声明;
?除16进制颜色和字体设置外，CSS文件中的所有的代码都应该小写;
?除了重置浏览器默认样式外，禁止直接为html tag添加css样式设置;
?每一条规则应该确保选择器唯一，禁止直接为全局.nav/.header/.body等类设置属性;
4、代码性能优化

?合并margin、padding、border的-left/-top/-right/-bottom的设置，尽量使用短名称。
?选择器应该在满足功能的基础上尽量简短，减少选择器嵌套，查询消耗。但是一定要避免覆盖全局样式设置。
?注意选择器的性能，不要使用低性能的选择器。
?禁止在css中使用*选择符。
?除非必须，否则，一般有class或id的，不需要再写上元素对应的tag。
?0后面不需要单位，比如0px可以省略成0，0.8px可以省略成.8px。
?如果是16进制表示颜色，则颜色取值应该大写。
?如果可以，颜色尽量用三位字符表示，例如#AABBCC写成#ABC 。
?如果没有边框时，不要写成border:0，应该写成border:none 。
?尽量避免使用AlphaImageLoader 。
?在保持代码解耦的前提下，尽量合并重复的样式。
?background、font等可以缩写的属性，尽量使用缩写形式 。
5、CSS Hack的使用

请不用动不动就使用浏览器检测和CSS Hacks，先试试别的解决方法吧！考虑到代码高效率和易管理，虽然这两种方法能快速解决浏览器解析差异，但应被视为最后的手段。在长期的项目中，允许使用hack只会带来更多的hack，你越是使用它，你越是会依赖它！

推荐使用下面的：

 

 

6、字体规则

?为了防止文件合并及编码转换时造成问题，建议将样式中文字体名字改成对应的英文名字，如：黑体(SimHei) 宋体(SimSun) 微软雅黑 (Microsoft Yahei，几个单词中间有空格组成的必须加引号)
?字体粗细采用具体数值，粗体bold写为700，正常normal写为400
?font-size必须以px或pt为单位，推荐用px（注：pt为打印版字体大小设置），不允许使用xx-small/x-small/small/medium/large/x-large/xx-large等值
?为了对font-family取值进行统一，更好的支持各个操作系统上各个浏览器的兼容性，font-family不允许在业务代码中随意设置

五、测试规范

1、了解浏览器特效支持

为了页面性能考虑，如果浏览器不支持CSS3相关属性的，则该浏览器的某些特效将不再支持，属性的支持情况如下表所示（Y为支持，N为不支持）：

 

 

2、 设定浏览器支持标准

 

 

?A级－交互和视觉完全符全设计的要求
?B级－视觉上允许有所差异，但不破坏页面的整体效果
?C级－可忽略设计上的细节，但不防碍使用
3、常用样式测试工具

?W3C CSS validator：http://jigsaw.w3.org/css-validator/
?CSS Lint：http://csslint.net/
?CSS Usage：https://addons.mozilla.org/en-us/firefox/addon/css-usage/

六、其他规范

?不要轻易改动全站级CSS和通用CSS库。改动后，要经过全面测试。
?避免使用filter
?避免在CSS中使用expression
?避免过小的背景图片平铺。
?尽量不要在CSS中使用!important
?绝对不要在CSS中使用”*”选择符
?层级(z-index)必须清晰明确，页面弹窗、气泡为最高级（最高级为999），不同弹窗气泡之间可在三位数之间调整；普通区块为10-90内10的倍数；区块展开、弹出为当前父层级上个位增加，禁止层级间盲目攀比。
?背景图片请尽可能使用sprite技术, 减小http请求, 考虑到多人协作开发, sprite按照模块、业务、页面来划分均可。

 

 

 

 

 

一 掌控文字
1 文字的字体设置
font-family
2 文字的字体效果
font-style  属性设置值：normal 正常体 italic 斜体 oblique 歪斜体
3 文字的粗细控制
font-weight  属性设置值：normal 正常粗细 bold 粗体 bolder 加粗体 lighter 比正常粗细还细 100-900 共有九个层次 （100，200……900），数字越大字体越粗
4 文字大小的控制
font-size 属性设置值: xx-small 极小 x-small 较小 small 小 large 标准大小 x-large 大 xx-large 较大 数值 可以使用前面所讲的尺度单位
5 文字的加线效果
text-decoration  属性设置值：none 正常显示 underline 为文字加下划线 line-through 为文字加删除线 overline 加顶线  blink 文字闪烁
 
二 精细排版
1 段落的首行缩进
text-indent  正值为右缩进  负值为凸出
margin-left  控制文本段落向右移动
2 控制字符间距
letter-spacing  加上数值使用
3 控制段落行距
line-height  也是加上数值使用
4 控制段落水平位置
text-align   属性设置值： left 左对齐，浏览器默认的 right 右对齐 center 居中对齐 段落的每一行都居中对齐 justify 整个段落居中
5 控制段落垂直位置
vertical-align  属性设置值：top middle bottom
三 矩形模块化
1 模块边界的设置
margin-top   margin-right  margin-bottom  margin-left    都用数值来设定
可单单用一个margin 表示  方向为顺时针  上 右 下 左
2 模块边框的设置
边框宽度 border-width  属性设置值: thin medium thick 数值
边框颜色 border-color
上下左右边框在中间加上top 等等 如: border-top-width  border-bottom-color ……
边框样式 border-style  属性设置值：none 浏览器默认方式 dotted 小点虚线 dashed 大点虚线 solid 实线 double 双直线 groove 3D 凹线 ridge 3D凸线 inset 3D框入线 outset 3D隆起线
3 模块内边界的设置
padding-top  padding-right  padding-bottom  padding-left 都用数值表示 可合并使用
四 网页背景颜色的设置
1 文字颜色设置  font {color:red}
2 网页背景颜色  body {background-color:red}  文字背景颜色设置 font {background-color:red}
3 文字背景图片设置  font {background-image:url(o2.gif)}    网页背景图片设置 body {backgroud-image:url:(o3.gif)}
五 背景图片的并排设置
background-repeat:repeat-x    属性设置值： repeat 背景图片铺满全页面 repeat-x 背景图片以横向并排 repeat-y 背景图片以纵向并排 no-repeat 背景图片不以并排方式显示

六 图片的固定设置
background-attachment  属性设置值：fixed 设置背景图片固定不动 scroll 设置背景图片跟着移动，这是浏览器默认的
七 图片定位设置
background-position   属性设置值：可以是 x y 的值 ，也可以是百分比 还可以是 ： top left 左上位置  top center 靠上居中位置 top right 右上位置 left center  靠左居中位置 center center  正中位置  right center 靠右举重位置  bottom left 左下位置 bottom center 靠下居中位置   bottom right  右下位置
八 超链接的多样化
1 链接颜色的设置
a:link 尚未链接过的文字  a:visited  已链接过得文字 a:active 当鼠标点击时  a:hover  当鼠标移过时
a:link {color:red}
2 链接字体的变化
 
a:hover {color:green;font-family:楷体；font-size:20}  在a:hover里定义
3 链接的下划线设置
a {text-decoration:none} 

九  华丽的滚动条
body {scrollar-face-color:blue}   属性设置值：scrollar-face-color  控制滚动条以及三角按钮的表面颜色  scrollar-shadow-color 控制滚动条以及三角形按钮边缘的阴影颜色  scrollar-highlight-color  控制滚动条以及三角形按钮边框的颜色  scrollar-3dlight-color  控制滚动条以及三角按钮的3D光影颜色   scrollbar-darkshadow-color  控制滚动条以及三角按钮的3D阴影颜色 scrollar-track-color  控制滚动区域的颜色  scrollar-arrow-color  控制三角按钮中小三角形的颜色
 
background-attachment -- 背景图片随滚动轴的移动方式
background-color -- 背景颜色
background-image -- 背景图像
background-position -- 背景图片的位置
background-repeat -- 背景图片的显示方式
background -- 统一背景
border -- 统一边框所有属性
border-bottom -- 统一下边框
border-bottom-color -- 下边框颜色
border-bottom-style -- 下边框样式
border-bottom-width -- 下边框宽度
border-break -- 内容分开的边框
border-collapse
border-color -- 边框颜色
border-left -- 统一左边框
border-image -- 边框图像
border-left-color -- 左边框颜色
border-left-style -- 左边框样式
border-left-width -- 左边框宽度
border-radius -- 圆角边框
border-right-color -- 右边框颜色
border-right-style -- 右边框样式
border-right-width -- 右边框宽度
border-right -- 统一右边框
border-spacing
border-style -- 边框样式
border-top -- 统一上边框
border-top-color -- 上边框颜色
border-top-style -- 上边框样式
border-top-width -- 上边框宽度
border-width -- 统一边框宽度
bottom -- 下偏移属性
caption-side
clear -- 清除
clip -- 了盒子可显示的区域
color -- 颜色
content -- 字符串
counter-increment
counter-reset
cue-after
cue-before
cue
cursor -- 鼠标样式
direction
display -- 显示方式
elevation
empty-cells
float -- 元素漂浮
font-family -- 字体
font-size -- 字体大小
font-style -- 字体样式
font-variant -- 小型的大写字母字体
font-weight -- 字体粗细
font -- 统一字体所有属性
height -- 盒子高度
left -- 左偏移属性
letter-spacing -- 文本中字母的间距(中文为文字的间距)
line-height -- 一段文字中每行文字的间距
list-style-image -- 列表图像
list-style-position -- 列表位置
list-style-type -- 列表类型
list-style -- 统一列表所有属性
margin-right -- 右边外补白宽度
margin-left -- 左边外补白宽度
margin-top -- 上边外补白宽度
margin-bottom -- 下边外补白宽度
margin -- 统一边外补白
max-height -- 最大高度
max-width -- 最大宽度
min-height -- 最小高度
min-width -- 最小宽度
opacity -- 元素的透明度
orphans
outline-color
outline-style
outline-width
outline
overflow -- 盒子中内容的显示方式
padding-top -- 上边内补白
padding-right -- 右边内补白
padding-bottom -- 下边内补白
padding-left -- 左边内补白
padding -- 统一边内补白
page-break-after
page-break-before
page-break-inside
pause-after
pause-before
pause
pitch-range
pitch
play-during
position -- 元素的定位
quotes
richness
right -- 右偏移属性
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
table-layout
text-align -- 文本对齐方式
text-decoration -- 文本是否有划线以及划线的方式
text-indent -- 文本的首行缩进
text-transform -- 文本的大小写状态,此属性对中文无意义
top -- 上偏移属性
unicode-bidi
vertical-align -- 垂直对齐方式
visibility -- 元素是否可见
voice-family
volume
white-space -- 文本的格式
widows
width -- 盒子宽度
word-spacing -- 以空格间隔文字的间距
z-index -- z轴顺序

CSS 16 进制颜色表示法:
color:#ff0000;
color:#00ff00;
color:#1199ff;
通常使用background-color 定义背景颜色,background-image 定义背景图片,background-repeat定义背景图片的重复方式,background-position 定义背景图片的位置,background-attachment 定义背景图片随滚动轴的移动方式.

 

 

 

 

 

 

 

 

分类：
　　CSS真是伟大，能化一为万。假如你有几段文字，每一段都要这样：将第一行设成黄色，第二行设成红色，第三行设成蓝色，第四行设成绿色……其实这很容易做到。你在CSS中如下为每一行定义一个类。
　　P.first {color:yellow} P.second {color:red} P.third {color:blue} P.fourth {color:green} 依次定义下去。在你的HTML代码中就是这样使用以上的定义类。
这里是第二行，使用的是class=secont
这里是第三行，使用的是class=third
这里是第四行，使用的是class=fourth
 ■ 更灵活的分类：
　　在上面我们定义的类是前面都有一个 P，也就限定了这个类只限于
标记使用。如果我们在定义的时候去掉 P， 但 . 仍然要。比如：.first {color:yellow}，这样定义的类更加灵活，可应用于任何HTML标签，例如:
 ■ 选择符 ID：
　　其实CLASS只是一个类的选择符，另一个选择符 ID 具有同样的功能。不过使用ID选择符的类定义的时候要将 . 换成 # ，使用时要在类别名上加上引号。
在H2标记中使用class=first
H1 #001 {color:red}
#002 {color:blue}
使用：
H1标记使用#001类
H3标记使用#002类
P标记使用#002类
■ 字间距：
　　利用字间距属性word-spacing，可以调整单词间的距离。
h2 {word-spacing:5pt}
 ■ 字母间距：
　　利用字母间距属性letter-spacing，可以调整单词中每个字母间的距离。
h2 {letter-spacing:10pt};
 ■ 行高：
　　与字距不同的是行距line-height，它调整的是行与行间垂直方向的距离，有三种方法设置：
数值：h3 {font-size:12pt; line-height:2};/*此处line-height=2x12pt=24pt */
长度单位：h3 {font-size:12pt; line-height:24pt};
比例：h3 {font-size:12pt; line-height:200%};
　　无论是字距或字母间距或行距都有一个共同的参数：normal，一旦设为normal就是要浏览器使用默认值。
这里是第一行，使用的是class=first
■ FONT-FAMILY属性：
　　每部机器上都装有多种字体，浏览器会使用默认的字体浏览网页，比如简体中文版WINDOWS汉字默认是宋体，英文默认是ARIAL。 使用FONT-FAMILY属性则可以规定浏览器用什么字体解读网页。
 ■ FONT-FAMILY语法实例：
h2 {font-family:times,impact,sans-serif}
说明如下:
　　helvetica是浏览器首先寻找的字体名称，如果有就使用它。在helvetica字体没有找到的情况下，则会寻找impact字体，如果找到就使用它。如果以上两种字体都没有找到，则指示浏览使用sans-serif（通用字体）。在你不能保证你列出的字体浏览者一定会安装时，将一种通用字体加在字体列表中是一种好的做法。因此我们提倡使用最基本的字体制作网页，比如中文用宋体，英文用ARIAL，这样使得你的网页不会因为浏览器没能使用合适的字体解读而变样。
■ 其它相关内容：
通用字体有以下几类，其中cursive和fantasy不被NC支持：
"serif"(比如Times);
"sans-serif"(比如Helvetica);
"cursive"(比如Comic Sans);
"fantasy"(比如Western);
"monospace"(比如Courier)
其他使用事项：
如果一种字体的名称中有空格，如"Times New Roman"，在CSS语句中要用引号包含该字体。
例：Body {font-family:"Times New Roman",serif}
如果该语句已在双引号里，则字体名降级为单引号。
例：

如果该语句包括其它CSS规则，字体说明应放在最后。
例:H2 {color:red;margin:10px;font-family:"Times New Roman",serif}
■ 继承：
　　继承：就是在子元素没有定义样式的情况下，它将采用上一级元素的样式定义。
　　优先级：根据继承来理解优先级也就容易。最近的样式优先级最高。 比如:
　　CSS在声明 I{font-family:impact}；
　　但在HTML语句中又如下定义：

　　■ 更好的方法--关联：
　　我并讲不出抛弃FONT标记的理由，只知道这是潮流。显然CSS提供更好的方法避免你在像上面的例子一样使用FONT标记，那就是： 关联。 可以在HEAD部分的CSS定义中加入如下行： P I {font-family:times} /*P和I之间的空格不能少*/
　　在HTML中：

　　虽然你没有使用FONT FACE，但根据HEAD部分的CSS定义，P标记里的I标记使用的字体一定是TIMES。要提起注意的是那行CSS样式只作用于P标记里的I标记。
■ 大小控制方法：
　　以下是控制文字大小的三种方法：
使用大小单位，pt(点),px(像素),em,及其他单位；
使用关键字(xx-small,x-small,small,medium,large,x-large,xx-large)；
使用比例参数(150%等)。
例如：
p {font-size:12pt};
p {font-size:large};
p {font-size:200%};
 ■ 字体风格：
斜体 p {font-style:italic};
粗体 p {font-weight:bold};
　　在字重的设定方面，还有lighter(更轻)和bolder(更重)，还可以使用数字100,200到900最重。
　　字体风格和字重都有一个共同的参数normal，一旦设为normal也就取消了字重和风格设置。
■ FONT-VARIANT：
　　FONT-VARIANT 可以将正常文字尺寸缩小一半后转为大写：
h2 {font-variant:small-caps}
 ■ TEXT-TRANSFORM：
　　完全控制字母大小写：
全部大写：h2 {text-transform:uppercase};
全部小写：h2 {text-transform:lowercase};
单词第一个字母大写：h2 {text-transform:capitalie};
取消所有设定：h2 {text-transform:none};
 ■ TEXT-DECORATION：
　　哪天你突发奇想，希望链接没有下划线，现在你可以做到：
文字下划线：A:link{text-decoration:underline};
文字上划线：A:link{text-decoration:overline};
文字删除线：A:link{text-decoration:line-through};
文字闪烁：A:link{text-decoration:blink};
不要任何效果：A:link{text-decoration:none}

■ 水平对齐：
　　利用文字对齐属性text-align，可以控制段落的水平对齐：
h2 {text-align:center}
h2 {text-align:left}
h2 {text-align:right}
　　这项属性可作用于

 ■ 垂直对齐：
　　利用垂直对齐属性vwrtical-align，可以控制对象（包括文字或图形）相对于母体的垂直位置：
h2 {vertical-align:top}
h2 {vertical-align:text-top}
h2 {vertical-align:bottom}
h2 {vertical-align:text-bottom}
h2 {vertical-align:baseline}
h2 {vertical-align:middle}
h2 {vertical-align:sub}/*上标*/
h2 {vertical-align:super}/*下标*/
　　这些属性具体对齐效果如何，希望大家自已去试验。
 ■ 首行缩进：
　　首行缩进text-indent，在文档排版中经常用到：
h3 {text-indent:24pt};
■ 容器的概念：
　　根据CSS对网页样式的定义，页面上的所有元素都放在一个容器里，这个容器叫BOX。BOX也就包括：
元素本身；
围绕元素的空格；(padding)
围绕元素空格外的边框；(border)
边框外的边距。(margin)
 ■ 四个边距：
　　margin用于设定上，右，下，左，边距：
body {margin-top:10px;margin-right:20px;margin-bottom:30px;margin-left:40px}
body {margin:10px 20px 30px 40px}/*效果与上面方式相同*/
　　以上参数值同样可以是其他长度单位（如：pt,em等）或比例。
 ■ 顶，底，左，右空格填充：
　　padding用于设置空格填充范围，用法与边距属性相同：
h3 {margin-top:10px;margin-right:20px;margin-bottom:30px;margin-
left:40px};
h3 {margin:10px 20px 30px 40px}
 ■ 边框：
　　border可设定的属性很多，包括颜色和宽度，关键是可以指定每个边的宽度和每个边的颜色 。
边框宽度border-width可以是thin,medium,thick或长度值：
h3 {border-top-width:2px;border-right-width:4px;border-bottom-width:6px;border-left-width:8px};
h3 {border-width:2px 4px 6px 8px}/*与上面相同*/
p {border-top-width:thin;border-right-width:medium;border-bottom-
width:thick;border-left-width:none};
p {border-width:thin medium thick none}/*与上面相同，左边框将不显示*/
边框颜色border-color定义方法与宽度定义相似，颜色值也可以用RGB值（如#ff00ff）：
h3 {border-color:red blue yellow green}/*上:红；右：蓝；下：黄；左：绿*/
h3 {border-color:red blue }/*上，下:红；右，左：蓝；*/
h3 {border-color:#ff00ff }/*所有边框为#ff00ff色*/
边框线的线条式样border-style，有九个关键字来描述：
none /*不画边框，不论边框厚度是多少*/
dotted /*由点组成的虚线*/
dash /*由短线组成的虚线*/
solid /*实线 */
double /*双实线*/
groove /*3D沟状*/
ridge /*3D脊状*/
inset /*3D内嵌*/
outset /*3D外嵌*/
其使用方法与厚度、颜色相似，不再多讲。
一条边框的颜色，厚度，线条式样可以在一条语句中定义。例：
h1 {border-top:5px solid red}
　　这么多的参数，这么多的组合，要想得心应手，不下一番功夫去练习是不可能达到的。 
■ 背景颜色：
　　background-color，用它可以指定整个网页的背景颜色，也可以是某一个单词。在传统的HTML中要将背景颜色应用到一段文字上是一件麻烦事，要将文字放在表格中再设置表格的背景。CSS使之变得非常容易。
　　P.colorback {background-color:#ff0000}
　　颜色可以是颜色名(如red)、十六进制数(如#ff0000)、RGB值(如RGB(255,0,0))。
■ 背景图片：
　　background-image，用它可以指定整个网页的背景图片(将它放在BODY标签内)，也可以是某一个单词。
background-repeat 是否循环背景
p {background-repeat:no-repeat;background-image:url(background.gif)}/*不循环*/
p {background-repeat:repeat;background-image:url(background.gif)}/*循环*/
background-attachment 是否固定背景
body {background-attachment:scroll;background-image:url(background.gif)}/*随文字一起滚动*/
body {background-attachment:fixed;background-image:url(background.gif)}/*固定不动*/
　　P.colorback {background-color:#ff0000}
　　颜色可以是颜色名(如red)、十六进制数(如#ff0000)、RGB值(如RGB(255,0,0))。
 ■ 背景定位：
　　background-position用于设置背景的位置：
p {background-position:top;background-image:url(background.gif)};
　　background-position其参数可以是关键字、长度数、比例值。
关键字;
top /*背景图像与前景对象的顶部对齐*/
bottom /*背景图像与前景对象的底部对齐*/
left /*背景图像与前景对象的左边对齐*/
right /*背景图像与前景对象的右边对齐*/
center /*与前面四个任一个组合，变成水平或垂直居中*/
长度数；
可以是任何一种以前学过的长度单位(pt,px,ems...)，例如：
p{background-position:100px 50px;
background-image:url(background.gif)}表示从左上角起水平100像素，垂直50像素的位置摆放。
比例值；
例如：p{background-position:85% 50%;
background-image:url(background.gif)}
表示从距离段落的右边85%，垂直距离段落顶端50%的位置摆放。

 

 

 

 

 

 

 

 

css属性列表 和 属性值含义
分类： css2007-10-29 10:33 4534人阅读 评论(4) 收藏 举报
css属性列表
属性名称

字体属性（Font）
font-family
font-style
font-variant
font-weight
font-size

颜色和背景属性
Color
Background-color
Background-image
Background-repeat
Background-attachment
Background-position

文本属性
Word-spacing
Letter-spacing
Text-decoration

Vertical-align

Text-transform

Text-align
Text-indent
Line-height

边距属性
Margin-top
Margin-right
Margin-bottom
Margin-left

填充距属性
Padding-top
Padding-right
Padding-bottom
Padding-left

边框属性
Border-top-width
Border-right-width
Border-bottom-width
Border-left-width
Border-width
Border-color
Border-style
Border-top
Border-right
Border-bottom
Border-left
Width
Height
Float
Clear

分级属性
Display
White-space
List-style-type
List-style-image
List-style-position
List-style

鼠标（Cursor）属性 属性含义

使用什么字体
字体是否斜体
是否用小体大写
字体的粗细
字体的大小

 

定义前景色
定义背景色
定义背景图案
重复方式
设置滚动
初始位置

 

单词之间的间距
字母之间的间距
文字的装饰样式

垂直方向的位置

文本转换

对齐方式
首行的缩进方式
文本的行高

 

顶端边距
右侧边距
底端边距
左侧边距

顶端填充距
右侧填充距
底端填充距
左侧填充距

顶端边框宽度
右侧边框宽度
底端边框宽度
左侧边框宽度
一次定义宽度
设置边框颜色
设置边框样式
一次定义顶端
一次定义右侧
一次定义底端
一次定义左侧
定义宽度属性
定义高度属性
文字环绕
哪一边环绕

定义是否显示
怎样处理空白
加项目编号
加图案
第二行起始位置
一次定义列表

自动
定位“十”字
默认指针
手形
移动
箭头朝右方
箭头朝右上方
箭头朝左上方
箭头朝上方
箭头朝右下方
箭头朝左下方
箭头朝下方
箭头朝左方
文本“I”形
等待
帮助 属性值

所有的字体
Normal、italic、oblique
Normal、small-caps
Normal、bold、bolder、lithter等
Absolute-size、relative-size、length、percentage等

颜色
颜色
路径
Repeat-x、repeat-y、no-repeat
Scroll、Fixed
Percentage、length、top、left、
right、bottom等

Normal <length>
同上
None|underline|overline|line-
through|blink
Baseline|sub|super|top|text-top|middle|bottom|text-bottom|
Capitalize|uppercase|
lowercase|none
Left|right|center|justify
<length>|<percentage>
Normal|<number>|<length>|
<percentage>

Length|percentage|auto
同上
同上
同上

Length|percentage
同上
同上
同上

Thin|medium|thick|length
同上
同上
同上
同上
Color
None|dotted|dash|solid等
Border-top-width|color等
同上
同上
同上
Length|percentage|auto
Length|auto
Left|right|none
Left|right|none|both

Block、inline、list-item、none
Normal、pre、nowrap
Disc、circle、square等
<url>|none
Inside、outside
<keyword>|<position> |<url>

Auto
Crosshair
Default
Hand
Move
e-resize
Ne-resize
Nw-resize
n-resize
Se-resize
Sw-resize
s-resize
w-resize
Text
Wait
Help

 
 
CSS属性：
1、媒体（Media）类型

样式单的一个最重要的特点就是它可以作用于多种媒体，比如页面、屏幕、电子合成器等等。特定的属性只能作用于特定的媒体，如"font-size"属性只对可卷动的媒体类型有效（屏幕）。
声明一个媒体属性可以用@import或@media引入：
@import url(loudvoice.css) speech;
@media print {
/* style sheet for print goes here */
}
也可以在文档标记中引入媒体：
<LINK rel="stylesheet" type="text/css" media="print" href="foo.css">
可以看出，@import和@media的区别在于，前者引入外部的样式单用于媒体类型，后者直接引入媒体属性。@import的使用方法是@import加样式单文件的URL地址再加媒体类型，可以多个媒体共用一个样式单，媒体类型之间用"，"分割符分开。@media用法则是把媒体类型放在前面，其他规则和rule-set基本一样。下面列出各种媒体类型：
SCREEN：指计算机屏幕。
PRINT：指用于打印机的不透明介质。
PROJECTION：指用于显示的项目。
BRAILLE：盲文系统，指有触觉效果的印刷品。
AURAL：指语音电子合成器。
TV：指电视类型的媒体。
HANDHELD：指手持式显示设备（小屏幕，单色）
ALL：适合于所有媒体。
2、BOX模型（BOX Model）属性

什么是BOX？CSS把HTML中以<somesign>……</somesign>的部分称为BOX（容器），BOX有三类属性：padding、margin和border。
Margin属性：
Margin属性分为margin-top、margin-right、margin-bottom、margin-left和margin五个属性，分别表示BOX里内容离边框的距离，它的属性值是数值单位，可以是长度、百分比或auto，margin甚至可以设为负值，造成BOX与BOX之间的重叠显示，关于margin的属性详见下表：
属性名称: 'margin-top'、'margin-right'、'margin-bottom'、'margin-left'
属性值: <margin-width>
初始值: 0
适合对象: 所有元素
是否继承: no
百分比备注: 相对于BOX的宽度
例如：
H1 { margin-top: 2em }
H2 { margin-right: 12.3% }
Margin还有一个快捷的书写方法，就是直接用margin属性，例如：
BODY { margin: 1em 2em 3em 2em}
等同于：
BODY {
margin-top:1em;
margin-right:2em;
margin-bottom:3em;
margin-left:2em;
}
margin属性后面可以有四个值，中间用空格隔开（记住不是逗号），顺序是"上右下左"，当然margin后面可以不足四个值，例如：
BODY { margin: 2em } /* 所有的margin都设为2em */
BODY { margin: 1em 2em } /* 上下margin为1em，右左margin为2em */
BODY { margin: 1em 2em 3em } /* 上margin为1em，右左margin为2em，下margin为3em*/
Padding属性：
Padding属性用来描述BOX的边框和内容之间插入多少空间，和margin属性类似，它也分为上右下左和一个快捷方式padding，关于padding的属性详见下表：
属性名称: 'padding-top'、'padding-right'、'padding-bottom'、'padding-left' 、'padding'
属性值: <padding-width>
初始值: 0
适合对象: 所有元素
是否继承: no
百分比备注: 相对于BOX的宽度
例如：
BLOCKQUOTE { padding-top: 0.3em }
padding属性和margin类似此处略去。
Border属性：
平时我们在查看HTML文档时，看到一段文字，并不会把它当作一个BOX，实际上BOX是有边框的，只是平时不显示出来罢了，而border属性就是用来描述BOX边框的。Border属性分为border-width、border-color和border-style，而这些属性下面又有分支。
border-width属性：
border-width属性又分为：border-top-width、border-right-width、border-bottom-width、border-left-width和border-width属性，border-width用长度表示为"thin/medium/thick"或长度单位表示，下面是border-width属性的详细列表：
属性名称: 'border-top-width'、'border-right-width'、'border-bottom-width'、'border-left-width'、'border-width'
属性值: <border-width>
初始值: medium
适合对象: 所有元素
是否继承: no
百分比备注: 被禁止
border-width为快捷方式，顺序为上右下左，值之间用空格隔开。

border-color属性：
border-color属性用来显示BOX边框颜色，分为border-top-color、border-right-color、border-bottom-color、border-right-color和border-color属性，属性值为颜色，可以用十六进制表示，也可用rgb()表示，属性见下：
属性名称: 'border-top-color'、'border-right-color'、'border-bottom-color'、'border-left-color'、
'border-color'
属性值: <color>
初始值: 元素颜色的初始值
适合对象: 所有元素
是否继承: no
百分比备注: 被禁止
border-color为快捷方式，顺序为上右下左，值之间用空格隔开。

border-style属性：
border-style属性用来设置BOX对象边框的样式，它的属性值为CSS规定的关键字，平常看不到border是因为，初始值是none的缘故。属性见下：
属性名称: 'border-top-style'、'border-right-style'、'border-bottom-style'、'border-left-style'、'border-style'
属性值: <border-style>
初始值: none
适合对象: 所有元素
是否继承: no
百分比备注: 被禁止
border-color为快捷方式，顺序为上右下左，值之间用空格隔开。
属性值的名称和代表意义如下：
none：无边框。
dotted：边框为点线。
dashed：边框为长短线。
solid：边框为实线。
double：边框为双线。
groove、ridge、inset和outset：显示不同效果的3D边框（根据color属性）。
border属性：
border属性为Border的快捷方式，属性值间用空格隔开，顺序是"边框宽度 边框样式 边框颜色"，例如：
<h1 style="border:.5em outset red">hello!</h1>
还可以用border-top、border-right、border-bottom、border-left分别作为上右下左的快捷方式，属性值顺序同border属性。
3、布局（Layout）属性：

在以前的HTML里，元素的位置只能靠元素的依次排列觉得，而在CSS里你可以更精确的定位元素。Netscape曾提出过Layer标记，它对于精确布局很有好处，但是并没有被W3C承认，W3C在CSS提出了类似于Layer标记的功能。
position属性：
position属性用来决定元素的位置类型，详见属性：
属性名称: 'position'
属性值: absolute | relative | static
初始值: static
适合对象: 所有元素
是否继承: no
百分比备注: 被禁止
其属性值分别代表：
absolute：屏幕上的绝对位置。
relative：屏幕上的相对位置。
static：固有位置。

direction属性：
direction属性决定BOX的排列方向，详见属性：
属性名称: 'direction'
属性值: ltr| rtl
初始值: ltr
适合对象: 所有元素
是否继承: yes
百分比备注: 被禁止

float和clear属性：
在HTML中图片可以选择飘浮的位置，现在BOX对象通过CSS对于也可以选择飘浮的位置。改变BOX的float属性，BOX将飘浮在其他元素的左或右方：
属性名称: 'float'
属性值: left| right|none
初始值: none
适合对象: 所有元素
是否继承: no
百分比备注: 被禁止
例如：
<STYLE type="text/css">
IMG { float: left }
BODY, P, IMG { margin: 2em }
</STYLE>
<BODY>
<P>
<IMG src=img.gif>
Some sample text that has no other...
</BODY>
相反的，使用clear属性将禁止元素在BOX的左方或右方飘浮：
属性名称: 'clear'
属性值: left| right|both|none
初始值: none
适合对象: 所有元素
是否继承: no
百分比备注: 被禁止

绝对位置属性：
绝对位置属性有四个属性：top、right、bottom和left，属性值为长度单位或百分数：
属性名称: 'top'、'right'、'bottom'、'left'
属性值: <length>|<percentage>|auto
初始值: none
适合对象: 所有元素
是否继承: no
百分比备注: 被禁止
利用以上属性，用户就可以精确定义元素的位置，如：
<P style="position: relative; margin-right: 10px; left: 10px;">
I used two red hyphens to serve as a change bar. They
will "float" to the left of the line containing THIS
<SPAN style="position: absolute; top: auto; left: 0px; color: red;">--</SPAN>
word.</P>
z-index属性：
在CSS中允许元素的重叠显示，这样就有一个显示顺序的问题，z-index属性描述了元素的前后位置，如果把电脑屏幕看作X-Y平面的话，那么Z轴就是垂直于屏幕的，z-index使用整数表示元素的前后位置，数值越大，就会显示在相对靠前的位置，并且CSS同意在z-index中使用负数。
属性名称: 'z-index'
属性值: auto|<integer>
初始值: auto
适合对象: 使用position属性的元素
是否继承: no
百分比备注: 被禁止

width属性：
规定BOX的width属性，可以使BOX的宽度不依靠它所包含的内容的多少：
属性名称: 'width'
属性值: <length> | <percentage> | auto
初始值: auto
适合对象: 块元素
是否继承: no
百分比备注:根据父元素的width而定
在CSS中还提供了min-width和max-width属性，使得BOX的宽度在最小宽度和最大宽度之间。
属性名称: 'min-width'
属性值: <length> | <percentage>
初始值: 0
适合对象: all
是否继承: no
百分比备注:根据父元素的width而定

属性名称: 'max-width'
属性值: <length> | <percentage>
初始值: 100%
适合对象: all
是否继承: no
百分比备注:根据父元素的width而定

height属性：
相同的BOX还有height属性来控制本身的高度：
属性名称: 'height'
属性值: <length> | <percentage> | auto
初始值: auto
适合对象: 块元素
是否继承: no
百分比备注:根据父元素的height而定
在CSS中还提供了min-height和max-height属性，使得BOX的高度在最小高度和最大高度之间。
属性名称: 'min-height'
属性值: <length> | <percentage>
初始值: 0
适合对象: all
是否继承: no
百分比备注:根据父元素的height而定

属性名称: 'max-height'
属性值: <length> | <percentage>
初始值: 100%
适合对象: all
是否继承: no
百分比备注:根据父元素的height而定

overflow属性：
在规定元素的宽度和高度时，如果元素的面积不足以显示全部内容的话就要用到overflow属性：
属性名称: 'overflow'
属性值: visible | hidden | scroll | auto
初始值: visible
适合对象: 元素的position属性
是否继承: no
百分比备注: 被禁止
属性值含义如下：
visible：扩大面积以显示所有内容。
hidden：隐藏超出范围的内容。
scroll：在元素的右边显示一个滚动条。
auto：当内容超出元素面积时，显示滚动条。

clip属性：
CSS还提供了一种clip属性，可以把元素区域剪切成各种形状，但目前提供的只有方形一种：
属性名称: 'clip'
属性值: <shape> | auto
初始值: auto
适合元素: 元素的position属性被设为absolute
是否继承: no
百分比备注: 被禁止
<shape>值为rect(top right bottom left)。

line-height和vertical-align属性：
line-height属性可以规定元素内部的行间距，使用长度单位或百分数：
属性名称: 'line-height'
属性值: normal | <number> | <length> | <percentage>
初始值: normal
适合对象: 所有元素
是否继承: yes
百分比备注:根据元素的字体大小而定
例如下面的例子，虽然表达方式不同，但结果一样：
DIV { line-height: 1.2; font-size: 10pt }
DIV { line-height: 1.2em; font-size: 10pt }
DIV { line-height: 120%; font-size: 10pt }
vertical-align属性决定元素在垂直位置的显示：
属性名称: 'vertical-align'
属性值: baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length>
初始值: baseline
适合对象: inline elements
适合继承: no
百分比备注: 根据元素的line-height属性而定
属性值含义如下：
baseline：与元素的基线对齐。
middle：与元素中部对齐。
sub：字下沉。
super：字上升。
text-top：文本顶部对齐。
text-bottom：文本底部对齐。
Top：和本行位置最高元素对齐。
Bottom：和本行位置最低元素对齐。

Visibility属性:
该属性用于控制元素的显示或隐藏：
属性名称: 'visibility'
属性值: inherit | visible | hidden
初始值: inherit
适合对象: 所有元素
是否继承: 如果该值为inherit，则继承父元素属性
百分比备注: 被禁止
4、颜色和背景（Color and Background）属性：
这里介绍有关CSS中前景色和背景颜色、图片的设定方法。
color属性：
color属性用于设定元素的前景色：
属性名称: 'color'
属性值: <color>
初始值: 根据用户的初始值而定
适合对象: 所有元素
是否继承: yes
百分比备注: 被禁止
color属性的值可以是十六进制数值、rgb()函数或CSS承认的颜色名称。如：
EM { color: red }
EM { color: rgb(255,0,0) }
背景属性：

background-color属性用于设定背景色，初始值为透明：
属性名称: 'background-color'
属性值: <color> | transparent
初始值: transparent
适合对象: 所有元素
是否继承: no
百分比备注: 被禁止

backgroud-image属性用于设定背景的图片：
属性名称: 'background-image'
属性值: <url> | none
初始值: none
适合对象: 所有元素
是否继承: no
百分比备注: 被禁止
其中url可以为绝对地址，也可以是相对地址，例如：
BODY { background-image: url(marble.gif) }
P { background-image: none }
以上两个属性利用普通的HTML属性也可以实现，下面的属性是CSS对原有HTML的扩展。
background-repeat属性用来描述背景图片的重复排列方式：
属性名称: 'background-repeat'
属性值: repeat | repeat-x | repeat-y | no-repeat
初始值: repeat
适合对象: 所有元素
是否继承: no
百分比备注: 被禁止
其中属性值的含义为：
repeat：沿X轴和Y轴两个方向重复显示图片。
repeat-x：沿X轴方向重复图片。
repeat-y：沿Y轴方向重复图片。
none：不重复图片。
例如：
BODY {
background: red url(pendant.gif);
background-repeat: repeat-y;
}
/*表示沿Y轴重复图片"pendant.gif"，其余部分以红色为背景色*/
background-attachment属性表示在滚动整个文档时，背景图片的显示方式。它的属性值有两种：fixed和scroll，fixed相当于IE4里的水印效果，也就是说在拖动文档时，背景相对是静止的，scroll则和文档一起滚动。

background-position属性用来指定背景图片显示的位置：
属性名称: 'background-position'
属性值: [<percentage> | <length> ]{1,2} | [top | center | bottom] || [left | center | right]
初始值: 0% 0%
适合对象: 容器元素
是否继承: no
百分比备注: refer to the size of the element itself
其中属性值含义为：
"top left"和"left top"表示"0% 0%"。
"top"、"top center"和"center top"表示"50% 0%"。
"right top"和"top right"都表示"100% 0%"。
"left"、"left center"和"center left"表示"0% 50%"。
"center"和"center center"表示"50% 50%"。
"right"、"right center"和"center right"都表示"100% 50%"。
"bottom left"和"left bottom"表示"0% 100%"。
"bottom"、"bottom center"和"center bottom"都表示"50% 100%"
"bottom right"和"right bottom"表示"100% 100%"。
例如：
BODY { background: url(banner.jpeg) right top } /* 100% 0% */
BODY { background: url(banner.jpeg) top center } /* 50% 0% */
BODY { background: url(banner.jpeg) center } /* 50% 50% */
BODY { background: url(banner.jpeg) bottom } /* 50% 100% */
background属性是以上背景属性的快捷方式，属性和顺序如下：
属性名称: 'background'
属性值: <'background-color'> || <'background-image'> || <'background-repeat'> || <'background-attachment'> || <'background-position'>
适合对象: 所有元素
是否继承: no
百分比备注: 只在background-position中容许使用
5、字体（Font）属性：
这里定义了关于字体的各种属性。
font-family属性定义字体的名称，可以是一个字体的名称，也可以是一类字体的名称，字体的名称一定要和计算机系统里的完全一样：
属性名称: 'font-family'
属性值: [[ <family-name> | <generic-family> ],]* [<family-name> | <generic-family>]
初始值: 根据用户定义而定
适合对象: 所有元素
是否继承: yes
百分比备注: 被禁止
有些计算机系统里如果没有样式单要求的字体，可以再设一个次字体以备万一。例如：
BODY { font-family: Baskerville, "Heisi Mincho W3", Symbol, serif }
family-name是指确定的某字体，如Heisi Mincho W3，generic-family指某一类字体，如serif。
font-style属性描述字体的倾斜程度：
属性名称: 'font-style'
属性值: normal | italic | oblique
初始值: normal
适合对象: 所有元素
是否继承: yes
百分比备注: 被禁止

font-variant属性：
属性名称: 'font-variant'
属性值: normal | small-caps
初始值: normal
适合对象: 所有元素
是否继承: yes
百分比备注: 被禁止
一个使用了small-caps属性的元素中的小写字母看起来要比正常的大写字母小一些。

font-weight属性用来描述字重。
属性名称: 'font-weight'
属性值: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
初始值: normal
适合对象: 所有元素
是否继承: yes
百分比备注: 被禁止
100到900代表9种不同的字重，400代表normal，700代表bold，900是最重的字体，bolder或lighter表示字体的字重比父元素高或低一级，比如父元素字重为400，则bolder代表字重500，如果父元素本身字重为900，那么bolder后，字重还是900，同样的lighter也一样。有些字体并没有100到900那么全的字重，也许是从300到700，那么字重的最小和最大值也为300到700。例如：
P { font-weight: normal } /* 400 */
H1 { font-weight: 700 } /* bold */
font-size属性描述字体的大小：
属性名称: 'font-size'
属性值: <absolute-size> | <relative-size> | <length> | <percentage>
初始值: medium
适合对象: 所有元素
是否继承: yes
百分比备注: relative to parent element's font size
该属性可以使用绝对大小，也可以使用相对大小，其中绝对大小可以使用，如下关键字表示：
xx-small | x-small | small | medium | large | x-large | xx-large 分别代表最小、较小、小、中等、大、较大和最大。相对大小可以使用：larger 或smaller描述。例如：
P { font-size: 12pt; }
BLOCKQUOTE { font-size: larger }
EM { font-size: 150% }
EM { font-size: 1.5em }
Font属性是以上属性的快捷方式，属性如下：
属性名称: 'font'
属性值: [ [ <'font-style'> || <'font-variant'> || <'font-weight'> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ]
适合对象: 所有元素
是否继承: yes
百分比备注: 只在font-size使用
例如：
P { font: 12pt/14pt sans-serif } P { font: 80% sans-serif }
P { font: x-large/110% "new century schoolbook", serif }
P { font: bold italic large Palatino, serif }
P { font: normal small-caps 120%/120% fantasy }
6、文本（Text）属性：
这里的属性将影响WEB文档中的文本显示情况。
text-indent属性描述文本的缩进程度：
属性名称: 'text-indent'
属性值: <length> | <percentage>
初始值: 0
适合对象: 容器元素
是否继承: yes
百分比备注: 根据父元素的宽度而定
下面的例子表明段落的缩进值为3em：
P { text-indent: 3em }
Alignment属性表明文本的对齐方式：
属性名称: 'alignment'
属性值: left | right | center | justify
初始值: 依照用户定义
适合对象: block-level elements
是否继承: yes
百分比备注: 被禁止

text-decoration属性描述对文本的修饰方法：
属性名称: 'text-decoration'
属性值: none | [ underline || overline || line-through || blink ]
初始值: none
适合对象: 所有元素
是否继承: no (see clarification below)
百分比备注: 被禁止
属性值含义分别为：
underline：下划线。
overline：上划线。
line-through：删除线。
blink：闪烁（如同Navigator中的blink标记的功能）

text-shadow属性可以为文本加入阴影的特效：
属性名称: 'text-shadow'
属性值: none | <color> [, <color> ]*
初始值: none
适合对象: all
是否继承: No
百分比备注: 只在描述透明度时有效
例如：
P { text-shadow: black }
上例将在文本的右下方显示黑色阴影，另外阴影将增大BOX的面积。

letter-spacing属性表明文本的字间距：属性名称: 'letter-spacing'
属性值: normal | <length> | auto
初始值: normal
适合对象: 所有元素
是否继承: yes
百分比备注: 被禁止
例如：
BLOCKQUOTE { letter-spacing: 0.1em }
word-spacing属性表明文本中单词间距：
属性名称: 'word-spacing'
属性值: normal | <length>
初始值: normal
适合对象: 所有元素
是否继承: yes
百分比备注: 被禁止
例如：
H1 { word-spacing: 1em }
text-transform属性可以将BOX内的文本按指定的大写或小写形式显示：
属性名称: 'text-transform'
属性值: capitalize | uppercase | lowercase | none
初始值: none
适合对象: 所有元素
是否继承: yes
百分比备注: 被禁止
属性值含义为：
capitalize：把BOX中的每句句首字母变成大写。
uppercase：把BOX中所有的字母变成大写。
lowercase：把BOX中所有的字母变成小写。

White-space属性描述如何显示文本中的空格，在HTML中，空格是被省略的，也就是说你在一个段落标记的开头无论输入多少个空格都是无效的，要输入空格有两个方法，一是直接输入空格的代码"&nbsp;"，或者使用<pre>标记，CSS中也制定了类似于pre的属性：
属性名称: 'white-space'
属性值: normal | pre | nowrap
初始值: normal
适合对象: 容器元素
是否继承: yes
百分比备注: 被禁止
例如：
UL { list-style: upper-roman inside } /* 对任何UL有效*/
UL ~ UL { list-style: circle outside } /* 对任何UL内部的UL标记有效*
7、列表属性：
这里的属性用来描述列表（list）的一系列属性。
list-style-type属性描述用于列表每一项前使用的符号：
属性名称: 'list-style-type'
属性值: disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none
初始值: disc
适合对象: 列表元素
是否继承: yes
百分比备注: 被禁止
属性值含义为：
disc：圆饼形。
circle：空心圆形。
square：方形。
decimal：十进制数值。
lower-roman：小写罗马数字。
upper-roman：大写罗马数字。
lower-alpha：小写希腊字母。
upper-alpha：大写希腊字母。
例如：
<STYLE>
OL { list-style-type: lower-roman }
</STYLE>
<BODY>
<OL>
<LI> This is the first item.
<LI> This is the second item.
<LI> This is the third item.
</OL>
</BODY>
还可以利用list-style-image把列表前面的符号换为图形：
属性名称: 'list-style-image'
属性值: <url> | none
初始值: none
适合对象: 列表元素
是否继承: yes
百分比备注: 被禁止
<url>可以是绝对地址，也可以是相对地址。

list-style-position属性用于描述列表的位置显示：
属性名称: 'list-style-position'
属性值: inside | outside
初始值: outside
适合对象: 列表元素
是否继承: yes
百分比备注: 被禁止
属性值outside和inside分别表示在BOX外部显示或内部显示，例如：
<STYLE type="text/css">
UL { list-style: outside }
UL.compact { list-style: inside } </STYLE> <UL>
<LI>first list item comes first
<LI>second list item comes second
</UL>
<UL class=compact>
<LI>first list item comes first
<LI>second list item comes second
</UL>
list-style属性为以上属性的快捷方式：
属性名称: 'list-style'
属性值: <'list-style-type'> || <'list-style-position'> || <'list-style-image'>
初始值: no
适合对象: 列表元素
是否继承: yes
百分比备注: 被禁止
例如：
UL { list-style: upper-roman inside } /* 对任何UL有效*/
UL ~ UL { list-style: circle outside } /* 对任何UL内部的UL标记有效*/
PRE { white-space: pre }
P { white-space: normal
8、表格属性：
由于表格中的大部分属性已经在以上的各类属性中探讨过了，所以这里只有两个属性介绍：
row-span属性描述表格跨越的行的数目：
属性名称: 'row-span'
属性值: <integer>
初始值: 1
适合对象: 表格元素
是否继承: no
百分比备注: 被禁止

column-span属性描述表格跨越的列的数目：
属性名称: 'column-span'
属性值: <integer>
初始值: 1
适合对象: 表格元素
是否继承: no
百分比备注: 被禁止
9、用户界面属性：
cursor属性，用户可以指定在某个元素上要使用的光标形状：
属性名称: 'cursor'
属性值: auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize| text | wait | help | <url>
初始值: auto
适合对象: 所有元素
是否继承: yes
百分比备注: 被禁止
属性值分别代表鼠标指针在windows操作里的各种形状，另外还可以指定指针图标的url地址，不过CSS还暂时不支持ani动画光标。
结束语：
到此，所有关于CSS现有的属性都介绍完了（还有一些关于听觉方面的样式单，就不再作介绍），本文也该结束了，虽然现在支持样式单的浏览器种类还不多，但也占到了大半，样式单迟早会成为浏览器的统一标准，原因有两个：一、样式单是W3C唯一接受的样式标准，而且没有任何迹象表明W3C会把Javascript样式单作为样式单标准；二则是CSS有效的解决了把事件引入元素的问题，配合脚本程序，是动态HTML不可缺少的一部分，尝试着用样式单建立Web页，你会发现它真的很方便。希望我的这些努力能为你熟练掌握样式单尽一点力。