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（行内样式） ：<h1 style="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 那样使用六个十六进制数字。