{"type":"doc","content":[{"type":"heading","attrs":{"align":null,"level":1},"content":[{"type":"text","text":"「前沿」"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"我有一段時間沒有更新FCC前端教程了，這一週就繼續寫完CSS與CSS3基礎的教程。最近工作和生活都比較繁忙所以文章更新也受到了一定的影響。不過技術文章寫作再忙也不會放棄的。我會繼續努力堅持着一週一篇文章的進度，繼續爲大家帶來我學習到的知識。讓我們一起繼續終身學習吧！"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這一篇文章是上一篇《"},{"type":"link","attrs":{"href":"https://xie.infoq.cn/article/55acfe3f4cc3438000bc66ae8","title":""},"content":[{"type":"text","text":"44關學習CSS與CSS3基礎「一」"}]},{"type":"text","text":"》的第二部分，一共闖了44關。廢話少說，讓我們一起來闖關吧！"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/b3/b34c995f506fd74ab4d6e4adb20b4706.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":1},"content":[{"type":"text","text":"「第二十三關」使用屬性選擇器改變元素屬性"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"關卡名："},{"type":"codeinline","content":[{"type":"text","text":"Use Attribute Selectors to Style Elements"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":5},"content":[{"type":"text","text":"知識點"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"之前我們使用了"},{"type":"codeinline","content":[{"type":"text","text":"id"}]},{"type":"text","text":"和"},{"type":"codeinline","content":[{"type":"text","text":"class"}]},{"type":"text","text":"屬性選擇器給特定的元素改變樣式；"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這種方式叫做"},{"type":"codeinline","content":[{"type":"text","text":"ID"}]},{"type":"text","text":"和"},{"type":"codeinline","content":[{"type":"text","text":"CLASS"}]},{"type":"text","text":"選擇器；"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"除了這兩種CSS選擇器之外，還有其他選擇讓我們選擇一組自定義的元素來改變樣式的；"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"我們把"},{"type":"text","marks":[{"type":"strong"}],"text":"CatPhotoApp"},{"type":"text","text":"拿出來練習其他CSS選擇器；"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在這個關卡中我們將使用"},{"type":"codeinline","content":[{"type":"text","text":"[attr=value]"}]},{"type":"text","text":"（屬性=值）這種屬性選擇來給我們的 "},{"type":"text","marks":[{"type":"strong"}],"text":"checkboxes"},{"type":"text","text":" （複選框）添加樣式；"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這個選擇器匹配特殊的屬性值，然後對這個屬性做出樣式的改變；"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"比如一下例子，所有"},{"type":"codeinline","content":[{"type":"text","text":"type"}]},{"type":"text","text":"屬性值爲"},{"type":"codeinline","content":[{"type":"text","text":"radio"}]},{"type":"text","text":"的元素加入 "},{"type":"text","marks":[{"type":"strong"}],"text":"margin"},{"type":"text","text":"（外邊距）做出改變："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":"[type='radio'] {\n margin: 20px 0px 20px 0px;\n}"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":5},"content":[{"type":"text","text":"過關目標"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"使用屬性選擇器，選中所有"},{"type":"codeinline","content":[{"type":"text","text":"type"}]},{"type":"text","text":"屬性爲複選框的元素；"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"並且給與這些元素 "},{"type":"text","marks":[{"type":"strong"}],"text":"10px"},{"type":"text","text":" 的頂部外邊距和 "},{"type":"text","marks":[{"type":"strong"}],"text":"15px"},{"type":"text","text":" 的底部外邊距；"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":5},"content":[{"type":"text","text":"過關條件"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"type"}]},{"type":"text","text":"屬性選擇器必須用來選中所有複選框；"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"所有複選框的頂部 margin 必須是 10px；"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"所有複選框的底部 margin 必須是 15px；"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":5},"content":[{"type":"text","text":"學會了什麼？"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這關卡主要教會我們："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"numberedlist","attrs":{"start":"1","normalizeStart":1},"content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":1,"align":null,"origin":null},"content":[{"type":"text","text":"使用屬性選擇器來改變元素的樣式；"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/7f/7f8705314186c0a6cc1b33b59b40b184.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":5},"content":[{"type":"text","text":"答案"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/21/214a661e5f0443e9606619afa3f3c316.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/b3/b34c995f506fd74ab4d6e4adb20b4706.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":1},"content":[{"type":"text","text":"「第二十四關」絕對與相對單位"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"關卡名："},{"type":"codeinline","content":[{"type":"text","text":"Understand Absolute versus Relative Units"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":5},"content":[{"type":"text","text":"知識點"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"之前所有的關卡中，我們都是給元素的 margin 和 padding 賦予“"},{"type":"text","marks":[{"type":"strong"}],"text":"像素（pixels/px）"},{"type":"text","text":"”單位；"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"像素是一個瀏覽器使用的長度單位，這個單位會告訴瀏覽器給予一個元素多少大小和空間；"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在CSS當中除了 "},{"type":"codeinline","content":[{"type":"text","text":"px"}]},{"type":"text","text":" 單位之外，還可以使用其他可選的單位；"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"可用單位主要分爲兩種 "},{"type":"text","marks":[{"type":"strong"}],"text":"絕對單位（absolute）"},{"type":"text","text":" 和 "},{"type":"text","marks":[{"type":"strong"}],"text":"相對單位（relative）"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" + 絕對單位有 "},{"type":"codeinline","content":[{"type":"text","text":"in"}]},{"type":"text","text":"（英寸） 和 "},{"type":"codeinline","content":[{"type":"text","text":"mm"}]},{"type":"text","text":" （釐米），絕對長度單位近似於屏幕上的實際測量值，但是根據屏幕的分辨率會有一些差異；"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" + 相對單位有 "},{"type":"codeinline","content":[{"type":"text","text":"em"}]},{"type":"text","text":" 或者 "},{"type":"codeinline","content":[{"type":"text","text":"rem"}]},{"type":"text","text":", 兩者分別都是相對單位，都會根據一個相對的元素轉換自己的大小；"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"那麼 "},{"type":"codeinline","content":[{"type":"text","marks":[{"type":"strong"}],"text":"em"}],"marks":[{"type":"strong"}]},{"type":"text","marks":[{"type":"strong"}],"text":" 和 "},{"type":"codeinline","content":[{"type":"text","marks":[{"type":"strong"}],"text":"rem"}],"marks":[{"type":"strong"}]},{"type":"text","marks":[{"type":"strong"}],"text":" 有什麼區別呢？"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"EM是相對長度，它是相對於當前元素的字體大小，如果當前元素沒有設置字體大小就會一直往父級找，然後相對於父級字體大小來轉換。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"EM特性："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"1. em的值並不是固定的；"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"2. em會基層父級元素的字體大小；"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"3. 如果父級也是使用了 em 長度單位，那當前元素的 em 換算就會使用父級 em 換算後的結果進行換算。（比如父級使用了1.2em，換算後是12px，那當前元素用的 1em 就是 12px，但是我們想要的是 1em = 10px，這種情況用 em 就會出現大小錯誤。）"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"REM是CSS3新增的一個相對單位，它是 root em 的縮寫，顧名思義就是根em。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"REM特性："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"1. 它與EM不一樣的是，因爲是\"根\"em，所以它永遠都是相對於HTML根元素的字體大小；"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"2. 與EM相同的就是值並不是固定的，都是相對一個元素的字體大小；"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"3. 因爲REM的特性是相對於HTML根元素，所以只要改變根元素的字體大小，就會對所有REM單位的元素髮生大小變化；"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"4. 除了IE8及更早版本的瀏覽器內核，所有瀏覽器均支持REM；"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"5. 對於不支持的瀏覽器來說，我們就需要加入一個 px 單位的 font-size屬性，如果瀏覽器發現無法使用 rem 即會使用 px 單位的 font-size 值；"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"6. 這個單位可謂集合相對和絕對單位的優點與一身，所以此單位引起了廣泛的使用，特別是在做移動端網頁時，用於響應不同手機屏幕大小和分辨率大小；"}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這些相對單位的使用會在《響應式頁面開發》的關卡中詳細介紹使用場景。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":5},"content":[{"type":"text","text":"過關目標"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"給擁有"},{"type":"codeinline","content":[{"type":"text","text":"red-box"}]},{"type":"text","text":"類的元素加入 "},{"type":"codeinline","content":[{"type":"text","text":"padding"}]},{"type":"text","text":" 屬性，值爲 "},{"type":"codeinline","content":[{"type":"text","text":"1.5em"}]},{"type":"text","text":"；"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":5},"content":[{"type":"text","text":"過關條件"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"red-box"}]},{"type":"text","text":"類元素必須含有 "},{"type":"codeinline","content":[{"type":"text","text":"padding"}]},{"type":"text","text":" 屬性；"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"red-box"}]},{"type":"text","text":"類元素的"},{"type":"codeinline","content":[{"type":"text","text":"padding"}]},{"type":"text","text":"屬性值必須爲"},{"type":"codeinline","content":[{"type":"text","text":"1.5em"}]},{"type":"text","text":"；"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":5},"content":[{"type":"text","text":"學會了什麼？"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這關卡主要教會我們："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"numberedlist","attrs":{"start":"1","normalizeStart":1},"content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":1,"align":null,"origin":null},"content":[{"type":"text","text":"認識“像素（px）”以外的大小單位；"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":2,"align":null,"origin":null},"content":[{"type":"text","text":"認識什麼是絕對與相對大小單位，並且分別擁有那些單位可以使用；"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":3,"align":null,"origin":null},"content":[{"type":"text","text":"如何使用"},{"type":"codeinline","content":[{"type":"text","text":"em"}]},{"type":"text","text":"，這種相對單位；"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/7f/7f8705314186c0a6cc1b33b59b40b184.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":5},"content":[{"type":"text","text":"答案"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/83/8317305e7f9a1a7b6cb211913a072a74.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/b3/b34c995f506fd74ab4d6e4adb20b4706.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":1},"content":[{"type":"text","text":"「第二十五關」HTML主體屬性樣式"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"關卡名："},{"type":"codeinline","content":[{"type":"text","text":"Style the HTML Body Element"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":5},"content":[{"type":"text","text":"知識點"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這一關開始，我們重新開始一個頁面，並且一起來學習"},{"type":"text","marks":[{"type":"strong"}],"text":"CSS繼承"},{"type":"text","text":"；"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"首先每一個HTML頁面都會有一個"},{"type":"codeinline","content":[{"type":"text","text":"body"}]},{"type":"text","text":"元素；"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這一關我們用"},{"type":"codeinline","content":[{"type":"text","text":"background-color"}]},{"type":"text","text":"屬性給"},{"type":"codeinline","content":[{"type":"text","text":"body"}]},{"type":"text","text":"元素一個背景顏色爲"},{"type":"codeinline","content":[{"type":"text","text":"black"}]},{"type":"text","text":"；"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"如果這時頁面變成了黑色，證明我們頁面中是有"},{"type":"codeinline","content":[{"type":"text","text":"body"}]},{"type":"text","text":"元素的；"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"以下例子演示如何給"},{"type":"codeinline","content":[{"type":"text","text":"body"}]},{"type":"text","text":"應用一個黑色背景的代碼："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"css"},"content":[{"type":"text","text":"body {\n background-color: black;\n}"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":5},"content":[{"type":"text","text":"過關目標"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"用CSS把頁面中"},{"type":"codeinline","content":[{"type":"text","text":"body"}]},{"type":"text","text":"元素的背景色變成黑色；"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"從而證明我們頁面中擁有一個"},{"type":"codeinline","content":[{"type":"text","text":"body"}]},{"type":"text","text":"元素；"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":5},"content":[{"type":"text","text":"過關條件"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"body"}]},{"type":"text","text":"元素必須擁有"},{"type":"codeinline","content":[{"type":"text","text":"background-color"}]},{"type":"text","text":"屬性，並且值爲"},{"type":"codeinline","content":[{"type":"text","text":"black"}]},{"type":"text","text":"；"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"CSS的格式必須合格並且遵循規範寫法；"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"CSS的規則寫法必須用分號結束；"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":5},"content":[{"type":"text","text":"學會了什麼？"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這關卡主要教會我們："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"numberedlist","attrs":{"start":"1","normalizeStart":1},"content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":1,"align":null,"origin":null},"content":[{"type":"text","text":"使用背景顏色；"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":2,"align":null,"origin":null},"content":[{"type":"text","text":"證明了頁面中必定會有一個"},{"type":"codeinline","content":[{"type":"text","text":"body"}]},{"type":"text","text":"元素；"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/7f/7f8705314186c0a6cc1b33b59b40b184.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":5},"content":[{"type":"text","text":"答案"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/09/09c059b0d56845b890175cedefeee628.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/b3/b34c995f506fd74ab4d6e4adb20b4706.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":1},"content":[{"type":"text","text":"「第二十六關」從主體元素中繼承樣式"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"關卡名："},{"type":"codeinline","content":[{"type":"text","text":"Inherit Styles from the Body Element"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":5},"content":[{"type":"text","text":"知識點"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"上一關我們證明了每一個HTML頁面中都必定會有"},{"type":"codeinline","content":[{"type":"text","text":"body"}]},{"type":"text","text":"元素；"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"而且"},{"type":"codeinline","content":[{"type":"text","text":"body"}]},{"type":"text","text":"元素也是可以使用CSS給它定製樣式的；"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"記住："},{"type":"codeinline","content":[{"type":"text","text":"body"}]},{"type":"text","text":"元素與其他HTML中的元素一樣，都是可以使用CSS給予樣式控制的。不同的就是，"},{"type":"codeinline","content":[{"type":"text","text":"body"}]},{"type":"text","text":"元素中的樣式會被HTML中其他元素默認繼承。意思就是說，任何在 body 中的樣式都會攜帶到其他元素中，如果 body 中給予了背景顏色是黑色，那我們加入一個"},{"type":"codeinline","content":[{"type":"text","text":"div"}]},{"type":"text","text":"元素，默認也是黑色背景。"}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":5},"content":[{"type":"text","text":"過關目標"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"首先，創建一個"},{"type":"codeinline","content":[{"type":"text","text":"h1"}]},{"type":"text","text":"元素，內容填入文字 “"},{"type":"text","marks":[{"type":"strong"}],"text":"Hello World"},{"type":"text","text":"”；"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"接下來我們讓這個頁面下所有元素的文字顏色都改爲綠色，要達到這樣的效果只需要在"},{"type":"codeinline","content":[{"type":"text","text":"body"}]},{"type":"text","text":"元素中加入"},{"type":"codeinline","content":[{"type":"text","text":"color: green"}]},{"type":"text","text":"即可；"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"最後給"},{"type":"codeinline","content":[{"type":"text","text":"body"}]},{"type":"text","text":"元素定義字體爲"},{"type":"codeinline","content":[{"type":"text","text":"monospace"}]},{"type":"text","text":"，我們只需要在"},{"type":"codeinline","content":[{"type":"text","text":"body"}]},{"type":"text","text":"樣式中加入"},{"type":"codeinline","content":[{"type":"text","text":"font-family: monospace"}]},{"type":"text","text":"屬性值即可；"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":5},"content":[{"type":"text","text":"過關條件"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"創建一個"},{"type":"codeinline","content":[{"type":"text","text":"h1"}]},{"type":"text","text":"元素；"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"h1"}]},{"type":"text","text":"元素內容是 Hello World；"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"h1"}]},{"type":"text","text":"元素有關閉標籤；"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"body"}]},{"type":"text","text":"元素應該有"},{"type":"codeinline","content":[{"type":"text","text":"color"}]},{"type":"text","text":"屬性，並且值爲"},{"type":"codeinline","content":[{"type":"text","text":"green"}]},{"type":"text","text":"；"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"body"}]},{"type":"text","text":"元素應該有"},{"type":"codeinline","content":[{"type":"text","text":"font-family"}]},{"type":"text","text":"屬性，並且值爲"},{"type":"codeinline","content":[{"type":"text","text":"monospace"}]},{"type":"text","text":"；"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"h1"}]},{"type":"text","text":"元素的字體應該繼承"},{"type":"codeinline","content":[{"type":"text","text":"body"}]},{"type":"text","text":"元素的字體定義；"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"h1"}]},{"type":"text","text":"元素的字體顏色應該繼承"},{"type":"codeinline","content":[{"type":"text","text":"body"}]},{"type":"text","text":"元素的字體顏色；"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":5},"content":[{"type":"text","text":"學會了什麼？"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這關卡主要教會我們："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"numberedlist","attrs":{"start":"1","normalizeStart":1},"content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":1,"align":null,"origin":null},"content":[{"type":"text","text":"學會繼承主體（body）元素的樣式；"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/7f/7f8705314186c0a6cc1b33b59b40b184.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":5},"content":[{"type":"text","text":"答案"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/05/05f3a8228127d872ca4696bd7012d13d.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/b3/b34c995f506fd74ab4d6e4adb20b4706.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":1},"content":[{"type":"text","text":"「第二十七關」CSS樣式繼承中樣式優先級"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"關卡名："},{"type":"codeinline","content":[{"type":"text","text":"Prioritize One Style Over Another"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":5},"content":[{"type":"text","text":"知識點"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"有些時候HTML元素會同時存在多個樣式，並且產生衝突的可能性；"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"舉例，我們的"},{"type":"codeinline","content":[{"type":"text","text":"h1"}]},{"type":"text","text":"元素無法同時擁有綠色和粉紅色字體顏色的屬性；"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"讓我們來看看，如果我們給一個元素一個類名，並且賦予這個類紅粉色的字體顏色；"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這個時候會不會覆蓋"},{"type":"codeinline","content":[{"type":"text","text":"body"}]},{"type":"text","text":"元素中的"},{"type":"codeinline","content":[{"type":"text","text":"color: green"}]},{"type":"text","text":"CSS屬性；"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":5},"content":[{"type":"text","text":"過關目標"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"創建一個CSS類，名爲"},{"type":"codeinline","content":[{"type":"text","text":"pink-text"}]},{"type":"text","text":"；"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"然後給"},{"type":"codeinline","content":[{"type":"text","text":"pink-text"}]},{"type":"text","text":"加入字體顏色"},{"type":"codeinline","content":[{"type":"text","text":"color: pink"}]},{"type":"text","text":"；"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"把"},{"type":"codeinline","content":[{"type":"text","text":"pink-text"}]},{"type":"text","text":"類賦予"},{"type":"codeinline","content":[{"type":"text","text":"h1"}]},{"type":"text","text":"元素；"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":5},"content":[{"type":"text","text":"過關條件"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"h1"}]},{"type":"text","text":"元素必須擁有"},{"type":"codeinline","content":[{"type":"text","text":"pink-text"}]},{"type":"text","text":"類；"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"
【FCC前端教程】44關學習CSS與CSS3基礎「二」
{"type":"doc","content":[{"type":"heading","attrs":{"align":null,"level":1},"content":[{"type":"text","text":"「前沿」"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"我有一段時間沒有更新FCC前端教程了，這一週就繼續寫完CSS與CSS3基礎的教程。最近工作和生活都比較繁忙所以文章更新也受到了一定的影響。不過技術文章寫作再忙也不會放棄的。我會繼續努力堅持着一週一篇文章的進度，繼續爲大家帶來我學習到的知識。讓我們一起繼續終身學習吧！"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這一篇文章是上一篇《"},{"type":"link","attrs":{"href":"https://xie.infoq.cn/article/55acfe3f4cc3438000bc66ae8","title":""},"content":[{"type":"text","text":"44關學習CSS與CSS3基礎「一」"}]},{"type":"text","text":"》的第二部分，一共闖了44關。廢話少說，讓我們一起來闖關吧！"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/b3/b34c995f506fd74ab4d6e4adb20b4706.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":1},"content":[{"type":"text","text":"「第二十三關」使用屬性選擇器改變元素屬性"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"關卡名："},{"type":"codeinline","content":[{"type":"text","text":"Use Attribute Selectors to Style Elements"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":5},"content":[{"type":"text","text":"知識點"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"之前我們使用了"},{"type":"codeinline","content":[{"type":"text","text":"id"}]},{"type":"text","text":"和"},{"type":"codeinline","content":[{"type":"text","text":"class"}]},{"type":"text","text":"屬性選擇器給特定的元素改變樣式；"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這種方式叫做"},{"type":"codeinline","content":[{"type":"text","text":"ID"}]},{"type":"text","text":"和"},{"type":"codeinline","content":[{"type":"text","text":"CLASS"}]},{"type":"text","text":"選擇器；"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"除了這兩種CSS選擇器之外，還有其他選擇讓我們選擇一組自定義的元素來改變樣式的；"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"我們把"},{"type":"text","marks":[{"type":"strong"}],"text":"CatPhotoApp"},{"type":"text","text":"拿出來練習其他CSS選擇器；"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在這個關卡中我們將使用"},{"type":"codeinline","content":[{"type":"text","text":"[attr=value]"}]},{"type":"text","text":"（屬性=值）這種屬性選擇來給我們的 "},{"type":"text","marks":[{"type":"strong"}],"text":"checkboxes"},{"type":"text","text":" （複選框）添加樣式；"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這個選擇器匹配特殊的屬性值，然後對這個屬性做出樣式的改變；"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"比如一下例子，所有"},{"type":"codeinline","content":[{"type":"text","text":"type"}]},{"type":"text","text":"屬性值爲"},{"type":"codeinline","content":[{"type":"text","text":"radio"}]},{"type":"text","text":"的元素加入 "},{"type":"text","marks":[{"type":"strong"}],"text":"margin"},{"type":"text","text":"（外邊距）做出改變："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":"[type='radio'] {\n margin: 20px 0px 20px 0px;\n}"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":5},"content":[{"type":"text","text":"過關目標"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"使用屬性選擇器，選中所有"},{"type":"codeinline","content":[{"type":"text","text":"type"}]},{"type":"text","text":"屬性爲複選框的元素；"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"並且給與這些元素 "},{"type":"text","marks":[{"type":"strong"}],"text":"10px"},{"type":"text","text":" 的頂部外邊距和 "},{"type":"text","marks":[{"type":"strong"}],"text":"15px"},{"type":"text","text":" 的底部外邊距；"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":5},"content":[{"type":"text","text":"過關條件"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"type"}]},{"type":"text","text":"屬性選擇器必須用來選中所有複選框；"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"所有複選框的頂部 margin 必須是 10px；"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"所有複選框的底部 margin 必須是 15px；"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":5},"content":[{"type":"text","text":"學會了什麼？"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這關卡主要教會我們："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"numberedlist","attrs":{"start":"1","normalizeStart":1},"content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":1,"align":null,"origin":null},"content":[{"type":"text","text":"使用屬性選擇器來改變元素的樣式；"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/7f/7f8705314186c0a6cc1b33b59b40b184.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":5},"content":[{"type":"text","text":"答案"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/21/214a661e5f0443e9606619afa3f3c316.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/b3/b34c995f506fd74ab4d6e4adb20b4706.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":1},"content":[{"type":"text","text":"「第二十四關」絕對與相對單位"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"關卡名："},{"type":"codeinline","content":[{"type":"text","text":"Understand Absolute versus Relative Units"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":5},"content":[{"type":"text","text":"知識點"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"之前所有的關卡中，我們都是給元素的 margin 和 padding 賦予“"},{"type":"text","marks":[{"type":"strong"}],"text":"像素（pixels/px）"},{"type":"text","text":"”單位；"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"像素是一個瀏覽器使用的長度單位，這個單位會告訴瀏覽器給予一個元素多少大小和空間；"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在CSS當中除了 "},{"type":"codeinline","content":[{"type":"text","text":"px"}]},{"type":"text","text":" 單位之外，還可以使用其他可選的單位；"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"可用單位主要分爲兩種 "},{"type":"text","marks":[{"type":"strong"}],"text":"絕對單位（absolute）"},{"type":"text","text":" 和 "},{"type":"text","marks":[{"type":"strong"}],"text":"相對單位（relative）"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" + 絕對單位有 "},{"type":"codeinline","content":[{"type":"text","text":"in"}]},{"type":"text","text":"（英寸） 和 "},{"type":"codeinline","content":[{"type":"text","text":"mm"}]},{"type":"text","text":" （釐米），絕對長度單位近似於屏幕上的實際測量值，但是根據屏幕的分辨率會有一些差異；"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" + 相對單位有 "},{"type":"codeinline","content":[{"type":"text","text":"em"}]},{"type":"text","text":" 或者 "},{"type":"codeinline","content":[{"type":"text","text":"rem"}]},{"type":"text","text":", 兩者分別都是相對單位，都會根據一個相對的元素轉換自己的大小；"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"那麼 "},{"type":"codeinline","content":[{"type":"text","marks":[{"type":"strong"}],"text":"em"}],"marks":[{"type":"strong"}]},{"type":"text","marks":[{"type":"strong"}],"text":" 和 "},{"type":"codeinline","content":[{"type":"text","marks":[{"type":"strong"}],"text":"rem"}],"marks":[{"type":"strong"}]},{"type":"text","marks":[{"type":"strong"}],"text":" 有什麼區別呢？"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"EM是相對長度，它是相對於當前元素的字體大小，如果當前元素沒有設置字體大小就會一直往父級找，然後相對於父級字體大小來轉換。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"EM特性："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"1. em的值並不是固定的；"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"2. em會基層父級元素的字體大小；"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"3. 如果父級也是使用了 em 長度單位，那當前元素的 em 換算就會使用父級 em 換算後的結果進行換算。（比如父級使用了1.2em，換算後是12px，那當前元素用的 1em 就是 12px，但是我們想要的是 1em = 10px，這種情況用 em 就會出現大小錯誤。）"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"REM是CSS3新增的一個相對單位，它是 root em 的縮寫，顧名思義就是根em。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"REM特性："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"1. 它與EM不一樣的是，因爲是\"根\"em，所以它永遠都是相對於HTML根元素的字體大小；"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"2. 與EM相同的就是值並不是固定的，都是相對一個元素的字體大小；"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"3. 因爲REM的特性是相對於HTML根元素，所以只要改變根元素的字體大小，就會對所有REM單位的元素髮生大小變化；"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"4. 除了IE8及更早版本的瀏覽器內核，所有瀏覽器均支持REM；"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"5. 對於不支持的瀏覽器來說，我們就需要加入一個 px 單位的 font-size屬性，如果瀏覽器發現無法使用 rem 即會使用 px 單位的 font-size 值；"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"6. 這個單位可謂集合相對和絕對單位的優點與一身，所以此單位引起了廣泛的使用，特別是在做移動端網頁時，用於響應不同手機屏幕大小和分辨率大小；"}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這些相對單位的使用會在《響應式頁面開發》的關卡中詳細介紹使用場景。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":5},"content":[{"type":"text","text":"過關目標"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"給擁有"},{"type":"codeinline","content":[{"type":"text","text":"red-box"}]},{"type":"text","text":"類的元素加入 "},{"type":"codeinline","content":[{"type":"text","text":"padding"}]},{"type":"text","text":" 屬性，值爲 "},{"type":"codeinline","content":[{"type":"text","text":"1.5em"}]},{"type":"text","text":"；"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":5},"content":[{"type":"text","text":"過關條件"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"red-box"}]},{"type":"text","text":"類元素必須含有 "},{"type":"codeinline","content":[{"type":"text","text":"padding"}]},{"type":"text","text":" 屬性；"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"red-box"}]},{"type":"text","text":"類元素的"},{"type":"codeinline","content":[{"type":"text","text":"padding"}]},{"type":"text","text":"屬性值必須爲"},{"type":"codeinline","content":[{"type":"text","text":"1.5em"}]},{"type":"text","text":"；"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":5},"content":[{"type":"text","text":"學會了什麼？"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這關卡主要教會我們："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"numberedlist","attrs":{"start":"1","normalizeStart":1},"content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":1,"align":null,"origin":null},"content":[{"type":"text","text":"認識“像素（px）”以外的大小單位；"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":2,"align":null,"origin":null},"content":[{"type":"text","text":"認識什麼是絕對與相對大小單位，並且分別擁有那些單位可以使用；"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":3,"align":null,"origin":null},"content":[{"type":"text","text":"如何使用"},{"type":"codeinline","content":[{"type":"text","text":"em"}]},{"type":"text","text":"，這種相對單位；"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/7f/7f8705314186c0a6cc1b33b59b40b184.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":5},"content":[{"type":"text","text":"答案"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/83/8317305e7f9a1a7b6cb211913a072a74.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/b3/b34c995f506fd74ab4d6e4adb20b4706.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":1},"content":[{"type":"text","text":"「第二十五關」HTML主體屬性樣式"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"關卡名："},{"type":"codeinline","content":[{"type":"text","text":"Style the HTML Body Element"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":5},"content":[{"type":"text","text":"知識點"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這一關開始，我們重新開始一個頁面，並且一起來學習"},{"type":"text","marks":[{"type":"strong"}],"text":"CSS繼承"},{"type":"text","text":"；"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"首先每一個HTML頁面都會有一個"},{"type":"codeinline","content":[{"type":"text","text":"body"}]},{"type":"text","text":"元素；"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這一關我們用"},{"type":"codeinline","content":[{"type":"text","text":"background-color"}]},{"type":"text","text":"屬性給"},{"type":"codeinline","content":[{"type":"text","text":"body"}]},{"type":"text","text":"元素一個背景顏色爲"},{"type":"codeinline","content":[{"type":"text","text":"black"}]},{"type":"text","text":"；"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"如果這時頁面變成了黑色，證明我們頁面中是有"},{"type":"codeinline","content":[{"type":"text","text":"body"}]},{"type":"text","text":"元素的；"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"以下例子演示如何給"},{"type":"codeinline","content":[{"type":"text","text":"body"}]},{"type":"text","text":"應用一個黑色背景的代碼："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"css"},"content":[{"type":"text","text":"body {\n background-color: black;\n}"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":5},"content":[{"type":"text","text":"過關目標"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"用CSS把頁面中"},{"type":"codeinline","content":[{"type":"text","text":"body"}]},{"type":"text","text":"元素的背景色變成黑色；"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"從而證明我們頁面中擁有一個"},{"type":"codeinline","content":[{"type":"text","text":"body"}]},{"type":"text","text":"元素；"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":5},"content":[{"type":"text","text":"過關條件"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"body"}]},{"type":"text","text":"元素必須擁有"},{"type":"codeinline","content":[{"type":"text","text":"background-color"}]},{"type":"text","text":"屬性，並且值爲"},{"type":"codeinline","content":[{"type":"text","text":"black"}]},{"type":"text","text":"；"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"CSS的格式必須合格並且遵循規範寫法；"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"CSS的規則寫法必須用分號結束；"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":5},"content":[{"type":"text","text":"學會了什麼？"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這關卡主要教會我們："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"numberedlist","attrs":{"start":"1","normalizeStart":1},"content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":1,"align":null,"origin":null},"content":[{"type":"text","text":"使用背景顏色；"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":2,"align":null,"origin":null},"content":[{"type":"text","text":"證明了頁面中必定會有一個"},{"type":"codeinline","content":[{"type":"text","text":"body"}]},{"type":"text","text":"元素；"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/7f/7f8705314186c0a6cc1b33b59b40b184.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":5},"content":[{"type":"text","text":"答案"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/09/09c059b0d56845b890175cedefeee628.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/b3/b34c995f506fd74ab4d6e4adb20b4706.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":1},"content":[{"type":"text","text":"「第二十六關」從主體元素中繼承樣式"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"關卡名："},{"type":"codeinline","content":[{"type":"text","text":"Inherit Styles from the Body Element"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":5},"content":[{"type":"text","text":"知識點"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"上一關我們證明了每一個HTML頁面中都必定會有"},{"type":"codeinline","content":[{"type":"text","text":"body"}]},{"type":"text","text":"元素；"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"而且"},{"type":"codeinline","content":[{"type":"text","text":"body"}]},{"type":"text","text":"元素也是可以使用CSS給它定製樣式的；"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"記住："},{"type":"codeinline","content":[{"type":"text","text":"body"}]},{"type":"text","text":"元素與其他HTML中的元素一樣，都是可以使用CSS給予樣式控制的。不同的就是，"},{"type":"codeinline","content":[{"type":"text","text":"body"}]},{"type":"text","text":"元素中的樣式會被HTML中其他元素默認繼承。意思就是說，任何在 body 中的樣式都會攜帶到其他元素中，如果 body 中給予了背景顏色是黑色，那我們加入一個"},{"type":"codeinline","content":[{"type":"text","text":"div"}]},{"type":"text","text":"元素，默認也是黑色背景。"}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":5},"content":[{"type":"text","text":"過關目標"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"首先，創建一個"},{"type":"codeinline","content":[{"type":"text","text":"h1"}]},{"type":"text","text":"元素，內容填入文字 “"},{"type":"text","marks":[{"type":"strong"}],"text":"Hello World"},{"type":"text","text":"”；"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"接下來我們讓這個頁面下所有元素的文字顏色都改爲綠色，要達到這樣的效果只需要在"},{"type":"codeinline","content":[{"type":"text","text":"body"}]},{"type":"text","text":"元素中加入"},{"type":"codeinline","content":[{"type":"text","text":"color: green"}]},{"type":"text","text":"即可；"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"最後給"},{"type":"codeinline","content":[{"type":"text","text":"body"}]},{"type":"text","text":"元素定義字體爲"},{"type":"codeinline","content":[{"type":"text","text":"monospace"}]},{"type":"text","text":"，我們只需要在"},{"type":"codeinline","content":[{"type":"text","text":"body"}]},{"type":"text","text":"樣式中加入"},{"type":"codeinline","content":[{"type":"text","text":"font-family: monospace"}]},{"type":"text","text":"屬性值即可；"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":5},"content":[{"type":"text","text":"過關條件"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"創建一個"},{"type":"codeinline","content":[{"type":"text","text":"h1"}]},{"type":"text","text":"元素；"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"h1"}]},{"type":"text","text":"元素內容是 Hello World；"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"h1"}]},{"type":"text","text":"元素有關閉標籤；"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"body"}]},{"type":"text","text":"元素應該有"},{"type":"codeinline","content":[{"type":"text","text":"color"}]},{"type":"text","text":"屬性，並且值爲"},{"type":"codeinline","content":[{"type":"text","text":"green"}]},{"type":"text","text":"；"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"body"}]},{"type":"text","text":"元素應該有"},{"type":"codeinline","content":[{"type":"text","text":"font-family"}]},{"type":"text","text":"屬性，並且值爲"},{"type":"codeinline","content":[{"type":"text","text":"monospace"}]},{"type":"text","text":"；"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"h1"}]},{"type":"text","text":"元素的字體應該繼承"},{"type":"codeinline","content":[{"type":"text","text":"body"}]},{"type":"text","text":"元素的字體定義；"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"h1"}]},{"type":"text","text":"元素的字體顏色應該繼承"},{"type":"codeinline","content":[{"type":"text","text":"body"}]},{"type":"text","text":"元素的字體顏色；"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":5},"content":[{"type":"text","text":"學會了什麼？"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這關卡主要教會我們："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"numberedlist","attrs":{"start":"1","normalizeStart":1},"content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":1,"align":null,"origin":null},"content":[{"type":"text","text":"學會繼承主體（body）元素的樣式；"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/7f/7f8705314186c0a6cc1b33b59b40b184.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":5},"content":[{"type":"text","text":"答案"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/05/05f3a8228127d872ca4696bd7012d13d.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/b3/b34c995f506fd74ab4d6e4adb20b4706.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":1},"content":[{"type":"text","text":"「第二十七關」CSS樣式繼承中樣式優先級"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"關卡名："},{"type":"codeinline","content":[{"type":"text","text":"Prioritize One Style Over Another"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":5},"content":[{"type":"text","text":"知識點"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"有些時候HTML元素會同時存在多個樣式，並且產生衝突的可能性；"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"舉例，我們的"},{"type":"codeinline","content":[{"type":"text","text":"h1"}]},{"type":"text","text":"元素無法同時擁有綠色和粉紅色字體顏色的屬性；"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"讓我們來看看，如果我們給一個元素一個類名，並且賦予這個類紅粉色的字體顏色；"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這個時候會不會覆蓋"},{"type":"codeinline","content":[{"type":"text","text":"body"}]},{"type":"text","text":"元素中的"},{"type":"codeinline","content":[{"type":"text","text":"color: green"}]},{"type":"text","text":"CSS屬性；"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":5},"content":[{"type":"text","text":"過關目標"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"創建一個CSS類，名爲"},{"type":"codeinline","content":[{"type":"text","text":"pink-text"}]},{"type":"text","text":"；"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"然後給"},{"type":"codeinline","content":[{"type":"text","text":"pink-text"}]},{"type":"text","text":"加入字體顏色"},{"type":"codeinline","content":[{"type":"text","text":"color: pink"}]},{"type":"text","text":"；"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"把"},{"type":"codeinline","content":[{"type":"text","text":"pink-text"}]},{"type":"text","text":"類賦予"},{"type":"codeinline","content":[{"type":"text","text":"h1"}]},{"type":"text","text":"元素；"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":5},"content":[{"type":"text","text":"過關條件"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"h1"}]},{"type":"text","text":"元素必須擁有"},{"type":"codeinline","content":[{"type":"text","text":"pink-text"}]},{"type":"text","text":"類；"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章