CSS学习

一.CSS概述

（1）

（2）

（3）

二.CSS与HTML的结合方式

1.内联样式：
	在表情内使用style属性指定css代码。
	如<div style="color:red;">hello css</div>
	(注意：css代码就是由键值对组成的“，”键与值用：分开，不同键用“；”分开)
2.内部样式：
	在head表情内，定义style标签，style标签的标签体内容就是css代码
	如:	
		<style>
			div{
				color:blue;
			}
		</style>
		(style会修改本html文件中所有的div标签的属性，单独div定义属性可覆盖)	
3.外部样式：
	（1）定义在css资源文件中：
	（2）在head标签内，定义link标签，引入外部的资源文件
	 	 如：xx.css文件：
	 	 		div{
	 	 			color:green;
	 	 		}
	 	 		<link rel="stylesheet" href="css/xx.css">
	 	 		(注意：在css目录中的xx.css文件中直接写对种类标签属性的定义即可)	
	 	 		(注意：在html文件中若要应用css外部文件需要引入)	

三.CSS语法格式

1.格式：
	选择器{
		属性名1：属性值1；
		属性名2：属性值2；
	}
	注意：每一对属性用”；“隔开，最后的属性后可以不写”；“。
	
2.选择器：
	筛选具有相似特征的元素。
	分类：
		（1）基本选择器
				【1】id选择器：选择具体的id属性值元素。
					CSS语法：#id值：{}
					（注意：id必须以字母开头，不能以数字开头）
				【2】元素选择器：选择以此为标签名称的元素。
					CSS语法：标签名称{}
				【3】类选择器：选择以此作为class属性值的元素。
					CSS语法：.类值{}
					（注意：类值必须以字母开头，不能以数字开头）
				（选择器有优先级：id选择器>类选择器>元素选择器。同类按顺序被覆盖）
				
		（2）扩展选择器
			【1】选择所有元素：
					CSS语法：* {}
			【2】并集选择器：
					CSS语法：选择器1，选择器2{}
			【3】子选择器：选择 被选择器1包含的选择器2类型
					CSS语法：选择器1 选择器2{}
				（注意：选择器1类型中的选择器2类型指的是，选择器2被包含在选择器1之中）
			【4】父选择器：选中 包含选择器2的 选择器1类型
					CSS语法：选择器1 > 选择器2
			【5】属性选择器：选择属性等于某值的某选择器
					CSS语法：选择器[属性名=属性某值]
			(注意：以上选择器不仅仅指元素选择器，而是包含所有基本选择器)
			【6】伪类选择器：选择一些元素具有的状态
					CSS语法：元素：状态{}
				（注意：具体元素的不同状态构成的伪类选择器安防顺序是有规则的，如下图中链接：访问状态 选择器中，对于已访问过的网址visited会一直触发，若把visited放在active或者hover之后，则active和hover永远会被覆盖，永远无效。所以要如图把特别的放在后面）

四.CSS属性

1.字体、文本
	（1）font-size：字体大小。
	（2）color：文本颜色。
	（3）text-align：对齐方式。
	（4）line-height：行高。
2.背景
	backgroung：设置背景。	
	（注意：要设置图片为背景则使用如图url("地址") 次数。空格后跟的次数表示图片不足以填充满背景时是否重复填充，填充几次）
3.边框
	border：设置边框。
	（注意：边框有多个属性，多个属性直接都在冒号后面写即可，不过要用空格分开，但是没有顺序即可任意顺序，许多属性还有单位）
4.尺寸
	width：宽度。
	height：高度。
	（注意：宽度和高度设置时要在具体数值后面加单位，如px，否则可能无效。
5.盒子模型
	重点：每一个元素都有大小、边框（默认不显示），都是一个盒子。
	作用：控制布局。
	属性：
		float：浮动。（值为left或者right）
		margin：外边距 指某个盒子与其最近的外部盒子的对边（有四段相对）的距离。
		padding：内边距 指某个盒子与其最近的内部盒子的对边（有四段相对）的距离。
	（注意：内外边距都是相对而言的，同一段距离从不同的某个盒子的视角出发定义不同）
	（注意：每个边距都有left、top等值可单独设置，也可直接设置总边距而一起设置）
	（注意：默认情况下设置盒子的内边距常会改变盒子的大小（即widtht和height）。通过设置如图box-sizing属性即可固定盒子大小不变）