#spacePage #content{background:transparent url(http://5q.com/hhj530);border:0pt;}
4、常用CSS缩写语法总结 

使用缩写可以帮助减少你CSS文件的大小，更加容易阅读。css缩写的主要规则如下： 

颜色 
16进制的色彩值，如果每两位的值相同，可以缩写一半，例如： 
#000000可以缩写为#000;#336699可以缩写为#369; 

盒尺寸 
通常有下面四种书写方法: 

property:value1; 表示所有边都是一个值value1； 
property:value1 value2; 表示top和bottom的值是value1,right和left的值是value2 
property:value1 value2 value3; 表示top的值是value1，right和left的值是value2，bottom的值是value3 
property:value1 value2 value3 value4; 四个值依次表示top,right,bottom,left 
方便的记忆方法是顺时针，上右下左。具体应用在margin和padding的例子如下： 
margin:1em 0 2em 0.5em; 

边框(border) 
边框的属性如下： 

border-width:1px; 
border-style:solid; 
border-color:#000; 
可以缩写为一句：border:1px solid #000; 

语法是border:width style color; 

背景(Backgrounds) 
背景的属性如下： 

background-color:#f00; 
background-image:url(background.gif); 
background-repeat:no-repeat; 
background-attachment:fixed; 
background-position:0 0; 
可以缩写为一句：background:#f00 url(background.gif) no-repeat fixed 0 0; 

语法是background:color image repeat attachment position; 

你可以省略其中一个或多个属性值，如果省略，该属性值将用浏览器默认值，默认值为： 

color: transparent 
image: none 
repeat: repeat 
attachment: scroll 
position: 0% 0% 
字体(fonts) 
字体的属性如下： 

font-style:italic; 
font-variant:small-caps; 
font-weight:bold; 
font-size:1em; 
line-height:140%; 
font-family:"Lucida Grande",sans-serif; 
可以缩写为一句：font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif; 

注意，如果你缩写字体定义，至少要定义font-size和font-family两个值。 

　　　　 
四、应用举例 

1、拒绝单调，让网页超链接拥有多姿多彩的下划线 

　　首先，自定义HTML链接下划线的第一步是创建一个图形，在水平方向重复放置这个图形即形成下划线效果。如果要显示出下划线背后的网页背景，可以使用透明的.gif图形。 

　　其次，如果下划线图形的高度较大，则必须适当增加文本的高度，使得一行文本的底部与下一行文本的顶部之间有较大的空间，例如p { line-height: 1.5; }。 

　　第三，为显示出自定义的下划线，必须隐藏默认的下划线，即a { text-decoration: none; }。 

　　第四，为链接元素设置下划线图形，构造出自定义的下划线。假设下划线图形是underline.gif，则设置下划线图形的CSS代码为a { background-image: url(underline.gif); }。 

　　第五，我们要让下划线图形在水平方向反复出现，但不能在垂直方向重复出现，否则它将被隐藏到文本的背后。要求下划线只在水平方向重复出现的代码为：a { background-repeat: repeat-x; }。 

　　第六，为保证图形出现在链接文字的下方（不管字体的大小），用background-position属性将图形放在链接元素的底部。对于箭头之类的下划线图形，可能还要考虑图形在水平方向的对齐方向。假设要将下划线图形放在右下角，CSS代码为：a { background-position: 100% 100%; }。 

　　第七，为了在链接文本的下方给自定义图形留出空间，必须加入适当的空白。下划线图形相对于链接文字的具体位置与文字的大小有关，但一般而言，可以先让底部空白等于下划线图形的高度，必要时再作调整。例如：a { padding-bottom: 4px; }。 

　　第八，由于下划线图形放在链接元素的底部，必须保证链接不折行（如允许链接跨越多个行，则只有下面一行的链接文本下面会有自定义的下划线）。用CSS的white-space属性可以防止链接文字折行，即a { white-space: nowrap; }。 

　　综上所述，为链接元素定义CSS样式属性的完整例子如： 

　　a { 
　　　text-decoration: none; 
　　　background: url(underline.gif) repeat-x 100% 100%; 
　　　padding-bottom: 4px; 
　　　white-space: nowrap; 
　　} 

　　如果要让自定义下划线只在鼠标停留时出现，只要把原来直接设置在链接元素上的CSS background属性改到:hover ，例如： 

　　a { 
　　　text-decoration: none; 
　　　padding-bottom: 4px; 
　　　white-space: nowrap; 
　　} 

　　a:hover { 
　　　background: url(underline.gif) repeat-x 100% 100%; 
　　} 

实例如下： 
下划线 

　　　　　　　　　　 
2、css导航栏 
在写导航栏??flash的时候，就有了写导航栏??css篇的想法了，不过由于时间的关系，一直没有写，其实只运用css也可以实现很酷的效果的，而且速度要比flash快，实例如下 
Glow滤镜 
个人页面左侧导航栏的css修饰代码如下，可以放到涂鸦板里看下效果 
 



　　　　 
五、附录 

html标记总览 
文件标记 
 文件声明 让浏览器知道这是 HTML 文件 
 开头 提供文件整体资讯