CSS基础

0. CSS基础介绍

8. CSS 基础：字体如何优雅降级

所有浏览器都有几种默认字体。这些通用字体包括monospace，serif和sans-serif。

当字体不可用，你可以告诉浏览器通过 “降级” 去使用其他字体。

例如，如果你想将一个元素的字体设置成Helvetica，当Helvetica不可用时，降级使用sans-serif字体，那么可以这样写：

p {
font-family: Helvetica, sans-serif;
}
通用字体名字不区分大小写。同时，也不需要使用引号，因为它们是 CSS 关键字。

首先，添加monospace字体到h2元素里，它现在拥有着Lobster和monospace两种字体。

在上一个挑战里，你已经通过link标签引入谷歌Lobster字体。现在让我们注释掉谷歌Lobster字体的引入（使用我们之前学过的HTML注释），使字体失效。你会发现你的h2元素降级到了monospace字体。

注意：
如果你的电脑已经安装了Lobster字体，你将看不到这个降级过程，因为你的浏览器会找到该字体。

<!-- <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css"> --> <style>.red-text {color: red;}h2 {font-family: Lobster, monospace;}

9. CSS 基础：调整图片的大小

CSS 的width属性可以控制元素的宽度。图片的width宽度类似于字体的px（像素)值。

假如，你想创建一个叫larger-image的 CSS class 来控制 HTML 元素的宽度为 500px，我们可以这样做：

创建一个smaller-image的 CSS class，设置图片的宽度为 100px。

注意：
由于不同浏览器的差异性，你可能需要将浏览器缩放到 100% 来通过该挑战。

<style>.red-text {color: red;}h2 {font-family: Lobster, monospace;}.smaller-image {width: 100px;}p {font-size: 16px;font-family: monospace;}
</style><h2 class="red-text">CatPhotoApp</h2>
<main><a href="#"><img class="smaller-image" src="http://cdn.chenzhicheng.com/relaxing-cat.jpg" alt="一只仰卧着的萌猫"></a>

10. CSS 基础：在元素周围添加边框

CSS 边框具有style，color和width属性。

假如，我们想要创建一个 5px 的红色实线边框包围一个 HTML 元素，我们可以这样做：

创建一个thick-green-border CSS class，该 class 应在 HTML 元素周围添加一个 10px 的绿色实线边框，将它应用在你的猫咪照片上。

记得，在一个元素上可以同时应用多个class，通过使用空格来分隔。例子如下：

  .smaller-image {width: 100px;}.thick-green-border {border-color: green;border-width: 10px;border-style: solid;}
</style><h2 class="red-text">CatPhotoApp</h2>
<main><a href="#"><img class="smaller-image thick-green-border" src="http://cdn.chenzhicheng.com/relaxing-cat.jpg" alt="一只仰卧着的萌猫"></a>

11. CSS 基础：用 border-radius 添加圆角边框

你的猫咪图片边角很尖锐，我们可以使用border-radius属性来让它变得圆润。

border-radius可以用px像素单位来赋值。给你的猫咪图片设置 10px 的border-radius。

注意：这个挑战有多个解决方法。例如，添加border-radius属性到.thick-green-borderclass 或.smaller-imageclass 里都是可行的。

  .smaller-image {width: 100px;border-radius: 10px;}

12. CSS 基础：用 border-radius 制作圆形图片

除像素外，你也可以使用百分比来指定border-radius的值。

将border-radius的值设置为50%。

  .smaller-image {width: 100px;border-radius: 50%;}

13. CSS 基础：给 div 元素添加背景色

background-color属性可以设置元素的背景颜色。

例如，你想将一个元素的背景颜色改为green，可以在你的style里面这样写：

.green-background {
background-color: green;
}

创建一个silver-backgroundclass 并设置background-color为silver。 并用在div元素上。

  .silver-background {background-color: silver;}<div class="silver-background">

14. CSS 基础：设置元素的 id

除了class属性，每一个 HTML 元素也都有id属性。

使用id有几个好处：你可以通过id选择器来改变单个元素的样式，稍后的课程中，你也会了解到在 JavaScript 里面，可以通过id来选择元素和操作元素。

id属性应是唯一的。浏览器不强迫执行这规范，但是这是广泛认可的最佳实践。所以，请不要给多个元素设置相同的id属性。

设置h2元素的 id 为cat-photo-app的方法如下：

设置form元素的 id 为cat-photo-form。

  <form  id="cat-photo-form" action="/submit-cat-photo">

15. CSS 基础：使用 id 属性来设定元素的样式

