TEAM-CSS内容说明
/*版本 : TEAM BBS 编写 : DayMoon */
body {margin: 3px auto;background-color: #CCCCCC;}
定义全局布局,背景色
body, table, input, select, textarea, .button, .altbg1, .altbg2 {font: 12px Tahoma, Verdana;}
定义全局的字体样式
a {text-decoration: none;color: #282827;}
a:hover {text-decoration: underline;}
a:active {font-weight:bold;}
我们最常用的是4种a(锚)元素的伪类,它表示动态链接在4种不同的状态:link、visited、active、hover(未访问的链接、已访问的链接、激活链接和鼠标停留在链接上)。我们把它们分别定义不同的效果:
a:link {color: #FF0000; text-decoration: none} /* 未访问的链接 */
a:visited {color: #00FF00; text-decoration: none} /* 已访问的链接 */
a:hover {color: #FF00FF; text-decoration: underline} /* 鼠标在链接上 */
a:active {color: #0000FF; text-decoration: underline} /* 激活链接 */
定义全局的表格,框架,输入框,选择框等等 属性
legend {color: #333333;}
table {color: #333333;}
form {margin: 0px;padding: 0px;}
input, select, textarea {
color: #333333;
font-weight: normal;
background-color: #F5FBFF;
border: 1px solid #7AC4EA;
height: 21px;
}
以下为自定义(class)CSS 样式,采用 class=radio or class=checkbox 这样的样式载入。
.checkbox, .radio {
border: 0px;
background: none; 这里定义一个class,应用于输入框
vertical-align: middle;
height: 16px;
}
以下应用于提交按钮
.button {
padding: 0 10px;
color: #154ba0;
background: url(header_bg.gif) repeat-x 0 50%;
outline: 1px solid #7AC4EA;
border: 1px solid #FFF !important;
height: 19px !important;
border: 1px solid #A9A9EA;
height: 1.9em;
line-height: 15px;
}
.pageinput {border : 1px solid #d6e0ef; background-color : #fafafa; height : 18px; font-size : 11.5px; }
以下为引用的效果
.quote{margin:5px 20px;border:1px solid #31659C;padding:5px; background:#FFFFFF}
以下为帖子列表及首页的鼠标移入移出效果
.altbg1 { background: #F8F8F8; }
.altbg2 { background: #FFFFFF; }
代表一个加宽字体的class
.bold{ font-weight: bold; }
以下带代码的显示效果
.code{
margin:5px 20px;
border:1px solid #31659C;
padding:5px;
background:#FDFDDF;
font-size:14px;
font-family:Tahoma;
line-height : normal ;
font-weight:bold;
text-align: left;
}
以下从A1-A7代表的是整体表格的效果。
.a1{
font-family: Tahoma, Verdana; 表格字体
font-size: 9pt; 表格里面的字体大小
text-align: left; 表格里面文字的排列, left表示左对齐,right右对齐
color: #FFFFFF; 字体颜色
background-color: #5A8DBE; 背景颜色
font-weight: bold; 字体加粗
background-image: url(header.gif);} 大表格的table的效果
.a1 a { color: #FFFFFF }
.a2{
background-color: #D6E0EF; 背景色
border: 1px solid #85A8DF; 表格边框为1 ,实线,后面的为颜色
text-align: left;
}
.a3{
BACKGROUND-COLOR: #F8F8F8;
text-align: left;
}
.a4{
BACKGROUND-COLOR: #FFFFFF;
COLOR: #282827;
text-align: left;
}
.a5{
text-decoration: none;
color: #ffffff;
text-align: left;
}
a:hover.menuhref{
width:35;
text-align: center;
border: 1px solid #000;
}
.a6{
BACKGROUND-COLOR: #F8F8F8;
text-align: center;
}
.a7 {
border-spacing: 0px;
border: 1px solid #85A8DF;
}
没注释完整,待续。。