CSS学习笔记一20200315

后补一个框架：
有一点大纲的意味

emmm
停了几天，我又回来看啦
全新开始，第一个东西：CSS的继承！
CSS 样式的继承
每一个 HTML 页面都有一个 body 元素。可以将其 background-color 设置为黑色。

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

可以像任何其他HTML元素一样对你的body元素应用样式，并且所有其他元素都将继承你的body元素的样式。

<style>
body {
background-color: black;
color:green;
font-family:Monospace;
}

</style>
<h1>Hello World</h1>

样子：

如果在下方接着让body中其他元素改变样式也是可以的，其他没有属性的元素会继承body元素的样式：

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>

body {
        background-color: black;
        color: green;
    }
.red-text {
color: red;
}

h2 {
font-family: Lobster, Monospace;
}

p {
font-size: 16px;
font-family: Monospace;
}

</style>

<h2 class="red-text">CatPhotoApp</h2>

<p>Click here for <a href="#">cat photos</a>.</p>

<p class="red-text">在大家心目中，也许编程是一件非常困难的事情，其实也是一件非常有乐趣的事情，只要掌握好编程入门的方法，就能慢慢进入一个全新的创造世界。</p>

样子：

如果不是很理解继承的话，可以利用上面的代码自己探索一下

---

有时你的 HTML 元素会得到多个相互冲突的样式。 我们创建一个使文本变成粉色的class，然后将它应用到一个元素时：

<style>
body {
background-color: black;
font-family: Monospace;
color: green;
}

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

其实和上面的第二个图片是一样的。
style下的body更是一种全局样式，下面可以有不同的样式覆盖掉它。
更像是国家法律和特别条例的关系。
我是这样理解的。

---

我们刚刚证明了我们的pink-text class 会覆盖 body 元素的 CSS。所以下一个合乎情理的问题就是，我们可以怎样来覆盖我们的 pink-text class
来看：

<style>
body {
background-color: black;
font-family: Monospace;
color: green;
}
.pink-text {
color: pink;
}
.blue-text {
color:blue;
}
</style>
<h1 class="pink-text blue-text">Hello World!</h1>

效果：

<style> 部分中的 class 声明的顺序是重要的，第二个声明将始终优先于第一个声明。因为 .blue-text 是第二个声明，它会覆盖 .pink-text 的属性。
本例子中的blue-test在我看来更像是一种修正法案，或者说是更正通知。
也就是说，浏览器是从上到下读取CSS。这意味着，如果发生冲突，浏览器将使用最后的任何CSS声明。

---

还有其他覆盖 CSS 的方法： id 属性

是否将这个css声明在pink-text class之上或之下无关紧要，因为id属性始终是具有更高的优先级。

<style>
body {
background-color: black;
font-family: Monospace;
color: green;
}
#orange-text{
color: orange;
}
.pink-text {
color: pink;
}
.blue-text {
color: blue;
}
</style>
<h1 class="pink-text blue-text" id="orange-text">Hello World!</h1>

---

但是我们还有别的覆盖方法：

使用 in-line style（内联样式）来尝试使我们的 h1 元素变为白色。

<style>
body {
background-color: black;
font-family: Monospace;
color: green;
}
#orange-text {
color: orange;
}
.pink-text {
color: pink;
}
.blue-text {
color: blue;
}
</style>
<h1 id="orange-text" class="pink-text blue-text" style="color:white;">Hello World</h1>

内联样式将覆盖style 中定义的所有 CSS声明。

---

有最后一个方法来覆盖CSS。这是所有的最强大的方法。
在许多情况下，我们使用CSS库。这些可能会意外覆盖我们自己的CSS。所以当你绝对需要确定一个元素具有特定的CSS时，可以使用 !important。

<style>
body {
background-color: black;
font-family: Monospace;
color: green;
}
#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>

看到那个!important了吗？
我加到了粉色的样式上

---

---

重点：
!important>in-line style（内联样式）>id 属性><style> 部分中的 class 声明的顺序是重要的，第二个声明>第一个声明

今天就这样，虽然只说了一种东西，但是也是十分繁杂的。
over