博客园  :: 首页  :: 联系 :: 订阅 订阅  :: 管理

css样式使用方法概览

Posted on 2006-03-22 23:13  ╁蓝驿┲→  阅读(467)  评论(0编辑  收藏  举报

以下时一个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>