标签：
本文着重介绍CSS(在网上搜集的笔记是跟html在同一天讲完的,但是这样太草率,所以我把css单独列出来,毕竟是装修装饰的玩意,多了解一点,人靠衣装嘛)
CSS
1、css的简介
（1）什么是css？层叠样式表
* 样式表：有很多的属性和属性值，来设置内容样式
* 层叠：一层一层的，样式的优先级。
** 优先级:由上至下,就近原则
最终目的:把网页的内容和样式进行分离,利于代码的后期维护
* 想要使用css，不能单独使用，要和html结合使用
* css和html的如何结合使用。
2、css和html的结合方式
（1）css和html有四种结合方式
第一种：使用html标签里面的属性 style="css的代码"(不推荐,因为太乱)
* 代码 <div style="color:blue;">
第二种：使用html的标签
(这种用得比较多)
* <style type="text/css">
css的代码;
</style>
* 代码
<style type="text/css">
div {
color:black;
}
</style>
第三种：使用html标签实现 link，写在head里面
(外部样式表,用的也挺多)
* 首先创建css文件，在css文件里面写css代码
* 在html中使用link标签引入css文件
* 代码 <link rel="stylesheet" type="text/css" href="1.css"/>
第四种：使用html的style标签，在标签里面使用语句样式操作
(我用的很少)
* 首先创建css文件，在css文件里面写css代码
* 写style标签，在标签里面 @import url(css路径);
3、css的选择器
（1）css优先级
* 在一般情况下，优先级是后加载的优先级高
（2）格式规范： 属性名称1:属性值1;属性名称2:属性值2;
(具体的属性可以在帮助文档中查询)
（3）选择器：作用在哪个标签上（要对哪个标签里面的内容进行操作）
* css有三个基本选择
第一个：标签选择器
** 使用标签名称作为选择器
div {
}
第二个：class选择器
** 每个html标签上面都有一个属性class，通过设置class属性的值
** 代码
.haha {
background-color:red;
}
第三个：id选择器
** 每个html标签都有一个属性id，通过设置id的属性值
** 代码
#hehe {
background-color:green;
}
（4）选择器的优先级
* style(写在标签上的数据) > id选择器 > class选择器 > 标签选择器
4、css的扩展选择器
（1）关联选择器
* 设置嵌套标签的样式
** 代码
div p {
background-color:red;
}
（2）组合选择器
* 设置不同的标签具有相同的样式
* 代码
div,p {
background-color:green;
}
（3）伪元素选择器
* 比如超链接为例，
* 状态：原始状态、鼠标放上去的状态、点击状态、点击之后的状态
:link :hover :active :visited
盒子模型:
定位属性 :position:a,绝对定位:从容器的左上角开始(它所在的容器中)
b,相对定位
Position:absolute 绝对定位
Left:横坐标
Top:纵坐标
单位:px(像素,如1366*768这个就是屏幕分辨率,单位也是像素)
相对定位:相对于自己原来的位置,relative
同时:在所有有标签初始排列顺序就成为顺序流
两种情况:控件脱离了顺序流
1,当把控件的位置设置为绝对定位
2,当把控件的float属性进行设置
Float:将两个div横线排列 left(脱离了顺序流)(如果用ID,两个ID区域内都要写)
注意:可能会被覆盖
Overfloat:当盒子中的内容超出范围该怎么办
Auto:浏览器自己解决(默认会出现下拉滚动条)
Visible:超出直接显示
Hidd:不显示
样式表示例:
创建一个html文件,把这个样式表放进去,可以对表格单元格生效
<style text="text/css"> td{ border-style:solid; border-color:red; border-width:thin; font-size:100%; width:45px; height:45px; } table{ text-align:center; border-collapse:collapse; } </style> <script type="text/javascript">
标签：
原文地址：http://www.cnblogs.com/adventurer/p/5499890.html
