欢迎光临
我们一直在努力

让字体美起来(3)-网页设计,HTML/CSS

建站超值云服务器,限时71元/月

    三.让字体动起来

  要让字体动起来,我们可以利用本身css的事件或者让javascript引发事件。

  1.css引发事件

  例一

<html>

<head>

</head>

<body>

<p><a href=”http://zgrtt.yeah.net/”>田涛</a></p>
</body>
</html>

  link定义的是链接在页面显示的颜色(黑色)及链接没有下划线,visited定义的是单击链接后的颜色(白色),hover定义的是指向链接时的动态颜色。以上实例表示,当指向链接“田涛”后字体颜色从黑色变成蓝色,并加下划线,单击链接后,链接颜色变成白色。

  例二

<html>

<head>
<title></title>
</head>

<body>

<p onmouseover=”this.style.fontsize=200″ onmouseout=”this.style.fontsize=100″>田涛 </p>
</body>
</html>

  以上实例是利用内联改变字体样式,当鼠标指向“田涛”时字体因为定义了this.style.fontsize=200,这两个字放大至200pt,当鼠标移开“田涛”时,因定义了this.style.fontsize=100,这两个字体缩小到100pt.

  2.javascript引发事件

<html>

<head>

</head>

<body>

<h1 id=”h1_1″ class=”bold” onmouseover=”changehead()” onmouseout=”changehead()”>田涛 </h1>
</body>
</html>

  在上面的实例当中,我们首先定义了两个css类h1.italic和h1.bold,然后利用javascript脚本定义函数 changehead(),最后在需要的地方引发事件执行定义好的函数。这里我们引发了两个单击事件onmouseover和onmouseout。在这里我还要说一点,因为你定义了h1两个类h1.italic 和h1.bold,所以当你在引用时,要首先设置class=”bold”,表示字体以bold样式出现。然后,移动鼠标到“田涛”上,触发了事件一,移开“田涛”时,触发了事件二。

  对于动态字体,我们还有很多方法来完善它。只是在考虑利用动态字体时,需要了解不同浏览器会产生不一样的结果。这时侯,就需要不停测试,来找到一个两全其美的方法。最后,希望你在看完这篇文章后,找一点css及javascript的资料来看,因为它们才是实现所有“梦想”的工具。

赞(0)
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com 特别注意:本站所有转载文章言论不代表本站观点! 本站所提供的图片等素材,版权归原作者所有,如需使用,请与原作者联系。未经允许不得转载:IDC资讯中心 » 让字体美起来(3)-网页设计,HTML/CSS
分享到: 更多 (0)