CSS定义指南

 

对象

引用类型

属性明细值

定义方法

背景颜色

 

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;

}