CSS样式
一、样式表的分类
1.内联
语法：HTML标签中的style属性
特点：控制比较明确，只对当前标签起作用，冗余
2.内嵌
语法：head标签中<style></style>
特点：对当前页面起作用，控制整个页面的风格统一
3.外部
语法：单独的.CSS文件，需要附加到HTML文件中去
二、选择器
1.基本选择器
ID选择器：
语法：#标签的id{样式属性：样式值；样式属性：样式值；}
特点：控制比较明确，优先级很高
class选择器：
语法：.class名{样式属性：样式值；样式属性：样式值；}
特点：不受标签类型限制，优先级低于ID选择器
标签选择器：
语法：标签名{样式属性：样式值；样式属性：样式值；}
特点：优先级低于一般的class选择器
2.扩展选择器
并列关系：
语法：基本选择器以逗号隔开
特点：任何一个其中的选择器都可以获得相应的样式
后代关系：
语法：基本选择器以空格隔开
特点：只要满足后代关系（不仅是子级关系）均可获得样式对基本选择器进一步筛选控制
class筛选：
语法：标签名.class名{.....} .class名 .class名{.....}
特点：对前者进行筛选，中间不能加空格
三、样式属性
1.前景与背景
前景：
font-family size color weight style text-decoration
text-align vertical-align
line-height indent
背景：
背景色：background-color
背景图：background-inage:url()
background-repert ： no-repeat repeat repeat-x repeat-y
background-position：top right bottom left
background-position:top right
background-position:top 10px right 20px;
background-attatchment
2.边框与边界
边框(表格模型)：
border：粗细 样式 颜色
border-width border-style border-color
border-top:粗细 样式 颜色
border-top-width border-top-style border-top-color
外边距：
margin 上 右 下 左 ：
margin-top margin-right margin-bottom margin-left
margin auto--布局居中
内边距：
padding 上 右 下 左
3.列表与方块
列表(ul ol li)：
list-style-type:none low-alpha
list-style-position
list-type-image
方块：
width height
display overflow
span默认对width height 没有效果，需要配合display: inline ，div默认对宽和高起作用，
但如果它的display:inline 则宽和高也不起作用
4.格式与布局
流式布局：
float:left/right clera:both
元素并列
元素嵌套
定位布局：
position:fixed/absolute/relative;top right bottom left
三种定位方式的区别
①fixed--以当前浏览器为坐标
②relative--以元素本来应该在的位置为坐标
③absolute：
外围的元素中没有position(absolute relative)样式--以浏览器边框为左边
如果外围中有position(absolute relative)样式--以外围离它最近的那个元素坐标布局
四、样式表应用
联系布局网页--沃顿商学院 哈佛
看别人布局
搜集网页模板 图片素材
目录：
注：本教程要求对html和css有基础了解。
一、CSS布局属性
Width：设置对象的宽度（width:45px）。
Height：设置对象的高度(Height:45px;)。
Background：设置对象的背景颜色、背景图像。
1.背景颜色
background:#09F;
2.背景图像
background:url(file:///C|/Users/Administrator/Desktop/huipu.jpg) repeat-x;
repeat-x代表横向重复，还可以设置repeat-y。
Float: Float属性是DIV+CSS布局中最基本也是最常用的属性，用于实现多列功能，我们知道<div>标签默认一行只能显示一个，而使用Float属性可以实现一行显示多个div的功能，最直接解释方法就是能实现表格布局的多列功能。
Float属性有left、right、none三个值，none默认属性不用管，主要是left和right两个属性最常用。
举例：
1.float:left属性
1
2.float:right属性
Margin: Margin属性用于设置两个元素之间的距离。（注：在IE6中默认是此属性的双倍值，如何解决请看hack css）
Margin属性设置值说明：
1.单独设置
margin-left:20px;设置左边
margin-right:20px;设置右边
同理上下分别是margin-top:20px;、margin-bottom:20px;
2.简写设置
Margin:10px;设置对象四周。
Margin:10px 5px;设置对象上下为10px,左右为5px;
举例：
Padding: Padding属性用于设置一个元素的边框与其内容的距离。
1.单独设置
padding-left:20px;设置左边
padding-right:20px;设置右边
同理上下分别是padding-top:20px;、padding-bottom:20px;
2.简写设置
padding:10px;设置对象四周。
padding:10px 5px;设置对象上下为10px,左右为5px;
Clear: Clear属性主要是清楚float属性设置的效果，使用Float属性设置一行有多个DIV后（多列），最好在下一行开始之前使用Clear属性清楚一下浮动，否则上面的布局会影响到下面。
1、如何在上面的例子中橙色方块的下面另起一行放置一个黑色方块。
我们直接在html中加入一个div试试
我们看到kwstu-kid3跑到1、2的下面去了，原因就是应为kwstu-kid2使用了float属性，解决方法可以直接在kwstu-kid3里面加入clear属性
2、还有一种布局中常见的问题，此处一定要看。
我们把最外层kwstu属性的高度去了，看看什么效果。
跟我们想象的不一样吧，我们想象中应该是kwstu层把kid1和kid2包裹住才对，为什么没有达到我们要的效果呢，原因就是应该kid1和kid2使用了float属性，此时可以使用clear属性清楚一下即可。
一般情况都是在css里面创建一个.clear公共清除浮动类，直接使用一个div调用即可
此问题还有一个解决办法：直接在kwstu样式中加入overflow:hidden;属性即可。
2.还有一个初学div时经常遇到的问题，如果把上边的clear层去掉，然后再在kwstu层下面开始一行新的布局，然后在下面新的div中使用margin-top属性，肯定不管用。这个地方是初学者布局中肯定要遇到的问题，一定要注意。
解决办法：
在kwstu层和kwstu1层直接加一个清除浮动层即可。
