CSS快速掌握

##CSS:页面美化和布局控制

1.概念：Cascading Style Sheets 层叠样式表
	*层叠：多个样式可以作用到同一个html的元素上，同时生效
2.好处：
	1.功能强大
	2.将内容的展示和样式控制分离
		*降低耦合度。解耦
		*让分工协作更容易
		*提高开发效率
3.CSS的使用：CSS与HTML结合方式
	1.内联样式：
		*在标签内使用style属性指定CSS代码
		*如：<div style="color: aquamarine">hello css</div>
	2.内部样式：
		*在head标签内，定义style标签，style标签的标签体内容就是css代码
		*如：<style>
				div{
					color: red;
				}
			</style>
			<div >hello css</div>
	3.外部样式：
		*定义css资源文件-->在head标签内，定义link标签-->引入外部资源文件
		*如：  div{
					color: aqua;
				}
		<link rel="stylesheet" href="CSS样式/样式.css">
	*注意：三种方式的作用范围越来越大
		   1方式不常用，2,3方式常用
		   第三种格式可以写为<style>@import "CSS样式/样式.css" </style>
4.css语法：
	*格式：
		选择器{
			属性名1：属性值1；
			属性名2：属性值2；
			...
		}
	*选择器：筛选具有相似特征的元素
	*注意：
		*每一对属性需要使用；隔开
5.选择器：筛选具有相似特征的元素
	*分类：
		1.基本选择器
			1.id选择器：选择具体的id属性值元素，建议在一个HTML页面中id值唯一
				*语法：#id属性值{}
				*如：<style>
						#div1{
							color: red;
						}
					</style>
					<div id="div1">传智播客</div>
			2.元素选择器：选择具有相同标签名称的元素
				*语法：标签名称{}
				*注意：id选择器优先于元素选择器
			3.类选择器：选择具有相同的class属性值的元素
				*语法：.class属性值{}
				*注意：类选择器优先于元素选择器
		2.扩展选择器
			1.*：表示选择所有元素
				*语法：*{}
			2.并集选择器：
				*语法：选择器1，选择器2{}
			3.子选择器：筛选选择器1元素下的选择器2元素
				*语法：选择器1 选择器2{}
			4.父选择器：筛选选择器2父上选择器1
				*语法：选择器1 > 选择器2{}
			5.属性选择器：选择元素名称，属性名=属性值的元素
				*语法：元素名称[属性名="属性值"]{}
			6.伪类选择器：选择一些元素所具有的状态
				*语法：元素：状态{}
				*如：<a>
					*状态：
						*link：初始化状态
						*visited：被访问过的状态
						*active：正在访问的状态
						*hover：鼠标悬浮的状态
6.属性：
	1.字体、文本：
		*font—size：字体大小
		*color：文本颜色
		*text—align：文本对齐方式
		*line—height：行高
	2.背景：
		*background：背景
		* background: url("img/logo.jpg") no-repeat center;不重复居中
	3.边框：
		*border：设置边框，符合属性
	4.尺寸：
		*width：宽度
		*height：高度
	5.盒子模型：控制布局
		*margin：外边距
		*padding：内边距
			*默认情况下，内边距会影响盒子的大小
			*box-sizing: border-box;设置盒子的属性为最终盒子的大小
		*float：浮动
			*left：左浮动
			*right：右浮动