1. html:实现用户ui，提供用户界面
2.css:层叠样式表
作用：将html实现的用户ui美化，定义网页显示的效果
3.样式选择器{
属性：属性值；
属性：属性值；
属性：属性值；
}
标签选择器，类选择器，id选择器 选择器能够修饰：文本属性，背景属性，边框属性
font-style:italic斜体
针对最开始的h3标签：大小，颜色，隶书，斜体，加粗，文本居中，去下划线，缩进。
4. <div>和<span>是容器标签或者说是块标签，这两个标签的作用是放其他标签。
这两个标签的区别是span不会换行
5.伪类样式：就是超链接的时候
link是超链接的初始状态。
当超链接被访问过的时候就是hover，是鼠标悬停时候
当鼠标点击的时候active(活动状态)
visited是访问之后的样式
6 border：颜色，样式（虚线实线等），宽度
border:#FFFFFF solid,5px
border-collapse:是合并两个挨着的边框
7.外部样式：将css内容和html内容分离了
内部样式：嵌套在html中的样式
行内样式：每个标签都有style属性
------------------------------------------------------------------------
注意：css优化html，通过三种样式用来实现
行内样式：style。（因此，任何标签都能用style）
内部样式：在上面写，定义选择器
外部样式：在外面写好然后引入这个外部文件
css样式：cascade级联 style样式 sheet表
1.为什么用css样式：
a.有利于对网站的所有页面进行统一的样式管理（也就是使用了选择器）
b.可以更加精确的确立页面中每个元素的显示样式
2.样式的使用形式：
a.行内样式：<style=>属性
b.内部样式：在文档的头部嵌入<style type="text/css"></stype>。<style=>标签
c。外部样式(链接样式)：把内容单独放一个文件，然后调用,<link> rel表明当前文档和href文档的关系
3.选择器：定义样式(例如颜色)，匹配元素（匹配以下三种）
a.类选择器：.a <p class='a'></p>
b.元素（标签）选择器：直接用标签名（什么也不加）。标签选择器和类选择器同时存在，看谁离的近
c.id选择器：#a <p id='a'></p>
二：盒子模型：padding:内边距（填充） border:边框 margin边距（外边距）
padding:是一个物体之间的关系，例如tableB表中的单元格。body设置了padding，也就是说body里有填充，就会出现空白
border:是一条线
margin是两个实体之间的关系，两个物体之间差多少。或者是说跟body相差多少
宽度和高度还在padding里面呢，是针对的内容来说的
如果内容多就溢出了，overflow溢出。overflow="hidden"
北京颜色是：内容+填充+边框
遵循的原则是：border:边框宽度 边框样式 边框颜色
第一边框：
1.定义样式的时候是上右下左（顺时针）,如果写了上右，也就知道下左了。因为上下一样，左右一样
2.所有标签都有盒子模型（border-style）
3.collapse：单元格与单元格之间的关系
第二边距：
三：宽度高度
img{float:right},相当于右环绕
四：位置与浮动
绝对定位：absolute
bottom是距离下面
top
left
right
浮动：img{float:right},相当于右浮动
五：页面元素的类型
1.块级元素：div自动换行，设置宽度高度 （display：block，把行内元素变成块级元素）
2.行内元素：span不换行，设置宽度高度不起作用（因为在一行），但可以设置填充 (display：inline行内，可以让div不换行)
3.使用display相互转化
六：字体（都是在选择器中）
text-align:文本对齐方式
文本装饰：text-decoration.下划线等
word-spacing:单词的距离
letter-spacing：字母（中文）之间的间距
text-transform:文本的变化（首字母大写，全小写等）
text-indent:文本的缩进（也就是每段的开头是不是缩进，默认是对齐的）：面试
行高：line-hight(控制行与行之间的间距)
clore:设置颜色
七：背景：
背景颜色background-clore，背景图片background：平铺repeat-x是水平平铺
图片固定：及时下拉滚动条图片也不会动了 attachment:field