韩顺平网页第十一讲

最新推荐文章于 2019-05-15 12:33:35 发布

NS西北风

最新推荐文章于 2019-05-15 12:33:35 发布

阅读量753

点赞数

分类专栏： html+css+js

本文链接：https://blog.csdn.net/huang2009303513/article/details/14222603

版权

html+css+js 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

<!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文件和节约流量*/