一、简述 :
css : 用来定义html的样式
div : 用来显示htm中的具体内容

通过两者的结合运用,可以优化开发效率,提高代码阅读性。

二、代码:

(1)div

<html>
<head>
<title>div+css学习</title>

<!-- 引入自定义css样式 -->
<!-- <link rel="stylesheet" type="text/css" href="/Users/hanrovey/Desktop/PHP学习/3_mycss.css" /> -->

<!-- 在head中自定义css样式 -->
<style type="text/css"> 
.style1 {
    /*宽度、高度*/
    width: 300px;
    height: 300px;/* 一定要写分号 */
    border:1px red;
    background-color: green;
    padding-top: 30px;
    padding-left: 30px;
    margin-left: 100px;
    margin-top: 100px;
}/*这里是设置CSS的样式内容*/ 
</style> 
</head>

<body>
<div class="style1">
<img src="http://avatar.csdn.net/0/2/3/1_hanrovey.jpg">
</div>
</body>

</html>

(2)css

.styly1{
    /*宽度、高度*/
    width: 300px;
    height: 300px;/* 一定要写分号 */
    border:1px red;
    background-color: green;
    padding-top: 30px;
    padding-left: 30px;
}

注意:css的代码可以通过直接在html中定义样式,也可以自己新建一个 xx.css 文件,通过< link />来引用,css样式代码必须放在< head >中。

Demo地址 : Demo