前端css基础学习笔记

目录

一、基础认知

1. css引入方式

1.1内嵌式：css写在style标签中

1.2外联式：css写在一个单独的.css文件中

1.3行内式：css写在标签的style属性中

1.4css常见三种方式的特点区别（书写位置、作用范围、使用场景）

二、基础选择器

选择器的作用

1.标签选择器

​编辑

2.类选择器

3.id选择器

4.通配符选择器

三、字体和文本样式

1.字体样式

1.1字体大小

1.2字体粗细

1.3字体样式（是否倾斜）

1.4常见字体系列（了解）

1.5字体系列font-family

1.6样式的层叠问题

1.7字体font相关属性的连写

2.文本样式

2.1文本缩进

2.2文本水平对齐方式

2.3文本修饰

2.4水平居中方法总结text-align：center

3.行高

4. 拓展

4.1颜色常见取值（了解）

---

一、基础认知

1. css引入方式

1.1内嵌式：css写在style标签中

• 提示：style标签虽然可以写在页面任意位置，但是通常约定写在head标签中。 

例如： 

效果：

1.2外联式：css写在一个单独的.css文件中

• 提示：需要通过link标签在网页中引入

例如：

效果：

1.3行内式：css写在标签的style属性中

• 提示：配合js使用

例如：

效果：

1.4css常见三种方式的特点区别（书写位置、作用范围、使用场景）

二、基础选择器

选择器的作用

选择页面中对应的标签（找她），方便后续设置样式（改她）

1.标签选择器

例如：

效果：

2.类选择器

例如：

效果：

3.id选择器

注意：一个id选中多个标签也有效果，但不符合规范，规范是一个id选择器只选中一个标签

例如：

效果：

4.通配符选择器

例如：

效果：

三、字体和文本样式

1.字体样式

1.1字体大小

例如：

效果：

1.2字体粗细

注意点：

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

例如：

效果：

1.3字体样式（是否倾斜）

例如：

效果：

1.4常见字体系列（了解）

注意：

• 如果用户电脑没有安装微软雅黑，就按黑体显示文字
• 如果电脑没有安装黑体，就按任意一种非衬字体系列显示

1.5字体系列font-family

注意：

• 如果字体名称中存在多个单词，推荐使用引号包裹
• 最后一项字体系列不需要引号包裹
• 网页开发时，尽量使用系统常见自带字体，保证不同用户浏览网页都可以正确显示

例如：

效果：

1.6样式的层叠问题

例如：

效果：

1.7字体font相关属性的连写

注意：

• 要么把单独的样式写在连写的下面
• 要么把单独的样式写在连写的里面

例如：

效果：

2.文本样式

2.1文本缩进

例如：

效果：

2.2文本水平对齐方式

注意：如果需要让文本水平居中，text-align属性给文本所在标签（文本的父元素）设置

例如：

效果：

2.3文本修饰

注意：开发中会使用text-decoration：none；清除a标签默认的下划线

例如：

效果：

2.4水平居中方法总结text-align：center

注意：如果需要让以上元素水平居中，text-align：center需要给以上元素的父元素设置

例如：

效果：

3.行高

行高与font连写的注意点：

• 如果同时设置了行高和font连写，注意覆盖问题
• font：style weight size/line-height family；

例如：

效果:

4. 拓展

4.1颜色常见取值（了解）

4.2标签水平居中方法总结margin：0 auto

例如：

效果：