css:cascading style sheet
样式表-规则-选择器+声明-css属性+css属性值组成的键值对
div ul li #test{} 浏览器读取选择性的顺序从右往左

选择器：

规范地址：http://www.w3.org/TR/2011/REC-css3-selectors-20110929/

最新规范：http://www.w3.org/TR/selectors

选择器：基本选择器及其扩展

通配符，Id,类,元素，后代空格，分组，（结合符）

基本选择器：Css声明优先级

子元素选择器（直接后代选择器）#wrap >div

全变成粉色因为选择器的颜色属性是可继承的，属性查阅可登录 MDN Web文档

边框颜色是不可继承的（一定要拿非继承属性来测试）

后代选择器：#wrap #first

相邻兄弟选择器： #wrap > #first +.inner{}

通用选择器：相邻兄弟选择器： #wrap > #first ~.inner{}

(区别于兄弟相邻选择器，通用选择器适用于向下的所有兄弟，相邻兄弟选择器只适用于紧挨着的兄弟)

但可以看出兄弟的孩子是选择不到的

属性选择器

1.存在选择器

[attr] 包含attr属性的所有元素

2.值选择器

[attr| =””]

[attr~=val]选择attr属性的值val或val+空格+..的元素

3.子串值选择器

[attr|=val]选择attr属性的值val或以val-开头的元素

[attr^=val]选择attr属性的值以val开头的元素

[attr$=val]选择attr属性的值是以val结尾（包括val）的元素

[attr*=val]选择attr属性的值中包含字符串val的元素

4.伪类和伪类选择器（为了拿到元素的一些状态）

link ，visited 只能用在链接上

Visited 内只有color,background-color,border-color起作用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			*{
				margin:0;
				padding:0;
			}
			a{
				text-decoration: none;
				color:deepink;
			}
			div{
				width:200px;
				height:200px;
				background: pink;
				display: none;
				text-align: center;
				font:50px/200px "微软雅黑";
			}
			:target{
				display: block;
			}
		</style>
	</head>
	<body>
		<a href="#div1">div1</a>
		<a href="#div2">div2</a>
		<a href="#div3">div3</a>
		<div id="div1">
			div1
		</div>
		<div id="div2">
			div2
		</div>
		<div id="div3">
			div3
		</div>
	</body>
</html>

Target只能代表id为uri片段的元素

URI即为#后面的内容

动态伪类（排序 lvha）

Hover ,active

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			*{
				margin:0;
				padding:0;
			}
			a{
				text-decoration: none;
				color:black;
				display:block;
			}
			a:hover{
				font-size: 24px;
			}
			
		</style>
	</head>
	<body>
		<a href="javascript:;">css3真棒！</a>
		<a href="javascript:;">css3真棒！</a>
		<a href="javascript:;">css3真棒！</a>
		<a href="javascript:;">css3真棒！</a>
		<a href="javascript:;">css3真棒！</a>
		<a href="javascript:;">css3真棒！</a>
		<a href="javascript:;">css3真棒！</a>
	</body>
</html>

表单伪类

Enabled 匹配可编辑的表单,disabled 匹配被禁用的表单,checked匹配被选中的表单

focus匹配获焦的表单

结构性伪类

#wrap p :nth-child(1){} //找到wrap下的第一个子标签，并且标签名为p

#wrap p :nth-child(1){} //找到wrap下的所有子元素，并且选择此顺序下的第一个p子标签

*:first child{} //只要是html文档的第一个儿子 ...<head>标签，<body>里面的第一个子标签

P:only chid{} 只要p标签作为一个独生子 p:first-child:last-child{}

P:first-of-child p作为第一个孩子

p:first-of-type p作为孩子中的第一个

自定义字体

@font-face{

Font-family:”name”;//所指定字体名字

Src:url(font/.....);

}

准备一张矢量图
和不同的字符绑定 Font Lab
通过站点生成一个字体 http://www.fontquirrel.com

http://icomoon.io

盒模型

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			*{
				margin:0;
				padding:0;
			}
			#test{
				position:absolute;
				left:0;
				right: 0;
				top:0;
				bottom: 0;
				margin:auto;
				width: 100px;
				height: 100px;
				background: pink;
				text-align: center;
				line-height: 100px;
				box-shadow: 类型 10px 10px 10px 0px black， 20px 20px 20px -10px yellow ;//宽 高 模糊程度 阴影放大 颜色
			}
		</style>	
	</head>
	<body>
		<div id="test">
			test
		</div>
	</body>
</html>

图片居中的办法

1.给body增加一个子元素  宽度不限制，高度100%（img，after为兄弟元素）


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			*{
				margin:0;
				padding:0;
			}
			html,body{
				height: 100%;
			}
			body{
				text-align: center;
			}
			body:after{
				content:"";
				display: inline-block;
				height: 100%;
				vertical-align: middle;
			}
			img{
				vertical-align:middle;
			}
			
		</style>	
	</head>
	<body>
		<img src="img/1.jpeg"width="200",height="200">
	</body>
</html>

2.设置图片位置

 img{
				position:absolute;
				left:0;
				right: 0;
				top:0;
				bottom: 0;
				margin:auto;
			}

缩放页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			*{
				margin:0;
				padding:0;
			}
			html,body{
				height: 100%;
			}
			body{
				text-align: center;
			}
			body:after{
				content:"";
				display: inline-block;
				height: 100%;
				vertical-align: middle;
			}
	
			div{
				display: inline-block;
				width: 200px;
				height: 200px;
				background: pink;
				vertical-align: middle;
				resize:both;//长宽都可缩放
				overflow: auto;
			}
		</style>	
	</head>
	<body>
		<div></div>
	</body>
</html>

拖动右下角可以进行缩放

css_01