web开发技术之css知识点基础架构

1 CSS语法规范

语法规范要点：

• 样式要包含在<style>标签内，表示样式表
• 样式由选择器、属性、属性值组成
• 属性和属性值以键值对形式出现，两者由英文**" ："**分开
• 多个键值对时，需要用**“；”**分开
• 选择器的作用是选择指定的标签，由对应的属性内容进行样式更改
• 这里需要注意代码风格养成

2 基础选择器

序号	选择器名称	语法	作用	特点	使用情况
1	标签选择器	标签名{属性1: 属性值1; }	标签选择器可以把某一类标签全部选择出来	不能差异化选择	较多
2	类选择器	. 类名 {属性1: 属性值1; }	要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器	可以根据需求选择	非常多
3	id选择器	# 类名 {属性1: 属性值1; }	为标有特定 id 的 HTML 元素指定特定的样式	ID属性只能在每个HTML文档中出现一次	一般和js搭配
4	通配符选择器	* 类名 {属性1: 属性值1; }	表示选取页面中所有元素（标签）	选择的太多，有部分是不需要的	特殊情况使用

3 字体属性

序号	属性	意义	注意点
1	font-size	字号	我们通常用的单位是px像素，一定要跟上单位
2	font-family	字体	实际工作中按照团队约定来写字体
3	font-weight	字体粗细	加粗是700或者bold，不加粗是normal或者400，数字不要跟单位
4	font-style	字体样式	倾斜是italic，不倾斜是normal，工作中最常用normal
5	font	字体连写	字体连写是有顺序的，不能随意换位置，其中字号和字体必须同时出现

4 文本属性

序号	属性	意义	注意点
1	color	文本颜色	通常用十六进制，比如简写形式#fff
2	text-align	文本对齐	设定文字水平的对其方式
3	text-indent	文本缩进	通常我们用于首行缩进2个字的距离 text-indent：2em
4	text-decoration	文本修饰	添加下划线underline，取消下划线none
5	line-height	行高	控制行与行之间的距离

5 引入方式

• 内部样式表

<style>
 	div {
 		color: red;
 		font-size: 12px;
	 }
</style>

• 行内样式表

<div style="color: red; font-size: 12px;">青春不常在，抓紧谈恋爱</div>

• 外部样式表

<link rel="stylesheet" href="css文件路径">

6 复合选择器

序号	选择器名称	语法	作用	特点	使用情况
1	后代选择器	符号是空格，.nav a	用来选择后代元素	可以是子孙后代	较多
2	子代选择器	符号是大于 .nav > p	选择最近一级元素	只选亲儿子	较少
3	并集选择器	符号是逗号，.nav, .header	选择某些相同样式的元素	用于集体声明	较多
4	链接伪类选择器	重点记住a{ } 和 a:hover实际开发的写法	选择不同状态的链接	跟链接相关	较多
5	:focus选择器	input:focus	选择获得光标的表单	跟表单相关	较少

7 CSS的元素显示模式

• 元素显示模式就是元素（标签）以什么方式进行显示
• html元素一般分为块元素、行内元素、行内块元素

序号	元素	元素排列	设置样式	默认宽度	包含
1	块级元素	一行只能放一个块级元素	可以设置宽度高度	容器的100%	容器级可以包含任何标签
2	行内元素	一行可以放多个行内元素	不可以直接设置宽度高度	它本身内容的宽度	容纳文本或者其他行内元素
3	行内块元素	一行放多个行内块元素	可以设置宽度和高度	它本身内容的宽度

元素显示模式转换
1、转换为块元素：display:block;
2、转换为行内元素：display:inline;
3、转换为行内块：display:inline-block;

• 技巧：让文字的行高等于盒子的高度，就能使文字在当前盒子内垂直居中

8 CSS的背景

序号	属性	作用	值
1	background-color	背景颜色	预定义的颜色值/十六进制/RGB代码
2	background-image	背景图片	url（图片路径）
3	background-repeat	是否平铺	repeat、no-repeat、repeat-x、repeat-y
4	background-position	背景位置	length、position 分别是x 和 y 坐标
5	background-attachment	背景附着	scroll（背景滚动）、fixed（背景固定）
6	背景简写	书写简单	背景颜色、背景图片地址、背景平铺、背景滚动、背景位置
7	背景色半透明	背景颜色半透明	background：rgba(0,0,0,0.3)后面必须是4个值

9 CSS的三大特性

9.1 层叠性

• 样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式
• 样式不冲突，不会层叠

9.2 继承性

• 恰当地使用继承可以简化代码，降低 CSS 样式的复杂性
• 子元素可以继承父元素的样式

9.3 优先级

• 选择器相同，则执行层叠性
• 选择器不同，则根据选择器权重执行

序号	选择器	选择器权重
1	继承或者 *	0，0，0，0
2	元素选择器	0，0，0，1
3	类选择器，伪类选择器	0，0，1，0
4	ID选择器	0，1，0，0
5	行内样式 style=” “	1，0，0，0
6	!important 重要的	∞ 无穷大

10 CSS的注释

注释用于解释代码，它们会被浏览器忽略。CSS 中的注释以“ /* ”开头，以“ */ ”结尾。

/* 需要注释的内容 */