目标
掌握 CSS 选择器
掌握使用 CSS 选择器修饰页面细节
了解 CSS 层(盒状模型)的概念
了解 CSS 3新特性
1、掌握 CSS 选择器
在一个网页中有很多的HTML标签，如果想对某个标签的内容
进行样式修饰，必须先从众多标签中找到它。
CSS 语法，为我们提供了非常方便的语法来选中具体的某个
标签----CSS 选择器
基本选择器(3种)：
标签(元素Element)选择器：一般给多个相同的标签设置样式
<p>aaa</p>
p{
/* 里面的样式代码对 aaa 生效 */
}
------------------
类别(伪类)选择器：同时选中多个标签，这些标签可以人为
对他们进行分类。
<p class="ff">aaaaaa</p>
<div class="ff">bbbb</div>
<a class="ff">vcvccccc</a>
.ff{
/* 对网页中所有有 class=ff 属性的标签生效 */
}
------------------
ID 选择器：一次只选中唯一具有该 id 名称的标签
<p id="aa">asdfasd</p>
<a id="bb">asdfasdf</a>
#aa{
/* 在整个页面中，只能选中一个 id="aa" 的标签 */
}
------------------
复合选择器(灵活组合三种基本选择器)：
交集选择器:同时满足两个条件的选择器
<p class="aa">dfasdfasd</p>
<div class="aa">asdfasdf</div>
div{}
.aa{} ====> div .aa{}
div >.aa{}
并集选择器:同时选中多个，这多个标签都有相同的样式
<p>asdfsdfd</p>
<p class="aa">dfasdfasd</p>
<div class="aa">asdfasdf</div>
<span>cccc</span>
<div>asdfasdf</div>
p,div .aa,span{}
嵌套(后代)选择器:
<p>asdfsdfd</p>
<span>adfasdf</span>
<div>sdfsdf</div>
<div class="aa">asdfasdf
<p class="aa">dfasd
<span>cccc</span>
fasd</p>
<p class="bb">dfasdasd</p>
</div>
/* 先确定最外层的标签，逐步往所要找的标签靠近 */
div .aa p .aa span{}
------------------------------
专门针对链接 <a > 标签制定了一个特殊选择器
a{} Element 选择器
链接标签，本身自带有一些鼠标事件：鼠标移动、覆盖、
点击、移出、访问后
a:link{/* 默认情况，没有做任何鼠标动作时的样式 */}
a:visited{/* 鼠标点击以后的样式 */}
a:hover{/* 鼠标移动到链接上的样式 */}
a:active{/* 鼠标单击时的样式 */}
注意：当多个基本选择器同时对某个标签的属性进行修饰时，
ID 选择器优先级最高、类别选择器次之、标签选择器最低
CSS 代码与 HTML 代码分离：
(1)行内引入，不推荐
<p style="css 代码">ssss</p>
(2)内嵌引入，部分推荐
<head>
<style type="text/css">CSS 代码</style>
</head>
(3)外部导入，所有 css 代码独立在 *.css 文件中,
不推荐
<head>
<style type="text/css">
@import "css/style.css"
</style>
</head>
(4)外部链接,CSS代码全部在 style.css 文件中，推荐使用
<head>
<link href="css/style.css"
rel='stylesheet'
type='text/css'>
</head>
在编写外部的样式文件时，考虑代码重用，一般都会把
修改不同内容的样式进行分离。
修饰整个页面边框布局的样式 layout.css
修饰整个页面所有字体的样式 font.css
修改整个页面背景等内容的样式 main.css
修改整个页面中所有图片的样式 img.css
.........
修改页面打印时所需要的样式 print.css
<link rel="shortcut icon" href="http://www.126.com/favicon.ico" />
<link id="setSkin" type="text/css" rel="stylesheet"
href="http://img2.cache.netease.com/www/v2011/css/theme_blue1227.css" />
在使用各种方式导入样式的时候，离内容最近的样式，优先级最高
行内引入-->内嵌-->外部导入-->外部链接
2、掌握使用 CSS 选择器修饰页面细节
在设计一个页面之前，需要全局的考虑，如：主体颜色、风格、
布局等内容。
1 可以先使用 Excel 进行页面布局设计
2 然后使用 HTML 中的 <div>标签来大体标记这些布局
3 最后使用 CSS 样式给每个矩形的布局块进行位置、高宽、颜色等的设置
3、了解 CSS 层(盒状模型)的概念
在 CSS 中，把页面看做由多个矩形块搭建而成。
在 CSS 中一般对 div 层标签，附加了内容、内边距、边框、
外边距 四个属性。
内容：width height
内边距：padding
padding-top padding-left padding-right padding-button
padding:10px 2px 50px 20xp;
padding:10px 20px 10px 20xp; ==>padding:10px 20px;
padding:10px;
边框：border
top left right button style(实线、虚线、双线、浮雕线)
外边距：margin
设置盒状模型四边的顺序：顺时针方式，上右下左。
--------------------------
CSS 的定位：
默认的所有的 div 按照编写的代码顺序有各自的位置，
每个 div ，默认占据一整行。
可以使用属性 position 对一个 div 块进行定位
绝对定位：以浏览器左上角原点为起点定位，当一个元素
使用绝对定位时，原来他在页面中的位置就消失。
相对定位：
浮动定位：
4、了解 CSS 3新特性
CSS 开发工具
Rapid CSS 2008 绿色软件
