您现在的位置: 365建站网 > 365学习 > CSS样式特效

CSS样式特效

文章来源:365jz.com     点击数:516    更新时间:2009-09-15 09:49   参与评论

一、样式表类型:

  1、行内样式表 :可以定义页面中的任何标签。

      如:<input style="border-width:1px;border-style:solid;"size=15 name=txtName>

  2、内嵌样式表: 先在<head>与<head>中定义,在调用。

      定义:

     <STYLE type="text/CSS" >//定义</style>

      调用:

     <DIV id="content">、class="picButton"、 <TD align=right colspan=2><A href="#">免费注册</A></TD>

  3、外部样式表:写入文件,扩展名为.css

      调用先链接样式文件,然后在应用在标签中:<LINK href="outcss_file.css" rel="stylesheet" type="text/css">

      或者:<STYLE type="text/css" >@import outcss_file.css</style>

二、常用样式

     1、文本属性

          font-size:字体大小  font-family:字体类型 font-style:字体样式 color   text-align:文本对齐

     2、背景属性

          background-color:背景颜色   background-image    background-repeat:设置一个指定的图像如何被重复

     3、组合属性

         A、不带下划线的超链接样式 A{ } A:hover{ }

         B、细边框样式.boxBorder{ }

         C、图片按钮样式.picButton{ } 

 三、制作改变字体大小的样式特效: 

/*鼠标在超链接上悬停时变为颜色*/     
A:hover

   color: red;
   }


/*应用*/
<A href="#" onMouSEOver="this.style.fontSize='24px'" onMouseOut="this.style.fontSize='14px'">免费注册</A>

 

四、制作该变按钮背景图片的特效:

 

Code

 

五、层的显示/隐藏特效

 如:document.getElementById("advlayer").style.display="none";

       document.getElementById("advlayer").style.display="block";

注意:层的堆叠次序(z-index)

六、图片的显示/隐藏特效

 

Code

 

Tag标签: JS,CSS

如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛


发表评论 (516人查看0条评论)
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
用户名: 验证码: 点击我更换图片
最新评论
------分隔线----------------------------