最近几天一直在学习前端网页的内容，希望随时能看到这些CSS的属性，就把这篇总结放上来了。
CSS全称：
cascading style sheet
CSS的维护者也是w3c
http://www.w3school.com.cn
1.样式三种书写方式
行间样式：
通过标签的属性style写在开始标签里面
项目中禁止使用行间样式(结构 样式 行为三者分离)!!
内部样式表：
通过<style></style>标签
做为head标签子集 结构 样式 行为三者分离
外部样式表：
外链接一个文件，文件类型为.css
所有的样式都写到这个文件里面.
在HTML里面用link标签去链接外部的css文件,link标签必须 放在head标签内部
<link type=”text/css” href=”文件名” rel=”stylesheet” />2.具体样式用法
1.width
2.height
宽和高 为0可不用带单位 其他值必须带px
3.color
设置文本颜色：三原色（red green blue） 十六进制 英文
color:rgb(0~255,0~255,0~255);
color:#EEFF66;
color:red;CSS3新增透明度rgba
color:rgba(0~255,0~255,0~255,0~1);最后一个代表透明度 1为不透明，注意不是颜色变淡，是真的透明。
5.line-height 行高
/*单行文本垂直居中 最高也只能设置等高父级*/
line-height: 40px;6.text
text-decoration
/*可以设置下划线underline，删除线， 上划线overline */
text-decoration: underline;
text-decoration: line-through;
text-decoration: overline;
text-decoration: none; /*设置标准文本*/text-align
/*设置文本左右对齐方式 left center right*/
text-align: center;text-indent
/*设置文本首行缩进 多少px 或者 em为当前字体大小，一般为2em*/
text-indent: 2em;letter-spacing
/*设置文字之间的间距*/
letter-spacing: 3px;7.border
solid 实线
double 双线
dashed 定义虚线。在大多数浏览器中呈现为实线。
dotted 定义点状边框。在大多数浏览器中呈现为实线。
/*复合写法设置边框: 大小 线型solid 颜色*/
border: #000 30px solid;
/*柝分四个 只设置某一条边 left right top bottom*/
border-right: 4px solid green;8.display 规定元素应该生成的框的类型
/*dispaly 转变标准文档流里面元素的特性*/
/*转为行内元素*/
display: inline;
/*转为行内块元素*/
display: inline-block;
/*转为块元素*/
display: block;
/*隐藏该元素*/
display: none;9.overflow 规定当内容溢出元素框时发生的事情。
/*子集内容溢出隐藏*/
overflow: hidden;
/*x方向溢出为滚动形式*/
overflow-x: scroll;
/*y方向溢出为滚动形式*/
overflow-y: scroll;
/*如果有溢出，自动出现滚动条*/
overflow: auto;10.特殊的
/*设置图片和文本上下对齐方式*/
vertical-align: bottom;3.选择器
优先级：
通配符 * < 标签 < 类class (.)< ID (#)< 行间 (style)
类class：英文字母开头，统一用小写多个命名，空格隔开
id : 具有唯一性
后代选择器：空格隔开 看到空格就想到是后代
子代选择器：(把上面空格替换为>)大于号表示，只作用于子集元素
交集选择器：标签和类可同时选择 一般来说标签搭配类 p.haha
并集选择器：“都” 用逗号隔开
选择器举例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width:200px; height: 200px;
border: 2px solid red;
}
/*后代选择器 空格隔开*/
.header p span{
/*background: purple;*/
}
/*子代选择器 用大于号表示*/
.header>span{
background: green;
}
/*交集选择器*/
.header span.child-span{
background: orange;
}
/*并集选择器, 多个元素样式共用*/
/*h2{
color:red;
}
h3{
color:red;
}
h4{
color:red;
}*/
h2, .h3, h4{
color:orange;
}
</style>
</head>
<body>
<div class="header">
<p>
<span>span</span>
</p>
<h2>
<span>h2-span</span>
</h2>
<span class="child-span">child-span</span>
<span>div-span</span>
</div>
<span>span-outer</span>
<h2>h2</h2>
<h3 class="h3">h3</h3>
<h4>h4</h4>
</body>
</html>外边距与内边距
设置外边距
一个值表示四个方向
二个值，第一个表示上下，第二个表示左右
三个值，第一个表示上，第二个左右，第三个下
四个值, 从上开始顺时针上右下左
复合写法：
margin: 20px 40px 60px 80px;单独设置：
margin-left:40px;外边距特性：
/*自身设置了宽度 auto 以父级宽度做参考 会拿到父级宽度-自己 */
margin: 0px auto;内边距 值的用法同外边距
1.自身加大
2.内容受影响, 背景(图片)不受影响
浮动 定义元素在哪个方向浮动
/*想办法脱离标准文档流 脱标
脱标方法 : 浮动 绝对定位 固定定位
特性:脱标元素没有行块之分了！！！可设宽高，不设置大小自动收缩为内容大小
*/
float:left;如果两个元素要站在一排，两个元素都要设置浮动
真正在标准文档流里面去搭布局是很迂腐:能设宽高不能一排 ，能一排的不能设宽高
伪元素
利用伪元素在某个元素之后添加内容
这个伪元素允许创作人员在元素内容的最后面插入生成内容。
默认地，这个伪元素是行内元素，不过可以使用属性 display 改变为块元素。
content 为插入的内容
clear 为清除哪个方向的浮动（both,left,right,none,inherit）
/*浮动了的子级元素不能撑高父级*/
.parent{
width:500px;
border: 1px solid purple;
float: left;
}
/*解决子级浮动不能撑高自动高度的父级*/
.parent:after{
content: ''; display: block; clear: both;
}背景
/*背景分拆*/
background-color: yellowgreen;
/*用图片做为背景*/
background-image: url(img/5.jpg);
/*设置平铺方法*/
background-repeat:no-repeat;
/*设置背景图片大小 两个值 x y */
background-size: cover; 全覆盖
background-size: contain;
/*背景定位 left top right bottom*/
background-position: 30px 50px;
background-position: 50%;
background-position: right bottom;
background-position: center;
/*背景固定*/
/*fixed 当页面的其余部分滚动时，背景图像不会移动。
scroll 默认值。背景图像会随着页面其余部分的滚动而移动。*/
background-attachment: fixed;
/*复合写法*/
background: orange url(img/1.jpg) no-repeat 30px center;精灵图
精灵图技术的本质：所谓精灵图就是把很多的小图片合并到一张较大的图片里，
所以在首次加载页面的时候，就不用加载过多的小图片，只需要加载出来将小图片合并起来
的那一张大图片也就是精灵图即可，这样在一定程度上减少了页面的加载速度，也一定程度上
缓解了服务器的压力。
div{
width:16px; height: 16px;
border:1px solid red;
background-image: url(img/all.png);
/*将图片向左移动193像素，向上移动991像素*/
background-position: -193px -991px;
}