4。1 CSS样式表
4。1。1 样式表的类型
行内样式表,内嵌样式表和外部样式表。
1。行内样式表
行内样式表是混合在HTML标签使用的,用这种方法,可以简单地对页面中的任何标签单独定义样式,只需在开始标签中包含一个style属性,后面再跟一个或多个属性及其属性值即可。
示例1:
<html>
<head>
<title>行内样式应用</title>
<style type="text/css">
A{
color:blue;
text-decoration:none;
}
A:hover
{
color:red;
}
</style>
</head>
<body>
<form action="" method="post">
<table border=0 align="center">
<tr align=left>
<td width="120">会员名:</td>
<td width="145">
<input style="border-width:1px;border-style:solid;" size=15 name=txtName>
</td>
</tr>
<tr align=left>
<td>密 码:</td>
<td>
<input style="border-width:1px;border-style:solid;" type="password" size=15 name="txtPass"></td>
</tr>
<tr>
<td height="30" colspan=2 align=center>
<input name="button" type="button" style="background-image:url(images/back1.jpg);color:#0000FF;border:0px;margin:0px; padding:0px;height:23px;width:82px;font-size:14px;" value="登录">
</td>
</tr>
</td align=right colspan=2><A href="#">免费注册</A></td>
</tr>
</table>
</form>
</body>
<p> </p>
<p></p>
</body>
</html>
2。内嵌样式表
内嵌样式表也称为嵌入样式表,它放置在<head>与</head>标签内,并且以<style type="text/css">开始,以</style>结束,这些定义的样式就可以应用到页面中。具体用法如示例所示。
示例2:
<html>
<head>
<title>内嵌样式应用</title>
<style type="text/css">
A
{
color:blue;
text-decoration:none;
}
A:hover
{
color:red;
}
.boxBorder
{
border-width:1px;
border-style:solid;
}
.picButton
{
background-image:url(images/back1.jpg);
color:0px;
margin:0px;
padding:0px;
height:23px;
width:82px;
font-size:14px;
}
#content{background-color:#E7FBFF;}
</style>
</head>
<body>
<div id="content">
<form action="" method="post">
<table border=0 align="center">
<tr align=left>
<td width="60">会员名:</td>
<td width="145">
<input id=txtName class=boxBorder size=15 name=txtName></td>
</tr>
<tr align=left>
<td>密 码</td>
<td>
<input id=txtPass class=boxBorder type=password size=15 name=txtPass></td>
</tr>
<tr>
<td height="30" colspan=2 align=center>
<input name=Button type="button" class="picButton" value="登录">
</td>
</tr>
<tr>
<td align=right colspan=2><A href="#">免费注册</A></td>
</tr>
</table>
</form>
</div>
</body>
<p> </p>
<p></p>
</body>
</html>
3。外部样式表
外部样式表是一个独立的文件,文件里定义了各种样式规则。这样,外部样式表可以被多个HTML页面所引用,在应用外部样式表是有两种方式:一种是在页面中使用<link>标签链接天外部样式文件;另一种是在页面中使用@import方法导入外部样式表。具休示例如下。
示例3:外部样式文件
A
{
color:blue;
text-decortion:none;
}
A:hover
{
color:red;
}
.boxBorder
{
border-width:1px;
border-style:solid;
}
.picButton
{
background-image:url(images/back1.jpg);
Color:#0000ff;
border:0px;
margin:0px;
padding:0px;
height:23px;
width:82px;
font-size:14px:
}
把样式文件和网页绑定,引用方式如下。
<html>
<head>
<title></titel>
<link rel="stylesheet" href="outcss_file.css" type="text/css">//链接外部样式表文件
</head>
<body>
<form action="" method="post">
<table border=0 align="center">
<tr align=left>
<td width="60">会员名:</td>
<td width="145">
<input class=boxBorder id=txtName size=15 name=txtName></td>
</tr>
<tr align=left>
<td>密 码:</td>
<td><input class=boxBorder id=txtPass type=password size=15 name=txtPass></td>
</tr>
<tr>
<td height="30" colspan=2 align=center>
<input name=Button type="button" class="picButton" value="登录"></td>
</tr>
<tr>
<td align=right colspan=2><A href="#">免费注册</A></TD>
</tr>
</table>
</form>
</body>
</html>
4。1。2 常用样式
1。文本属性
font-size 字体大小
font-family 字体类型
font-style 字本样式
color 设置或检索文本的颜色
text-align 文本对齐
2。背景属性
background-color 设置背景颜色
background-image 设置背景图像
background-repeat 设置一个指定的图像如何被重复
4。2 制作改变字本大小的样式特效
制作以下特效:当鼠标移动到文本“免费注册”超链接上方时,“免费注册”这几个字就变大并且颜色变为红色,当鼠标离开时这几个字就变小并且颜色变为蓝色,因此要为文本定义两个样式,鼠标的移动事件分别对应不同的样式。
示例4:
<html>
<head>
<title></title>
<style type="text/css">
A{
color:blue;
text-decoration:none;
}
A:hover
{
color:red;
}
.boxDorder
{
border-width:1px;
border-style:solid;
}
.picButton
{
background-image:url(images/back1.jpg);
color:#0000FF;
border:0px;
margin:0px;
padding:0px;
height:23px;
width:82px;
Font-size:14px;
}
</style>
</head>
<body>
<form action="" method="post">
<table border=0 align="center">
<tr align=left>
<td width="60">会员名:</td>
<td width="145">
<input class=boxBorder id=txtName size=15 name=txtName>
</td>
</tr>
<tr align=left>
<td>密 码:</td>
<td><input class=boxBorder id=txtPass type=password size=15 name=txtPass></td>
</tr>
<tr><td height="30" colspan=2 align=center>
<input name=Button type="button" class="picButton" value="登录">
</td>
</tr>
<tr>
<td align=right colspan=2>
<A href="#" onMouseOver="this.style.fontSize='24px'" onMouseOut="this.style.fontSize='14px'">免费注册</A></td>
</tr>
</table>
</form>
</body>
</html>
4。3 制作改变按钮背景图片的特效
当鼠标移到按钮上方时,按钮的背景图片变为另一幅图片,当鼠标移出按钮上方时,按钮的背景图片变为原始的效果。
示例5:
<html>
<head>
<titel></titel>
<style type="text/css">
.mouseOverStyle
{
background-image:url(images/back2.jpg);
color:#CC0099;
border:0px;
margin:0px;
padding:0px;
height:23px;
width:82px;
font-size:14px;
}
.mouseOutStyle
{
background-image:url(images/back1.jpg);
color:0000FF;
border:0px;
margin:0px;
padding:0px;
height:23px;
width:82px;
font-size:14px;
}
</style>
</head>
<body>
<form name="form1" method="post" action="">
<input type="submit" name="Submit" value="提交" class="mouseOverStyle" οnmοuseοver="this.className='mouseOverStyle'"
οnmοuseοut="this.className='mouseOutStyle'">
</form>
</body>
</html>
示例5中的样式为CSS样式,所按钮背景图片的设置使用了属性名为background-image,而不是Style对象中的属性名backgroundImage,请切记,否则出错还不知怎么回事。
4。4 层的显示/隐藏特效
在设计网页时,经常会碰到层的显示与隐藏特效,如下拉菜单等。其实这些特效都用到CSS样式中的display属性,它主要用来控制页面中的元素是否显示,从而实现页面中元素的显示各隐藏效果。下面对display属性的语法格式各其常用的取值进行详细的说明。
语法:
Object.stryle.display="value";
其中,Object指HTML文档中的页面元素,style为每个元素的样式属性,display表示页面元素以何种方式显示属性,如document.getElementById("pl").style.display="none";表示隐藏页面中ID名为pl的页面元素。value可以取十几个值如下
bolck 默认值。按块显示,换行显示,用该值为对象之后添加新行
none 不显示,隐藏对象
inline 按行显示,和其他元素在同一行显示
4。4。2 制作层的显示/隐藏特效
示例6:
<html>
<head>
<title></title>
<style type="text/css">
#advLayer{
position:absolute;
left:62px;
top:44px;
width:360px;
height:190px;
z-index:2;}
</style>
<script language="javascript">
function closeMe(){
document.getElementById("advLayer").style.display="none";}
function showMe(){
document.getElementById("advLayer").style.display="block";}
</script>
</head>
<body>
<p>
<input name="placeButton" type="button" onClick="closeMe()" value="关闭层">
<input name="placeButton2" type="button" onClick="showMe()" value="弹出层">
</p>
<div id="advLayer"><img src="images/advPic.jpg" width="360" height="190">
</div>
<h1>层下方的内容</h1>
<h1>层下方的内容</h1>
<h1>层下方的内容</h1>
<h1>如果修改代码:去除层DIV的样式</h1>
<h1>将出现内容动态隐藏显示的效果</h1>
</body>
</html>
4。5 图片的显示/隐藏特效
实现图片的切换特效
示例7:
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>图片的切换效果</TITLE>
<SCRIPT language="javascript">
function InitImage( ){
document.getElementById("gameTab2").style.display="none";
document.getElementById("game").style.display="none";
document.getElementById("mobileTab1").style.display="none";
}
function TabChange(show,hidden) {
document.getElementById(show ).style.display="block";
document.getElementById(hidden ).style.display="none";
document.getElementById(show+"Tab1").style.display="none";
document.getElementById(hidden+"Tab2").style.display="none";
document.getElementById(hidden+"Tab1").style.display="block";
document.getElementById(show+"Tab2").style.display="block";
}
</SCRIPT>
</HEAD>
<BODY onLoad="InitImage( )">
<TABLE border="0" align="center" cellpadding="0" cellspacing="0">
<TR>
<TD><IMG id="gameTab1" src="images/gameTab1.jpg" width="83" height="47" onMouseOver="TabChange('game','mobile')" >
<IMG id="gameTab2" src="images/gameTab2.jpg" width="83" height="49"></TD>
<TD><IMG id="mobileTab1" src="images/mobileTab1.jpg" width="81" height="49" onMouseOver="TabChange('mobile','game')">
<IMG id="mobileTab2" src="images/mobileTab2.jpg" width="82" height="47"></TD>
</TR>
<TR>
<TD colspan="2"><IMG id="mobile" src="images/mobile.jpg" width="165" height="171">
<IMG id="game" src="images/game.jpg" width="164" height="169" ></TD>
</TR>
<TR>
<TD colspan="2"><IMG src="images/fly.jpg" width="165" height="43"></TD>
</TR>
</TABLE>
</BODY>
</HTML>