DIV+CSS中的滤镜和模糊
在div＋css中，经常会用到div和span
当内容比较多的时候，会用到div
当内容比较少的时候，会用到span
来看下面的代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>DIV+CSS</title>
</head>
<body>
<span style="color:green;font-size:30px;">栏目一</span><br>
<span style="color:orange;font-size:16px;">栏目二</span><br>
<span style="color:blue;font-size:16px;font-style:italic;">栏目三</span><br>
<span style="color:green;font-size:16px;font-weight:bold;">栏目四</span><br>
<span style="color:navy;font-size:16px;font-weight:bold;">栏目五</span><br>
</body>
</html>
执行后的效果如下：
在这里设置了字体的粗细．
设置段落字体的粗细的属性：
font-weigth属性设置文本的粗细．
使用bold关键字可以将文本设置为粗体．
关键字100~900为字体指定了９级加粗度，如果一个字体内置了这些加粗级别，那么这些数字就直接映射到预定义的级别．
如果将元素的加粗设置为bolder,浏览器会设置比所继承值更粗的一个字体加粗．
与此相反，关键词lighter会导致浏览器将加粗度下移而不是上移．
p.normal{font-weight:normal;}
p.thick{font-weight:bold;}
p.thicker{font-weight:900}
看到上面的代码，是不是感觉很low.
假如现在想把上面的五行字都换成跟第一行字的效果一样，有什么好的办法呢？？？
来看下面的这段代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>DIV+CSS</title>
<style type="text/css">
.style1{
color:green;
font-size:30px;
}
</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>
</body>
</html>
刷新浏览器，效果如下：
这样想一次性修改五行的样式的话，就可以相接修改style里面的代码就可以了．
比如，现在想把五行的字体都变成斜体的话，就可以加上下面的属性就可以了．
font-style:italic;
修改后的代码如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>DIV+CSS</title>
<style type="text/css">
.style1{
color:green;
font-size:30px;
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>
</body>
</html>
刷新浏览器后得到的效果如下：
可以看到css可以统一网站的风格．
现在想把一个网站的所有图片都为成黑白色或者模糊，这个要怎么实现呢？？
代码如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>CSS的滤镜效果</title>
<style type="text/css">
a:link img {filter: grayscale(100%);}
a:hover img {filter: grayscale(10%);}
</style>
</head>
<body>
<a href="#"><img width="200px" src="1.jpg"></a>
<a href="#"><img width="200px" src="2.jpg"></a>
<a href="#"><img width="200px" src="1.jpg"></a>
<a href="#"><img width="200px" src="2.jpg"></a>
</body>
</html>
当图片正常显示，鼠标没有放在图片上的时候，图片显示的是灰色的；
当鼠标放置在图片上的时候，图片就变成正常颜色的了．现在把鼠标放在第一张图片上，显示的效果如下：
再把鼠标移动到第四张图片上，显示的效果如下：
这就是滤镜的效果．
再来看看使用css达到图片模糊的效果．
代码如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>CSS的滤镜效果</title>
<style type="text/css">
a:link img {filter:blur(10px);}
a:hover img {filter:blur(0px);}
</style>
</head>
<body>
<a href="#"><img width="200px" src="1.jpg"></a>
<a href="#"><img width="200px" src="2.jpg"></a>
<a href="#"><img width="200px" src="1.jpg"></a>
<a href="#"><img width="200px" src="2.jpg"></a>
</body>
</html>
现在图片正常显示，鼠标暂时没有放置到任何一张图片上，效果如下：
把鼠标放在第一张图片上，显示的效果如下:
再把鼠标放在第四张图片上,显示的效果如下:
这就达到想要的图片模糊的效果了.
