css样式使用方法概览

以下时一个style的外部样式单:

body { background:#FFFFFF; font-size: 12px; }

td { font-size: 12px}

input, textarea { font-size: 12px; border-width:1px}

select { font-size: 12px; border-width:1px}

span { font-size: 12px; position: static }

.hr { background:url("pic/hr.gif") }

.inputbg { background:url("pic/inputbg.gif")}

.quote { margin:10px; margin-left:2em; border:1px solid #CCCCCC; padding:5px; background: #FFFFFF; font-family:Verdana,Arial,ËÎÌå; }

a:link { color: #000000;text-decoration:none}

a:visited { color: #000000;text-decoration:none}

a:hover { color: #003399}

a.highlight:link { color:red; text-decoration:none }

a.highlight:visited { color:red; text-decoration:none }

a.highlight:hover { color:red; }

a.thisclass:link { font-weight:bold; text-decoration:none }

a.thisclass:visited { font-weight:bold; text-decoration:none }

a.thisclass:hover { font-weight:bold; }

.content { font-size: 14px; line-height:140%; margin:5px 20px }

.aTitle { font-size: 15px;font-weight:bold; }

.border { border:1px solid #ccccff}

.title { background:url("pic/title1.gif"); }

.title1 { background: #99ccff; background-image:url("pic/title1.gif")}

.title2 { background: #e8f4ff; }

.title3 { background: #D7ECFF;font-weight:bold; }

.gray { color:gray; text-decoration:none }

.time { color:red }

.hit { color:green }

.tdBg { background: #f2f8ff ; line-height:120%}

.bg1 { background: #f2f8ff; }

.bg2 { background: #E8F2FF; }

.menuskin {

BORDER: #666666 1px solid; VISIBILITY: hidden; FONT: 12px Verdana;

POSITION: absolute; BACKGROUND-COLOR:#F6F6F6;

background-image:url("pic/menubg.gif");

}

.menuskin A {

PADDING-RIGHT: 10px; PADDING-LEFT: 25px; COLOR: black; TEXT-DECORATION: none; behavior:url(inc/noline.htc);

}

#mouseoverstyle {

BACKGROUND-COLOR: #B6BDD2; margin:2px; padding:0px; border:#0A246A 1px solid;

}

#mouseoverstyle A {

COLOR: black

}

.menuitems {

margin:2px;padding:1px;word-break:keep-all;

}

使用举例:

1.标记选择符

例如:

P{BACKGROUND:YELLOW;} 标记选择符是P [直接标签用]

2.类选择符

在STYLE标记定义一个“.类名”,然后在HTML标记中使用CLASS="类名"就可以引入该样式

例如:

<td class="title"><b>添加新闻</b></td>

3.ID选择符

定义ID选择符时,在样式名之前加“#名字”,引用的时候使用“ID=名字”;

例如:

<head>

<style type="text/css">

#szg{ color:red}

</style>

</head>

<body>

<p id=szg>这里用了ID选择符号 </p>

</body>