CSS语法大全

1.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-decorationverline; /*加顶线*/
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; /*文字垂直向下对齐*/

2.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-positionutside; /*凸排*/
list-style-position:inside; /*缩进*/

3.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; /*居中对齐*/

4.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;}

5.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 /*凸框*/

6.CSS表单运用：
文字方块
按钮
复选框
选择钮
多行文字方块
下拉式菜单 选项1选项2

7.CSS边界样式：
margin-top:10px; /*上边界*/
margin-right:10px; /*右边界值*/
margin-bottom:10px; /*下边界值*/
margin-left:10px; /*左边界值*/

8.CSS边框空白
padding-top:10px; /*上边框留空白*/
padding-right:10px; /*右边框留空白*/
padding-bottom:10px; /*下边框留空白*/
padding-left:10px; /*左边框留空白

1. CSS字体定义简写规则
一般写法：
  font-weight: bold;font-style: italic;font-varient:small-caps;font-size:1em;line-height:1.5em;font-family:verdana,sans-serif
简洁写法：
  font: bold italic small-caps 1em/1.5em verdana,sans-serif
简写注意：
  A.必须提供 font-size 和 font-family 这两个属性
  B.同时font-weight, font-style 以及 font-varient 默认 normal

2. background
DIV.comment{background:#f0f0f0 url(url address) repeat-x left top}

3. border
给DIV加边框：
DIV.special{border:1px solid color4}
定义div四边的颜色不同：
DIV.special{border:1px solid; border-color:color1 color2 color3 color4}

4. 同时使用多个Class定义
<p class="css1 css2">...</p>

5. CSS border的缺省值
通常定义border属性会提供color,width,style属性，实际必须提供的属性只有style，如果只写 border: solid，其他属性会自动使用缺省值。
border缺省宽度是medium(大约3px-4px)，缺省颜色是border里面的内容文字的颜色。
如果这些缺省值可以满足你的要求，你完全可以省略这两项属性。

6. 专门用于打印的CSS文档
<link type="text/css" rel="stylesheet" href="stylesheet.css" media="screen" />
<link type="text/css" rel="stylesheet" href="printstyle.css" media="print" />

7. 单行文字CSS中的内容垂直对齐
设置行高与内容块等高，如：line-height: 32px;

8. 让背景色能够垂直拉齐到底部
要解决这个问题似乎只能用一个取巧的办法，根据每列的宽度和背景色设置背景图片，让用户看上去似乎拉平了：
body{background: url(blue-image.gif) 0 0 repeat-y}

9. block / inline 属性
block元素的特性包括：
  总是另起一行开始显示
  height line-height top bottom margin属性可以被设置，width缺省值是100%
  这一类的HTML元素包括<div>, <p>, <h1>, <form>, <ul> 以及 <li>等。

inline元素的特性包括：
  直接跟在当前行的后面显示
  height line-height top bottom margin属性不能改变，width等于包含文字/图片的宽度，width不能改变
  这一类的HTML元素包括<span>, <a>, <label>, <input>, <img>, <strong> 以及 <em>等。

可以通过设置元素属性display: inline 或 display: block来改变元素的以上特性。

10. 设置页面的最小宽度
CSS语法中很有用的一个属性是 min-width，通过它可以设置任何元素的最小宽度。
但有个问题：IE浏览器无法为元素设置min-width，解决方法：
#container{
  min-width:600px;max-width:1200px;
  width:expression(document.body.clientWidth < 600? "600px" : document.body.clientWidth > 1200? "1200px" : "auto");
}
第一个属性是最小宽度定义的标准写法；
第二个属性则是只有IE能够理解的javascript表达式。

11. Text-transform 属性
其常见的可用值包括：text-transform: uppercase(大写)/lowercase(小写)/capitalize(首字母大写)。

12. IE中消失的文字和图片
IE有个很莫名其妙的Bug：有时候文字或者背景图片死活显示不出来。如果你全选整个页面，会发现那些内容实际上还在那里，或者重新刷新一下页面显示就正常了。
解决：
可以尝试给消失的元素加 position: relative 属性。
如果不行，再试着设置width属性。

13. 颜色的缩写
可以将 #ff0033 缩写成 #f03

14. 关闭输入法状态
使用户只能输入英文状态下的字符，类似输入密码：input{ime-mode:disabled;}

15.半透明
.cls {filter:alpha(opacity=50); opacity:0.5;}

滤镜说明：
Alpha：设置透明层次.
blur：创建高速度移动效果，即模糊效果.
Chroma：制作专用颜色透明.
DropShadow：创建对象的固定影子.
FlipH：创建水平镜像图片.
FlipV：创建垂直镜像图片.
glow：加光辉在附近对象的边外.
gray：把图片灰度化.
invert：反色.
light：创建光源在对象上.
mask：创建透明掩膜在对象上.
shadow：创建偏移固定影子.
wave：波纹效果.
Xray：使对象变的像被x光照射一样.

1.滤镜:alpha
语法:
STYLE="filter:Alpha(Opacity=opacity,FinishOpacity=finishopacity,Style=style,
StartX=startX,StartY=startY,FinishX=finishX,FinishY=finishY)"
说明：
Opacity:起始值，取值为0-100,0为透明，100为原图.
FinishOpacity:目标值.
Style：1或2或3
StartX：任 ?
StartY：任意值
例子：filter:Alpha(Opacity="0",FinishOpacity="40",Style="2")

2.滤镜:blur
语法:
STYLE="filter:Blur(Add=add,Direction=direction,Strength=strength)"
说明：
Add:一般为1，或0.
Direction:角度,0-315度，步长为45度.
Strength:效果增长的数值,一般5即可.
例子：filter:Blur(Add="1",Direction="45",Strength="5")

3.滤镜:chroma
语法:
STYLE="filter:Chroma(Color=color)"
说明:
color:#rrggbb格式，任意.
例子：filter:Chroma(Color="#FFFFFF")

4.滤镜ropShadow
语法:
STYLE="filterropShadow(Color=color,OffX=offX,OffY=offY,Positive=positive)"
说明:
Color:#rrggbb格式，任意.
Offx:X轴偏离值.
Offy:Y轴偏离值.
Positive:1或0.
例子：filterropShadow(Color="#6699CC",OffX="5",OffY="5",Positive="1")

5.滤镜:FlipH
语法:
STYLE="filter:FlipH"
例子：filter:FlipH

6.滤镜:FlipV
语法:
STYLE="filter:FlipV"
例子：filter:FlipV

7.滤镜:Glow
语法:
STYLE="filter:Glow(Color=color,Strength=strength)"
说明:
Color:发光颜色.
Strength:强度(0-100)
例子：filter:Glow(Color="#6699CC",Strength="5")

8滤镜:Gray
语法:
STYLE="filter:Gray"
例子：filter:Gray

9.滤镜:Invert
语法:
STYLE="filter:Invert"
例子：filter:Invert

10.滤镜:Mask
语法:
STYLE="filter:Mask(Color=color)"
例子：filter:Mask(Color="#FFFFE0")

11.滤镜:Shadow
语法:
filter:Shadow(Color=color,Direction=direction)
说明:
Color:#rrggbb格式.
Direction:角度,0-315度，步长为45度.
例子：filter:Shadow(Color="#6699CC",Direction="135")

12.滤镜:Wave
语法:
filter:Wave(Add=add,Freq=freq,LightStrength=strength,Phase=phase,Strength=strength)
说明:
Add:一般为1，或0.
Freq:变形值.
LightStrength:变形百分比.
Phase:角度变形百分比.
Strength:变形强度.
例子:filter:wave(Add="0",Phase="4",Freq="5",LightStrength="5",Strength="2")

13.滤镜:Xray
语法:
STYLE="filter:Xray"
例子:filter:Xray


14.颜色变化
语法：
filter: progidXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=&#39;#B5CCFA&#39;, EndColorStr=&#39;#B5CCFA&#39;);

使用 line-height 垂直居中
line-height:24px;
使用固定宽度的容器并且需要一行垂直居中时，使用 line-height 即可（高度与父层容器一致），更多的垂直居中总结可以看这里。
清除容器浮动
#main {
    overflow:hidden;
}

不让链接折行
a {
    white-space:nowrap;
}
上面的设定就能避免链接折行，不过个人建议长链接会有相应的折行。

始终让 Firefox 显示滚动条
html {
    overflow:-moz-scrollbars-vertical;
}

需跨浏览器的支持，也可以使用
body, html {
    min-height:101%;
}

使块元素水平居中
margin:0 auto;
其实就是
margin-left: auto;
margin-right: auto;
这个技巧基本上所有的 CSS 教科书都会有说明，别忘记给它加上个宽度。Exploer 下也可以使用
body{
    text-align: center;
}
然后定义内层容器
text-align: left;
恢复。

隐藏 Exploer textarea 的滚动条
textarea {
    overflow:auto;
}
Exploer 默认情况下 textarea 会有垂直滚动条（不要问我为什么）。

设置打印分页
h2 {
    page-break-before:always;
}
page-break-before 属性能设置打印网页时的分页。

删除链接上的虚线框
a:active, a:focus {
    outline:none;
}
Firefox 默认会在链接获得焦点（或者点击时）加上条虚线框，使用上面的属性可以删除。

最简单的 CSS 重置
* {
   margin: 0; padding: 0
}
如果想“复杂”，参考YUI 的做法（还有这里）。原文留言中也有用户说了他们的观点
I have to agree with Niall Doherty, * {margin: 0px; padding: 0px;}
basically means "traverse every css element and give it these
attributes". That is a very unnecessary strain on the server and
a bad semantic practice, as you have to give some elements
padding/margin again, after stripping them.

1、善用css缩写可以减少页面文件大小，提高下载速度，同时使代码简洁可读。
如：
[code]div{
  border-top:1px solid #cccccc;
  border-left:1px solid #cccccc;
  border-right:1px soli #cccccc;
  border-bottom:1px solid #cccccc;
}[/code]
可以写为
[code]p{border:1px solid #cccccc}[/code]
再如：
[code]div{
  margin-top:10px;
  margin-right:20px;
  margin-bottom:30px;
  margin-left:40px;
}[/code]
可以改写为：
[code]/*注意上、右、下、左的书写顺序*/
div{margin:10px 20px 30px 40px}
/*注意，数值与单位不能有空格，每个值之间用空格隔开*/[/code]
(详细请参考：css2参考手册、常用css缩写总结)

