（3）《Head First HTML與CSS》學習筆記---CSS入門

時間 2019-11-21

標籤 head html css 學習筆記入門欄目 HTML 简体版

原文原文鏈接

1.O‘Reilly的《CSS PocketReference》是一本不錯的CSS參考小書，記錄了經常使用的元素屬性。css

2.元素選擇器的做用強於繼承的做用；用戶定義強於瀏覽器默認（如下全部討論都通過Edge、Firefox開發者版本的驗證（2017.11.3））。html

如今來驗證這個觀點。web

下面的代碼，連接的顏色並無變成茶紅色，仍是瀏覽器默認的紫色樣式，爲何呢？瀏覽器

<!doctype html>
<html>
  <head>
    <title>Head First Lounge</title>
    <meta charset="utf-8">
    <style>
      p{ color: maroon;
      }
    </style>
  </head>
  <body>
    <h1>Welcome to the Head First Lounge</h1>
    <img src="images/drinks.gif" alt="drinks" width="204" height="100">
    <p>
       Join us any evening for refreshing
       <a href="beverages/elixir.html" title="elixirs">elixirs</a>, conversation and maybe a game or two of
       <em>Dance Dance Revolution</em>.
       Wireless access is always provided;
       BYOWS (Bring your own web server).
    </p>
    <h2>Directions</h2>
    <p>
      You'll find us right in the center of downtown Webville.
      If you need help finding us, check out our detailed
      <a href="about/directions.html" title="directions">directions</a>.
      Come join us!
    </p>
  </body>
</html>

爲何會這樣？less

咱們來主要關注這一段代碼：ide

    <p>
       Join us any evening for refreshing
       <a href="beverages/elixir.html" title="elixirs">elixirs</a>,
conversation and maybe a game or two of
       <em>Dance Dance Revolution</em>.
       Wireless access is always provided;
       BYOWS (Bring your own web server).
    </p>

我把style改爲（這是代碼1）：post

<style>

body{

background-color: #e0dc10

}

</style>

背景色是黃色，頁面效果如圖：性能

能夠看到，<a>的樣式是空的，但在頁面效果上倒是紫色帶下劃線（但願我眼睛沒花....應該是紫色）！這彷佛能夠說明，<a>元素在Edge瀏覽器中有默認的樣式：字體色爲紫，且有下劃線。測試

若是咱們再把<style>改成（這是代碼2）：字體

    <style>
        body{
          background-color: #e0dc10
        }
        p{
          color: rgb(0, 128, 21);
        }       
      </style>

能夠看到如圖的效果：

咱們看到,在右邊的內聯樣式中<a>繼承了<p>的綠色字體，可是實際上卻並無在頁面中顯示綠色，而是紫色！

這說明了<p>內的內嵌元素字體會繼承<p>的字體顏色（好比<em>就繼承了綠色。而在未定義<p>的字體顏色時，除了<a>元素字體，全部字體都是黑色的，說明除了<a>元素單獨定義過顏色，其它的標籤沒有單獨定義過顏色），而對於已經單獨定義過字體顏色的<a>元素，就不會繼承父輩元素<p>的字體顏色了（注意，這裏不會繼承的是樣式顏色而不是別的樣式效果——由於<a>只是單獨定義過顏色，沒有單獨定義別的（其實還定義了下劃線））。雖然開發者模式下仍然是顯示繼承了<p>的顏色，但實際上並無。

「在未定義<p>的字體顏色時，除了<a>元素字體，全部字體都是黑色的，說明除了<a>元素單獨定義過顏色，其它的標籤沒有單獨定義過顏色」這句話真的對麼？爲何黑色不是被定義的顏色？因此極可能黑色是在body選擇器下定義的全局黑色，致使了全部字體都是黑色。

最後，咱們來改變<a>的字體顏色，只須要<style>寫成：

<style>

color: green;

}

</style>

效果：

基於以上幾點，我有理由相信，瀏覽器的默認樣式有：

1.body選擇器下的黑色字體、白色背景。

2.a選擇器下的紫色字體和下劃線。

而這，就是p選擇器規定的顏色沒有被<a>繼承的緣由——樣式的繼承是有優先級的，下面來分析一下（注意，這裏的分析是基於順序的，也就是說選擇器body和p哪一個在哪一個的上面，這一點並無考慮）：

1.經過代碼1，咱們能夠知道，用戶規定的樣式優先於瀏覽器的默認樣式（由於瀏覽器頁面背景色默認是白色，而咱們能夠經過body選擇器改變背景色）

