CSS是层叠样式表（Cascading style sheets），用来定义网页的显示效果，可以解决html代码对样式定义的重复，提高了后期样式代码的可维护性，并增强了网页的显示效果功能，
总而言之：CSS将网页内容和显示样式进行分离，（降低耦合度）提高了显示功能。
CSS和html是如何结合的呢？
1、每个style标签中都有一个style样式属性，样式值就是CSS代码
Eg：<div style=”background-color:#06F;color:#F00”>这是一个div区域</div>
（注意，多属性之间用；隔开，属性与属性值之间用：隔开）
2、使用style标签的方式
假如代码中有许多div，并且希望每个div区域的样式都相同，为了避免代码重复，可以将
Style=”background-color=#06F;color=#F00”这样的代码提取出来，用style标签标识，并声明该段代码是CSS代码
Eg： <style type=”text/css”>
div{
Background-color:#06F;
Color:#F00
}
</style>
例如：
(注意这里的div是说明该属性是作用于所有div标签中的内容,上面这段代码一般放与<head></head>标签中，以便其最先加载)
3、但是如果制作的网站有多个页面，每个页面中有多个div，而要使现多个页面中的div样式都相同，盖如故实现呢？
将那段CSS代码封装成一个CSS文件，然后在每个html页面中关联已经存在的CSS文件，（eg：以创建了一个div.css文件，在html的<head></head>中 <style type=”text/css”>
@import url(div.css); </style>即可，
）也可以将多个CSS文件关联到一个CSS文件中，然后直接在html中关联该CSS文件
Div.css
div{background-color:#06F;
color:#F00
}
4、还有一种方式可以实现该效果
<link rel=”stylesheet” href=”div.css” type=”text/css”/>
5、样式优先级（后加载的为主）
（由上到下，由外到内）优先级由低到高，（一般情况下）
6、CSS格式
选择器名称{属性名：属性值；属性名：属性值}
（选择器就是div，span等等）
（注意：如果一个属性有多个值得话，那么多个值用空格隔开）
7、选择器
就是指定CSS要作用的标签，那个标签的名称就是选择器，选择器共有三种：
1）html标签名的选择器，使用的就是html的标签名
2）Class选择器，其实使用的标签中的class属性
3）Id选择器，其实使用的是标签中的id属性
每个标签都定义了class属性和id属性，用于对标签进行标记，方便对标签进行操作，在定义中，多个标签的class值可以相同，但id值必须唯一，应为javascript中经常需要使用。
问题：如果网页中有10个div标签，其中5个是同一样式，另外5个是同一样式，该如何实现呢？
这就要对div标签进行分类，就用到了class选择器
用法举例：
div{
background-color:#09F;
color:#FFF
}
div.haha{
background-color:#FF3;
color:#0c0
}
(注意这里的haha是标签中class的名称)
例如：
<div>简单一点，这代表5个div标签</div>
<div>简单一点，这代表另外5个div标签</div>
但是若写成：
.haha{
background-color:#FF3;
color:#0c0
}
则所有class名为haha的内容样式都会改变
Eg：<span class=”haha”>span区域</span>
8、id选择器
div#qq{
background-color:#FF3;
color:#0c0
}
<div id=”qq”>这是一个div区域</div>
同样：#qq{
}（跟.haha功能一样，也是作用于所有id名为qq的内容样式）
（注意，用法与class选择器相同，但是通常id的取值在页面中是唯一的，id通常都是为了标识页面中一些特定区域使用的）
优先级：
标签选择器<类选择器(class)<id选择器<style属性
9、扩展选择器
1）关联选择器
标签是可以嵌套的，要让相同标签中的不同标签显示不同样式，就可以用此选择器
eg：p{color:#00FF00;}
p b{color:#FF0000;}
若是直接写这样：
b{color:#FF0000;}表示所有的b标签都会加载这种样式。
所以在用的时候：
<p>p标签<b>b标签</b>p标签</p>
<p>p标签段落</p>
2）组合选择器
对多个不同选择器进行相同样式设置的时候应用此选择器
eg：p,div{color:#FF0000;}（注意：多个不同选择器要用逗号分隔开）
<p>p标签显示段落</p>
<div>div区域</div>
3）伪元素选择器
其实就是在html中预先定义好的一些选择器，称为伪元素
格式：
标签名：伪元素
类名 标签名
类名 伪元素
例如：
a:link 超链接未点击状态
a：visited 被访问后的状态
a：hover 光标移到超链接上的状态（未点击）
a：active 点击超链接时的状态
(注意：以上只是对超链接标签a举例说明，其他标签也可以使用，使用方法同a相同)
使用顺序：l-v-h-a
p:first-line 段落的第一行文本
p：first-letter 段落中的第一个字母
input:focus具有焦点的元素，举例：
input:focus{
background-color:#09F;
}
10、CSS的盒子模型
边框：border
上边框：border-top
下边框：border-bottom
左边框：border-left
有边框：border-right
内边距：padding
padding-top（同上）等等
如果只有两个：padding（10px,20px）
10就表示上下，20表示左右
如果有三个：padding(10px,20px,30px)
10表示上，20表示左右，30表示下
如果有四个：
padding（10px,20px,30px,40px）
那么，顺序为上右下左
(记住时钟的顺序 ，顺时针 )
上
左 右
下
外边距：margin
11、布局 layout
float 取值 (none是默认值，对象不漂浮)（left文本流向对象的右边）（right文本流向对象的左边）
clear 不允许有漂浮 取值（none，left，right，both）
12、定位position(将盒子放到任意位置)
position取值：
satic：表示默认值，无特殊定位，对象遵循html定位规则，
absolute:将对象从文档流中拖出，使用left,right,top,bottom等属性，相对于其最近的一个具有定位设置的父对象进行绝对定位，如果不存在这样的父对象，则依据body对象，而其层叠通过z-index进行设置。
fixed：未支持，对象定位遵从（absolute）方式，但要遵守一定规范。
relative：对象不可层叠，但将依据left,right,top,buttom等属性在正常文档流中偏移位置。
(注意：一个图片（可以让它作为盒子）在窗口中不断移动，碰撞后反向移动，就是用的absolute实现的)
实例：（设置一张图片，实现图示效果）
对文字进行标签的封装
<style type="text/css">
#imgetext{
position:absolute;
top:50px;
left:10px;
}
#tet{
position:absolute;
top:80px;
left:20px;
}
</style>
</HEAD>
<BODY>
<div id="imgetext">
<div id= "tet">
这个美女。。我的！
</div>
<div id="imge">
<img src="9.jpg" width="400" height="600"></img>
</div>
</div>
</BODY>
</HTML>
1001
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
