20131118作业提交

代码如下：

<style type="text/css">

#red{ color:#FF0000;}
#red p{ font-size:10px;}
#blue{ color:#0000FF;}
#blue p{ font-size:12px;}
#purple{ color:#800080;}
#purble p{font-size:14px;}
.div{ width:330px; height:230px; border:#00FFFF solid 2px;}
.red2{ width:280px; height:200px; background:#FF0000; border:#000000 solid 2px;}
.blue2{ width:170px; height:120px; background:#0000FF;border:#FFFFFF solid 2px}

</style>

<div id="red">
<p style="color:red">1.写一段文字，定义color属性，使用颜色名称，红色</p>
<p style="color:blue">2.写一段文字，定义color属性，使用颜色名称，蓝色</p>
<p style="color:purple">3.写一段文字，定义color属性，使用颜色名称，（深）紫色</p>
<p>10.写一段文字，定义color属性，使用从父元素继承颜色，红色</p>
</div>
<hr />
<div id="blue">
<p style="color:#FF0000">4.写一段文字，定义color属性，使用十六进制颜色，红色</p>
<p style="color:#0000FF">5.写一段文字，定义color属性，使用十六进制颜色，蓝色</p>
<p style="color:#800080">6.写一段文字，定义color属性，使用十六进制颜色，（深）紫色</p>
<p>11.写一段文字，定义color属性，使用从父元素继承颜色，蓝色</p>
</div>
<hr />
<div id="purple">
<p style="color:RGB(255,0,0)">7.写一段文字，定义color属性，使用rgb代码颜色，红色</p>
<p style="color:RGB(0,0,255)">8.写一段文字，定义color属性，使用rgb代码颜色，蓝色</p>
<p style="color:RGB(128,0,128)">9.写一段文字，定义color属性，使用rgb代码颜色，（深）紫色</p>
<p>12.写一段文字，定义color属性，使用从父元素继承颜色，（深）紫色</p>
</div>
<hr />
<div class="div">
<div class="red2" style="margin:0 0 0 10px;">
1.1外层定义的盒子设置属性：margin-left:10px;
<div class="blue2">
2
</div>
</div>
</div>
<div class="div">
<div class="red2" style="margin-top:10px;">
1.2外层定义的盒子设置属性：margin-top:10px;
<div class="blue2">
2
</div>
</div>
</div>
<div class="div">
<div class="red2" style="margin-right:10px; float:right;">
1.3外层定义的盒子设置属性：margin-right:10px;(ps:为了看出效果，给了向左的float的属性。)
<div class="blue2">
2
</div>
</div>
</div>
<div class="div">
<div class="red2" style="margin:0 0 10px 0;">
1.4外层定义的盒子设置属性：margin-bottom:10px;
<div class="blue2">
2
</div>
</div>
</div>
<hr />
<div class="red2">
1
<div class="blue2" style="padding-left:10px; color:#FFFFFF">
2.1内层定义的盒子设置属性：padding-left:10px;
</div>
</div><div class="red2">
1
<div class="blue2" style="padding:10px 0 0 0; color:#FFFFFF">
2.2内层定义的盒子设置属性：padding-top:10px;
</div>
</div><div class="red2">
1
<div class="blue2" style="padding:0 10px 0 0; color:#FFFFFF">
2.3内层定义的盒子设置属性：padding-right:10px;
</div>
</div><div class="red2" style="padding-bottom:10px; color:#FFFFFF">
1
<div class="blue2">
2.4内层定义的盒子设置属性：padding-bottom:10px;
</div>
</div>

显示结果如下：

margin主要用于设置外边距，border用于设置边框，padding用于设置内边框，其实这8个例子已经可以说明问题了，没必要还用弄个排列组合吧，你说呢？如果非较真，那就算我没完成，你说吧 ，要我做什么？我都认。还有继承还是有点不太多，我那样写算不算有继承关系？