2、可以同时为一个html元素的class属性设定多个规则(多重class定义)。
通常我们写法为：<p class=”a”></p>
实际上我们可以为p元素指定多个规则，如：
[code]CSS：
.a{…}
.b{….}
HTML：
<p class="a b">该元素同时包括a和b中设定的样式</p>
注意：多个规则之间用空格分开。[/code]
3、明确定义单位，除非值为0
忘记定义尺寸是css初学者新手普遍存在的问题。在html我们可以写width=”100”，但在css中应该给出一个准确的单位。如：width:100px;height:50px;font-size:9pt ，0值除外，因为不论对于任何单位。0值的大小都是相等的。

注意：不要在数值和单位之间加空格。

4、区分大小写
在xhtml中，css定义的元素名称是区分大小写的，class和id的值在html和xhtml中也是区分大小写的，所以为了避免错误，推荐一律使用小写。
如#aaa,与#AAA是不同的，在xhtml中，p和P也是不同的.他们之间不会覆盖。
如果在css中定义了#aaa，在html元素中使用AAA来应用将不能得到#aaa中定义的样式。
示例代码：
[code]CSS:
#aaa{border:1px solid #ccc}
HTML:
<div id="AAA">显示不出来1个像素的边线</div>[/code]
5、CSS的最近优先原则
如果对一个元素定义了多次样式，则以最近的一级优先，最近一级的样式将覆盖其他的样式定义。
如：
[code]CSS:
p{color:red}
.blue{color:blue}
.yellow{color:yellow}
HTML:
<p>此处显示为红色</p>
<p class="blue">此处显示为蓝色</p>
<p class="blue" style="color:green">此处显示为绿色</p>
<p class="blue yellow">此处显示为黄色</p>[/code]
注意：
（1）注意样式的几个优先顺序(优先级由上至下递减)：
--元素style设定
--head区<style></style>中的设定
--外部引用css文件
（2）优先级不是按访问顺序来设定的，而是又css中的声明顺序来设定的。
如上例中<p class="yellow blue">此处显示为黄色</p>也显示为黄色，因为在css定义中.yellow在.blue的后面。

