郑州网站建设业务咨询热线:0371-65349913 / 15333818157
当前位置:网站首页 >> 建站知识 >>

利用CSS技术动态控制网页文本的样式


发布人:郑州网站建设公司(郑州凯讯)    发布日期:2015-03-07

在网页制作中,如果能够动态地改变文字的样式,这将对网页起到很好的渲染作用,无形中提升了网站的体验效果。在本页内,我们郑州网站建设公司整理了几个利用CSS技术能够动态改变网页文字样式的例子。在本例中,提供了部分代码,相对比较简单,样式改变应用到了<p>标签的文字内,各位用户们如果掌握了如何动态改变文字样式后,可以将这一技术应用于多种网页元素上,如<span>、<div>、<table>等等,同时也可以根据自己的需要动态地改变成其他样式,这些都可以由代码灵活控制。为了便于各位理解,我们郑州网站建设公司在下面提供了图一、图二、图三、图四分别代表了下面代码中的<p>标签,下图中所显示的结果就是下面代码执行后随着鼠标移动所显示出来的结果。本例中的代码已经在多个浏览器上测试通过,各建站用户和网站建设技术人员可以做参考或者直接应用。

动态改变文字样式实例图片

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>利用CSS技术动态控制网页文本的样式(本实例由郑州网站建设公司--郑州凯讯公司提供)</title>

<style type="text/css">
<!--
p {width:130px; font-size:14px;}

.style1 { font-size:18px}
.style2 { font-size:14px}

.style3 { font-size:18px; color:#0000FF;}
.style4 { font-size:14px; color:#00ff00; }

.style5 { background: #99CCFF;}
.style6 { background: #FFFFFF;}

.style7 { background: url(wzjs.jpg) no-repeat; }
.style8 { background: #FFFFFF}
-->
</style>

</head>
<body>

<p onmouseover="this.className='style1'" onmouseout="this.className='style2'">当鼠标在这段文字上时,文字变大,鼠标离开时变小。</p>

<p onmouseover="this.className='style3'" onmouseout="this.className='style4'">当鼠标在这段文字上时,文字为蓝色大号字变大,鼠标离开变为绿色小号字。</p>

<p onmouseover="this.className='style5'" onmouseout="this.className='style6'">当鼠标在这段文字上时,文字有背景色,当鼠标离开时背景色消失。</p>

<p onmouseover="this.className='style7'" onmouseout="this.className='style8'">当鼠标在这段文字上时,文字有背景图片,鼠标离开时背景图片消失。</p>

</body>
</html>

郑州网站建设优惠活动图片
网站页脚banner图片

版权所有:郑州凯讯