速通前端篇 —— CSS

找往期文章包括但不限于本期文章中不懂的知识点：

个人主页：我要学编程程(ಥ_ಥ)-CSDN博客

所属专栏：速通前端

目录

CSS的介绍

基本语法规范

CSS选择器

标签选择器

class选择器 

id选择器 

复合选择器 

通配符选择器

CSS常见样式 

颜色 color

字体大小 font-size 

边框 border 

宽度 与 高度 

内边距

外边距 

---

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 的学习之旅 就到此结束啦！我们下一期再一起学习吧！