![](https://img-blog.csdn.net/20131106094510250?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvaHVhbmcyMDA5MzAzNTEz/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>HtmlPage1.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<link rel="stylesheet" href="htmlpage1.css" type="text/css"></link>
</head>
<body>
这里是北极
<span class="style1" id="special_new">新闻1</span>
<span class="style1">新闻2</span>
<span class="style1 style4" >新闻3</span>
<span class="style1">新闻4</span>
<span class="style1">新闻5</span>
<br/>
<span id="style2">这是一则<span>很<span>重</span>要</span>的新闻</span>
<br/>
<a href="#">goto sohu</a><br/>
<a href="#">goto sina</a><br/>
</body>
</html>
/*类选择器*/
.style1{
font-weigth:bold;
font-size:20px;
background-color:pink;
color:black;
}
/*这是一个id选择器*/
#style2{
font-size:30px;
background-color: silver;
color:black;
}
/*选择器的优先级是id>类>html选择器*/
/*html的选择器,body那个名字可以是任何html标签名称*/
body{
color:orange;
}
/*a这种标签连接的时候*/
a:link{
color:black;
text-decoration: none;
}
/*a这种标签当鼠标在上面悬浮的时候添加下划线*/
a:hover{
text-decoration: underline;
}
/*a这种标签里面点击完以后字体变红色*/
a:visited{
color:red;
}
/*如果希望所有的标签都适合某种样式,用通配符选择器*/
/*对外边距和内边距清0*/
*{
/*margin:0px;*/
/*margin-top:10px;
margin-left:10px;
margin-right:0px;
margin-bottom:0px;*/
margin:10px 0px 0px 10px;/*表示上右下左*/
padding:0px; /*用法和margin一样*/
}
/*style2下面的一个选择器,父子选择器,在style2里面的span标签里面的内容设置*/
/*父子选择器可以适用于id选择器和class选择器*/
#style2 span{
color:red;
font-style:italic;
}
/*重字设置*/
#style2 span span{
font-size:50px
}
/*新闻一设置*/
#special_new{
font-style:italic;
color:red;
}
/*一个元素最多有一个id选择器,可以有多个类选择器*/
/*给新闻三再指定一个类选择器,添加下划线,斜体*/
.style4{
font-style:italic;
text-decoration: underline;
color:green;
}
/*css中同一种样式发生冲突的时候,在css文件中在后面的起作用,比如说sytle4和sytle1,多个选择器用空格隔开*/
/*优先级:id选择器>类选择器>html选择器>通配符选择器*/
/*可以把多个类选择器和id选择器共同的属性提取出来写在一起,可以简化css文件和节约流量*/