css之html选择器---shinepans

浏览数：81 / 时间：2015年06月09日

css1.css:

.s1{   /*类选择器*/
	color:pink;
	font-size:30px; /*font-weight 粗体等 font-style  normal italic:斜体 oblique倾斜的字体*/
	text-decoration:line-through;
}
.s2{
	color:red;
	font-size:25px;
	font-style:italic;
	text-decoration:underline;
}
.s3{
	color:blue;
	font-size:20px;
	font-weight:bold;
	text-decoration:blink;
}
.s4{
	color:yellow;
	font-size:15px;
	font-style:oblique;
	text-decoration:overline;
}
.s5{
	color:orange;
	font-size:10px;
}

/*text-decoration:none,underline 下划线 blink闪烁 overline line-through*/
img{
	filter:gray;
}

/*hover 鼠标悬停时的样式*/
#id1{
	background-color:silver;
	font-size:50px;
	font-color:black;
}

#id2{
	background-color:pink;
	font-size:30px;
}

#id2:hover{
	background-color:yellow;
	font-size:50px;
}

#id3{
	background-color:yellow;
	font-size:30px;
}
 
#id3:hover{
	background-color:green;
	font-size:50px;
}

#id4{
	background-color:orange;
	font-size:30px;
}

#id4:hover{
	background-color:blue;
	font-size:50px;
}

#id5{
	background-color:blue;
	font-size:30px;
}

#id5:hover{
	background-color:yellow;
	font-size:50px;
}

#id6{
	background-color:silver;
	font-size:30px;
}

#id6:hover{
	background-color:blue;
	font-size:50px;
}


a:link{
	color:black;
	background-color:pink;
	text-decoration:none;
	font-size:24px;
}
a:hover{
	text-decoration:underline;
	background-color:yellow;
	font-size:40px;
	color:green;
}

html:

<html>
<meta http-equiv="content-type" content="text/html;charset=UTF-8"/>
<link rel="stylesheet" type="text/css" href="css1.css"/>
<center>
	<body>
		<span id="id1">css选择器之HTML选择器</span>
		<br/>
		<br/>
		<br/>
		<span id="id2">这是第二个ID</span><br/><br/>
		<span id="id3">这是第三个ID</span><br/><br/>
		<span id="id4">这是第四个ID</span><br/><br/>
		<span id="id5">这是第五个ID</span><br/><br/>
		<span id="id6">这是第六个ID</span><br/><br/>
	    <br/>
		<br/>
		<a href="http://sohu.com">打开搜狐</a>
		<a href="http://baidu.com">打开百度</a>
		<a href="http://qq.com">打开腾讯</a>
		<a href="http://360.com">打开360</a>
		<a href="http://hao123.com">打开hao123</a>
		<a href="http://youku.com">打开优酷</a>
		<a href="http://sina.com">打开新浪</a>
		<a href="http://yahu.com">打开雅虎</a>
		<a href="http://bing.com">打开bing</a>
		<a href="http://microsoft.com">打开微软</a>
		<a href="http://jw1.hustwenhua.net">打开教务</a>
		<a href="http://csdn.net">打开CSDN</a>
	</body>
</center>
</html>

总结:要善于使用css,使网页更美观

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

css之html选择器---shinepans

标签： csscss