Heim > Web-Frontend > HTML-Tutorial > css之html选择器-shinepans_html/css_WEB-ITnose

css之html选择器-shinepans_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 11:52:39
Original
1272 Leute haben es durchsucht



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;}
Nach dem Login kopieren

html:



<meta http-equiv="content-type" content="text/html;charset=UTF-8"><link rel="stylesheet" type="text/css" href="css1.css"><center>			<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>	</center>
Nach dem Login kopieren



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

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage