首页 > 代码库 > css之html选择器---shinepans

css之html选择器---shinepans

2024-08-06 21:30:57   218人阅读



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=http://www.mamicode.com/"css1.css"/>>


总结:要善于使用css,使网页更美观
css之html选择器---shinepans


联系
我们