通过id属性，你可以做一些很酷的事情，例如，就像 class 一样，你可以使用 CSS 来设置他们的样式

可是，id不可以重用，只应用于一个元素上。同时，在 CSS 里，id的优先级要高于class，如果一个元素同时应用了class和id，并设置样式有冲突，会优先应用id的样式。

选择id为cat-photo-element的元素，并设置它的背景样式为green，可以在你的style标签里这样写：

#cat-photo-element {
background-color: green;
}
注意在style标签里，声明 class 的时候必须在名字前插入.符号。同样，在声明 id 的时候，也必须在名字前插入#符号。

尝试给含有cat-photo-formid属性的form表单的背景颜色设置为green。

  #cat-photo-form {background-color: green;}<form id="cat-photo-form" action="/submit-cat-photo">

16. CSS 基础：调整元素的内边距

我们先暂时把猫咪图片放在一边，让我们去学习更多 HTML 相关样式。

你可能已经注意到了，所有的 HTML 元素基本都是以矩形为基础。

每个 HTML 元素周围的矩形空间由三个重要的属性来控制：padding（内边距），margin（外边距）和border（边框）。

padding控制着元素内容与border之间的空隙大小。

在这里，我们可以看到蓝色盒子和红色盒子都在黄色盒子里面。可以发现，红色盒子比蓝色盒子有着更多的padding填充空间。

当你增加蓝色盒子的padding值，文本内容与边框的距离会逐渐拉大。

蓝色的盒子padding的值要跟红色盒子的一样大小。

