CSS笔记

一.css概述

Css:层叠样式表，用来定义网页上元素的样式(外观)，样式相当于我们每个人身上穿的衣服，给网页元素加上了样式后，就能给人带来比较美好的视觉享受。
Css规则：定义如何选中网页的元素，以及给该元素添加上哪些样式
语法：选择器 { 属性1: 值1; 属性2: 值2; … 属性N: 值N; }
其中每一个属性及值之间用冒号隔开，多个属性之间用分号隔开。每一个属性称为其中的一个样式。
引入样式的方式：
1.行内样式
行内样式是在元素上使用一个style属性来添加css样式，语法：
style=”属性1：值1;属性2：值2…属性n:值n”
2.内部样式
在网页头部使用一个或多个style元素(标签)来定义css样式,每个style元素就称为内部样式表
内部样式语法：

3.外部样式
使用hbulider创建外部样式表文件.css并定义样式的过程：
1）创建一个样式表文件*.css

2）.在*.css文件中定义样式，即css规则
p{
color:red;
font-size: 20px;
font-family:“黑体”;
}
3）在网页上使用link标签引入外部*.css文件
语法：

  <link href="外部css文件的相对路径" type="text/css"  rel="stylesheet" />

优点： 1）多个网页可以共享相同的css样式
2)实现css样式与网页内容的分离，即内容与表现(css样式)相分离

各个样式的特点：

1） 行内样式只对它所修饰的元素起作用，它是和元素绑定的;如果多个元素要共享相同的样式，不适合用行内样式
2 ) 内部样式只对当前的网页 起作用，它和网页文档绑定
3 )外部样式可以让多个网页共享相同的css样式，实现内容和表现相分离.
如果多个网页上要共享相同的css样式–引入外部样式
如果只有当前网页上需要使用css样式-引入内部样式
如果只有少数几个元素需要使用不同的css样式–>引入行内样式

二．Css选择器

A.基础选择器
1.标签选择器： 通过标签名(元素名)来选择网页上的元素
选择器名称就是标签名
2.Id选择器
写法：#元素id值
3.class选择器
写法：.元素class值
注意：元素的id要唯一，一个id选择器只能选择一个元素; 多个元素的class可以相同，一个class选择器可以选出多个元素
4.通配符选择器
选择网页上所有元素
其它三类选择器见案例

三.css属性

可以使用background属性来代替background-image, background-repeat, background-position三个属性
技巧：
设置背景图片水平和竖直方向都居中

1)将html和body的高度都设为100%

html,body {
height: 100%;
}

2)设置背景图片的位置为50% 50%或者center center

background-position: center center;

四. Css定位

文档流：是将浏览器窗口自上而下分成一行行，在每一行中从左到右排放元素的布局

相对定位：参照元素当前的位置进行定位，不会脱离文档流
例如：

#second{
				/* 相对定位:参照元素当前的位置进行定位 */
			   position: relative;
				/* 相对定位元素需要配合left,right,top,bottom来定位 */ 
				/* 参照它当前位置往右平移20px */
			   left:20px;
				/* 参照它当前位置往下平移40px */
			   top:40px;	
			}

绝对定位：参照离元素最近的父元素进行定位,会脱离文档流
例如：

	#second {
				/* 设置绝对定位，此时元素会脱离文档流 ,它原来的物理空间会被相邻的元素占有. 
				 * 绝对定位的元素在移动过程中是参照离它最近的父元素进行平移*/
				position: absolute;
				/* left:让元素向右移动多少像素， */
				left: 100px;
				/* top:让元素向下移动多少像素 */
				top: 50px;
			}