css中选择器的使用

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>

界面效果为：

还使用了滤镜，所以图片颜色都为灰色，但鼠标放上去后图片显示它原来的颜色。

posted @ 2012-05-01 10:14 Java EE 阅读(192) 评论(0) 编辑收藏举报

刷新页面返回顶部

Java EE

css中选择器的使用

公告