1、三种不同的样式表
样式表根据其书写位置不同，共分为三种：
内联样式表（inline）：该样式表写在标签的style属性里，负责设置当前标签的样式；
内部样式表（inner）：该样式表一般写在head标签的style标签里，通过选择器来指定某个样式所影响的标签；
外部样式表（external）：该样式表一般写在独立的*.css文件里，通过选择器来指定某个样式所影响的标签，在head标签通过link标签引入外部样式文件；
看一个例子，共两个文件，在同一个目录中：
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<!-- 这里引入了一个外部样式表 -->
<link type="text/css" rel="stylesheet" href="style.css" mce_href="style.css" />
<!-- 这是一个内部样式表 -->
<mce:style type="text/css" ><!--
b { /* 这是一个标签选择器 */
background-color:#B0D1E6;
color:blue;
text-indent:2em;
text-align:left;
}
.title { /* 这是一个类选择器 */
color:#209DA4;
text-decoration:underline;
text-align:left;
}
#id1 { /* 这是一个ID选择器 */
background-color:#5E5E5E;
color:#FFFFFF;
font-weight:bold;
height:100px;
width: 300px;
border: 2px dotted #C7784E;
word-break:break-all;
overflow-y:auto;
overflow-x:hidden;
text-indent:2em;
margin:0 auto;
}
--></mce:style><mce:style type="text/css" mce_bogus="1"><!--
b { /* 这是一个标签选择器 */
background-color:#B0D1E6;
color:blue;
text-indent:2em;
text-align:left;
}
.title { /* 这是一个类选择器 */
color:#209DA4;
text-decoration:underline;
text-align:left;
}
#id1 { /* 这是一个ID选择器 */
background-color:#5E5E5E;
color:#FFFFFF;
font-weight:bold;
height:100px;
width: 300px;
border: 2px dotted #C7784E;
word-break:break-all;
overfl
IE的问题：
一.双边距问题
浮动元素的外边距会加倍，但与第一个浮动元素相邻的其他浮动元素外边距不会加倍。
解决方法：在此浮动元素增加样式 display:inline;
二.图片产生的间隙
父元素直接包含<img>，这个图片下方会和父元素边缘产生间隙。
解绝方法：1.在源代码中让</div>和<img>在� ......
