让字体美起来
对于以上的字体设置,我们可以采用一个方便的方法: copyright dedecms
<spanstyle="font:normalbold14pt黑体">田涛</span> 内容来自dedecms
在style定义的次序是:font-style,font-weight,font-size,font-family.
内容来自dedecms
2.CSS定义字体和<font>定义字体的冲突 内容来自dedecms
对于CSS定义字体和<font>定义字体,我们都要注重以下问题,比如有以下字体设置: 本文来自织梦
<spanstyle="font-family:宋体(KSC);font-size:200pt"><font>田涛</font></span> 织梦好,好织梦
这时侯字体大小将以font-size:200pt的定义来设置。但假如你在<font>中加入size属性,比如:
<spanstyle="font-family:宋体(KSC);font-size:200pt"><fontsize="5">田涛</font></span> 内容来自dedecms
这时侯,字体的大小以size的设置为准,font-size:200pt将不起作用。其它的属性也是一样。假如你无需动态字体,就利用HTML4.0的<font>来定义字体,需要动态字体时,就需要使用CSS和JavaScritp来定义字体及引发事件。 内容来自dedecms
3.定义CSS字体属性类 dedecms.com
一般我们在制作动态字体时,我们会首先利用CSS定义出页面字体的整个属性,然后在页面中引用,而不用对每段文本进行设置,这也是实现动态字体首先一步。 织梦好,好织梦
<html>
<head>
<styletype="text/css">
内容来自dedecms
.tt2{font-family:"黑体";font-size:16px;font-style:normal;line-height:17px}
内容来自dedecms
</style> dedecms.com
</head>
<body>
copyright dedecms
<pclass="tt2">田涛</p>
</body>
</html>
在以上代码中,“田涛”两个字引用了.main_2类定义的字体样式。当然你可以在<style></style>中定义不同的字体样式,以便页面中根据不同字体加以引用。比如:
<html>
<head>
<styletype="text/css"> 内容来自dedecms
.tt1{font-family:"宋体";font-size:15px;font-style:normal;}
.tt2{font-family:"黑体";font-size:16px;font-style:normal;}
</style> 织梦内容管理系统
</head>
<body> 织梦内容管理系统
<pclass="tt1">田涛</p>
<pclass="tt2">田涛</p> 内容来自dedecms
</body>
</html>
对于CSS(层叠样式表)的更多介绍,请参看《计算机世界报》1998年8月10日第30期F15版文章《学写层叠样式表》或者网站http://zgrtt.yeah.net/ 织梦内容管理系统
三.让字体动起来 织梦内容管理系统
要让字体动起来,我们可以利用本身CSS的事件或者让JavaScript引发事件。
1.CSS引发事件
例一 织梦好,好织梦
<html> 内容来自dedecms
<head>
<styletype="text/css">
<!--
a:link{color:black;text-decoration:none}
a:visited{color:white;text-decoration:none}
a:hover{color:blue;text-decoration:underline}
-->
</style>
</head>
<body> 织梦好,好织梦
<p><ahref="http://zgrtt.yeah.net/">田涛</a></p>
</body>
</html>
link定义的是链接在页面显示的颜色(黑色)及链接没有下划线,visited定义的是单击链接后的颜色(白色),hover定义的是指向链接时的动态颜色。以上实例表示,当指向链接“田涛”后字体颜色从黑色变成蓝色,并加下划线,单击链接后,链接颜色变成白色。
织梦内容管理系统
文章评论
共有位Admini5网友发表了评论 查看完整内容