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

最新推荐文章于 2023-03-09 14:25:43 发布

Bird

最新推荐文章于 2023-03-09 14:25:43 发布

阅读量1.6k

点赞数 2

分类专栏： HTML 文章标签： css html class filter

本文链接：https://blog.csdn.net/a352193394/article/details/7314552

版权

HTML 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

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>

效果如下

没有放上鼠标的时候