在html文档中有以下内容

<p class="abc">...</p>

<div class="abc">...</div>

然后就可以在css里面针对上面的p和div写不同的属性

p.abc { aaa }

div.abc { bbb }

以上语句的意思就是：aaa只是作用于<p class="abc">...</p>这样的元素，bbb只是作用与<div class="abc">...</div>这样的规则

记住p.abc和div.abc逗号之前不要有空格

h1{...}

div{...}

a{...}

那么所有的h1，div，a都会套用以上定义的样式，

2.类选择符，用class引用标签会套用此类样式，如：

.aaa{...}

.bbb{...}

.ccc{...}

使用的时候：<div class="aaa"></div>

那么这个div就套用了aaa样式，

3.id选择符，该id名（理论上来说，id属性是唯一的）的标签会套用此类样式，如：

#aaa{...}

#bbb{...}

使用的时候：<div id="aaa"></div>

那么这个div就套用了aaa样式，和类选择符不一样的就是，id是唯一标识该标签的符号，class是标识“此类”的标签，

body{

background-color:#000000

background-image:url(http://every.hn8868.com/bw07/heibj.jpg)

background-repeat:no-repeat

background-position:center

background-attachment:fixed

SCROLLBAR-FACE-COLOR:#0E0E10

SCROLLBAR-HIGHLIGHT-COLOR:#FFBBBB

SCROLLBAR-SHADOW-COLOR:#FFBBBB

SCROLLBAR-3DLIGHT-COLOR:#FFBBBB

SCROLLBAR-ARROW-COLOR:#FFBBBB

SCROLLBAR-TRACK-COLOR:#0E0E10

SCROLLBAR-DARKSHADOW-COLOR:#FFBBBB

SCROLLBAR-BASE-COLOR:#0E0E10

CURSOR: url('http://webme.bokee.com/inc/mouse055.ani')

color: #B8B8CF}

a:hover{position:relativeleft:1pxtop:1pxclip:rect()CURSOR: url('http://webme.bokee.com/inc/mouse022.ani')color: #8EC2F5}

#header{height:300px}

#header div.lc{}

#header div.rc{}

#header div.tit{

top:15px

left:20px

line-height:35px

font-size:28px

font-family:"黑体"

font-style: normal

font-weight: bolder

color: #43212E

text-decoration: blink

FILTER: DropShadow(Color=#AAAAAA, OffX=2, OffY=2, Positive=2)}

#header div.tit a.titlink{color:#FFFFFFtext-decoration:none}

#header div.tit a.titlink:visited{color:#FFFFFFtext-decoration:none}

#header div.desc{top:70pxleft:20pxcolor:#FFFFFFfont-size:13px}

#tab{top:250px}

#tab a.on,#tab a.on:link,#tab a.on:visited{border-top:-3px solid #FFFFFFline-height:19pxbackground-color:#000000color:#FFFFFFfont-size:14px}

#tab span{color:#FFFFFFfont-size:14px}

#tab a:link{color:#FFFFFFtext-decoration:nonefont-size:14px}

#tab a:visited{color:#FFFFFFtext-decoration:nonefont-size:14px}

#tab2{background:#DAE9F5}

#tab2 span{color:#94BAF3font-size:12pxfont-weight:bold}

#tab2 a{font-size:12px}

#tab2 a:link{color:#0000CC}

#tab2 a:visited{color:#0000CC}

.stage{}

#comm_info{color:#FDBDBDfont-family:Arialtext-align:left}

#comm_info div.line{margin-top:5pxline-height:8pxborder-top:1px solid #43212E}

#comm_info a{color:#FFAAAA}

#comm_info a{display:none}

#page {color:#FDBDBDheight:30pxfont-size:14pxfont-family:Arialtext-align:center}

#page span {padding:3pxcolor:#FDBDBDfont-size:14pxfont-weight:bold}

#page a.pc {color:#FDBDBDfont-size:14pxfont-weight:bold}

#page a.pc:visited{color:#FDBDBD}

#page a.pi {padding:3pxcolor:#FDBDBDfont-size:14px}

#page a.pi:visited {color:#FDBDBD}

#page a{color:#FDBDBD}

#page a:visited{color:#FDBDBD}

.mod{margin-bottom:10px}

.modhandle{cursor:move}

.modth{height:24px}

.modhead{padding:4px 4px 0 4px}

.modopt{padding:4px 4px 0 0}

.modtit{color:#FFFFFFfont-size:12pxfont-weight:bold}a.modtit{color:#FFFFFF}a.modtit:visited{color:#FFFFFF}

.modtitlink{color:#FF5100font-size:12pxfont-weight:bold}a.modtitlink{color:#FF5100text-decoration:none}a.modtitlink:visited{color:#FF5100text-decoration:none}a.modtitlink:hover{color:#FF5100text-decoration:underline}

.modact{color:#FFFFFFfont-size:12px}a.modact:link{color:#FFFFFF}a.modact:visited{color:#FFFFFF}

.modbox{padding:10px 10px 0 10pxbackground-color:#000000border-left:1px solid #A3A3A3border-right:1px solid #A3A3A3}

.modtl{background:url(http://img.baidu.com/hi/temp8/ptitl.gif) no-repeat top leftline-height:1px}

.modtc{background:url(http://img.baidu.com/hi/temp8/ptitc.gif) repeat-x}

.modtr{background:url(http://img.baidu.com/hi/temp8/ptitr.gif) no-repeat top rightline-height:1px}

.modbl{background-color:#847D69border-left:1px solid #A3A3A3border-bottom:1px solid #A3A3A3line-height:1px}

.modbc{background-color:#847D69border-bottom:1px solid #A3A3A3line-height:1px}

.modbr{background-color:#847D69border-right:1px solid #A3A3A3border-bottom:1px solid #A3A3A3line-height:1px}

.modbox,.modbl,.modbc,.modbr{filter:alpha(opacity=70)-moz-opacity:0width:auto !importantwidth:100%}

#m_blog div.tit{font-size:14pxfont-weight:bold}

#m_blog div.tit a{color:#fffffffont-size:14pxfont-weight:bold}

#m_blog div.tit a:visited{color:#ffffff}

#m_blog div.date{margin:5px 0 8px 0color:#FFaaaa}

#m_blog div.cnt{color:#B8B8CFline-height:20pxfont-size:14px}

#m_blog div.more{margin:14px 0 16px 0}

#m_blog div.more a{color:#FFaaaafont-size:14px}

#m_blog div.more a:visited{color:#FFaaaa}

#m_blog div.opt{color:#FFaaaafont-size:12px}

#m_blog div.opt a{color:#FFaaaafont-size:12px}

#m_blog div.opt a:visited{color:#FFaaaa}

#m_blog div.line{margin-top:17pxline-height:17pxborder-top:1px solid #43212E}

#m_blog div.none{padding:100px 0 100px 0color:#FFaaaafont-size:14px}

#m_pro a{color:#E86C6C}

#m_pro a:visited{color:#E86C6C}

#m_pro div.image{text-align:center}

#m_pro div.act{margin-top:10px}

#m_pro div.user{margin-top:10pxcolor:#B8B8CFfont-size:12pxfont-weight:bold}

#m_pro div.desc{color:#B8B8CFfont-size:12px}

#m_pro div.line{margin-top:17pxline-height:17pxborder-top:1px solid #43212E}

#m_pro td{color:#666666line-height:24pxfont-size:14px}

#m_album div.image{text-align:center}

#m_album div.page{color:#B8B8CFfont-size:12pxtext-align:center}

#m_album div.page a{color:#FDBDBDfont-size:12px}

#m_album div.page a:visited{color:#FDBDBD}

#m_links div.item{color:#B8B8CFfont-size:12px}

#m_links div.item a{color:#FDBDBDfont-size:12pxtext-decoration:none}

#m_links div.item a:visited{color:#FDBDBD}

#m_links div.line{margin-top:5pxline-height:8pxborder-top:1px solid #43212E}

#m_artclg div.item{color:#B8B8CFfont-size:12px}

#m_artclg div.item a{color:#FDBDBDfont-size:12px}

#m_artclg div.item a:visited{color:#FDBDBD}

#m_artclg div.line{margin-top:5pxline-height:8pxborder-top:1px solid #43212E}

#m_comment div.item{color:#B8B8CFfont-size:12px}

#m_comment div.item a{color:#FDBDBDfont-size:12px}

#m_comment div.item a:visited{color:#FDBDBD}

#m_comment div.item a.cnt{color:#B8B8CFfont-size:12pxtext-decoration:none}

#m_comment div.item a.cnt:visited{color:#B8B8CFtext-decoration:none}

#m_comment div.item a.cnt:hover{color:#B8B8CFtext-decoration:underline}

#m_comment div.line{margin-top:5pxline-height:8pxborder-top:1px solid #43212E}

#m_albumlist div.note{color:#F2F2F2font-size:14px}

#m_albumlist div.desc{margin-bottom:12pxpadding:3px 10px 3px

10pxline-height:22pxbackground-color:#F2F2F2font-size:14px}

#m_albumlist div.none{padding:100px 0 100px 0color:#F2F2F2font-size:14px}

#m_albumlist div.line{margin-top:10pxline-height:16pxborder-top:1px solid #43212E}

#m_albumlist div.tit{margin:6px 0 7px 0color:#666666font-size:14px}

#m_albumlist div.tit a{color:#E86C6Cfont-size:14px}

#m_albumlist div.tit a:visited{color:#E86C6C}

#m_albumlist span.count{color:#B8B8CFfont-size:12pxfont-weight:bold}

#m_albumlist span.size{color:#B8B8CFfont-size:12pxfont-family:Arial}

#m_albumlist a.act{color:#E86C6Cfont-size:12px}

#m_albumlist a.act:visited{color:#E86C6C}

#m_albumlist a.page{color:#B8B8CFfont-size:14px}

#m_albumlist a.page:visited{color:#B8B8CF}

#m_albumlist td.image{padding:5pxborder:1px solid #B8B8CFbackground:#0E0E10}

#m_friend div.filter{margin-bottom:10pxpadding-left:10pxpadding-top:10pxheight:27pxline-height:27px}

#m_friend div.catalog{margin-bottom:10pxpadding-left:10pxheight:27pxline-height:27pxbackground-color:#F2F2F2font-size:14px}

#m_friend div.user{margin-top:4pxcolor:#B8B8CFfont-size:12px}

#m_friend div.user a{color:#E86C6Cfont-size:12px}

#m_friend div.user a:visited{color:#E86C6C}

#m_friend div.line{margin-top:10pxline-height:16pxborder-top:1px solid #43212E}

#m_setting a{color:#E86C6C}

#m_setting a:visited{color:#E86C6C}

#m_setting{line-height:22pxcolor:#666666font-size:14px}

#m_setting img.sel{border:4px solid #FFDB7B}

#m_setting img.unsel{border:1px solid #D2D2D2}

#m_setting span.tit{font-size:14px}

#m_setting span.usr{color:#B8B8CF}

#m_setting div.sel{padding-top:6pxfont-size:14pxfont-weight:bold}

#m_setting div.line{margin-top:20pxline-height:16pxborder-top:1px solid #43212E}

#m_sysinfo a{color:#E86C6C}

#m_sysinfo a:visited{color:#E86C6C}

#m_sysinfo{line-height:22pxcolor:#666666font-size:14px}

#m_sysinfo span.new{color:#FF0000font-size:10pxfont-family:Arial}

#m_sysinfo span.date{color:#666666font-size:14px}

#m_setbase{color:#666666font-size:14px}

#m_setbase td{color:#666666font-size:14px}

#m_setbase div.line{margin-top:5pxline-height:8pxborder-top:1px solid #43212E}

#in_comment{width:400px}

#in_comment div.tit{margin-bottom:12pxcolor:#B8B8CFfont-size:14pxfont-weight:bold}

#in_comment div.user{margin-bottom:6pxcolor:#B8B8CFfont-size:12px}

#in_comment div.user a{color:#B8B8CFfont-size:12px}

#in_comment div.user a:visited{color:#B8B8CF}

#in_comment div.user span.date{color:#B8B8CFfont-size:12px}

#in_comment div.desc{color:#FFDDDDfont-size:12px}

#in_comment div.line{margin-top:17pxline-height:17pxborder-top:1px solid #43212E}

#in_send td{color:#FFDDDD}

#in_send div.tit{margin:10px 0 10px 0color:#ADCDFCfont-size:14pxfont-weight:bold}

#m_filed div.item{color:#FDBDBDfont-size:12px}

#m_filed div.item a{color:#FDBDBDfont-size:12px}

#m_filed div.item a:visited{color:#FDBDBD}

#m_filed div.line{margin-top:5pxline-height:8pxborder-top:1px solid #43212E}

#m_mylink1 div.item{color:#B8B8CFfont-size:12px}

#m_mylink1 div.item a{color:#FDBDBDfont-size:12pxtext-decoration:none}

#m_mylink1 div.item a:visited{color:#FDBDBD}

#m_mylink1 div.line{margin-top:5pxline-height:8pxborder-top:1px solid #43212E}

#m_mylink2 div.item{color:#B8B8CFfont-size:12px}

#m_mylink2 div.item a{color:#FDBDBDfont-size:12pxtext-decoration:none}

#m_mylink2 div.item a:visited{color:#FDBDBD}

#m_mylink2 div.line{margin-top:5pxline-height:8pxborder-top:1px solid #43212E}

#mod_bgmusic{text-align:center}

#phx{FILTER: Alpha(Opacity=70, FinishOpacity=70, Style=0, StartX=0, StartY=0, FinishX=0, FinishY=0) grayWIDTH:100%HEIGHT: 64px}