【2017-03-24】CSS样式表
CSS样式表：层叠式样式表
一、样式表的分类
1、内联式
写在标记的属性位置，优先级最高，重用性最差。
格式：
<div style="width:100px;height:100px;background-color:red;border:1px solid black">这里是内容</div>
2、内嵌式
<style></style>写在head里面，优先级第二，重用性一般
格式：
<style type="text/css">
.div1{
width:100px;
height:100px;
background-color:red;
border:1px solid black
}
</style>
<div class="div1"></div>
3、外部式
写在一个单独的以css结尾的文件中，通过引用来建立文件与html文件的关系，优先级最低，重用性最好，推荐使用
在css文件中的格式：
.div1{
width=100px;
height=100px;
background-color:red;
border:1px solid black;
}
在html中调用该格式：将css文件拖到html的<head></head>中
或者在<head></head>中输入代码：<link href="css文件的路径" rel="stylesheet" />
二、选择器
1、id选择器
优先级第一，只能选中一个元素。
#ddd1{
background-color:pink;
}
2、class选择器
优先级第二，可以选中一堆元素。
.div1{
background-color:blue;
}
3、标签选择器
以标签名进行选择 div span 优先级最低，能选中一堆元素，不建议使用
div{
background-color:blue;
}
4、符合选择器
（1）逗号并列
.div1,.div2,#ddd1{
background-color:green;
}
（2）空格后代
.div1 .span1{
font-size:16px;
}
三、样式
1、大小
width:200px; 宽
height:300px; 高
2、背景
background-color:red/#303030/rgb(255,255,255); 背景色
background-image:url(图片路径); 背景图片
background-repeat: 背景图片平铺方式
background-postion: 背景图片位置
background-size: 背景图片大小
background-attachment:fixed 背景图片是否滚动（fixed背景图锁定）
3、字体
font-family: 字体类型
font-size: 12px;/14px; 字体大小
font-style:italic 倾斜
font-weight:bold 加粗
text-decoration:underline下划线 overline上划线 line-through删除线 none 没有，用来去掉超链接的下划线
color: 字体颜色
4、对齐方式(控制文字在一个div中的布局方式)
text-align:center 水平对齐方式(center水平居中)
vertical-align：middle 垂直对齐方式（middle垂直居中） 但必须配合display:table-cell;使用
line-height:22px; 行高,按像素调
text-indent:30px; 缩进单位，按像素调节
5、边界边框
margin:50px 100px 60px 70px; 外边距 上右下左顺时针顺序
以浏览器左上角为基点若只设置一个px值，则是四个方位的外边距都是设置的这一个值。
若填两个值例如 50px 30px 则是上下外边距是50个像素，左右外边距是30个像素。
padding: 内边距 上右下左顺时针顺序 增加内边距属性，该元素会相应的变大
border:1px(边框粗细) solid(边框实线) black(边框颜色) 边框
6、列表方块
list-style: none将列表前面的序号去掉
list-style-image:url(图片路径) 可以将前面的序号变为图片
7、格式与布局
1、位置
（1）postion:
<1>、fixed固定 将一个元素锁定在一个位置。相对于浏览器边框位置固定
<2>、absolute绝对位置 postion:absolute绝对定位，一出现绝对定位则该元素浮动。多了top/bottom/left/right四个属性。一旦浮动起来，该元素要找一个相对定位来进行定位。要想使他在他父级里定位，要在他父级中加postion:relative;
相对于父级元素（浏览器，绝对定位的上级）
<3>、relative相对位置 postion:relative相对定位，多了top/bottom/left/right四个属性 相对于自身应该出现的位置
（2）top:距离上边的距离
（3）right:距离右边的距离
（4）bottom:距离下边的距离
（5）left:距离左边的距离
2、流
float:left;/right; 流式布局
clear:both; 清流
清楚流式布局用法：
在需要清楚流式布局的位置打上一行代码：<div style="clear:both;"></div>
3、z-index分层
值越大越靠上
8、其他
display:block;/none; 显示block和隐藏none,不占位置
visibility:hidden;/visible; 显示visible和隐藏hidden,占位置
overflow:hidden;/scroll; 超出范围隐藏/超出范围加滚动条
透明：opacity:0.5;-moz-opacity:0.5;filter:alpha(opacity=50)
圆角：border-radius:5px;
阴影：box-shadow:0 0 5px black;
