一、CSS的简介
Cascading Style Sheets:层叠样式表
可以解决html代码对样式定义的重复，提高了后期样式代码的可维护性，并增强了网页的显示效果功能。
将网页内容和显示样式进行了分离，提高了显示功能。
二、CSS和HTML的结合方式
插入样式表的方法有三种:
外部样式表(External style sheet)
内部样式表(Internal style sheet)
内联样式(Inline style)
外部样式表
当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。 <link> 标签在（文档的）头部：
<head><link rel="stylesheet" type="text/css" href="mystyle.css"></head>
下面是一个样式表文件的例子：
hr {color:sienna;}p {margin-left:20px;}body {background-image:url("/images/back40.gif");}
内部样式表
当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表，就像这样:
<head><style>p {margin-left:20px;}</style></head>
内联样式
由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。
要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和左外边距：
<p style="color:sienna;margin-left:20px">这是一个段落。</p>
优先级：
内联样式 > 内部样式> 外部样式 > 浏览器默认样式
三、CSS的选择器
1.三种基本选择器
（1）标签选择器
<!--使用标签名作为选择器的名称-->div{color:#0F6;size:8px; }
（2）类选择器
<!--每个标签都有class属性值，使用.class属性值作为选择器的名称-->.color{color:#F00 }<p class="color">演示文字</p>
（3）id选择器
<!--每个标签都有id属性，使用#id属性值作为选择器的名称-->#show{color:#C09;}<p id="show">演示文字2</p>
优先级：
style属性>id选择器>class选择器>标签选择器
2.扩展选择器
（1）关联选择器
<!--如果只想操作div里面的p标签，可以用关联选择器 标签和标签之间用空格分隔开-->div p{color:#33F;}<div><p>该区域颜色会改变</p></div><p>该区域颜色没有变化</p>
（2）组合选择器
<!--如果想同时操作两个标签，可以用组合选择器 标签和标签之间用,分隔开-->div,p{color:#33F;}<div>演示文字1</div><p>演示文字2</p>
（3）伪元素选择器
<!--用于向某些选择器添加特殊的效果，比如超链接a:link 默认状态a:hover 鼠标放上的状态a:active 鼠标点击中的状态a:visited 已经访问(点击)过后的状态-->
注意：a:hover 必须在 a:link 和 a:visited 之后，需要严格按顺序才能看到效果。
注意：a:active 必须在 a:hover 之后。
四、CSS的盒子模型
在进行布局前把数据封装到一块一块的区域中。 一般用:<div></div>
不同部分的说明：
Margin(外边距)- 清除边框外的区域，外边距是透明的。
Border(边框)- 围绕在内边距和内容外的边框。
Padding(内边距)- 清除内容周围的区域，内边距是透明的。
Content(内容)- 盒子的内容，显示文本和图像。
示例：
div {width: 300px;border: 25px solid green;padding: 25px;margin: 25px;}
五、CSS的布局的漂浮
float:
left：文本流向对象的右边
right：文本流向对象的左边
代码演示:
<style type="text/css">#foot{width:910px;height:169px;background:f2f2f2;margin:0 auto;}#left{ width:300px; height:169px; float:left;background:#F00}#center{ width:300px; height:169px; float:left; margin-left:5px; background:#9C0}#right{ width:300px; height:169px; float:right; margin-left:5px; background:#0F0}</style><div id="foot"><div id="left">div演示1</div><div id="center">div演示2</div><div id="right">div演示3</div></div>
六、CSS的布局的定位
position:
absolute：
将对象从文档流中拖出(可以理解为该对象漂浮在空中，其他标签会往上顶)
可以是top、bottom等属性进行定位(可以理解为该对象原来的位置已经被该对象私有，其它标签还是保持原位置
relative
不会把对象从文档流中拖出
可以使用top、bottom等属性进行定位
<!--可以利用定位属性在图片上加文字描述--><style>img{width:300px;height:300px;}#imgdec{position:absolute;top:250px;left:100px; color:#009;}</style><img src="timg.jpg" /><div id="imgdec">海贼王,我来了</div>
