速通前端篇 —— CSS
找往期文章包括但不限于本期文章中不懂的知识点：
个人主页：我要学编程程(ಥ_ಥ)-ZEEKLOG博客
所属专栏：速通前端
目录
CSS的介绍
CSS(Cascading Style Sheet)，层叠样式表，用于控制页面的样式。CSS能够对网页中元素位置的排版进行像素级精确控制，实现美化页面的效果。能够做到页面的样式和结构分离。简单理解，CSS就是类似于对页面进行"化妆"，让页面变得更加好看。
基本语法规范
选择器+{一条/N条声明}
1、选择器决定针对谁修改 (找谁)；2、声明决定修改啥(干啥)；3、声明的属性是键值对，使用"；"区分键值对，使用"："区分键和值。
既然CSS是"化妆"，那首先得要对象才行，这个对象就是HTML的代码。
CSS有三种引入方式，引入到HTML的代码中：
| 引入方式 | 描述 |
| 行内样式 | 在标签内使用style属性，属性值是css属性键值对 |
| 内部样式 | 定义<style>标签，在标签内部定义css样式 |
| 外部样式 | 定义<link>标签，通过href属性引入外部的css文件 |
代码演示：
1、行内样式：
2、内部样式：
3、外部样式：
三种引入方式的对比：
行内样式，只适合于写简单样式，只针对某个标签生效。缺点是不能写太复杂的样式。
内部样式会出现大量的代码冗余，不方便后期的维护，所以不常用。
外部样式，html和css实现了完全的分离，企业开发常用方式。
注意：内部样式虽然可以写在任何地方，但我们常是写在 head 标签中。
CSS选择器
CSS选择器的主要功能就是选中页面指定的标签元素，选中了元素，才可以设置元素的属性。
CSS选择器主要分以下几种：
1、标签选择器
2、class选择器
3、id选择器
4、复合选择器
5、通配符选择器
下面我们一 一来学习：
标签选择器
class选择器
class是标签的一个属性，可以认为有相同class的标签被认为是同一组，在此基础上我们就可以进行一些列的其他操作，比较方便。
注意：
1、类名是可以随便取的，但不能是数字。
2、一个类可以被多个标签使用，一个标签也能使用多个类(多个类名要使用空格分割，这种做法可以让代码更好复用)
id选择器
复合选择器
复合选择器是通过多个标签唯一的那个标签，然后进行设置相关属性的。和在文件夹中查找某个文件差不多。
如果我们只想将 有序列表下的div设置成红色，就可以使用复合选择器。
如果想更详细的一点的话，可以写成 body ol div 或者直接将 html 给包裹进来都是没问题的。
注意：
1、上面的 ol 与 div 可以是任意选择器的组合，也可以是任意数量选择器的组合。
2、这里的标签不一定要是相邻的标签，例如，父标签-子标签。可以直接是 父标签-孙子标签。
3、如果想要选择多种标签，可以使用 "，"来分隔。
通配符选择器
这里的通配符和我们在Java中学习的通配符是一样的，都是可以去代表所有，只不过Java中的通配符只能作为接收方，而不能是发送方（与多态一样，向上转型可以，但是向下转型就会失败）。而这里的通配符是全部都行。
这里通配符是采用 *。
CSS常见样式
颜色 color
color 是用来设置字体的颜色的，颜色的表示方式有三种。第一种就是我们前面直接使用英文单词去表述的；第二种是使用三原色的参数来设置的；第三种是在第二种的基础上，使用十六进制的数字来表示的。
第一种前面有，因此这里不作演示，我们直接来看第二种与第三种的方式。
1、使用三原色：
三原色（rgb）指的是 red、green、blue，三种颜色。通过参数来调整三者的占比，从而实现不同的颜色。
如果要变为绿色的话，就是(0, 255, 0)。
2、使用十六进制数：
因为rgb的参数范围是(0,255)，可以用2^8来表示，如果把2^8看成比特位的话，就是可以用8个比特位来表示，而一个十六进制位可以表示4位二进制，即 两个十六进制位可以表示上述rgb的参数范围。
字体大小 font-size
边框 border
边框是一个复合属性，常用的包括 边框粗细、边框样式、边框颜色。既可以一起同时设置，也可以分开设置三者。
| 样式 | 说明 | 举例 |
| border-width | 设置边框粗细 | 取数值 |
| border-style | 设置边框样式 | dotted：点状 |
| border-color | 设置边框颜色 | 与color是相同的，有三种方式 |
上面是三者分开设置的，下面来尝试三者一起设置。
注意：并不只是div才能设置边框，几乎所有的标签都是可以设置边框的。
宽度 与 高度
width 设置宽度、height 设置高度。
注意：只有块级元素可以设置宽高。常见的块级元素有: h1-h6、P、div等，常见的行内元素有：span、a。块级元素是独占一行的，因此可以设置其相关的属性，而行内元素是不能独占一行的，也就是会和其他的元素一起占据一行，如果去设置其的宽高，那别的元素也需要改变，这就不合理，因此行内元素不能设置宽高。当然，我们也可以使用 display 属性来修改元素的显示模式。
display : block 改成块级元素；display : inline 改成行内元素。
内边距
padding：内边距，其含义是内容和边框之间的距离。
内容默认是顶着边框来放置的，可以用padding来控制这个距离。
padding也是一个复合样式，可以对四个方向分开设置。
padding-top（顶部）、padding-bottom（底部）、padding-left（左部）、padding-right（右部）
当然，也可以设置边框为实线去观察。
外边距
margin：外边距，其含义是元素与元素之间的距离。同样元素与元素之间默认也是挨着的。
margin也是一个复合样式,可以给四个方向都加上外边距。与内边距类似，这里就不再演示了。
前面的样式涉及到了一个著名的IE盒子模型：
好啦！本期 速通前端篇 —— CSS 的学习之旅 就到此结束啦！我们下一期再一起学习吧！
![前端如何实现 [记住密码] 功能](https://qiniu.meowparty.cn/coder.2023/2026-04-06/cover_1775479667242_648c3b82c93d4b71971ad02610c66294.png)
