1、css与html结合方式
1、style属性<div style=""> 2、style标签<style type="text/css">div{}</style> 3、文件导入<style type="text/css">@import url(css.html)</style> 选择器: 1、标签选择器 <style type="text/css">div{}</style> 2、类选择器 <style type="text/css">div.class{}</style> <style type="text/css">.class{}</style> 3、id属性选择器 <style type="text/css">#id值{}</style>
2、css简单布局
<html> <head> <style type="text/css"> body{ margin:0px; } div{ border:#09F solid 1px; height:100px; width:150px; } #div0{ background-color:#2FC; width:500px; height:500px; } #div1{background-color:#F90; padding:20px 40px 40px 30px;/*内边距设置按照顺时针方向*/ margin:0px;/*外边距*/ float:left;} #div2{background-color:#F50; padding:20px 40px 40px 30px;/*内边距设置按照顺时针方向*/ margin:0px;/*外边距*/ float:left;} #div3{background-color:#3F0; padding:20px 40px 40px 30px;/*内边距设置按照顺时针方向*/ margin:0px;/*外边距*/ float:left;} </style> </head> <body> <div id="div0"> <div id="div1">图片区域</div> <div id="div2">文字区域</div> <div id="div3">超链接区域</div> </div> </body> </html>