学习记录——CSS

CSS(Cascading Sytle Sheets层叠样式表)
层叠：多个样式可以作用在同一个html元素上，同时生效。将内容展示和样式控制分离

css与html的结合方式

1.内联样式：在标签内使用style属性指定css代码
 2.内部样式：在head标签内，定义style标签，style标签的标签体内容就是css代码
3.外部样式：定义css资源文件，在head标签内，定义link标签，引入外部资源文件。

css语法

格式：选择器{
属性名1：属性值1；
属性名2：属性值2；
}
选择器：筛选具有相似特征的元素
每一对属性需要使用；隔开，最后一对属性可以不加；

选择器
1.基础选择器

	id选择器：选择具体的id属性值的元素。语法：#id属性值{}
	元素选择器：选择具有相同标签名称的元素。id选择器的优先级高于元素选择器。语法：标签名称{}
	类选择器：选择具有相同class属性值的元素。类选择器的优先级高于元素选择器。语法：.class属性值{}

2.扩展选择器

1.	选择所有元素：*{}
2.	并集选择器：选择器1，选择器2{}
3.	子选择器：筛选选择器1元素下选择器2元素
	选择器1 选择器2{}
4.	父选择器：筛选选择器2的父元素选择器1
	选择器1>选择器2{}
5.	属性选择器：选择元素名称，属性名=属性值的元素
	元素名称[属性名=“属性值”]{}
6.	伪类选择器：选择一些元素具有的状态
		元素：状态{}
		如：<a> link:初始化的状态
			   visited:被访问过的状态
			   active:正在访问的状态
			   hover：鼠标悬浮的状态

3.属性

1.字体，文本
	font-size:字体大小
	color:文本yanse
	text-align:对齐方式
	line-height:行高
2.背景
	background:
3.边框
	border
4.尺寸
	width height	
5.盒子模型：控制布局
	margin:外边距
	padding:内边距（默认情况下，内边距会影响整个盒子的大小，box-sizing:border-box设置盒子的属性，让width和height就是最终盒子的大小）
	float:浮动 left right