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