css滤镜实例

最新推荐文章于 2019-03-30 15:09:03 发布

wxb609

最新推荐文章于 2019-03-30 15:09:03 发布

阅读量309

点赞数

CSS有两种方式，一个在HTML网页内部写的CSS 叫做内部CSS，还有一种在外部文件中的写的CSS 叫做外部
CSS。下面来演示一下内部CSS的写法.首先还是建立一个HTML网页。源代码如下
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里面的滤镜技术，下面我们来演示来
演示一下这个效果。当鼠标没有放在图片上的时候，图片是灰色的，当鼠标悬停在图片上的时候，图片就会变成她自
己原来的颜色。代码如下
Html代码  收藏代码
<!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>

效果如下
没有放上鼠标的时候
这里写图片描述

放上鼠标的时候

这里写图片描述

wxb609

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css滤镜实例

CSS有两种方式，一个在HTML网页内部写的CSS 叫做内部CSS，还有一种在外部文件中的写的CSS 叫做外部 CSS。下面来演示一下内部CSS的写法.首先还是建立一个HTML网页。源代码如下 Html代码收藏代码 css1.html <style type="text/css"> .style1{
复制链接

扫一扫