2.經過代碼2，咱們知道若是沒規定元素樣式，元素就會繼承父輩元素的樣式（<em>就繼承了<p>的綠色），但若是元素有規定樣式就不會繼承父輩元素的樣式（<a>雖然在開發者模式下顯示繼承了，但實際效果上卻沒有，這是由於存在瀏覽器默認樣式——這個括號的內容是經過代碼一、二、3發現的）。

基於這兩點有：用戶規定樣式強於瀏覽器規定樣式；單元素樣式強於繼承樣式。

這從另外一個角度提醒了我，必需要用CSS把握住每個我想要表達的效果，不然就會被瀏覽器的默認樣式給暗中改了——怎麼知道瀏覽器對某個標籤有沒有默認樣式？只須要創建一個無樣式的標籤，看其在該瀏覽器下的顯示效果就知道了。

（我發現vccode中的預覽頁面，不會把頁面的顏色預覽給顯示出來（我設body背景色爲黑，預覽中仍是白的）...不知道是否是bug）

（連接色不是那麼簡單的「默認爲紫色帶下劃線」，詳見：《Head First HTML與CSS》的CSS屬性的9）

3.注意，不是全部樣式都能繼承；也不是全部元素都會繼承 ——仔細看，這兩句話可不是一個意思。

4.一般認爲有襯線的字體在計算機屏幕上閱讀時比較困難（爲啥？）

5.怎麼知道哪些CSS屬性能繼承，哪些不能——一個是找本靠譜的參考書；二是根據常識是判斷，而後實際的試一試——通常來講影響文本外觀的樣式都能被文本繼承，而諸如邊框這種就不行，這是有道理的，若是某個元素有邊框，你可不想元素體中的全部元素都有邊框！

其次，總能使用一個更特定的選擇器覆蓋從父選擇器繼承的屬性。

6.當多個選擇器選擇一個元素時，老是使用最特定的那個；若是最特定的有多個，根據順序使用最後那個。

如今驗證這個觀點（下面的驗證順序不能變！一旦變了就不能正確的推出結論了，爲何？仔細想一想就知道了）（如下全部討論都通過Edge、Firefox開發者版本的驗證（2017.11.6））。。

首先是測試的頁面代碼：

<!doctype html>
<html>
<head>
  <title>測試</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="測試.css">
</head>

<body>
  <p class="one two">Documenting my trip around the US on my very own Segway!</p>
</body>

</html>

很簡單，就一個<p>元素，咱們來看看多個選擇器下這個元素的字體顏色是怎麼變的。

css代碼爲：

body{
    background-color: black;
}
p{
    color: greenyellow;
}

效果是：

CSS改成：

body{
    background-color: black;
}
p{
    color: greenyellow;
}
.one{
    color: gray;
}

效果爲：

能夠看到，p選擇器的樣式被「one」類的樣式覆蓋了。可是會不會是由於順序影響呢？咱們來換一下順序：

CSS：

body{
    background-color: black;
}
.one{
    color: gray;
}
p{
    color: greenyellow;
}

效果：

能夠排除順序的影響了，因此有結論：類選擇器強於元素選擇器。（注意這裏是"類選擇器"而不是"基於元素的類選擇器"，至於什麼是基於元素的類選擇器，往下看就知道了）。

如今咱們來考慮另兩種選擇的影響：基於元素的類選擇器與類選擇器。

首先是CSS改成：

body{
    background-color: black;
}
.one{
    color: gray;
}
p.one{
    color: greenyellow;
}

效果：

還不夠，咱們要排除順序的影響，因此再改CSS爲：

body{
    background-color: black;
}
p.one{
    color: greenyellow;
}
.one{
    color: gray;
}

效果：

如今能夠肯定了：基於類的選擇器強於類的選擇器。

因爲前面咱們有類選擇器強於元素選擇器，因此如今有結論：

基於類的選擇器>類選擇器>元素選擇器

接下來是驗證同選擇器下，順序的影響是不是最後一個最強。

CSS改成：

body{

background-color: black;

}

.two{

color: red;

}

.one{

color: greenyellow;

}

效果：

能夠看到，確實在同種選擇器下，最後一個生效。（注意，我故意在CSS中two類放在one類的前面，就是爲了排除元素中class的類名前後影響。）

目前爲止一共知道了三個繼承原則，詳見：《Head First HTML與CSS》的CSS屬性文章的開頭。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。