层叠：一层一层叠加 样式表：存储样式的地方，多个样式
HTML--------》页面的结构--------》人的面部（素颜） CSS ---------》美化页面 ----------》给人化妆
css：必须写在head中 < style>css样式代码< /style>
css选择器： 范围越小，优先级越高（id>类>标签）
1.标签选择器：标签名{ }2.类选择器：. 类名{ }3.id选择器：#id值{ } <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .dd .font{ height: 200px; width: 200px; color: red; background: blue; } </style> </head> <body> <div class="dd"> <div class="font"> 11</div></div> 1 <div class="dd">111</div> </body> </html>css盒子模型
边框的四个属性： border-top:上边框 border -right:右边框 border -bottom:下边框 border -left:左边框 设置上下左右边框样式 为1像素的 实体 红色线 border:1px solid red;margin：外边距 不会把边框撑大 padding：内边距 会把边框撑大
内边距有四个属性可以设置： padding-top:上边距 padding-right:右边距 padding-bottom:下边距 padding-left:左边距外边距有四个属性可以设置： margin-top:上边距 margin -right:右边距 margin -bottom:下边距 margin -left:左边距 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #div1{ padding: 30px; width: 100px; height: 100px; background: red; } #div2{ margin: 10px; background: yellow; width: 100px; height: 100px; } </style> </head> <body> <div id="div1"> 123 </div> <div id="div2"> 345 </div> </body> </html>