CSS及选择器

一、WEB标准

web标准是用来衡量当前网页书写是否标准的一种规则，标准的网页写法要达到结构、样式、行为三者相分离。

二、CSS基本介绍

用来修饰美化网页内容的展示效果，可以将其看作一门语言。

三、CSS书写基本规则

html、css两者本身相互独立，如何想用css修饰html就要先找到书写css的位置。我们可以将css写在html中，两者可以共存。一般先将css写在html网页的head标签里，title标签下。

四、CSS的书写位置

书写位置不同的权重：（内嵌 == 外链）< 行内

嵌入式

内嵌式不用加载外部css链接，在加载速度方面快于外链式，所以一般电商首页等一些对加载速度有要求的采用内嵌式。

	<style type="text/css">
		/* CSS代码存放位置 */
	</style>

外链式

实现了结构与样式的分离，更有利于维护

	<!-- rel属性：用来定义当前是个样式表，建议不要省略，否则会导致某些浏览器不能加载样式 -->
	<!-- 外部的CSS文件中不需要写style标签，直接定义需要的CSS样式即可 -->
	<link rel="stylesheet" type="text/css" href="**.css"/>

行内

	<div id="" style="color: red;"></div>

五、选择器

css选择器分为简单选择器与复合选择器两大类，每类里面又会包含不同的具体选择器。

1.简单选择器

类名可以重复、id不能重复、不能以数字开头、不能用下划线以外的符号、不推荐使用中文。

• 标签选择器：

	div{color: red;}

• 类选择器：

	#bz{color: green;}

• id选择器

	#id{color: blue;}

2.复合选择器

• 后代选择器：
  以某个元素为起点，不停查找它下面出现的子元素。

	祖先元素 后代元素1 后代元素2...{color: red;}

注：
1.以某个简单元素为起点，这个元素可以通过任何简单选择器选中。
2.祖先与后代元素之间用空格隔开，表示向下查找。
3.组成后代选择的每个位置都可以由任意简单选择器充当。

• 并列选择器：
  不同模块中的元素可能具有相同的css样式，这时采用并列选择器

	选择器1,选择器2...{color: green;}

注：
1.选择器1和选择器2可以由任意选择器充当，可以是简单选择器也可以是复合选择器。
2.省略号表示后面还可以继续添加选择器

3.选择器的权重

• 简单选择器：id选择器 > 类选择器 > 标签选择器 > 继承
• 复合选择器：本质就是比较简单选择器组合在一起的权重。人为为简单选择器赋值，id选择器：100 、类选择器：10、标签选择器：1。这样就可以通过组合计算来比较复合选择器的权重了。

六、CSS特性

1.继承性：子元素可以继承父元素的CSS样式。
2.覆盖性：同一个元素的相同CSS属性，在权重相同时后写的会覆盖先写的。
3:优先级：同一个元素被不同类型的选择器操作，会存在操作能力强弱的现象。

七、CSS3

1.盒子模型

• 内边距：padding
• 边框：border
• 外边距：Margin

	div{width: 100px;height: 100px;background-color: aquamarine;
		/* 设置边框整体样式 
			solid：实线
			dashed：虚线
		*/
		border: 1px red solid;
		/* 单独设置边框每条边的样式 */
		border-top: 1px red solid;
		border-bottom: 2px green dashed;
		border-right: 5px orange solid;
		border-left: 10px green dashed;
		
		/* 最基本的内边距 padding和margin 的写法 */
		/* 对整体进行设置，四周数值一致 */
		padding: 10px; 
		margin: 10px;
		
		/* 对四边单独设置 */
		padding-top: 10px;
		padding-bottom: 20px;
		padding-left: 30px;
		padding-right: 40px;
				
		margin-top: 10px;
		margin-bottom: 20px;
		margin-left: 30px;
		margin-right: 40px;
				
		/* 两个值分别代表 上下 左右 */
		padding: 10px 20px;
		margin: 10px 20px;
				
		/* 三个值分别代表 上 左右 下 */
		padding: 10px 20px 30px;
		margin: 10px 20px 30px;
				
		/* 四个值分别代表 上 右 下 左 顺时针 */
		padding: 10px 20px 30px 40px;
		margin: 10px 20px 30px 40px;
	}

2.圆角属性

	/* 一个值：四个角一致 */
	.div1{
		border-radius: 10px;
	}
	/* 两个值：第一个代表左上和右下，第二个代表右上和左下 */
	.div2{
		border-radius: 10px 0;
	}
	/* 四个值：分别设置 */
	.div3{
		border-radius: 10px 0 0 0;
	}

3.渐变色背景

	background: linear-gradient(to left,red,blue,green);

4.盒子阴影

	/* box-shadow：水平方向，垂直方向，阴影大小，阴影颜色 */
	.div1{
		box-shadow: 6px 9px 25px red;
	}
	/* inset：内阴影 */
	.div2{
		box-shadow:inset 0px 0px 7px red;
	}

5.透明背景

rgba：背景透明

	/* 四个参数：red,green,blue,透明度 */
	background: rgba(255,255,255,0.5);

6.文字阴影

使用方法参考盒子阴影

	text-shadow: white 0px 0px 2px;

7.旋转、缩放、位移

transform:属性只能生效一个，如同时存在按最后一个生效

• 旋转
  transform: rotate()：顺时针旋转

	/* 旋转之后所占的行高还是旋转之前的，所以有可能与下方的盒子重叠 */
	transform: rotate(90deg);

• 缩放
  transform: scale()：比例缩放

	transform: scale(0.3);

• 位移
  transform: translate(100px,100px)：水平、上下位移

	transform: scale(0.3);

• 3D旋转
• transform: rotate3d(x,y,z,角度)：可以达到3D旋转效果
  

	/* y轴翻转，达到翻牌效果 */
	transform: rotate3d(0,1,0,180deg);

8.过渡属性

transition:参数一 参数二 参数三 参数四
参数一：触发条件，一般写all
参数二：过渡时间
参数三：等待时间，等待之后开始变化
参数四：ease-in或者ease-out代表变加速或者变减速

	/* 如果过渡过程中，鼠标离开盒子或盒子边缘经过鼠标都会导致盒子复原 */
	transition: all 1s 2s;
	/* hover叫CSS伪类，鼠标悬停时候的样式 */
	.div1:hover{}

9.自定义动画

	div{
		width: 130px;
		height: 40px;
		background-color: #FF0000;
		border-radius: 10px;
		padding: 5px;
		/* animation：动画名称 时间 无限循环 反向动画 */
		animation: go 1s infinite alternate;
	}
	/* @keyframes 动画名称 */
	@keyframes go{
		/* from,go 可以用百分比替代 */
		/* 开始的状态 */
		from{
			background-color: red; 
			transform: translate(0px,0px);
		}
		/* 结束的状态 */
		to{
			background-color: blue;
			transform: translate(100px,0px);
		}
	}