速通前端篇 —— CSS

|------|---------------------------------|
| 引入方式 | 描述 |
| 行内样式 | 在标签内使用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 改成行内元素。