HTML学习小记5

CSS 继承

为什么要覆盖 CSS？很多情况下，你会使用 CSS 库，这些库可能会意外覆盖掉你自己的 CSS。
每一个 HTML 页面都有一个

body

元素可以像对其他 HTML 元素一样对 

body

元素应用样式，并且所有其他元素将继承 

body

元素的样式。
 class
会

override（覆盖）

body

元素的

color。

通过用空格分隔多个class 属性，可对 HTML 元素应用多个 class 属性：class="class1 class2"

※在 HTML 中这些 class 如何排序是无所谓的，但在

<style>

部分中

class

声明的顺序却非常重要，后面声明总是比前者具有优先权。

 在发生冲突时，浏览器会使用最后的
CSS 声明。但是并非只有这些，还有其他覆盖 CSS 的方法： id 属性。id 属性总是具有更高的优先级。

无论在

style

元素 CSS 的哪个位置进行声明，id 声明都会覆盖 class 声明。

还有其他覆盖 CSS 的方法：

in-line style（行内样式）

 ：<h1style="color: green">

还有最后一种覆盖 CSS 的方法，这是所有方法中最强大的。当需要确保某元素具有指定的 CSS 时，可使用

!important

。给元素的 color 声明加上关键字

!important

，以便 100% 确保你的 元素的颜色：color: red !important;

在
CSS 中还有其他表示颜色的方法。其中的一种方法称作 hexadecimal code（十六进制编码），简写为

hex code

。可以使用
6 位十六进制数字来表示颜色，每 2 位分别表示红色 (R)、绿色 (G) 和蓝色 (B) 成分。例如，

#000000

是黑色，同时也是可能的数值中最小的。

0

是 hex code（十六进制编码）中最小的一个，它代表颜色的完全缺失。

F

是 hex code（十六进制编码）中最大的一个，它代表最大可能的亮度。

Hex code 遵循 red-green-blue（红-绿-蓝），或者叫

rgb

格式。hex code 中的前两位表示颜色中红色的数量，第三四位代表绿色的数量，第五六位代表蓝色的数量。

超过 1600 万种颜色的 hex code 非常难以记忆。所以可缩短它。例如，红 是

#FF0000

，可缩写成

#F00

。也就是说，一位表示红，一位表示绿，一位表示蓝。这会把所有可能的颜色数减少至大约 4000 种，但是浏览器会把

#FF0000

和

#F00

解释为完全相同的颜色。

在 CSS 中表示颜色的另一个方法是使用

rgb

值。代表黑色的 RGB 值看起来是下面的样子：rgb(0, 0, 0)。代表白色的 RGB 值看起来是下面的样子：rgb(255,
255, 255)。使用

rgb

，通过 0 至 255 之间的一个数字来指定每种颜色的亮度，而不是像 hex code 那样使用六个十六进制数字。