CSS基础_Day04

CSS基础

一、CSS继承

1.给 HTML 的 body 元素添加样式

每一个 HTML 页面都有一个 body 元素。
我们可以通过设置 background-color 的属性值为黑色，来证明 body 元素的存在。

<style>
  body {
  background-color: black;
  //将整个body设置为黑色
}
</style>

2.从 body 元素继承样式

设置 body 元素样式的方法跟设置其他 HTML 元素样式的方式一样，并且其他元素也会继承 body 中所设置的样式。

<style>
  body {
    background-color: black;
    color:green;
    font-family: monospace;
  }
</style>
<h1>Hello World</h1>
//h1元素继承了body元素中设置的样式

3.样式中的优先级

HTML 元素的样式会跟其他样式发生冲突。
就像 h1 元素不能同时设置绿色和粉色两种颜色。

<style>
  body {
    background-color: black;
    font-family: monospace;
    color: green;
  }
  .pink-text{
    color:pink;
  }
</style>
<h1 class="pink-text">Hello World!</h1>
//pink-text class覆盖了body元素的CSS样式

4.Class 选择器的优先级高于继承样式

刚刚证明了 class 会覆盖 body 的 CSS 样式,那么要怎么样才能覆盖 pink-text class 中所定义的样式？
HTML 同时应用多个 class 属性需以空格来间隔。

class="class1 class2"
//HTML元素里应用的class的先后顺序无关紧要.

但是，在<style> 标签里面声明的class顺序十分重要，之后的声明会覆盖之前的声明。第二个声明的优先级始终高于第一个声明。由于 .blue-text 是在后面声明的，所以它的样式会覆盖.pink-text里的样式。

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

刚刚证明了浏览器读取 CSS 是由上到下的。 这就意味着，如果发生冲突，浏览器将会应用最后声明的样式。
注意：如果我们在 h1 元素的类中，将 blue-text 放置在 pink-text 之前，它仍然会检查声明顺序，而不是使用顺序！

#orange-text{
    color:orange;
}
//在style中设置#orange-text ID选择器
<h1 id="orange-text">ID选择器</h1>

注意：无论在 pink-text class 之前或者之后声明，id 选择器的优先级总是高于 class 选择器.

6.内联样式的优先级高于 ID 选择器

id 选择器无论在 style 标签的任何位置声明，都会覆盖 class 声明的样式。

<h1 id="orange-text" class="pink-text blue-text" style="color:white;">Hello World!</h1>
//内联样式高于ID选择器

7.Important 的优先级最高

很多时候，会使用 CSS 库， CSS 库中的样式会意外覆盖你的 CSS 样式。 如果想保证你的 CSS 样式不受影响，你可以使用 !important。

(1)#orange-text {
    color: orange !important;
}
(2).pink-text {
    color: pink !important;
}
//!important可以放在class或者id后面

二、颜色

1.使用十六进制编码获得指定颜色

日常生活中，我们使用的计数方法一般是decimals，或十进制，即使用数字0到9来表示。 而Hexadecimals（或hex）基于16位数字，它包括16种不同字符。像十进制一样，0-9的符号代表0到9的值。然后，A、B、C、D、E、F代表10至15的值。总的来说，0到F在十六进制里代表数字，总共有16个值。
在 CSS 里面，我们可以使用6个十六进制的数字来代表颜色，每两个数字控制一种颜色，分别是红（R）、绿（G）、蓝（B）。例如，#000000代表黑色，同时也是最小的值。

body {
  color: #000000;
}

2.使用十六进制编码混合颜色

通过三原色（红、绿、蓝），我们可以创建 1600 万种不同颜色。
例如，橘色是纯红色混合一些绿色而成，其中没有蓝色。 在十六进制编码里面，它可以写成 #FFA500。
0 是十六进制里面最小的数字，表示没有颜色。
F 是十六进制里面最大的数字，有最高的亮度。

颜色	十六进制
道奇蓝	#1E90FF
绿色	#00FF00
橙色	#FFA500
红色	#FF0000

3.使用缩写的十六进制编码

许多人对超过 1600 万种颜色感到不知所措， 并且很难记住十六进制编码。 幸运的是，你可以使用缩写形式。
例如，红色的 #FF0000 十六进制编码可以缩写成 #F00。 在这种缩写形式里，三个数字分别代表着红（R）、绿（G）、蓝（B）三原色。
这样，颜色的数量减少到了大约 4000 种。 且在浏览器里 #FF0000 和 #F00 是完全相同的颜色。

颜色	十六进制编码缩写形式
蓝绿色	#0FF
绿色	#0F0
红色	#F00
紫红色	#F0F

4.使用 RGB 值为元素上色

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

rgb(0, 0, 0)

白色的 RGB 值：

