D6、CSS

css:页面美化和布局控制、

概念: Cascading style Sheets层叠样式表
	层叠:多个样式可以作用在同一个html的元素上,同时生效,
好处:1,功能强大；2,将内容展示和样式控制分离降低耦合度。解耦、让分工协作更容易、提高开发效率

Css的使用: css与html结合方式
	1.内联样式
		在标签内使用style属性指定css代码
		如: <div style="color:red; ">hello css</div>
	2,内部样式
		在head标签内,定义style标签, style标签的标签体内容就是css代码
		如：
		<style>
			div{
				color:blue;
				}</style>
		<div> hello css <div>
3,外部样式
	1,定义css资源文件。
	2,在head标签内,定义link标签,引入外部的资源文件，如：
		a.css文件：
			divi{
				color:green；
				<link rel="stylesheet" href="css/a.css">
				<div>hello css</div>
				 <div>hello css</div>
	注意: 1,2,3种方式css作用范围越来越大
	1方式不常用,后期常用2,3
	3种格式可以写为:<style> @import "css/a.css";</style>
	
4. css语法:
	格式
		选择器{
			属性名1:属性值1;
			属性名2:属性值2;
			.....
		}	
		选择器:筛选具有相似特征的元素
		注意：每一对属性需要使用;隔开,最后一对属性可以不加;
5、选择器:筛选具有相似特征的元素
	分类:
	1,基础选择器
		1. id选择器:选择具体的id属性值的元素.建议在一个html页面中id值唯一
			语法: #id属性值()
		2,元素选择器:选择具有相同标签名称的元素
			语法:标签名称{}*
			注意:id选择器优先级高于元素选择器
		3,类选择器:选择具有相同的class属性值的元素。
			语法: .class属性值(}注意:类选择器选择器优先级高于元素选择器
	2.扩展选择器
		1.选择所有元素
			*语法: *{}
		2.并集选择器:*选择器
			1,选择器2{}
		3.子选择器:筛选选择器1元素下的选择器2元素
			语法: 选择器1 选择器2{}
		4·子选择器:筛选选择器2的元素选择器
			语法: 选择器1 >选择器2{}
		5·属性选择器:选择元素名称,属性名-属性值的元素
			语法: 元素名称[属性名="属性值"]{}
		6．伪类选择器:选择一些元素具有的状态
			语法:元素:状态{}
			如: <a>
				状态：
					link :初始化的状态
					visited:被访问过的状态
					active:正在访问状态
					hover :鼠标悬浮状态
					
6．属性
	1,字体、文本
		font-size :字体大小
		color :文本颜色
		text-align :对其方式
		line-height :行高
	2,背景
		background 
	3,边框
		border :设置边框,符合属性
	4,尺寸
		width :宽度
		height :高度
	5,盒子模型：控制布局
		margin :外边距
		padding :内边距
			默认情况下内边距会影响整个盒子的大小
			box-sizing: border-box; 设置盒子的属性, 让width和height就是最终盒子的大小'
			float:浮动
			 	left
			 	right