{"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":"
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章