目录
CSS也是我们常叫的样式表、通俗叫切图和静态网页布局。我们知道HTML网页是由若干标签和内容组成。标签包括了div标签、span标签、a锚文本标签、strong加粗标签、b加粗标签、p段落标签、br换行标签等组成。而外表生龙活虎漂亮的网页样式却是CSS控制得出。一个完整漂亮网页，就是由html标签与控制这些标签布局和美化功能CSS组成。
CSS可以让网页“穿上漂亮衣服”，CSS可以控制HTML标签对象的css 宽度、css 高度、float浮动、文字大小、字体、css背景等样式达到我们想要的布局效果。CSS功能和作用也就在于此。开发中我们往往会用到一些css属性，由于css的样式多的数不胜数，每次使用的时候都要在网上临时查找，经过多次使用，日积月累总结了一些我们开发中常用的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; background-repeat : repeat-y;指定背景位置
background-position : 90% 90%;
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 border-top-width :1px border-top-style : solid其他框线样式
Solid
Dotted Double Groove Ridge Inset Outset七、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-} 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} word-wrap是控制换行的。使用break-word时，是将强制换行。中文没有任何问题，英文语句也没问题。但是对于长串的英文，就不起作用。break-word是控制是否断词的。normal是默认情况，英文单词不被拆开。break-all，是断开单词。在单词到边界时，下个字母自动到下一行。主要解决了长串英文的问题。keep-all，是指Chinese, Japanese, and Korean不断词。即只用此时，不用word-wrap，中文就不会换行了。（英文语句正常。）ie下：使用word-wrap:break-word;所有的都正常。ff下：如这2个都不用的话，中文不会出任何问题。英文语句也不会出问题。但是，长串英文会出问题。为了解决长串英文，一般用word-wrap:break-word;word-break:break-all;。但是，此方式会导致，普通的英文语句中的单词会被断开（ie下也是）。目前主要的问题存在于长串英文和英文单词被断开。其实长串英文就是一个比较长的单词而已。即英文单词应不应该被断开那？那问题很明显了，显然不应该被断开了。对于长串英文，就是恶意的东西，自然不用去管了。但是，也要想些办法，不让它把容器撑大。用：overflow:auto; ie下，长串会自动折行。ff下，长串会被遮盖。所以，综上，最好的方式是word-wrap:break-word; overflow:hidden;而不是word-wrap:break-word;word-break:break-all;。