前言

CSS:Cascading Style Sheets 层叠样式表
CSS定义：可以设置网页中的样式，外观，美化
CSS中午名字：级联样式表，层叠样式表，样式表

CSS基础语法

CSS规则由两个主要组成部分：选择器，以及一条或多条声明
h1:选择器 {color:blue;font-size:12px;}：声明
注意：
1.在HTML中可以把样式定义在标签中
2.选择器：指定要改变样式的HTML元素
3.每条声明由一个属性和一个属性值组成
4.CSS声明以分号";"结束，声明以大括号{}括起来

基础语法

style标签 ：写在title标签后
选择器 {属性名1:属性名1;属性名2:属性值2}
color：代表颜色
font-size：代表字体大小，
px：代表像素单位

	
		
		
		
	
	
		hello python
		hello python
		hello python
		hello python
	

开发者工具的使用

1.打开方式：鼠标右键---检查
2.找到菜单：element 元素
3.鼠标左键点击想要看的元素标签
4.右侧会随之出现对应的CSS样式代码
5.可以设置颜色，设置字体大小
6.把设置后的颜色代码和设置后的字体代码放到 程序中即可

标签选择器

标签选择器：利用标签的名字来进行页面元素的选择，标签，标记的选择

		
	
	
		hello python
		hello python
		
hello world
		
hello world

id选择器

#id="值"

	
		
		
		
	
	
		
郑州
		
北京
		
上海
		
广州
	

id的值 命名规则
1.数字不能开头
2.不能使用中划线，下划线的符号
3.不推荐使用中文
4.尽量见名知意：起名字的时候看到名字就知道其含义的效果 如p_red
5.必须具有唯一性
6.每个标签只能有一组键值对

class类选择器

给HTML标签添加class属性
在CSS中使用 ".class"明确进行选择
注意：class可以重复使用，每个标签可以有多个class属性，多个属性之间添加空格分隔
class类命名规则同id

	
		
		
		
	
	
		
班长
		
学习委员
		
数学课代表
		
语文课代表
		
	

CSS书写位置引入方式

内嵌式：css写在style标签中，放在title标签后面，HTML代码和CSS代码混在同一个文件中
外链式：HTML代码和CSS代码式分离的，通过连接在一起即可

p{color:greenyellow;font-size: 50px;}

内嵌外链应用场景
1.内嵌式：应用在电商网站首页 对网站加载速度有要求，CSS和HTML代码一次性加载进来
2.外链式：除了电商网站首页外的地方，外链式 查看代码比较方便

行内式（了解）
css代码写在标签的身上，不推荐使用，修改不方便，重复代码太多 导致加载速度慢

郑州

	
		
		
	
	
		
郑州
		
北京
		
上海
		
广州
	

鼠标移入伪类（了解）

:hover{属性: 值;} 鼠标移入动作执行后的CCS代码

	
		
		
		
	
	
		
hello python
	

并列并集选择器

使用场景：需要一句话选择多个元素的时候，可以使用逗号进行连接
语法格式：h1,div,span,p{ }

后台选择器

选择器中出现空格，代表着后代
div span() 找到div的后代span