标签：css
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> <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
原文地址：http://blog.csdn.net/shinepan/article/details/41809079
