内部CSS统一定色和滤镜技术实例-优快云博客

本文演示了CSS内部样式的使用方法及滤镜技术如何在网页中实现图片颜色变化，包括图片在鼠标悬停时的显示效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS有两种方式，一个在HTML网页内部写的CSS 叫做内部CSS，还有一种在外部文件中的写的CSS 叫做外部

CSS。下面来演示一下内部CSS的写法.首先还是建立一个HTML网页。源代码如下

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>css1.html</title> <style type="text/css"> .style1{ font-size: 20px; color: red; font-weight: bold; font-style: italic; } </style> </head> <body> <span class="style1">栏目一</span><br/> <span class="style1">栏目二</span><br/> <span class="style1">栏目三</span><br/> <span class="style1">栏目四</span><br/> <span class="style1">栏目五</span><br/> <br> </body> </html>
这样在head元素里面写的css就叫做内部css。这样的好处是更加方便观察，而且对于整个网页的界面的同意美观都有

非常的好处.

下面再来说一下滤镜技术，在一些国家纪念日或者想当年的汶川大地震的时候，很多网站的图片的颜色都变成了灰

色，这样的技术是如何实现的呢？肯定不需要一个一个元素的改，这就需要CSS里面的滤镜技术，下面我们来演示来

演示一下这个效果。当鼠标没有放在图片上的时候，图片是灰色的，当鼠标悬停在图片上的时候，图片就会变成她自

己原来的颜色。代码如下

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>test1.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <style type="text/css"> /*使用滤镜*/ a:link img { filter:gray; } a:hover img{ filter:""; } </style> </head> <body> <a href="#"><img alt="一个猫" src="/HTML/img/cat.jpg" /></a> <a href="#"><img alt="一个猫" src="/HTML/img/cat1.jpg" /></a> <a href="#"><img alt="一个猫" src="/HTML/img/cat2.jpg" /></a> </body> </html>
效果如下

没有放上鼠标的时候