在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>
現在圖片正常顯示，鼠標暫時沒有放置到任何一張圖片上，效果如下：
把鼠標放在第一張圖片上，顯示的效果如下:
再把鼠標放在第四張圖片上,顯示的效果如下:
這就達到想要的圖片模糊的效果了.