一、样式表的分类
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)样式--以外围离它最近的那个元素坐标布局
四、样式表应用
联系布局网页--沃顿商学院 哈佛
看别人布局
搜集网页模板 图片素材