6、使用子选择器减少id和class的定义
例如：
[code]#contain{..}
#contain_ul{...}
.contail_li{...}
<div id="contain">
  <ul id="contain_ul">
    <li class="contain_li"></li>
    <li class="contain_li"></li>
  </ul>
</div>[/code]
可以更改为：
[code]#contain{..}
#contain ul{...}
.contain ul li{...}
<div id="contain">
<ul>
  <li></li>
  <li></li>
</ul>
</div>[/code]
7、不要给背景图片路径加引号
将background:url("xxx.gif")改为background:url(xxx.gif)
因为对于部分浏览器加引号反而会引起错误。

8、背景图片的路径是相对与当前css页面的路径。

例如：
有如下目录结构
|--images
  |--xxx.gif
|--css
  |--xx.css
|--index.html
代码内容
index.html引用xx.css文件。<link rel="stylesheet" href="css/xx.css" />
xx.css要引用xxx.gif图片其写法为：background:url(../images/xxx.gif)

9、使用组选择器为不同元素应用相同的样式
如h1,h2,h3,div{font-size:16px;font-weight:bold}
则h1,h2,h3,div元素的样式都为字体16像素，字体粗体

10、书写正确的链接样式
当用css定义链接的各种状态时，一定要注意其书写顺序，即：:link :visited :hover :active。
如果不按照该顺序书写可能无法达到自己希望的效果。为了记忆该顺序我们抽取每个单词的首字母：L V H A，你可以通过记忆LoVe,Hate,两个单词来记住其顺序。

