前端Day04-CSS

CSS

什么是CSS

CSS是层叠样式表，是一种标记语言
	作用：修饰html的机构样式，让结构显示的更好看，更美观。
	CSS最大价值：由HTML专注去做结构呈现，样式交给CSS，即结构html与样式css想分离
	html+css布局的优势：实现了结构与样式相分离；耦合性低，易维护

CSS语法

语法：
	选择器 {
		属性：属性值；
		属性：属性值1 属性值2；
	}
说明：
	1.css由两部分组成：
		选择器：要定义样式的对象
		声明(属性和属性值)：要显示成什么样子
			属性：指元素所具有的属性，已经规定好的，直接使用即可
				width
				height
				background
			属性值：
				数值加单位：px、%、em
				法定属性值：属性所具有的的属性值，是已经规定好的，直接使用即可
				颜色值：十六进制，rgb(),英文单词
		2.声明必须写在大括号里
		3.声明结束后，用分号“；”结束
		4.属性和属性值之间用冒号“：”连接

CSS样式表

1.行内样式表(内联样式表)
	语法：
		style=“CSS语句”
	说明：
		1.style="" 是html的属性，是所有标签都可以添加的属性；
		2.style="" 属性添加在要定义样式的标签上；
		3.作用域只对当前的标签起作用
		4.没有实现结构和表现相分离，耦合性及高
		5.不建议使用，需要的时候在使用
2.内部样式表(内嵌样式表)
	语法：
		<style type="text/css">
			css语句
		</style>
	说明：
		1.内部样式表是通过hml里的style标签创建的；所有创建在html页面内
		2.建议将style标签创建在head区域内
		3.type="text/css" 定义文本类型为css，可写可不写
		4.作用域只对当前的页面起作用
3.外部样式表
	语法：
		<link rel="stylesheet" type="text/css" href="">
	说明：
		1.link是属于html的标签，也是写在html的head里面；
		2.如果使用外部样式表的话，得先创建一个css文件；
		3.在通过link标签，把css文件，关联到html页面内；
		4.css文件不能独自运行；
		5.type="text/css" 定义文本类型为css，可写可不写
		6.rel="stylesheet":关联样式表
			rel：relation的缩写
			stylesheet：样式表
		7.href="" :要关联的文件路径
		8.作用域：可以作用在多页面上
		9.彻底实现了结构和表现相分离，耦合性低，易维护
		10.推荐使用外部样式表
4.外部样式表的关联方法：
	语法：
		<style>
			@import url(要关联的样式表文件路径)；
		</style>
	说明：
		1.属于css提供的连接方式
		2.style标签里就不能写其他的css代码
		3.是css2.1提出的方法

CSS样式表的优先级

1.行内样式表的优先级最高
2.内部和外部样式表和书写位置有关，谁的越靠后，谁的优先级别越高，遵循就近原则

CSS的选择器

CSS选择器作用：找到要定义样式的目标对象
一、基础选择器
1.类型选择器(元素选择器)：
	语法：
		元素名称 {
			属性：属性值；
		}
	说明：
		1.<>中的第一个单词
		2.一般在统一页面上某一类选择器的样式时；
		3.改变某一类标签的默认样式时；
		4.设置全局样式使用
2.id选择器
	语法：
		#id名 {
			属性：属性值；
		}
	说明：
		1.必须要配合html中的id属性一起使用；
		2.在css里使用id选择器的时候，一定要在id名前添加“#”；
		3.id属性的特点：唯一性；
		4.id="" 属性是每个元素都可以添加的；
		5.使用场景：写外围结构时，一般不会id，更多的是配合js使用	
3.class选择器(类选择器)
	语法：
		.class名 {
			属性：属性值；
		}
	说明：
		1.配合html中class属性一起使用
		2.一个元素可以有多个class名，也可以和其他元素使用同一个class名
		3.外围结构可以使用；写其他样式；设置某些元素相同样式时使用；

4.通配符选择器：
	语法：
		* {
			属性：属性值；
		}
	说明：
		1.*表示所有元素
		2.页面所有标签设置相同的样式
		3.设置全局样式

二、复合选择器
1.群组选择器(并集选择器)
	语法：
		选择器1，选择器2，选择器n {
			属性：属性值
		}
	说明：
		1.把相同属性的选择器提取出来   （ctrl+f查找替换）
2.包含选择器(后代选择器)
	语法：
		选择器1 选择器2 {
			属性：属性值；
		}
	说明：
		1.选择器之间用空格隔开
		2.找的是父元素里面的所有后代元素
		3.选择器1一定是选择器2的祖先级元素

3.子选择器：
语法：
	选择器1 > 选择器2 > 选择器n{
		属性：属性值
	}
说明：
	1.选择器之间用" > "连接
	2.选择器1是选择器2的父元素，选择器2是选择器3的父元素
	3.通过父元素知道父元素里面的子元素

4.相邻兄弟选择器
语法：
	选择器1 + 选择器2 + 选择器n{
		属性：属性值；
	}
说明：
	1.选择器中间用“ + ”连接
	2.选择器2是选择器1后面的紧挨着的同级元素

5.通用选择器
语法：
	选择器1 ~ 选择器2{
		属性：属性值；
	}
说明：
	1.选择器之间用" ~ "连接
	2.找选择器1后面的所有同级匀速选择器2

6.伪类选择器
语法：
	:link{属性：属性值；}		初始状态
	:visited{属性：属性值；}	访问后的状态
	:hover{属性：属性值；}		鼠标滑过的状态、悬停
	:active{属性：属性值；}	按下鼠标没有松开时的状态、激活
说明：
	1.伪类选择器本身是基础选择器
	2.一般是使用复合选择器的方式使用
	3.需要在伪类选择器前面添加上目标元素的名称；跟伪类选择器之间没有空格
		如：
			a:link{}
	4.只有超链接全部都具有，其他标签只具有悬停和激活

	7.focus伪类选择器
	:focus 匹配表单元素聚焦时的状态
	说明：
		1.应用在表单里的选择器
		2.设置表单聚焦时的状态