css之html选择器-shinepans_html/css_WEB-ITnose-html教程-PHP中文网

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

php中文网

发布： 2016-06-24 11:52:39

原创

1375人浏览过

立即学习“前端免费学习笔记（深入）”；

Calliper 文档对比神器

文档内容对比神器

查看详情

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,使网页更美观