11、禁止内容换行与强制内容换行
在表格或层中我们可能希望内容不换行或强制换行，我们可以通过一些css属性来达到这些要求。
禁止换行：white-space:nowrap
强制换行：word-wrap: break-word; word-break: normal;

12、区别relative和absolute
Absolute，CSS中的写法是：position:absolute; 他的意思是绝对定位，他是参照浏览器的左上角，配合TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)进行定位，在没有设定TRBL，默认依据父级的做标原始点为原始点。如果设定TRBL并且父级没有设定position属性，那么当前的absolute则以浏览器左上角为原始点进行定位，位置将由TRBL决定。

Relative，CSS中的写法是：position:relative; 他的意思是绝对相对定位，他是参照父级的原始点为原始点，无父级则以BODY的原始点为原始点，配合TRBL进行定位，当父级内有padding等CSS属性时，当前级的原始点则参照父级内容区的原始点进行定位。

13、区别div和span
div是一个块级元素，可以包含段落，表格等内容，用于放置不同的内容。一般我们在网页通过div来布局定位网页中的每个区块。
span是一个内联元素，没有实际意义，它的存在纯粹是为了应用样式，给一段内容加上<span></span>标记可以通过在span上定义样式来设定其内容的样式。

14、区别display和visibility
display:none和visibility:hidden都可以隐藏一个元素
但visibility:hidden只是隐藏了元素的内容，但其使用的位置空间仍然被保留。
而display:none则相当把元素从页面中去除，其占用位置也将被删除。

单行一列
以下是引用片段：
body { margin: 0px; padding: 0px; text-align: center; }  
#content { margin-left:auto; margin-right:auto; width: 400px; width: 370px; }

两行一列
以下是引用片段：
body { margin: 0px; padding: 0px; text-align: center;}  
#content-top { margin-left:auto; margin-right:auto; width: 400px; width: 370px;}  
#content-end {margin-left:auto; margin-right:auto; width: 400px; width: 370px;}

三行一列
以下是引用片段：
body { margin: 0px; padding: 0px; text-align: center; }  
#content-top { margin-left:auto; margin-right:auto; width: 400px; width: 370px; }  
#content-mid { margin-left:auto; margin-right:auto; width: 400px; width: 370px; }  
#content-end { margin-left:auto; margin-right:auto; width: 400px; width: 370px; }