<style>.injected-text {margin-bottom: -25px;text-align: center;}.box {border-style: solid;border-color: black;border-width: 5px;text-align: center;}.yellow-box {background-color: yellow;padding: 10px;}.red-box {background-color: crimson;color: #fff;padding: 20px;}.blue-box {background-color: blue;color: #fff;padding: 20px;}
</style>
<h5 class="injected-text">margin</h5><div class="box yellow-box"><h5 class="box red-box">padding</h5><h5 class="box blue-box">padding</h5>
</div>

17. CSS 基础：调整元素的外边距

margin（外边距）控制元素的边框与其他元素之间的距离。

在这里，我们可以看到蓝色盒子和红色盒子都在黄色盒子里。请注意，红色盒子的margin值要比蓝色盒子的大，让它看起来比蓝色盒子要小。

当你增加蓝色的margin值，它会增加元素边框到其他周围元素的距离。

蓝色的盒子margin的值要跟红色盒子的一样大小。

<style>.injected-text {margin-bottom: -25px;text-align: center;}.box {border-style: solid;border-color: black;border-width: 5px;text-align: center;}.yellow-box {background-color: yellow;padding: 10px;}.red-box {background-color: crimson;color: #fff;padding: 20px;margin: 20px;}.blue-box {background-color: blue;color: #fff;padding: 20px;margin: 20px;}
</style>
<h5 class="injected-text">margin</h5><div class="box yellow-box"><h5 class="box red-box">padding</h5><h5 class="box blue-box">padding</h5>
</div>

18. CSS 基础：给元素添加负外边距

元素的margin（外边距）控制元素边框与其他周围元素之间的距离大小。

如果你设置元素margin为负值，元素会变得更大。

尝试设置蓝色盒子的margin为负值，跟红色盒子一样大小。

蓝色盒子的margin设置为-15px，它会填满与黄色盒子之间的距离。

  .blue-box {background-color: blue;color: #fff;padding: 20px;margin: -15px;}

19. CSS 基础：给元素的每一侧添加不同的内边距

有时候，你会想给一个元素每个方向的padding都设置成一个特定的值

CSS 允许你使用padding-top，padding-right， padding-bottom和padding-left属性来设置四个不同方向的padding值。

蓝色盒子的顶部和左侧的padding值设置为40px，底部和右侧设置为20px。

  .blue-box {background-color: blue;color: #fff;padding-top: 40px;padding-right: 20px;padding-bottom: 20px;padding-left: 40px;}

20. CSS 基础：给元素的每一侧添加不同的外边距

有时候，你会想给一个元素每个方向的margin都设置成一个特定的值。

CSS 允许你使用margin-top，margin-right，margin-bottom和margin-left属性来设置四个不同方向的margin值。

  .blue-box {background-color: blue;color: #fff;margin-top: 40px;margin-right: 20px;margin-bottom: 20px;margin-left: 40px;}

21. CSS 基础：使用顺时针方向指定元素的内边距

如果不想每次都要分别声明padding-top，padding-right，padding-bottom和padding-left属性，可以把它们汇总在padding属性里面声明，如下：

padding: 10px 20px 10px 20px;

这四个值按顺时针排序：上，右，下，左，并且设置的效果等同于特定声明每一个方向的padding。

按照顺时针顺序，给".blue-box" class的上内边距以及左内边距设置为40px，右内边距和下内边距则设置为20px。

  .blue-box {background-color: blue;color: #fff;padding: 40px 20px 20px 40px;}

22. CSS 基础：使用顺时针方向指定元素的外边距

让我们再试一次，不过这一次轮到margin了。

同样，每个方向的外边距值可以在margin属性里面汇总声明，来代替分别声明margin-top，margin-right，margin-bottom和margin-left属性的方式，代码如下：

margin: 10px 20px 10px 20px;

这四个值按顺时针排序：上，右，下，左，并且设置的效果等同于特定声明每一个方向的margin。

按照顺时针顺序，给".blue-box" class的上外边距以及左外边距设置为40px，右外边距和下外边距则设置为20px。

  .blue-box {background-color: blue;color: #fff;margin: 40px 20px 20px 40px;}

23. CSS 基础：使用属性选择器来设置元素的样式

你已经通过设置元素的id和class，来显示你想要的样式，而它们也被分别叫做 ID 选择器和 Class 选择器。另外，也还有其他的 CSS 选择器，可以让我们给特定的元素设置样式。

让我们再次通过猫咪图片项目来练习 CSS 选择器。

在这个挑战里，你会使用[attr=value]属性选择器修改复选框的样式。这个选择器使用特定的属性值来匹配和设置元素样式。例如，下面的代码会改变所有type为radio的元素的外边距。

[type=‘radio’] {
margin: 20px 0px 20px 0px;
}

使用type属性选择器，尝试改变复选框的上外边距为 10px，下外边距为 15px。

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css"> <style>.red-text {color: red;}h2 {font-family: Lobster, monospace;}p {font-size: 16px;font-family: monospace;}.thick-green-border {border-color: green;border-width: 10px;border-style: solid;border-radius: 50%;}.smaller-image {width: 100px;}.silver-background {background-color: silver;}[type='checkbox'] {margin: 10px 0px 15px 0px;}
</style><h2 class="red-text">CatPhotoApp</h2>
<main><a href="#"><img class="smaller-image thick-green-border" src="http://cdn.chenzhicheng.com/relaxing-cat.jpg" alt="一只仰卧着的萌猫"></a><div class="silver-background"><p>猫咪最喜欢的三件东西：</p><ul><li>猫薄荷</li><li>激光笔</li><li>千层饼</li></ul><p>猫咪最讨厌的三件东西：</p><ol><li>跳蚤</li><li>打雷</li><li>同类</li></ol></div><form action="/submit-cat-photo" id="cat-photo-form"><label><input type="radio" name="indoor-outdoor">室内</label><label><input type="radio" name="indoor-outdoor">室外</label><br><label><input type="checkbox" name="personality">忠诚</label><label><input type="checkbox" name="personality">懒惰</label><label><input type="checkbox" name="personality">积极</label><br><input type="text" placeholder="猫咪图片地址" required><button type="submit">提交</button></form>
</main>

24. CSS 基础：理解绝对单位与相对单位

最近的几个挑战都是设置元素的内边距和外边距的px值。像素px是一种长度单位，来告诉浏览器应该如何调整元素大小和空间大小。其实除了像素，CSS 也有其他不同的长度单位供我们使用。

单位长度的类型可以分成 2 种，一种是相对的，一种是绝对的。例如，in和mm分别代表着英寸和毫米。绝对长度单位会接近屏幕上的实际测量值，不过不同屏幕的分辨率会存在差异，可能会导致一些误差。

相对单位长度，就像em和rem，它们会依赖其他长度的值。就好像em的大小基于元素的字体的font-size值，如果你使用em单位来设置font-size值，它的值会跟随父元素的font-size值来改变。

注意：
有些单位长度选项是相对视窗大小来改变值的，符合了响应式 web 的设计原则。

给red-box class 添加padding属性，并设置为1.5em。

  .red-box {background-color: red;margin: 20px 40px 20px 40px;padding: 1.5em;}

25. CSS 基础：给 HTML 的 Body 元素添加样式

现在让我们来讨论一下 CSS 继承。

每一个 HTML 页面都含有一个body元素。

我们可以通过设置background-color为black，来证明body元素的存在。

添加以下的代码到style标签里面：

body {
background-color: black;
}

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

26. CSS 基础：从 Body 元素继承样式

我们已经证明每一个 HTML 页面都含有body元素，body元素也可以使用 CSS 样式。

设置body元素的样式的方式跟设置其他 HTML 元素的样式一样，并且其他元素也会继承到body设置的样式。

首先，创建一个文本内容为Hello World的h1标签元素。

接着，在bodyCSS 规则里面添加一句color: green;，改变页面其他元素的字体颜色为green（绿色）。

最后，同样在bodyCSS 规则里面添加font-family: monospace;，设置其他元素字体为font-family: monospace;。

<style>body {background-color: black;font-family: monospace;color: green;}</style><h1>Hello World</h1>

27. CSS 基础：样式中的优先级

有时候，你的 HTML 元素的样式会跟其他样式发生冲突。

就像，你的h1元素也不能同时设置green和pink两种样式。

让我们尝试创建一个字体颜色为pink的 class，并应于用其中一个元素中。猜一猜，它会覆盖body元素设置的color: green;CSS 属性吗？

创建一个能将元素的字体颜色改为pink的CSS class，并起名为pink-text。

给你的h1元素添加pink-textclass。

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

28. CSS 基础：Class 选择器的优先级高于继承样式

“pink-text” class 覆盖了body元素的 CSS 声明。

我们刚刚证明了我们的 class 会覆盖body的 CSS 样式。那么，下一个问题是，我们要怎么样才能覆盖我们的pink-textclass？

创建一个字体颜色为blue的blue-textCSS class，并确保它在pink-text下方声明。

在含有pink-textclass 的h1元素里面，再添加一个blue-textclass，这时候，我们将能看到到底是谁获胜。

HTML 同时应用多个 class 属性需以空格来间隔，例子如下:

class=“class1 class2”

注意：HTML 元素里应用的 class 的先后顺序无关紧要。

但是，在

29. CSS 基础：Class 选择器的优先级高于继承样式

“pink-text” class 覆盖了body元素的 CSS 声明。

我们刚刚证明了我们的 class 会覆盖body的 CSS 样式。那么，下一个问题是，我们要怎么样才能覆盖我们的pink-textclass？

创建一个字体颜色为blue的blue-textCSS class，并确保它在pink-text下方声明。

在含有pink-textclass 的h1元素里面，再添加一个blue-textclass，这时候，我们将能看到到底是谁获胜。

HTML 同时应用多个 class 属性需以空格来间隔，例子如下:

class=“class1 class2”

注意：HTML 元素里应用的 class 的先后顺序无关紧要。

但是，在style>标签里面声明的class顺序十分重要。第二个声明始终优于第一个声明。 因为.blue-text在.pink-text的后面声明，所以.blue-text会覆盖.pink-text的样式。

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

30. CSS 基础：ID 选择器优先级高于 Class 选择器

我们刚刚证明了浏览器读取 CSS 是由上到下的。这就意味着，如果发生冲突，浏览器将会应用最后声明的样式。

不过我们还没结束，还有其他方法来覆盖 CSS 样式。你还记得 id 属性吗？

通过给h1元素添加 id 属性，来覆盖 class 属性定义的同名样式。

给h1元素添加 id 属性，属性值为orange-text。设置方式如下：

h1元素继续保留blue-text和pink-textclass。

在style元素中创建名为orange-text的 id 选择器。例子如下：

#orange-text {
color: orange;
}
注意：无论在pink-textclass 的上面或者下面声明，id 选择器的优先级总是会高于 class 选择器。

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

31. CSS 基础：内联样式的优先级高于 ID 选择器

我们刚刚证明了，id 选择器无论在style标签哪里声明，都会覆盖 class 声明的样式，

其实还有其他方法可以覆盖重写 CSS 样式。你还记得行内样式吗？

使用行内样式尝试让h1的字体颜色变白。像下面这样使用：

你的h1元素需继续保留blue-text和pink-textclass。

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

32. CSS 基础：Important 的优先级最高

耶！我们刚刚又证明了行内样式会覆盖style标签里面所有的 CSS 声明。

不过，还有一种方式可以覆盖重新 CSS 样式。这是所有方法里面最强大的一个。在此之前，我们要考虑清楚，为什么我们需要覆盖 CSS 样式。

在很多时候，你使用 CSS 库，有时候它们声明的样式会意外的覆盖你的 CSS 样式。当你需要保证你的 CSS 样式不受影响，你可以使用!important。

让我们回到pink-textclass 声明之中，它已经被随其后的 class 声明，id 声明，以及行内样式所覆盖。

在pink-textclass 的color声明里面使用!important关键字，去确保h1元素的字体颜色一定为粉色。

操作的方法大概如下：

color: red !important;

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

33. CSS 基础：使用十六进制编码获得指定颜色

你知道在 CSS 里面还有其他方式来代表颜色吗？其中一个方法叫做十六进制编码，简称hex。

我们日常使用最多的计数方法，基于十进制，使用 0 到 9 数字来表示。而十六进制编码（hex）基于 16 位数字，它含有 16 种不同字符。十六进制与十进制一样，0-9 表示着 0 到 9 的值，不同的是，A，B，C，D，E，F 表示着十六进制 10 到 15 的值。总的来说，0 到 F 在十六进制里代表着数字，提供了 16 种可能性。你可以在这里找到更多的相关信息。

在 CSS 里面，我们可以用使用 6 个十六进制的数字来代表颜色，每两个数字控制一种颜色，分别是红（R），绿（G），蓝（B）。例如，#000000代表着黑色，同时也是最小的值。你可以在这里找到更多的相关信息。

body {
color: #000000;
}

使用#000000的十六进制编码来替换body元素的黑色背景。

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

34. CSS 基础：使用十六进制编码混合颜色

回顾一下，hex使用 6 个十六进制编码来表示颜色，2 个一组，分别代表着红（R），绿（G），蓝（B）。

通过三原色，我们可以创建 1600 万种不同颜色！

例如，橘色是纯红色混合一些绿色而成的，没有蓝色的参与。在十六进制编码里面，它被转译为#FFA500。

0是十六进制里面最小的数字，表示着没有颜色。

F是十六进制里面最大的数字，表示着最高的亮度。

把style标签里面的颜色值用正确的十六进制编码替换。

Color Hex Code
Dodger Blue #1E90FF
Green #00FF00
Orange #FFA500
Red #FF0000

<style>.red-text {color: 	#FF0000;}.green-text {color: #00FF00;}.dodger-blue-text {color: #1E90FF;}.orange-text {color: #FFA500;}
</style><h1 class="red-text">I am red!</h1><h1 class="green-text">I am green!</h1><h1 class="dodger-blue-text">I am dodger blue!</h1><h1 class="orange-text">I am orange!</h1>

35. CSS 基础：使用缩写的十六进制编码

许多人对超过 1600 万种颜色的可能性感到不知所措，并且很难记住十六进制编码。幸运的是，它也提供缩写的方法。

例如，红色的#FF0000十六进制编码可以缩写成#F00。在这种缩写形式里，三个数字分别代表着红（R），绿（G），蓝（B）颜色。

这样，颜色的可能性减少到了大约 4000 种。且在浏览器里#FF0000和#F00完全是同一种颜色。

接下来，使用缩写的十六进制编码给元素设置正确的颜色。

Color Short Hex Code
Cyan #0FF
Green #0F0
Red #F00
Fuchsia #F0F

<style>.red-text {color: #F00;}.fuchsia-text {color: 	#F0F;}.cyan-text {color: #0FF;}.green-text {color: #0F0;}
</style><h1 class="red-text">I am red!</h1><h1 class="fuchsia-text">I am fuchsia!</h1><h1 class="cyan-text">I am cyan!</h1><h1 class="green-text">I am green!</h1>

36. CSS 基础：使用 RGB 值为元素上色

另一种可以在 CSS 中表示颜色的方法是使用 RGB 值。

黑色的 RGB 值声明如下：

rgb(0, 0, 0)

白色的 RGB 值声明如下：

rgb(255, 255, 255)

RGB 不像十六进制编码，并不需要用到 6 位十六进制数字。在 RGB 里，你只需要指定每种颜色的亮度大小，从 0 到 255。

在数学的角度来看，如果将十六进制的一种颜色的两位数字相乘，16 乘以 16 也等于 256。所以，从 0 到 255 计算的 RGB 值的具有十六进制编码相同的颜色可能性。

下面是通过使用 RGB 值设置背景颜色为橘色的例子：

body {
background-color: rgb(255, 165, 0);
}

让我们用rgb(0, 0, 0)的 RGB 值替换body元素背景颜色的十六进制编码。

<style>body {background-color: rgb(0, 0, 0);}
</style>

37. CSS 基础：使用 RGB 混合颜色

就像使用十六进制编码一样，你可以通过不同值的组合，来混合得到不同的 RGB 颜色。

将style标签里面中的十六进制编码替换为正确的 RGB 值。

Color RGB
Blue rgb(0, 0, 255)
Red rgb(255, 0, 0)
Orchid rgb(218, 112, 214)
Sienna rgb(160, 82, 45)

<style>.red-text {color: rgb(255, 0, 0);}.orchid-text {color: rgb(218, 112, 214);}.sienna-text {color: rgb(160, 82, 45);}.blue-text {color: rgb(0, 0, 255);}
</style><h1 class="red-text">I am red!</h1><h1 class="orchid-text">I am orchid!</h1><h1 class="sienna-text">I am sienna!</h1><h1 class="blue-text">I am blue!</h1>

38. CSS 基础：使用 CSS 变量一次更改多个元素

CSS 变量是一种仅更改一个值，来一次性更改多个 CSS 样式属性的强大方法。

按照下面指示的来做，我们只需要改变三个值，多个样式将会同时被修改。

在penguinclass 里，将black改为gray，gray改为white，yellow改为orange。

<style>.penguin {/* change code below */--penguin-skin: gray;--penguin-belly: white;--penguin-beak: orange;/* change code above */position: relative;margin: auto;display: block;margin-top: 5%;width: 300px;height: 300px;}.penguin-top {top: 10%;left: 25%;background: var(--penguin-skin, gray);width: 50%;height: 45%;border-radius: 70% 70% 60% 60%;}.penguin-bottom {top: 40%;left: 23.5%;background: var(--penguin-skin, gray);width: 53%;height: 45%;border-radius: 70% 70% 100% 100%;}.right-hand {top: 0%;left: -5%;background: var(--penguin-skin, gray);width: 30%;height: 60%;border-radius: 30% 30% 120% 30%;transform: rotate(45deg);z-index: -1;}.left-hand {top: 0%;left: 75%;background: var(--penguin-skin, gray);width: 30%;height: 60%;border-radius: 30% 30% 30% 120%;transform: rotate(-45deg);z-index: -1;}.right-cheek {top: 15%;left: 35%;background: var(--penguin-belly, white);width: 60%;height: 70%;border-radius: 70% 70% 60% 60%;}.left-cheek {top: 15%;left: 5%;background: var(--penguin-belly, white);width: 60%;height: 70%;border-radius: 70% 70% 60% 60%;}.belly {top: 60%;left: 2.5%;background: var(--penguin-belly, white);width: 95%;height: 100%;border-radius: 120% 120% 100% 100%;}.right-feet {top: 85%;left: 60%;background: var(--penguin-beak, orange);width: 15%;height: 30%;border-radius: 50% 50% 50% 50%;transform: rotate(-80deg);z-index: -2222;  }.left-feet {top: 85%;left: 25%;background: var(--penguin-beak, orange);width: 15%;height: 30%;border-radius: 50% 50% 50% 50%;transform: rotate(80deg);z-index: -2222;  }.right-eye {top: 45%;left: 60%;background: black;width: 15%;height: 17%;border-radius: 50%; }.left-eye {top: 45%;left: 25%;background: black;width: 15%;height: 17%;border-radius: 50%;  }.sparkle {top: 25%;left: 15%;background: white;width: 35%;height: 35%;border-radius: 50%;  }.blush-right {top: 65%;left: 15%;background: pink;width: 15%;height: 10%;border-radius: 50%;  }.blush-left {top: 65%;left: 70%;background: pink;width: 15%;height: 10%;border-radius: 50%;  }.beak-top {top: 60%;left: 40%;background: var(--penguin-beak, orange);width: 20%;height: 10%;border-radius: 50%;  }.beak-bottom {top: 65%;left: 42%;background: var(--penguin-beak, orange);width: 16%;height: 10%;border-radius: 50%;  }body {background:#c6faf1;}.penguin * {position: absolute;}
</style>
<div class="penguin"><div class="penguin-bottom"><div class="right-hand"></div><div class="left-hand"></div><div class="right-feet"></div><div class="left-feet"></div></div><div class="penguin-top"><div class="right-cheek"></div><div class="left-cheek"></div><div class="belly"></div><div class="right-eye"><div class="sparkle"></div></div><div class="left-eye"><div class="sparkle"></div></div><div class="blush-right"></div><div class="blush-left"></div><div class="beak-top"></div><div class="beak-bottom"></div></div>
</div>

39. CSS 基础：创建一个自定义的 CSS 变量

创建一个 CSS 变量，你只需要在变量名前添加两个破折号，并为其赋值，例子如下：

–penguin-skin: gray;
这样会创建一个–penguin-skin变量并赋值为gray（灰色）。

现在，其他元素可通过该变量来设置为gray（灰色）。

在penguinclass 里面，创建一个–penguin-skin变量，且赋值为gray（灰色）。

<style>.penguin {/* add code below */--penguin-skin: gray;/* add code above */position: relative;margin: auto;display: block;margin-top: 5%;width: 300px;height: 300px;}.penguin-top {top: 10%;left: 25%;background: black;width: 50%;height: 45%;border-radius: 70% 70% 60% 60%;}.penguin-bottom {top: 40%;left: 23.5%;background: black;width: 53%;height: 45%;border-radius: 70% 70% 100% 100%;}.right-hand {top: 0%;left: -5%;background: black;width: 30%;height: 60%;border-radius: 30% 30% 120% 30%;transform: rotate(45deg);z-index: -1;}.left-hand {top: 0%;left: 75%;background: black;width: 30%;height: 60%;border-radius: 30% 30% 30% 120%;transform: rotate(-45deg);z-index: -1;}.right-cheek {top: 15%;left: 35%;background: white;width: 60%;height: 70%;border-radius: 70% 70% 60% 60%;}.left-cheek {top: 15%;left: 5%;background: white;width: 60%;height: 70%;border-radius: 70% 70% 60% 60%;}.belly {top: 60%;left: 2.5%;background: white;width: 95%;height: 100%;border-radius: 120% 120% 100% 100%;}.right-feet {top: 85%;left: 60%;background: orange;width: 15%;height: 30%;border-radius: 50% 50% 50% 50%;transform: rotate(-80deg);z-index: -2222;  }.left-feet {top: 85%;left: 25%;background: orange;width: 15%;height: 30%;border-radius: 50% 50% 50% 50%;transform: rotate(80deg);z-index: -2222;  }.right-eye {top: 45%;left: 60%;background: black;width: 15%;height: 17%;border-radius: 50%; }.left-eye {top: 45%;left: 25%;background: black;width: 15%;height: 17%;border-radius: 50%;  }.sparkle {top: 25%;left: 15%;background: white;width: 35%;height: 35%;border-radius: 50%;  }.blush-right {top: 65%;left: 15%;background: pink;width: 15%;height: 10%;border-radius: 50%;  }.blush-left {top: 65%;left: 70%;background: pink;width: 15%;height: 10%;border-radius: 50%;  }.beak-top {top: 60%;left: 40%;background: orange;width: 20%;height: 10%;border-radius: 50%;  }.beak-bottom {top: 65%;left: 42%;background: orange;width: 16%;height: 10%;border-radius: 50%;  }body {background:#c6faf1;}.penguin * {position: absolute;}
</style>
<div class="penguin"><div class="penguin-bottom"><div class="right-hand"></div><div class="left-hand"></div><div class="right-feet"></div><div class="left-feet"></div></div><div class="penguin-top"><div class="right-cheek"></div><div class="left-cheek"></div><div class="belly"></div><div class="right-eye"><div class="sparkle"></div></div><div class="left-eye"><div class="sparkle"></div></div><div class="blush-right"></div><div class="blush-left"></div><div class="beak-top"></div><div class="beak-bottom"></div></div>
</div>

40. CSS 基础：使用一个自定义的 CSS 变量

创建变量后，CSS 属性可以通过引用变量名来使用它的值。

background: var(–penguin-skin);
因为引用了–penguin-skin变量的值，使用了这个样式的元素背景颜色会是灰色。

注意：如果变量名不匹配，样式不会生效。

penguin-top，penguin-bottom，right-hand和left-handclass 的background属性均使用–penguin-skin变量值。

<style>.penguin {--penguin-skin: gray;position: relative;margin: auto;display: block;margin-top: 5%;width: 300px;height: 300px;}.penguin-top {top: 10%;left: 25%;/* change code below */background: var(--penguin-skin);/* change code above */width: 50%;height: 45%;border-radius: 70% 70% 60% 60%;}.penguin-bottom {top: 40%;left: 23.5%;/* change code below */background: var(--penguin-skin);/* change code above */width: 53%;height: 45%;border-radius: 70% 70% 100% 100%;}.right-hand {top: 0%;left: -5%;/* change code below */background: var(--penguin-skin);/* change code above */width: 30%;height: 60%;border-radius: 30% 30% 120% 30%;transform: rotate(45deg);z-index: -1;}.left-hand {top: 0%;left: 75%;/* change code below */background: var(--penguin-skin);/* change code above */width: 30%;height: 60%;border-radius: 30% 30% 30% 120%;transform: rotate(-45deg);z-index: -1;}.right-cheek {top: 15%;left: 35%;background: white;width: 60%;height: 70%;border-radius: 70% 70% 60% 60%;}.left-cheek {top: 15%;left: 5%;background: white;width: 60%;height: 70%;border-radius: 70% 70% 60% 60%;}.belly {top: 60%;left: 2.5%;background: white;width: 95%;height: 100%;border-radius: 120% 120% 100% 100%;}.right-feet {top: 85%;left: 60%;background: orange;width: 15%;height: 30%;border-radius: 50% 50% 50% 50%;transform: rotate(-80deg);z-index: -2222;  }.left-feet {top: 85%;left: 25%;background: orange;width: 15%;height: 30%;border-radius: 50% 50% 50% 50%;transform: rotate(80deg);z-index: -2222;  }.right-eye {top: 45%;left: 60%;background: black;width: 15%;height: 17%;border-radius: 50%; }.left-eye {top: 45%;left: 25%;background: black;width: 15%;height: 17%;border-radius: 50%;}.sparkle {top: 25%;left: 15%;background: white;width: 35%;height: 35%;border-radius: 50%;}.blush-right {top: 65%;left: 15%;background: pink;width: 15%;height: 10%;border-radius: 50%;}.blush-left {top: 65%;left: 70%;background: pink;width: 15%;height: 10%;border-radius: 50%;}.beak-top {top: 60%;left: 40%;background: orange;width: 20%;height: 10%;border-radius: 50%;}.beak-bottom {top: 65%;left: 42%;background: orange;width: 16%;height: 10%;border-radius: 50%;}body {background:#c6faf1;}.penguin * {position: absolute;}
</style>
<div class="penguin"><div class="penguin-bottom"><div class="right-hand"></div><div class="left-hand"></div><div class="right-feet"></div><div class="left-feet"></div></div><div class="penguin-top"><div class="right-cheek"></div><div class="left-cheek"></div><div class="belly"></div><div class="right-eye"><div class="sparkle"></div></div><div class="left-eye"><div class="sparkle"></div></div><div class="blush-right"></div><div class="blush-left"></div><div class="beak-top"></div><div class="beak-bottom"></div></div>
</div>

41. CSS 基础：给 CSS 变量附加回退值

使用变量来作为 CSS 属性值的时候，可以设置一个备用值来防止由于某些原因导致变量不生效的情况。

或许有些人正在使用着不支持 CSS 变量的旧浏览器，又或者，设备不支持你设置的变量值。为了防止这种情况出现，那么你可以这样写：

background: var(–penguin-skin, black);
这样，当你的变量有问题的时候，它会设置你的背景颜色为黑色。

提示：这对调试会很有帮助。

在penguin-top和penguin-bottomclass 里面，background属性设置一个black的备用色。

注意：因为 CSS 变量名拼写错了，所以备用值会被使用。

42. CSS 基础：层级 CSS 变量

你创建的变量，不但可以在你声明变量的元素里面使用，同时也可以在该元素的子元素里面使用。这种效应称为cascading（层叠）。

因为层叠的效果，CSS 变量通常会定义在:root元素里。

就像html是body的容器一样，你也可以认为:root元素是你整个 HTML 文档的容器。

在:root创建的变量，在整个网页里面都能生效。

在:root里面定义一个–penguin-belly变量，并赋值为pink。通过层叠的效应，使应用了变量的地方都修改为粉色。

  :root {/* add code below */--penguin-belly: pink;/* add code above */}

43. CSS 基础：更改特定区域的变量

当你在:root里创建变量时，这些变量的作用域是整个页面。

如果在元素里创建相同的变量，会重写:root变量设置的值。

在penguinclass 里，设置–penguin-belly的值为white。

  :root {--penguin-skin: gray;--penguin-belly: pink;--penguin-beak: orange;}.penguin {--penguin-belly: white;}

44. CSS 基础：使用媒体查询更改变量

CSS 变量可以简化媒体查询的方式。

例如，当屏幕小于或大于媒体查询所设置的值，通过改变变量的值，那么应用了变量的元素样式都会得到响应修改。

在media query（媒体查询）声明的:root选择器里，重定义–penguin-size的值为 200px，且重定义–penguin-skin的值为black，然后通过缩放页面来查看是否生效。

  :root {--penguin-size: 300px;--penguin-skin: gray;--penguin-belly: white;--penguin-beak: orange;}@media (max-width: 350px) {:root {/* add code below */--penguin-size: 200px;--penguin-skin: black;/* add code above */}}