01-02CSS层叠样式表(概述&和html结合的方式)
1. 每一个html标签中都有一个style样式属性和属性值，多个属性之间用分号隔开。该属性的值就是css代码。
2. 使用style标签的方式。
<style type=”text/css”> //写上css，会调用css的解析引擎
div//作用在div标签上
{
background-color:#06F;
color:#F00;
}
</style>
作用类似于把复用性代码高度部分抽取出来，提高代码的复用性。
当有多个页面呢，每个页面都有div呢？该如何处理呢？
3.干脆把代码弄成一个文件，让其余文件都与他关联。
<style type=”text/css”>
@import url(div.css); //这样就可以解决问题，只需要在每个页面加上这句就可以解决。
@import url(span.css);//想操作哪个标签，就单独弄一个css文件即可。当然有点麻烦，可以直接在一个css文件中导入多个css文件，可以节省工作量。
</style>
4.<link rel=”stylesheet ” href=”1.css” type=”text/css”/>
Rel是跟页面的关系，跟方式有区别，4是用html代码链接的，而3是css导入的。
03-CSS(基本选择器&优先级)---CSS的核心
就是CSS要作用的标签。
1. html标签名
2. Class选择器（类选择器，专门给css提供样式加载的一个属性。）不光可以对相同标签中对一部分标签进行设定，还可以对不同标签进行相同设定。
3. id选择器，用法跟class选择器一致。但是通常ID的取值在页面中是唯一的，因为该属性除了给css用，还可以被js使用。Id通常都是为了标识页面中的一些特定区域使用的。
优先级：style属性高于id选择器高于class选择器高于html标签选择器。
04-CSS(关联选择器&组合选择器)
Span b {//这就是关联选择器。仅仅对span下的b标签
Background-color:#09F;
Color:#FFF;
}
而组合选择器就是对多种选择器进行相同样式设定。
.haha ,div b{
Background-color:#09F;
Color:#FFF;
}
05-06CSS(伪元素选择器)
超链接的状态
1. 未访问//完全可以自己设定它的样式
a：link{
Background-color:.....
Color
Text-decoration
Font-size
}
2. 鼠标悬停
A:hover{
Background-color:
Color：
Font-size：
}
3. 点击效果
a:active{
}
4. 访问后效果
a:visited{
}
L V H A 一共4个效果
P-First-line段落中的第一行文本
Q-first-letter段落首字母设定
:focus 具有聚焦的
07-CSS(CSS样式的结合应用)（暂时先跳过）
08-CSS(CSS的盒子模型)
以前通过表格完成表格完成布局（html），现在通过CSS的话，DIV+CSS，页面由很多DIV组成，通过CSS的布局属性，就可以改变DIV的位置存放。后者比前者更为灵活。现在流行的是DIV+CSS。把数据放到盒子里面去，然后盒子的位置可以随便变化。
盒子模型：
边框：border
上border-up
下border-bottom
左border-left
右border-right
<div id=”div_1”>
第一个盒子11
</div>
<div id=”div_2”>
第二个盒子22
<div id=”div_3”>
第二个盒子33
</div>
内边距Padding:的顺序 上 右 下 左 （对应时针顺时针方向。）
外边距 margin 全部设置为0，为什么上部分还有距离呢？
那个距离是body的距离，需要将
Bogy{
Margin：opx；
}
09-CSS(CSS的布局-漂浮)
Float（CSS的一个属性）需要作用到某一个选择器（标签）上面，若指定为该标签，那么后面的标签就会流向该标签的右边。。
None 不漂浮
Left 漂到右边 （不允许左边有浮动的）
Right 漂到左边 （不允许右边有浮动的）
Clear：left 可以撤销之前盒子的命令，不随别人的漂浮不动。
Clear：right
Clear：both
10-CSS(CSS的布局-定位)
Static：默认值。无特殊定位，对象遵循html定位规则。
Absolute（绝对定位）：从文档流中脱离，在空中。想在哪就在哪，通过上下左右边距进行设定。不存在相互覆盖的问题了。想怎么设置就怎么设置了。（这也就是图片在网页中飞动的原理。）
Fixed：不支持
Relative：对象不可层叠。不出文档流，就是你上面的过来了，也不让你覆盖。我就是一直占着位置。
11-CSS(CSS的布局-图文混排)
<body>
<div id=”imgtext”>
<div id=”img”><img src=”9.bmp”/></div>
<div id=”text”>
这是一个美女,说明文字。
</div>
</div>
</body >
文字：左漂或者右漂都可以解决。
12-CSS(CSS的布局-图像签名)--应用