HTML和CSS（二）

HTML和CSS（二）

1.基本概念
	Cascading Style Sheets层叠样式表
2.CSS与html结合的方式
	1.内联样式（不推荐使用）
	2.内部样式
		在head标签内定义style标签，style标签的内容就是CSS代码
		<style>
			div{
				color:blue;
				}
		</style>
	3.外部样式
		1.定义CSS资源
		2.在head标签内定义link标签，引入外部的资源文件
		如
			a.css文件
			div{
				color:green;
			}
			<link rel = "stylesheet" href = "css/a.css">
		3.css语法
			格式
			选择器{
				属性1：属性值1；
				属性2：属性值2；
				...
			}
			选择器筛选具有相似特征的元素
			注意：
				每一对属性需要使用；隔开，最后一对属性可以不加
		4.选择器：
			分类
				1.基本选择器
					1.id选择器：选择器具体的id属性值的元素，建议在一个html页面中id值唯一
					语法：#id{属性值}
					2.元素选择器：选择具有相同标签名称的元素
					语法：标签名称{}
					注意：id选择器优先级高于元素选择器
					3.类选择器 ：选择具有相同class属性值的元素
					语法：.class{属性值}
					注意：类选择器优先于元素选择器
				2.扩展选择器
					1.选择所有元素：
						语法： *{ }
					2.并集选择器
						语法：选择器1，选择器2{}
					3.子选择器 筛选选择器1元素下的选择器2
						语法：选择器1 选择器2{}
					4.父类选择器 筛选选择器2的父元素选择器2
						语法：选择器1 > 选择器2{}
					5.属性选择器：选择元素名称，属性名=属性值的元素
					语法：元素名称[属性名 = ‘属性值’]{ }
					6.伪类选择器：选择一些具有的状态
						语法：元素：状态{	 }
						如<a>
							link:初始化的状态
							visited：被访问过的状态
							active：正在访问的状态
							hover：鼠标悬浮的状态
							
	5.属性：
		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