七、 链接css文件和html
代码
<link rel="stylesheet" href="day_css01.css">
== link标签是在html语言中网页头部head中的元素==，可以被多次使用，该元素的用途是与外部文件建立链接.
1、rel=“定义当前文档与被链接文档之间的关系，这里是调用外部文件，stylesheet即代表css样式表。”
2、href=“定义被链接文档的位置，这里链接所指向的是：同一目录下名为style.css的文件。”
建议把css代码和html代码分开写然后用link 引入
八、相关的属性
8.1 margin属性
1.margin 简写属性在一个声明中设置所有外边距属性。该属性可以有 1 到 4 个值。
2.块级元素的垂直相邻外边距会合并，而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地，浮动元素的外边距也不会合并。允许指定负的外边距值，不过使用时要小心。
3. 方向 上、右、下、左
4.可以使用负值。
实例1.
margin:10px 5px 15px;
上外边距是 10px
右外边距和左外边距是 5px
下外边距是 15px
实例 2
margin:100px;
所有 4 个外边距都是 100px
8.2 padding属性
*设置 p 元素的 4 个内边距：
*用法和margin一样 有4个值。方向 上、右、下、左
*不能用负值。
8.3 background-color属性
设置背景颜色
8.4 border
设置 边框的样式：
边框是双线 4像素
8.5 position
定位 h2 元素：
常用两个1.绝对定位 2.相对定位
代码
<!DOCTYPE html> <html> <head> <style type="text/css"> /* css盒子模型 1.border边框 2.margin 间距 3.padding 填充 */ #div1{ width: 400px; height: 400px; background-color: aqua; border: double 4px; } #div2{ width: 200px; height: 200px; background-color:#FF0000; border: double 4px; /*margin:100px 0px*/ margin-left: 100px; margin-top: 100px; /*margin:100px 表示上下左右都是100 margin:100px 0px 表示上下100左右是0 margin 按照上右下左的顺序 * */ } #div3{ margin: 0px; padding: 0px; width: 26%; height: 100px; background-color:chartreuse; border: double 4px; margin: 0px; position: absolute; float: left; } body{ margin:0px; padding: 0px; } </style> <meta charset="UTF-8"> <title></title> </head> <body> <div id=div1> <div id=div2> <div id="div3"> </div> </div> </div> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ padding: 0px; margin: 0px; } #div1{ background-color: red; width: 400px; height: 400px; /*绝对定位*/ position: absolute; left: 100px; top: 100px; } .div2{ background-color:#0000FF; width: 400px; height: 400px; /*相对定位*/ position: relative; float: right; } .div3{ background-color:chartreuse; width: 400px; height: 400px; /*相对定位*/ position: relative; float: right; } #b1{ position: relative; float: left; width: 50px; height: 50px; } #b2{ position: relative; float:right; width: 50px; height: 50px; } </style> </head> <body> <div id=div1> " </div> <div class="div2"> </div> <div class="div3"> <button id=b1 name="hahah" value="1">1</button> <button id=b2 name="hahah" value="2">2</button> </div> </body> </html>
图形会随着网页大小发生改变
