1.设置CSS样式的三种方式
①在HTML标签内设置,仅对当前标签有效
<div style="border: 1px solid black;width: 100px; height: 100px;"> </div>
②在head标签内设置,对当前页面有效 要是标签之间 标签名{} id的话是#id名{} class的话是 .class名{} 也可以使用 #id名 下面子标签名{}
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.one {
border: 1px solid black;
width: 100px;
height: 100px;
background-color: lightgreen;
margin-top: 5px;
}
</style>
</head>
<body>
<div style="border: 1px solid black;width: 100px; height: 100px;"> </div>
<div class="one"> </div>
<div class="one"> </div>
<div class="one"> </div>
</body>
③引入外部CSS样式文件 需要在外部文件.css中写入样式,语法同样。
在需要使用这个CSS文件的HTML页面的head标签内加入:
<link rel="stylesheet" type="text/css" href="css/demo01.css">
2.CSS中的绝对定位absolute 和相对定位relative
在对div进行位置定义时,除了可以用margin或者padding外,还可以使用
absolute -- 绝对定位 , 需要配合使用 left , top
#div1{width:200px;
height:50px;
background-color:greenyellow;
/* 绝对定位 */
position:absolute;
left:100px;
top:100px;}
relative -- 相对定位 , 一般会和 float , margin , padding .... 一起使用
#div2{
width:200px;
height:50px;
background-color:pink;
position:relative;
float:left;
margin-left:20px;
}