内部CSS统一定色和滤镜技术实例

来源：互联网发布：超级终端软件编辑：程序博客网时间：2024/05/18 03:37

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>

效果如下

没有放上鼠标的时候

放上鼠标的时候