单行两列
以下是引用片段：
#bodycenter { width: 700px;margin-right: auto; margin-left: auto;overflow: auto; }  
#bodycenter #dv1 {float: left;width: 280px;}  
#bodycenter #dv2 {float: right;width: 410px;}

两行两列
以下是引用片段：
#header{ width: 700px; margin-right: auto;margin-left: auto; overflow: auto;}  
#bodycenter { width: 700px; margin-right: auto; margin-left: auto; overflow: auto; }  
#bodycenter #dv1 { float: left; width: 280px;}  
#bodycenter #dv2 { float: right;width: 410px;}

三行两列
以下是引用片段：
#header{ width: 700px;margin-right: auto; margin-left: auto; }  
#bodycenter {width: 700px; margin-right: auto; margin-left: auto; }  
#bodycenter #dv1 { float: left;width: 280px;}  
#bodycenter #dv2 { float: right; width: 410px;}  
#footer{ width: 700px; margin-right: auto; margin-left: auto; overflow: auto; }

单行三列
绝对定位
以下是引用片段：
#left { position: absolute; top: 0px; left: 0px; width: 120px; }  
#middle {margin: 20px 190px 20px 190px; }  
#right {position: absolute;top: 0px; right: 0px; width: 120px;}

float定位一
xhtml:
以下是引用片段：
<div id="warp">  
<div id="column">  
<div id="column1">这里是第一列</div>  
<div id="column2">这里是第二列</div>  
<div class="clear"></div>  
</div>  
<div id="column3">这里是第三列</div>  
<div class="clear"></div>  
</div>

CSS:
以下是引用片段：
#wrap{ width:100%; height:auto;}  
#column{ float:left; width:60%;}  
#column1{ float:left; width:30%;}  
#column2{ float:right; width:30%;}  
#column3{ float:right; width:40%;}  
.clear{ clear:both;}

float定位二
xhtml:
以下是引用片段：
<div id="center" class="column">  
<h1>This is the main content.</h1>  
</div>  
<div id="left" class="column">  
<h2>This is the left sidebar.</h2>  
</div>  
<div id="right" class="column">  
<h2>This is the right sidebar.</h2>  
</div>

CSS:
以下是引用片段：
body {margin: 0;padding-left: 200px;padding-right: 190px;min-width: 240px;}  
.column {position: relative;float: left;}  
#center {width: 100%;}  
#left {width: 180px; right: 240px;margin-left: -100%;}  
#right {width: 130px;margin-right: -100%;}

两行三列
xhtml:
以下是引用片段：
<div id="header">这里是顶行</div>  
<div id="warp">  
<div id="column">  
<div id="column1">这里是第一列</div>  
<div id="column2">这里是第二列</div>  
<div class="clear"></div>  
</div>  
<div id="column3">这里是第三列</div>  
<div class="clear"></div>  
</div>

CSS:
以下是引用片段：
#header{width:100%; height:auto;}  
#wrap{ width:100%; height:auto;}  
#column{ float:left; width:60%;}  
#column1{ float:left; width:30%;}  
#column2{ float:right; width:30%;}  
#column3{ float:right; width:40%;}  
.clear{ clear:both;}

三行三列
xhtml:
以下是引用片段：
<div id="header">这里是顶行</div>  
<div id="warp">  
<div id="column">  
<div id="column1">这里是第一列</div>  
<div id="column2">这里是第二列</div>  
<div class="clear"></div>  
</div>  
<div id="column3">这里是第三列</div>  
<div class="clear"></div>  
</div>  
<div id="footer">这里是底部一行</div>

CSS:
以下是引用片段：
#header{width:100%; height:auto;}  
#wrap{ width:100%; height:auto;}  
#column{ float:left; width:60%;}  
#column1{ float:left; width:30%;}  
#column2{ float:right; width:30%;}  
#column3{ float:right; width:40%;}  
.clear{ clear:both;}  
#footer{width:100%; height:auto;}

PS:这里列出的是常用的例子，而非研究之用，对一每个盒子，都没有设置margin,padding,boeder等属性！