rgb(255, 255, 255)

RGB 值与我们之前学到的十六进制编码不同。RGB 值不需要用到 6 位十六进制数字，而只需要指定每种颜色的亮度大小，数值范围从 0 到 255。
如果我们稍微计算一下，就不难发现这两种表示方式本质上是等价的。在十六进制编码中，我们用两个十六进制数表示一个颜色；这样，每种颜色都有 16 * 16（即 256）种可能。 所以，RGB 从零开始计算，与十六进制代码的值的数量完全相同。

body {
  background-color: rgb(255, 165, 0);
}

5.使用 RGB 混合颜色

就像使用十六进制编码一样，你可以通过不同值的组合，来混合得到不同的 RGB 颜色。

颜色	RGB
蓝色	rgb(0, 0, 255)
红色	rgb(255, 0, 0)
淡紫色	rgb(218, 112, 214)
赭黄色	rgb(160, 82, 45)

三、CSS变量

1.使用 CSS 变量一次更改多个元素

CSS 变量可以实现仅需要更新一个值，就可以将更改应用到多个 CSS 样式属性的强大方法。

.penguin {
    /* 只修改这一行下面的代码 */
    --penguin-skin: gray;
    --penguin-belly: white;
    --penguin-beak: orange;
    /* 只修改这一行上面的代码 */
    //自定义
  }

2.创建一个自定义的 CSS 变量

为创建一个 CSS 变量，你只需要在变量名前添加两个连字符号，并为其赋值即可，例子如下：

--penguin-skin: gray;
//这样就会创建一个 --penguin-skin 变量，它的值为 gray。 现在，其他元素可通过该变量来使元素变成灰色。

3.使用一个自定义的 CSS 变量

创建变量后，CSS 属性可以通过调用变量名来使用它对应的值。

background: var(--penguin-skin);
//因为引用了 --penguin-skin 变量的值，使用了这个样式的元素背景颜色会是灰色。 
//请注意，除非变量名称完全匹配，否则将不会应用样式。

4.给 CSS 变量设置备用值

使用变量来作为 CSS 属性值的时候，可以设置一个备用值来防止由于某些原因导致变量不生效的情况。
注意：备用值不是用于增强浏览器的兼容性，它也不适用于 IE 浏览器。 相反，它是用来让浏览器在找不到你的变量时可以显示一种颜色。

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

5.通过浏览器降级提高兼容性

使用 CSS 时可能会遇到浏览器兼容性问题。 提供浏览器降级方案来避免潜在的问题会显得很重要。
当浏览器解析页面的 CSS 时，会自动忽视不能识别或者不支持的属性。 举个例子，如果使用 CSS 变量来指定站点的背景色，IE 浏览器由于不支持 CSS 变量而会忽略背景色。 此时，浏览器会尝试使用其它值。 但如果没有找到其它值，则会使用默认值，也就是没有背景色。
这意味着如果想提供浏览器降级方案，在声明之前提供另一个更宽泛的值即可。 这样老旧的浏览器会降级使用这个方案，新的浏览器会在后面的声明里覆盖降级方案。

.red-box {
    background: red;//备用属性
    background: var(--red-color);
  }

6.继承 CSS 变量

当创建一个变量时，变量会在创建变量的选择器里可用。 同时，在这个选择器的后代选择器里也是可用的。 这是因为 CSS 变量是可继承的，和普通的属性一样。
CSS 变量经常会定义在 :root 元素内，这样就可被所有选择器继承。
:root 是一个伪类选择器，它是一个能够匹配文档根元素的选择器，通常指的是 html 元素。 我们在 :root 里创建变量在全局都可用，即在任何选择器里都生效。

7.更改特定区域的变量

当你在 :root 里创建变量时，这些变量的作用域是整个页面。
如果在元素里创建相同的变量，会重写作用于整个页面的变量的值。

:root {
    --penguin-belly:pink;
  }
  @media (max-width: 350px) {
    :root {
    --penguin-belly:white;
    }
    //media query（媒体查询）声明的 :root 选择器里,重写了--penguin-belly的值
  }

8.使用媒体查询更改变量

CSS 变量可以简化媒体查询的定义方式。
例如，当屏幕小于或大于媒体查询所设置的值，只要我们更新变量的值，那么使用了此变量的元素样式就都会更改。

:root {
    --penguin-size: 300px;
    --penguin-skin: gray;
  }
  @media (max-width: 350px) {
    :root {
      --penguin-size:200px;
      --penguin-skin:black;
      //在 media query（媒体查询）声明的 :root 选择器里，重定义 --penguin-size 的值为 200px。 
      //同时，重新定义 --penguin-skin 的值为 black
    }

谢谢你的坚持阅读ovo哟，让我们一起加油吖