CSS基础知识整理

一、css基础

1.选择器

选择器的作用：选择页面对应的标签，方便后续设置样式

1.1标签选择器

标签选择器：通过标签名，找到页面中所有这类标签，设置样式

1.2类选择器

类选择器：标签上的class属性，class的属性值叫类名

语法：“.”+类名

注意点：

• 类名可以由数字、字母、下划线和中划线组成，但不能以数字或中划线开头

• 一个标签可以有多个类名，类名之间以空格隔开

• 类名可以重复，一个类选择器可以同时选择多个标签

1.3id选择器

id选择器：#id属性值

注意点：

• 所有标签上都有id属性
• id属性值类似于身份证号码，在一个页面中是唯一的，不可重复
• 一个标签上只能有一个id属性值
• 一个id选择器只能选择一个标签

1.4后代选择器

后代选择器：根据html标签的嵌套关系，选择父元素后代中满足条件的元素

选择器语法：父选择器 父选择器的后代标签 { css属性：属性值；}

后代包括：儿子、孙子、重孙子等等

1.5子代选择器

子代选择器：>

父元素子代中满足条件的元素

语法：选择器1>选择器2{ css}

在选择器1所找到标签的子代（儿子）中，找到满足选择器2的标签，设置标签

子代只包括：儿子

选择器之间用>隔开

1.6并集选择器

并集选择器：选择器1,选择器2，… ，选择器n

每组选择器可以是基础选择器也可以是复合选择器

并集选择器一般一行写一个

1.7交集选择器

交集选择器：选择器1选择器2{css}

选中页面中 同时满足 多个选择器的同一个标签

选择器之间是紧挨着的

标签选择器必须写在最前面
例：

p.head.title{}

1.8hover伪类选择器

伪类选择器：设置鼠标悬停效果

选择器语法：选择器:hover {css}

伪类选择器选中的是元素的某种状态

伪元素的伪类选择器用法：

a:hover::after{}

1.9通配符选择器

通配符选择器：*{}

找到页面所有的标签

开发中使用极少，只会在特殊情况下才会用到

小页面用于去除标签默认的margin和padding

1.10结构伪类选择器

1.10.1查找单个

作用：根据元素在html中的结构关系查找元素

优势：减少对于HTML中类的依赖，有利于保持代码整洁

场景：常用于查找某父级选择器中的子元素

选择器	意义
E:first-child{}	匹配父元素中第一个子元素，并且是E元素
E:last-child{}	匹配父元素中最后一个子元素，并且是E元素
E:nth-child{}	匹配父元素中第n个子元素，并且是E元素
E:nth-last-child{}	匹配父元素中倒数第n个子元素，并且是E元素

1.10.2查找多个

E:nth-child{}

n的注意点：

• n为整数0，1，2，3…

• 通过n可以组成常见公式

功能	公式
偶数	2n,even
奇数	2n+1,2n-1,odd
找到前5个	-n+5
找到第5个之后的	n+5

1.10.3 根据类型查找

E:nth-of-type(n){ }

只在父元素的同类型（E）子元素范围中，匹配第n个

:nth-child->直接在所有还在中数个数

:nth-of-type->先通过该类型找到符合条件的一堆子元素，然后在这一堆子元素中数个数

1.11 类与id的区别

• class类名相当于姓名，可以重复，一个标签可以同时有多个class类名
• id属性值相当于身份证号码，不可重复，一个标签只能有一个id属性值

实际开发中:

1. 类选择器用的最多
2. id一般配合js使用，除非特殊情况，否则不要使用id设置样式
3. 实际开发中会遇到冗余代码的抽取（即将一些公共的代码抽取到一个公共的类中）

1.11链接伪类选择器

场景：常用于选中超链接的不同状态

选择器语法：

语法	功能
a:link{}	选中a链接 未访问过 的状态
a:visited{}	选中a链接 访问之后 的状态
a:hover{}	选中 鼠标悬停 的状态
a:active{}	选中 鼠标按下 的状态

注意点：

如果需要同时实现以上4种伪类状态效果，需要按照LVHA顺序书写

1.12焦点伪类选择器

场景：用于选中元素获取焦点时状态，常用于表单控件

选择器语法：

input：focus {

​    background-co`在这里插入代码片`lor: ;

}

效果：表单控件获取焦点时默认会显示外部轮廓线

1.13属性选择器

场景：通过元素上的HTML属性来选择元素，常用于选择input标签

选择器	功能
E:[attr]	选择具有attr属性的E元素
E[attr=“val”]	选择具有attr属性并且属性值等于val的E元素

2.字体文本相关样式

2.1字体样式

2.1.1字体大小font-size

• 需要设置单位px，否则无效
• 谷歌默认文字大小是16px

2.1.2字体粗细font-weight

取值：

效果	元素	元素
正常	normal	400px
加粗	bold	700px

• 不是所有字体都提供了9种粗细，因此部分取值页面中无变化
• 实际开发中以正常、加粗两种取值使用最多；

2.1.3字体样式font-style

取值：

效果	元素
正常（默认）	normal
倾斜	italic

2.1.4常见字体系列

2.1.4.1 无衬线字体（sans-serif）

1. 文字笔画粗细均匀，并且首尾无装饰
2. 网页中大多采用无衬线字体
3. 常见系列字体：黑体、Arial

2.1.4.2 衬线字体（serif）

1. 文字笔画粗细不匀，并且首尾有笔锋装饰
2. 报刊书籍中应用广泛
3. 宋体、Times New Roman

2.1.4.3 等宽字体（monospace）

高与宽相等的字体

2.1.5字体系列font-family

常见取值：具体字体1，具体字体2，具体字体3，，，，字体系列

渲染规则：从左往右按照顺序查找，如果电脑中未安装该字体，则会显示下一个字体

• 如果都不支持，则显示操作系统的默认字体
• 字体名称中存在多个单词，推荐使用引号包裹
• 最后一项字体系列不需要引号包裹
• 开发时，尽量使用系体常见自带字体

2.1.6字体font相关属性的连写

连写font：style weight size family;

SWSF

1. 只能省略前两个，如果省略了相当于设置了默认值
2. 若同时设置了单独和连写形式
3. 要么把单独的样式写在连写的下面
4. 要么把单独的样式写在连写里面

若写在前面，会被后面连写中的默认样式覆盖

2.1.7样式的层叠问题

如果给同一个标签设置了相同样式，此时样式会层叠（覆盖），写在最下面的会生效

2.2文本样式

2.2.1文本缩进

文本缩进text-indent

单位px,em

1em = 1个font-size

2.2.2文本水平对齐方式

水平方向对齐：
text-align:center

2.2.3文本修饰

text-decoration

元素	效果
underline	下划线（常用）
line-through	删除线
overline	上划线（几乎不用）
none	无线（常用）

2.3水平居中方法总结

2.3.1text-align:center

能让哪些元素水平居中

1. 文本
2. span标签，a标签
3. Input标签，img标签
4. div 、p、h（大盒子）水平居中

2.3.2margin:0 auto

可以通过margin:0 auto;实现

注意点：

• 直接给当前元素本身设置就可以了
• margin:0 auto一般针对于有固定宽度的盒子，如果大盒子没有设置宽度，此时会默认占满父元素的宽度

2.4行高

控制行间距

line-height

取值：数字+px或倍数（当前标签font-size的倍数）

• 让单行文本垂直居中可以设置line-height:文字父元素高度
• 网页精准布局时，会设置line-he