CSS全称Cascading Style Sheet。层叠式样式表。从三年前就开始使用CSS了，但一直以来都小看了它。CSS的出现其实是一次革命，它试图将网站的内容与表现分开。
一、CSS的四种实现方式：
1.内嵌式：
2.外链式：
3.导入式
3.属性式：
二.CSS的定义：
选择对象{属性1:值1;属性2:值2;属性3:值3;属性n:值n……}
如：
td{font-size:12px;color:#FFFF00}
.myname{font-size:12px;color:#FFFF00}
a:hover{font-size:12px;color:#FFFF00;text-decoration: underline;}
三.四种选择对象
1.HTML selector (TagName)
2.class selector (.NAME)
3.ID selector (#IDname)
4.特殊对象 (a:hover a:link a:visited a:active)
1.HTML selector
HTML selector就是HTML的置标符，如：DIV、TD、H1。HTML selector的作用范围是应用了该样式的所有页面中的所有该置标符。
例：
td
{
color: #FF0000;
}
-->
注意：在中没有应用什么，其中文字自动变红色。
2.class selector
定义class selector需要往其名称其加一个点“.”。如“.classname”。class selector的作用范围是所有包含“class="classname"”的置标符。
例：
.fontRed
{
color: #FF0000;
}
-->
注意：在第二个中没有“class="fontRed"”，所以文字没有变红色。
3.ID selector
定义ID selector需要往其名称其加一个点“#”。如“#IDname”。ID selector的作用范围是所有包含“ID="classname"”的置标符。
例：
#fontRed
{
color: #FF0000;
}
-->
注意：在第二个中没有“ID="fontRed"”，所以文字没有变红色。
4.特殊对象
特殊对象包括四种，是针对链接对象设置的:
a:hover 鼠标移上时的超链接
a:link 常规，非访问超链接
a:visited 访问过的超链接
a:active 鼠标点击时的超链接
特殊对象的作用范围是所有置标符（这句话有待商榷，因为下面很快就有一种方法可以把“所有”两个字推翻）。
例：
a:hover
{
color: #0000FF;
text-decoration: underline;
}
-->
注意下面，很有用！！！
a.classname:hover
a#IDname:hover
这两种写法，是分别配合.classname与#IDname使用的。它的作用范围变成了所有包含“class="classname"”或“ID="IDname"”的置标符。这种写法，可以帮助你在同一页面中实现多种a:hover效果，可以看一下艺网的主页上导航栏文字与普通文章标题在鼠标时的区别。
四.应用：
1.置标符 自动应用
2.特制类 class="NAME"
3.ID ID="IDname"
4.特殊对象 自动应用
五.CSS属性
CSS的属性有很多，像上文中用到最多的color，表示文字的颜色。background-color表示背景色。这个是最主要的，但是因为没有什么难度，参考一下相关手册就可以了。
注明两点
第一点：css的方式现在一般都采用外部连接，这个用起来方便，编译起来也方便
第二点：我用的是frontpage2003，很多css的参数都会自动提示，似乎好像以前我没有用到过~~dw有的
最近比较流行作qq挂机站，好的样式能给大家带来经常光顾的感觉，希望对大家有用!
CSS 标签属性/属性参考
这里列出了目前支持的样式表(CSS)标签属性。标有星号(*)的标签属性可于 Microsoft® Internet Explorer 5 中使用。标有两个星号(**)的标签属性可于 Internet Explorer 5.5 中使用。带有两个加号(++)的标签属性可于 Internet Explorer 6 中使用。如果某个标签属性或属性已经提交给万维网协会(W3C)但尚未作为标准发布，则标有“已提交”。若某个标签属性或属性既未提交给 W3C 也不是标准，将标有“扩展”。
CSS 标签属性/属性
行为属性 behavior
字体和文本属性 direction*
direction
font
font-family
font-size
font-style
font-variant
font-weight
ime-mode
layout-grid
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
letter-spacing
line-break
line-height
min-height ++
ruby-align
ruby-overhang
ruby-position
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow ++
text-transform
text-underline-position
unicode-bidi
vertical-align
white-space**
word-break
word-spacing ++(于 Macintosh 版本 4.0 中可用)
word-wrap
writing-mode
颜色和背景属性 background-attachment
background-color
background-image
background-position
background-position-x
background-position-y
background-repeat
color
版面属性 border
border-bottom
border-bottom-color
border-bottom-style
border-bottom-width
border-collapse*
border-color
border-left
border-left-color
border-left-style
border-left-width
border-right
border-right-color
border-right-style
border-right-width
border-style
border-top
border-top-color
border-top-style
border-top-width
border-width
clear
float
layout-flow
margin
margin-bottom
margin-left
margin-right
margin-top
padding
padding-bottom
padding-left
padding-right
padding-top
scrollbar-3dlight-color
scrollbar-arrow-color
scrollbar-base-color
scrollbar-darkshadow-color
scrollbar-face-color
scrollbar-highlight-color
scrollbar-shadow-color
table-layout*
zoom
分类属性 display
list-style
list-style-image
list-style-position
list-style-type
定位属性 bottom*
clip
height
left
overflow
overflow-x
overflow-y
position
right*
top
visibility
width
z-index
打印属性 page**
pageBreakAfter
pageBreakBefore
滤镜属性 filter
伪类和其它属性 :active
@charset
cursor
:first-letter**
:first-line**
@font-face
:hover
@import
!important
:link
@media*
@page**
:visited
实现CSS图片边框效果的方法
图片边框效果主要有两种，较简单的方法是直接在CSS文件中对img定义边界（border），例如我在CSS中定义了：
img.framed {
padding: 6px;
border: 1px solid #CCC;
background-color: #FFF; }
那么在HTML文件中，或者在blog更新的时候，针对嵌入的图片定义class="framed"就会有相应的边框效果。
上面的方法的优点是比较简单，但实现的效果比较单调，并不一定能达到令人满意的效果和一些特殊效果，例如阴影，色彩变化等等。下面介绍第二种方法，比第一种稍微复杂一些。很多Blogger喜欢在每篇文章中附带一副固定大小的图片，图文并茂的网页看起来更加生动。这个时候我们可以为图片设计更加个性化的边框效果，让网页的视觉效果更加丰富，不过这种方法需要对图片大小进行限制。
实例：CSS图片边框效果 - CSS Image Frame
首先需要制作一个边框效果的背景图片，然后在CSS中对背景边框定义图片替代（Image replacement)和定位和平移。我制作了一个例子，有兴趣的朋友可以下载源文件并在自己的网页中进行实验。特别指出，这个效果中图片尺寸是：163px X 105px
很多朋友会奇怪为什么需要3个框，上图演示了边框效果图在CSS定义中的处理过程，可以看到，在边框效果背景文件中的3个框，分别为默认，鼠标划过，以及点击后定义了不同的效果。然后通过CSS中的定位平移进行控制。在CSS网页设计中，图片替代以及定位平移是经常使用的技巧，这种方法不但解决了对于不同浏览器之间的适用性，也避免了负载图片过大而影响浏览速度的问题。更重要的是方便易用，我们不需要使用Photoshop对所有图片进行边框加工而能快速实现边框效果。 详细的方法可以看范例，也欢迎大家提供更多的意见。
网页显示有限 阅读全文请下载本文完整版WORD文档