css中通过使用选择器，使界面整齐，使代码整洁。
各个选择器的使用代码如下：
@CHARSET "UTF-8";
/*使用类选择器*/
.style1{
font-size: 20px;
color: blue;
font-style: italic;
background-color: silver;
}
/*使用id选择器*/
#style2{
font-size: 50px;
color: purple;
}
/*使用html选择器 滤镜的使用*/
a:link img{
filter:gray;
}
a:hover img{
filter:"";
}
使用选择器的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">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<link href="my.css" type="text/css" rel="stylesheet">
</head>
<body>
<span class=style1>星期一</span>
<span class=style1>星期二</span>
<span class=style1>星期三</span>
<span class=style1>星期四</span>
<span class=style1>星期五</span>
<br/>
<span id=style2>劳动最光荣</span><br/>
<a href="#"><img src="/cssproject/img/1.jpg" width = 100px
height = 100px/></a>
<a href="#"><img src="/cssproject/img/2.jpg"width = 100px
height = 100px/></a>
<a href="#"><img src="/cssproject/img/3.jpg"width = 100px
height = 100px/></a>
<a href="#"><img src="/cssproject/img/4.jpg"width = 100px
height = 100px/></a>
</body>
</html>
界面效果为：
还使用了滤镜，所以图片颜色都为灰色，但鼠标放上去后图片显示它原来的颜色。