一、CSS概述
1.css是什么？？
层叠样式表
2.css的引入方式
1.行内样式 在标签上加属性style="属性名1:属性值1;属性名2:属性值2;..."
2.内嵌式 在head里加<style></style> 所有的样式写在标签内
3.外链式 单独的css文件(后缀名 css名字.css) <link href="css文件的路径" rel="stylesheet" type="text/css" />
4.导入式 @import url(css路径) 或者 @import css路径
3.css语法
选择器{声明1;声明2;...} 声明====>属性名:属性值
4、常用.选择器
1.标签(元素)选择器
标签名{属性名1:属性值1;属性名2:属性值2;...}
2.通配符选择器 *
选择所有的标签
*{属性名1:属性值1;属性名2:属性值2;...}
3.id选择器
#id名{ }
4.类选择器
.类名{ } 标签名.类名{ } 例子：div.box{ } 类名叫box的div
5.包含选择器
父元素 子元素{ } 此时的子元素可能是父元素的直接子元素 也可能是子元素的子元素
例如：div .box{ } div下方 所有类名叫box的元素
选择直接子元素 父元素>子元素{ }
二、css中的属性
1、单位
1.px 像素
2.em 字大小的倍数
2.表示颜色的英文单词
2.rgb值 取值范围0-255 例如：绿色 =====> rgb(0,255,0)
rbga(数值1，数值2，数值3，透明度) 透明度取值范围0-1
3.十六进制表示法 取值范围0-f 例如:蓝色 =======>#0000ff
3.字体样式的设置
1.font-family 字体系列
指定多个字体时 用“,”隔开 例如:font-family:"New Times","微软雅黑",....;
2.font-size 字体大小
单位 px 、 em 例如：font-size:30px;
3.font-style 字体倾斜效果
值：
normal 正常（默认）
oblique 倾斜体
italic 斜体
4.font-weight 字体加粗
值：
normal 正常（默认）
bold 粗体
bolder 加粗体
lighter 细体
100-900 数字越大 字体越粗
5.text-transform 字体英文大小写转换
值：
uppercase 全大写
lowercase 全小写
capitalize 首字母大写
6.text-decoration 字体的修饰
值：
none 去除下划线
underline 增加下划线
line-through 中划线（删除线）
overline 上划线
7.text-align 文本水平对齐方式
值：
left 左对齐
center 居中对齐
right 右对齐
justify 两端对齐（一般常用与英文）
8.line-height 行高
文字在一行内垂直居中 line-height:height的值
9.vertical-align 垂直居中
行内块级元素与行内元素或文本的垂直对齐
值：
baseline
top
middle
bottom
10.overflow 内容溢出处理
值：
visible 超出部分 可见
hidden 超出部分 隐藏
scroll 出现滚动条
auto 浏览器自动处理
11.text-overflow 文本溢出处理
值：
clip 超出部分 剪切
ellipsis 超出部分 显示省略号
12.white-space 空白处理
值：
normal
pre 保留空格
nowrap 不换行 =====》<nobr>强制不换行</nobr>
13.text-indent 文本缩进
值：正负都可以
14.letter-spacing 字母与字母之间的间距/中文的字与字之间的间距
值：正负都可以
15.word-spacing 单词与单词之间的间距（英文）
三、权重问题
* 通配符选择器 权重 0.5
标签选择器 权重 1
类选择器 权重 10
id选择器 权重 100
行内样式 权重 1000
样式里的值后面 !important 权重最大
包含选择 权重相加
谁的权重大 谁的样式起作用
四、盒子模型
1.什么是盒子模型？
具有内边距 外边距 内容 边框等属性的假想的盒子
2、padding
2.padding 内边距（内补丁）
padding-top
padding-right
padding-bottom
padding-left
padding:上下左右; （一个值）
padding:上下 左右; (两个值)
padding:上 左右 下; (三个值)
padding:上 右 下 左; (四个值) 遵循顺时针次序
-------------------------------------------------border
3.border 边框
border-width 边框的宽度
border-color 边框的颜色
border-style 边框的样式 （值：solid实心 dotted小圆点 dashed虚线 ...）
border:border-width border-color border-style;
border-left: border-width border-color border-style;
border-right、border-top、border-bottom
例如：border:2px solid red;
border-right:1px dotted blue;
border:none;
border:1px solid red;
border-bottom:none;
边框的小应用：
小三角：
width:0;
border:10px solid transparent;
border-bottom-color:red;
4.a元素的伪类
a:link{} 未访问状态
a:visited{} 访问过后的状态
a:hover{} 鼠标悬停时的状态
a:active{} 激活时的状态
遵循原则：LoVe HAte
5.元素间的转换
a.任何元素转换为块级元素 display:block
b.任何元素转换为行内块级元素 display:inline-block（ie7及以下版本不支持）
c.任何元素转换为行内元素 display:inline
d.任何元素消失不见 display:none
-----------------------------------------------margin外边距
用法同padding
注意：
1.左右横排的盒子之间的间距是 两者的外边距相加
2.上下排列的盒子之间的间距是 以最大的为准（大的会把小的给吞掉）
3.一个盒子包着里一个盒子 他们都有margin-top 以最大的为准（大的会把小的给吞掉）
解决方案:给父元素加overflow:hidden
块居中 margin:0 auto;
五、关于background背景
1.背景颜色 background-color
值:
1,2,3,4
2.背景图片 background-image
值:
url(图片的路径)
默认情况下 图片垂直水平都平铺（重复）
3.背景平铺 background-repeat
值:
repeat 默认 图片垂直水平都平铺（重复）
no-repeat 不平铺
repeat-x 水平平铺
repeat-y 垂直平铺
4.背景图片位置 background-position
值：
a.表示位置的英文单词 left right center top bottom
b.百分比
c.具体有单位的数值
left top ====> 0 0 左上角
center top =====>50% 0 顶部中间
right top =====>100% 0 右上角
left center ====>0 50% 左中
center center=====>50% 50% 正中间
right center====>100% 50% 右中
left bottom=====>0 100% 左下角
center bottom====>50% 100% 下中
right bottom===>100% 100% 右下角
5.背景图片渲染的位置 background-origin
值：
padding-box 从内边距位置开始渲染图片（默认）
content-box 从内容区域开始渲染图片
border-box 从边框区域开始渲染图片
6.背景图片的大小 background-size
值:
a.百分比
b.数值+单位
c.cover 等比例扩展图片至足够大 （图片可能被裁减）
d.contain 等比例扩展图片至足够大（图片可以完整显示，可能会引起区域内空白）
7.背景图片是否固定 background-attachment
值:
a.scroll 背景图片会随着正常的文档流滚动（默认）
b.fixed 背景图片固定不动 不会随正常的文档滚动
简写： background:background-color background-image background-repeat background-position;
background:背景颜色 url(图片路径) 是否重铺 背景图片的位置;
例子： background:#fff url(img/1.jpg) no-repeat center center;
css精灵--sprite雪碧图
六、浮动
浮动的元素脱离正常的文档流
float:
值:
left 左浮动
right 右浮动
none 不浮动
任何元素加了浮动后（left,right）,变成了块级元素
清除浮动
1.给父元素加height
2.给父元素加overflow:hidden
3.在浮动元素后面加一个空的块级元素 给它加样式 clear:both clear(left清除左浮动 right清除右浮动 both清除左右浮动）
a.给父元素加伪类 :after
父元素:after{
content:"";
display:block;
clear:left;
}
七、定位
position定位：
值：
static 不定位（默认 正常文档流）
relative 相对定位 （相对于自身）
absolute 绝对定位
1.有定位的元素的外面包着它的元素（可能是直接元素，也可能是间接元素）有定位，相对于有定位的那个元素定位
2.有定位的元素的外面包着它的元素没有定位，相对于浏览器定位
fixed 固定定位 （相对于浏览器定位）
多个定位元素的覆盖次序 通过z-index来判断 z-index的值是一个没有单位的数值
谁的z-index的值越大，谁就在最上层
八、列表样式
1.list-style-type 列表样式类型
值：
a.disc 实心原点
b.none 去掉样式
c.circle 空心圆
d.square 实心方形
2.list-style-image 列表样式图片
值：
url(图片路径)
3.list-style-position 列表样式的位置
值：
outside 列表样式在内容的外面
inside 使列表样式在内容再里面
元素隐藏
1.display ：none 元素在页面不显示 位置也不见了
2.visibility:hidden 元素在页面不显示 位置还在
3.opacity:0 元素在页面看不见 位置还在
4.z-index ： -999999 元素在页面也看不见
鼠标光标的样式
1.cursor 光标
值：
pointer 小手样式
wait 等待
help 帮助
url(图片路径),auto 光标变成所需要的小图片