对象 | 引用类型 | 属性明细值 | 定义方法 |
背景颜色
|
| background-color:#DFE8F6(所有页面的背景色为:#DFE8F6) | 定义body的属性值 当网页页面直接引用了.css文件后,这些属性就是成立的,包括对背景色和字体的设置 |
文字字体
|
| font-family: 'lucida grande', helvetica, verdana, arial, sans-serif; font-size:12px;(字体大小为:12px) | |
标题1 <h1></h1>
|
| h1 { font-size: 2em;(字体大小为正文字体大小的:200%相对度量) font-family:"华文中宋";(字体为“华文中宋”) } | <h1>标题内容</h1> |
标题2 <h2></h2>
|
| h2 { font-size: 1.8em;(字体大小为正文字体大小的:180%相对度量) font-family:"华文中宋";(字体为:“华文中宋”) } | <h2>标题内容</h2> |
标题3 <h3></h3>
|
| h3 { font-size: 1.6em;(字体大小为正文字体大小的:160%相对度量) font-family:"华文中宋";(字体为:“华文中宋”) } | <h3>标题内容</h3> |
标题4 <h4></h4>
|
| h4 { font-size: 1.4em;(字体大小为正文字体大小的:140%相对度量) font-family:"华文中宋";(字体为:“华文中宋”) } | <h4>标题内容</h4> |
标题5 <h5></h5>
|
| h5 { font-size: 1.2em;(字体大小为正文字体大小的:120%相对度量) font-family:"华文中宋";(字体为:“华文中宋”) } | <h5>标题内容</h5> |
超链接 <a href=”” />
|
| a { font-size: 12px;(字体大小为:12px) color: blue;(字体颜色为:蓝色) text-decoration: none;(没有字体装饰) } a:visited {(链接访问后的样式) color: green;(字体颜色为:绿色) } a:hover {(链接悬停的样式) text-decoration: underline;(字体装饰为:下划线) } | <a href="链接地址">链接对象(文字、图片)</a> |
错误提示字体
| fcs_errorFont | .fcs_errorFont{ font-size: 12px; (字体大小为:12px) color:red;(字体颜色为:红色) } | <font class=”fcs_errorFont”> 错误内容 </font> |
表格 <table></table>
| fcs_tbl | .fcs_tbl{ border: 0;(边框宽度为:0) font-size:12px;(字体大小为12px) text-align:center;(文本水平对齐方式为:居中) vertical-align:middle;(文本垂直对齐方式为:居中) } | <table class=”fcs_tbl”> …… </table> |
表格单元格 <tr> <td></td> </tr> | title white gray yellow | . fcs_tbl tr{ height:28px;(行高为:28px) } . fcs_tbl tr.title{ font-size:14px;(字体大小为:14px) color:#FFFFFF;(字体颜色为:白色) text-align:center;(文本水平对齐方式:居中) padding:2px 10px 0px 10px;(内边距:上2px、右10px、下0px、左10px) font-weight:bold;(字体厚度:粗体) background-color:#729FCF;(背景色:#729FCF) } . fcs_tbl tr.white{ background-color:#FFFFFF;(背景色:白色) } . fcs_tbl tr.gray{ background-color:#EFEBE7;(背景色:#EFEBE7) } . fcs_tbl tr.yellow{ background-color:#FDECAE;(背景色:#FDECAE) } | 使用表格时,将table的class定义为fcs_tbl,标题行定义为class=”title”,白底行定义为class=”white”,灰底行定义为class=”gray”,并为所有非标题行的单元行添加高亮事件onMouseOver=”this.className=’yellow’”和onMouseOut=”this.className=’white/gray’”。
|
文本输入框 <input type=”text” />
| fcs_inputTxt | .fcs_inputTxt{ line-height:20px;(文本行高为:20px) width: 120px;(宽度为:120px) height:22px;(高度为:22px) color:black;(字体颜色为:黑色) border: 1px solid #6699ff; (边框宽度为:1px,颜色为:#6699ff,形式为:立体) font-size:12px;(字体大小为12px) } | <input type=”text” class=”fcs_inputTxt” /> |
四字按钮 <input type=”button” /> <input type=”submit” /> <input type=”reset” />
| fcs_input4Btn | . fcs_input4Btn { width:66px;(长度为:66px) height: 22px;(高度为:22px) border: 1px #2c59aa solid; (边框宽度为:1px,颜色为:#2c59aa,形式为:立体) padding: 2px 2px 0px 2px; (内边距:上2px、右2px、下0px、左2px) font-size: 12px; (字体大小为:12px) filter:progid:dximagetransform.microsoft.gradient(gradienttype=0,startcolorstr=#ffffff,endcolorstr=#c3daf5); (颜色纵向渐进效果:从#ffffff到#c3daf5) cursor: hand; (鼠标悬停效果:手型) color: #005189; (字体颜色为:#005189) } | <input type=”button” class=”fcs_input4btn” value=”四字按钮”/> |
两字按钮 <input type=”button” /> <input type=”submit” /> <input type=”reset” />
| fcs_input2Btn | . fcs_input2Btn { width:40px;(长度为:66px) height: 22px;(高度为:22px) border: 1px #2c59aa solid; (边框宽度为:1px,颜色为:#2c59aa,形式为:立体) padding: 2px 2px 0px 2px; (内边距:上2px、右2px、下0px、左2px) font-size: 12px; (字体大小为:12px) filter:progid:dximagetransform.microsoft.gradient(gradienttype=0,startcolorstr=#ffffff,endcolorstr=#c3daf5); (颜色纵向渐进效果:从#ffffff到#c3daf5) cursor: hand; (鼠标悬停效果:手型) color: #005189; (字体颜色为:#005189) } | <input type=”button” class=”fcs_input2btn” value=”按钮”/> |
下拉菜单 <select> <option></option> </select>
| fcs_inputSelect | .fcs_inputSelect{ width:100px;(长度为:100px) height:30px;(高度为:30px) font-size:12px;(字体大小:12px) color:black;(字体颜色:黑色) background-color:#E8F2FE;(背景色:#E8F2FE) } | <select class=”fcs_inputSelect”> <option></option> </select> |
对象于窗口水平垂直居中 | fcs_frame_container fcs_frame | .fcs_frame_container{ width:100%; (宽度为:100%窗口) height:100%; (高度为:100%窗口) padding:0px;(内边距为:0px) } .fcs_frame{ position:absolute; (位置为:absolute) display:block; (显示方式为:block) top:50%; (上距:50%窗口) left:50%;(左距:50%窗口) width:Xpx; (宽度:X px) height:Ypx; (长度:Y px) margin:-Y/2 px 0 0 –X/2px; (外边距:上-Y/2 px、右0、下0、左-X/2 px) } | 在body内套上两个div,外层定义class为frame_container,内层定为frame,然后定义内层的width和height值为X和Y, 并按照格式定义margin值 |
对象于窗口水平居中 | fcs_frame_container fcs_frame | .fcs_frame_container{ width:100%; (宽度为:100%窗口) padding:0px; (内边距为:0px) } .fcs_frame{ position:absolute; (位置为:absolute) display:block; (显示方式为:block) left:50%; (左距:50%窗口) width:X px; (宽度:X px) margin:0 0 0 –X/2px; (外边距:上0、右0、下0、左-X/2 px)
} | 在body内套上两个div,外层定义class为frame_container,内层定为frame,然后定义内层的width值为X, 并按照格式定义margin值 |
Demo网页的HTML文件FCS_CSS_DEMO.html
高亮黄底的文本为以给出定义的标签类型和引用类型,将此FCS_CSS_DEMO.html文件和下面的FCS_CSS.css文件放在同一目录下,使用浏览器打开html文件可查看此DEMO。
<html>
<title>FCS_CSS_DEMO</title>
<head>
<!—引入FCS_CSS.css文件 -->
<link href="FCS_CSS.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="fcs_frame-container">
<div class="fcs_frame">
<p>
<h1>H1标题</h1><br />
<h2>H2标题</h2><br />
<h3>H3标题</h3><br />
<h4>H4标题</h4><br />
<h5>H5标题</h5><br />
</p>
<p>
正文字体<br />
</p>
<p>
链接:<a href="www.huateng.com">华腾主页</a><br />
</p>
<p>
<font class="fcs_errorFont">错误提示</font><br />
</p>
<p>
输入框:<input type="text" class="fcs_inputTxt" value="输入框" /><br />
</p>
<p>
按钮:<input type="button" class="fcs_input2Btn" value="按钮" /><br />
</p>
<p>
按钮:<input type="button" class="fcs_input4Btn" value="四字按钮" /><br />
</p>
<p>
下拉列表:<select class="fcs_inputSelect">
<option>1</option>
<option>2</option>
<option>3</option>
</select><br />
</p>
<p>
<table class="fcs_tbl" cellpadding="0" cellspacing="0">
<tr class="title">
<td>
标题一
</td>
<td>
标题二
</td>
<td>
标题三
</td>
<td>
标题四
</td>
</tr>
<tr class="white" onMouseOver="this.className='yellow'" onMouseOut="this.className='white'">
<td>
单元一
</td>
<td>
单元二
</td>
<td>
单元三
</td>
<td>
单元四
</td>
</tr>
<tr class="gray" onMouseOver="this.className='yellow'" onMouseOut="this.className='gray'">
<td>
单元一
</td>
<td>
单元二
</td>
<td>
单元三
</td>
<td>
单元四
</td>
</tr>
<tr class="white" onMouseOver="this.className='yellow'" onMouseOut="this.className='white'">
<td>
单元一
</td>
<td>
单元二
</td>
<td>
单元三
</td>
<td>
单元四
</td>
</tr>
<tr class="gray" onMouseOver="this.className='yellow'" onMouseOut="this.className='gray'">
<td>
单元一
</td>
<td>
单元二
</td>
<td>
单元三
</td>
<td>
单元四
</td>
</tr>
</table>
</p>
</div>
</div>
</body>
Demo网页的CSS文件FCS_CSS.css
body{
background-color:#DFE8F6;
font-family: 'lucida grande', helvetica, verdana, arial, sans-serif;
font-size:12px;
}
h1 { font-size: 2em; font-family:"华文中宋"}
h2 { font-size: 1.8em; font-family:"华文中宋" }
h3 { font-size: 1.6em; font-family:"华文中宋"}
h4 { font-size: 1.4em; font-family:"华文中宋" }
h5 { font-size: 1.2em; font-family:"华文中宋" }
a {
font-size: 12px;
color: blue;
text-decoration: none;
}
a:visited {
color: green;
}
a:hover {
text-decoration: underline;
}
.fcs_tbl{
border-left: 0;
border-right:0;
font-size:12px;
text-align:center;
vertical-align:middle;
}
.fcs_tbl tr{
height:28px;
}
.fcs_tbl tr.title{
font-size:14px;
color:#FFFFFF;
text-align:center;
padding:2px 10px 0px 10px;
font-weight:bold;
border-color:#FFFFFF;
background-color:#729FCF;
}
.fcs_tbl tr.white{
border:none;
background-color:#FFFFFF;
}
.fcs_tbl tr.gray{
background-color:#EFEBE7;
}
.fcs_tbl tr.yellow{
background-color:#FDECAE;
}
.fcs_errorFont{
font-size: 12px;
color:red;
}
.fcs_inputTxt{
line-height:20px;
width: 120px;
height:22px;
color:black;
border: 1px solid #6699ff;
font-size:12px;
}
.fcs_input2btn {
width:40px;
height: 22px;
border:#2c59aa 1px solid;
padding: 2px 2px 0px 2px;
font-size: 12px;
filter:progid:dximagetransform.microsoft.gradient(gradienttype=0,startcolorstr=#ffffff,endcolorstr=#c3daf5);
cursor: hand;
color: #005189;
}
.fcs_input4btn {
width:66px;
height: 22px;
border:#2c59aa 1px solid;
padding: 2px 2px 0px 2px;
font-size: 12px;
filter:progid:dximagetransform.microsoft.gradient(gradienttype=0,startcolorstr=#ffffff,endcolorstr=#c3daf5);
cursor: hand;
color: #005189;
}
.fcs_inputSelect{
width:100px;
height:30px;
font-size:12px;
color:black;
background-color:#E8F2FE;
}
.fcs_frame_container{
width:100%;
height:100%;
padding:0px;
}
.fcs_frame{
position:absolute;
display:block;
top:50%;
left:50%;
border:1px solid #000066;
width:800px;
height:600px;
margin:-300px 0 0 -400px;
}