main.css:
div{
height:400px;
}
01css的引入方式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS的引入方式</title>
<link rel="stylesheet" type="text/css" href="css/main.css"/>
<!--css选择器 优先级 id选择器>类选择器>标签名选择器-->
<style type="text/css">
/*标签名选择器*/
span{
color:yellow;
}
/*id选择器*/
#header{
width:800px;
height: 500px;
margin: auto;
border: 2px double green;
}
#one{
width:800px;
height: 100px;
background-color: red;
}
#two{
width:800px;
height: 200px;
background-color: orchid;
}
/*类选择器*/
.c1{
font-family: "Kaiti";
}
#three > a:link {
color: red;
}
#three >a:hover{
color: yellow;
}
#three >a:visited{
color:pink;
}
#three >a:active{
color:green;
}
/*子代选择器*/
#three > .c1{
font-size: 30px;
}
/*后代选择器*/
#header a{
text-decoration: none;
}
#three a{
font-size:26px;
}
/*群组选择器*/
#header .c1, .c2{
background-color: goldenrod;
}
#header p, #pdd{
color: red;
}
/*兄弟选择器 div+p p+p*/
</style>
</head>
<body>
<div id="header">
<p class="c1">那就一起头也不回地向着光亮走下去吧</p>
<span>哈哈啊哈哈哈哈啊</span>
<div id="one" class="c1"></div>
<div id="two"></div>
<div id="three" >
<a href="###" id="jd" class="c2">京东</h2>
<a href="###" id ="tb" class="c1 c2">淘宝</span>
<a href="###" id="pdd">拼多多</span>
<div><a href="###" id="elm" class="c2">饿了吗</a></div>
</div>
</body>
</html>
网友评论