CSS(三)

一.设置背景边框颜色

关键字：background-color
如下面代码:

<style>
body {
  background-color: black;
}
</style>

可以将背景设置为黑色

二.字体的颜色

关键字：color

<style>
  body {
    background-color: black;
    color: green;
  }
</style>

三:id与class优先级

ID 选择器优先级高于 Class 选择器

<style>
  .pink-text {
    color: pink;
  }
  #orange-text{
    color: orange;
  }
</style>
<h1 class="pink-text" id="orange-text">Hello World!</h1>

无论在 pink-text class 之前或者之后声明，id 选择器的优先级总是高于 class 选择器。
所以在使用上面代码后，会显示的颜色是橙色

四.内联式样式优先级

内联式样式的优先级是比id与class优先级高的
它的形式如下

<h1 style="color: green;">
<!--> 将h1标题该为绿色<-->

五.Important

Important 的优先级最高

<style>
  #orange-text {
    color: orange;
  }
  .pink-text {
    color: pink !important;
  }
  .blue-text {
    color: blue;
  }
</style>
<h1 id="orange-text" class="pink-text blue-text" style="color: white">Hello World!</h1>

这样的会使得字体颜色为粉红色

六.编码获得指定颜色

使用十六进制编码获得指定颜色.在 CSS 里面，我们可以使用 6 个十六进制的数字来代表颜色，每两个数字控制一种颜色，分别是红（R）、绿（G）、蓝（B）
这种模式通过对三基色的调用来显示不同的颜色

<style>
  body {
    background-color: #000000;
  }
</style>

这样背景颜色会显示黑色

七.上色法

RGB 值是在 CSS 中表示颜色的另一种方法。

<style>
  body {
    background-color: rgb(0,0,0);
  }
</style>

八.变量

为创建一个 CSS 变量，只需要在变量名前添加两个连字符号。
作用：CSS 变量可以实现仅需要更新一个值，就可以将更改应用到多个 CSS 样式属性
创建变量后，CSS 属性可以通过调用变量名来使用它对应的值。

background: var(--penguin-skin);

使用变量来作为 CSS 属性值的时候，可以设置一个备用值来防止由于某些原因导致变量不生效的情况。

background: var(--penguin-skin, black);

九.root

:root 是一个伪类选择器，它是一个能够匹配文档根元素的选择器，通常指的是 html 元素。 我们在 :root 里创建变量在全局都可用，即在任何选择器里都生效。