走进CSS

走进css

一、什么是CSS

CSS 层叠样式表，级联样式，简称才是样式表
实现了内容和表示的分离
CSS和HTML之间的关系
HTML是负责网页的结构
CSS 是负责构建HTML元素的样式
CSS作用：
1.以统一的方式实现样式的定义
2.提高页面样式的可重用性和可维护性

二、CSS的使用

三、CSS基础选择器

1.通用选择器
作用：匹配到页面中所有的元素
语法：*{样式1；样式2；}
优点：一个样式整个页面都可以被改变
缺点：效率低，尽可能的少用

	2.标签选择器
		作用：定义页面的某一个标签的默认样式
		语法：	标签名{样式1；样式2}
		
	3.类选择器
		作用：由CSS定义好，可以被任意标记的Class属性值进行引用的选择器
		语法：	1.在标签中添加 class属性 并且给他一个名字
				2.在style中 用.类名{}方式进行样式编写
		注意：类名：不能以数字开头，除了 _ , - 以外的特殊符号都不能使用
		
	4.ID选择器
		作用：针对指定id值得元素去定义样式
		语法： 1.在元素中定义id属性
			   2.在style中用#id名进行样式编写
		注意：	id是唯一的
				一定要对应页面某个元素的id值
				class里面可以同时存在多个类名但是id不能存在多个id名
	优先级  ID  >  类  > 标签 > *
	
	5.群组选择器
		作用：选择器声明 以 ， 隔开的选择器列表
		语法：	
				选择器1，选择器2，。。。。{样式1,；样式2}
		ps：不同的选择器都可以被选中（都可以连着用）
		
	6.后代选择器
		后代：只要具备层级关系的元素，被嵌套的都可以称为后代元素
		语法：	
				#div1 span{}
		注意：中间用空格隔开，并且他们只能是父子级的关系
		
	7.子代选择器
		子代：只具备一级层级关系的子元素，被嵌套的（被包括的）称之为子代元素
		语法 ： #div2 > span{}
		
	8.伪类选择器
		1.hover
	9. 选择器的优先级
		选择器的类型        权值
		元素选择器          0,0,0,1
		类选择器            0,0,1,0
		伪类选择器          0,0,1,0
		id选择器            0,1,0,0
		内联样式            1,0,0,0
	注意：选择器的权值加到一起 大的是优先 如果权值相同的话，后定义的优先

四、盒子模型

1.元素的分类
1、块级元素：独占一行，对宽高生效，如果不给宽度撑满整行，如果不给
高度随着内容的增长而增长
2、行内元素：可以多个标签存在一行，对宽高不生效完全依靠内容去撑起宽高
3、行内块元素： 结合了行内和块级元素的特点，不仅是可以设置宽高而且还可以多个标签
存在一行。
4、如果有需要的话 可以运用display进行强转
inline 行内元素
block 块级元素时可以设置宽高的
inline-block 行内块元素：
none 不显示

	2.外边距  内边距  边框  内容
		W3C标准的盒子模型中 元素在网页中所占的位置的实际宽度