样式表的引用顺序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*样式表的引用关系，以标签为起始位置，由下而上的进行显示*/
.c1{
background-color: red;width:100px;height: 100px;
}
</style>
<link rel="stylesheet" href="c2.css">
</head>
<body>
<div class="c1" style="background-color: blue;width:100px;height:100px;"></div>
</body>
</html>
CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--引入css 样式表-->
<!--<link rel="stylesheet" href="c.css">-->
<!--css 选择器-->
<style>
/*id选择器*/
/*#i1{*/
/**/
/*width: 200px;*/
/*height: 200px;*/
/*}*/
/*class 选择器*/
/*.c1{*/
/**/
/*width: 100px;*/
/*height: 100px;*/
/*}*/
/*标签选择器*/
/*div{*/
/**/
/*width: 100px;*/
/*height: 100px;*/
/*}*/
/*层级选择器*/
/*div span{*/
/**/
/*}*/
/*id层级选择器*/
/*#i1 span{*/
/**/
/*}*/
/*class 层级选择器*/
/*.c1 span{*/
/**/
/*}*/
/*多个标签引用同一个css样式*/
/*#i1,#i2,#i3 {*/
/**/
/*width: 100px;*/
/*height: 48px;*/
/*}*/
/*最常用class选择器*/
/*.c1 {*/
/**/
/*width: 100px;*/
/*height: 48px;*/
/*}*/
/*第二种可以在head中增加style标签 style中通过选择器定位白标签增加css样式*/
/*.c2:hover{*/
/**/
/*}*/
.c1{
width: 20px;
height: 20px;
/*border: 1px red solid;*/
margin:0 auto;
background-image: url('../../学习/视频/天蝎座/day12/SYZtester/icon.png');
background-position-x: 73px;
background-position-y: 140px;
}
</style>
</head>
<body style="margin: 0;">
<!--<div class="c2" style="width: 100px;height: 100px;border: 1px red solid"></div>-->
<!--id在html页面中 只允许1个同命id-->
<!--<div id="i1"></div>-->
<!--<div class="c1"></div>-->
<!--<div id="i1">-->
<!--<span>这是span标签</span>-->
<!--</div>-->
<!--<div class="c1">-->
<!--<span>这是span标签</span>-->
<!--</div>-->
<!--<div id="i1"></div><br>-->
<!--<div class="c1"></div><br>-->
<!--<div class="c1"></div>-->
<!--第一种增加css样式的方法 ，在标签中增加style属性-->
<!--<div style="width: 80px;height: 80px"></div>-->
<!--<div class="c1">-->
<!--<span>11111</span>-->
<!--</div>-->
<!--<div id="i1">-->
<!--<span>11111</span>-->
<!--</div>-->
<!--<div style="font-size: 48px">这是div加大字体</div>-->
<!--<div>这是div正常</div>-->
<!--<div style="font-weight: bolder">这是div加粗</div>-->
<!--<div style="width: 100%;height: 100px;border: 1px red solid;text-align: center;line-height: 100px">1</div>-->
<!--1、float 的div如果超过100%宽度则自动换行-->
<!--2、float 不可以重叠-->
<!--<div style="border: 1px blue solid">-->
<!--<div style="width: 80px;height: 48px;</div>-->
<!--<div style="width: 80px;height: 48px;</div>-->
<!--<div style="width: 80px;height: 48px;</div>-->
<!--</div>-->
<!--<div style="border: 1px blue solid">-->
<!--<div style="width: 80px;height: 48px;float: left"></div>-->
<!--<div style="width: 80px;height: 48px;float: right"></div>-->
<!--<div style="width: 80px;height: 48px;float: left"></div>-->
<!--<!–清除浮动效果–>-->
<!--<div style="clear: both"></div>-->
<!--</div>-->
<!--<div style="height: 48px;width: 80%;float: left"></div>-->
<!--<div style="width: 100px;height: 48px;float: left"></div>-->
<!--<span style="width: 80px;height: 80px;border: 1px red solid">123123</span>-->
<!--display属性-->
<!--display:inline 块级标签变为内联标签-->
<!--<div style="display: inline;123123123123</div>-->
<!--<span style="width: 80px;height: 80px;display: block"></span>-->
<!--<span style="width: 80px;height: 80px;display: inline-block"></span>-->
<!--display none 隐藏标签-->
<!--<div style="width: 80px;height: 80px;</div>-->
<!--外边距 不改变自身，改变的是与外层之间的距离-->
<!--<div style="width: 100%;height: 80px;border: 1px blue solid">-->
<!--<div style="width: 100%;height: 40px;margin-top: 10px"></div>-->
<!--</div>-->
<!--内边距 扩展自身-->
<!--<div style="width: 100%;height: 80px;border: 1px blue solid">-->
<!--<div style="width: 100%;height: 40px;padding-top: 10px;"></div>-->
<!--</div>-->
<!--<div style="width: 100%;height: 48px;</div>-->
<!--<div style="height: 48px;position: fixed;top: 0;right: 0;left: 0"></div>-->
<!--<div><input type="button" value="按钮" style="cursor:move"></div>-->
<!--<div style="width: 100px;height: 48px;border: 1px red solid;position: relative">-->
<!--<div style="width: 100px;height: 48px;position: absolute;z-index: 10"></div>-->
<!--<div style="width: 100px;height: 48px;position: absolute;z-index: 9"></div>-->
<!--</div>-->
<!--hidden 根据div的大小进行切图，只取左上角的图片。-->
<!--auto 自动增加滚动条，好处是如果图片小于div的话不会出现滚动条的样式-->
<!--scroll 主动增加滚动，无论是否超过div的宽和高-->
<!--<div style="width: 200px;height: 200px;overflow: scroll">-->
<!--<img src="b.jpg">-->
<!--</div>-->
<!--当背景图不够div的大小时，它会 横向 纵向 堆叠-->
<!--<div style="width: 100%;height: 1000px;border: 1px red solid;background-image: url('logo.jpg');background-repeat: repeat-y"></div>-->
<div class="c1"></div>
</body>
</html>
position
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--<div style="width:200px;height: 200px;border:1px red solid;margin: 0 auto;position:relative">-->
<!--<div style="width:30px;height:30px;position: absolute;bottom: 0;left:0"></div>-->
<!--<div style="width:30px;height:30px;position: absolute;bottom:0;right:0"></div>-->
<!--<div style="width:30px;height:30px;position: absolute;top:0;left:0"></div>-->
<!--<div style="width:30px;height:30px;position: absolute;top:0;right:0"></div>-->
<!--</div>-->
<!--<input type="button" value="按钮">-->
</body>
</html>
