CSS 基础介绍
Introduction to Basic CSS
CSS 的全称是 Cascading Style Sheet（层叠样式表），它主要用来控制网页的样式。

注意，CSS 的选择器区分大小写，因此要谨慎使用大写。

CSS 早已被所有主流浏览器采用，它允许你轻松控制以下样式：

颜色 color
背景 background
字体 font
位置 position
显示 display
边框 border
内边距 padding
外边距 margin
行高 line-height
装饰 text-decoration
过渡 transtion
变化 transform
动画 animation
使用 CSS 样式主要有三种方式：

• 内联样式–你可以直接在 HTML 元素里使用style属性。
• 内部样式–你可以在style标签里面声明样式规则。
• 外部样式–你可以创建一个.css文件，然后在文件中编写样式规则，最后在文 档中引用该文件。

尽管前两个方式也有人使用，但大部分开发人员更喜欢外部样式表，因为它可以将样式与元素分开，这提高了代码的可读性和重用性。

CSS 背后的思想是，通过选择器来定位 DOM（文档对象模型）的元素，然后将各种样式规则应用在元素上，从而改变元素在页面上的显示方式。

在本章中，你会看到我们是如何一步步将 CSS 样式应用到猫咪相册中，从而让相册变得丰富多彩起来。

更改文本的颜色

现在让我们来修改一下文本的颜色。

我们通过修改h2元素的style属性的color值来改变文本颜色。

以下是改变h2元素为蓝色的方法：

<h2 style="color: blue;">CatPhotoApp</h2>

请注意行内style最好以;来结束。

请把h2元素的文本颜色设置为红色。

<h2 style="color:red;">CatPhotoApp</h2>
<main><a href="#"><img src="http://cdn.chenzhicheng.com/relaxing-cat.jpg" alt="一只仰卧着的萌猫"></a><p>猫咪最喜欢的三件东西：</p><ul><li>猫薄荷</li><li>激光笔</li><li>千层饼</li></ul><p>猫咪最讨厌的三件东西：</p><ol><li>跳蚤</li><li>打雷</li><li>同类</li></ol><form action="/submit-cat-photo"><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>

使用元素选择器来设置元素的样式

在 CSS 中，页面样式的属性有几百个，但常用的不过几十个。

通过行内样式<h2 style="color: red;">CatPhotoApp</h2>，就可以修改h2元素的颜色为红色。

当我们只需要改变元素的某个样式时，行内样式最简单直观。当我们需要同时改变元素的很多样式时，层叠样式表往往是一个更好的选择。

在代码的顶部，创建一个style声明区域，如下方所示：

    <style></style>

在style样式声明区域内，可以创建一个元素选择器，应用于所有的h2元素。例如，如果你想所有h2元素变成红色，可以添加下方的样式规则：

    <style>h2 {color: red;}</style>

注意，在每个元素的样式声明区域里，左右花括号（{ 和 }）一定要写全。你需要确保所有样式规则位于花括号之间，并且每条样式规则都以分号结束。

删除h2元素的行内样式，然后创建style样式声明区域，最后添加 CSS 样式规则使h2元素变为蓝色。

<h2>CatPhotoApp</h2>
<style>h2 {color: blue;}
</style>
<main><a href="#"><img src="http://cdn.chenzhicheng.com/relaxing-cat.jpg" alt="一只仰卧着的萌猫"></a><p>猫咪最喜欢的三件东西：</p><ul><li>猫薄荷</li><li>激光笔</li><li>千层饼</li></ul><p>猫咪最讨厌的三件东西：</p><ol><li>跳蚤</li><li>打雷</li><li>同类</li></ol><form action="/submit-cat-photo"><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>

使用 class 选择器设置单个元素的样式

CSS 的class具有可重用性，可应用于各种 HTML 元素。

一个 CSSclass声明示例，如下所示：

    <style>.blue-text {color: blue;}</style>

可以看到，我们在<style>样式声明区域里，创建了一个名为blue-text的class选择器。

你可以将 CSSclass选择器应用到一个HTML元素里，如下所示：

<h2 class="blue-text">CatPhotoApp</h2>

注意：在style样式区域声明里，class需以 . 开头。而在 HTML 元素里，class属性的前面不能添加.。

在style样式声明里，把h2元素选择器改为 .red-textclass 选择器，同时将颜色blue变为red。

在h2元素里，添加一个class属性，且值为’red-text’。

<style>.red-text {color: red;}
</style><h2 class="red-text">CatPhotoApp</h2>
<main><a href="#"><img src="http://cdn.chenzhicheng.com/relaxing-cat.jpg" alt="一只仰卧着的萌猫"></a><p>猫咪最喜欢的三件东西：</p><ul><li>猫薄荷</li><li>激光笔</li><li>千层饼</li></ul><p>猫咪最讨厌的三件东西：</p><ol><li>跳蚤</li><li>打雷</li><li>同类</li></ol><form action="/submit-cat-photo"><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>

使用 class 选择器设置多个元素的样式

通过 CSS class 选择器，多个 HTML 元素可以使用相同的 CSS 样式规则。

你可以将red-textclass 选择器应用在第一个p元素上。

<style>.red-text {color: red;}
</style><h2 class="red-text">CatPhotoApp</h2>
<main><p class="red-text">点击这里可以获取更多<a href="http://freecatphotoapp.com" target="_blank">猫图</a>。</p><a href="#"><img src="http://cdn.chenzhicheng.com/relaxing-cat.jpg" alt="一只仰卧着的萌猫"></a><p>猫咪最喜欢的三件东西：</p><ul><li>猫薄荷</li><li>激光笔</li><li>千层饼</li></ul><p>猫咪最讨厌的三件东西：</p><ol><li>跳蚤</li><li>打雷</li><li>同类</li></ol><form action="/submit-cat-photo"><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>

更改元素的字体大小

字体大小由font-size属性控制，如下所示：

    h1 {font-size: 30px;}

在包含red-textclass 选择器的<style>声明区域的里，
创建一个p元素样式规则，并设置font-size为16px。

<style>.red-text {color: red;}p {font-size: 16px;}
</style><h2 class="red-text">CatPhotoApp</h2>
<main><a href="#"><img src="http://cdn.chenzhicheng.com/relaxing-cat.jpg" alt="一只仰卧着的萌猫"></a><p>猫咪最喜欢的三件东西：</p><ul><li>猫薄荷</li><li>激光笔</li><li>千层饼</li></ul><p>猫咪最讨厌的三件东西：</p><ol><li>跳蚤</li><li>打雷</li><li>同类</li></ol><form action="/submit-cat-photo"><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>

设置元素的字体家族

通过font-family属性，可以设置元素里面的字体样式。

如果你想设置h2元素的字体为sans-serif，你可以用以下的 CSS 规则：

    h2 {font-family: sans-serif;}

确保p元素使用monospace字体。

<style>.red-text {color: red;}p {font-size: 16px;}p {font-family: monospace;}
</style><h2 class="red-text">CatPhotoApp</h2>
<main><a href="#"><img src="http://cdn.chenzhicheng.com/relaxing-cat.jpg" alt="一只仰卧着的萌猫"></a><p>猫咪最喜欢的三件东西：</p><ul><li>猫薄荷</li><li>激光笔</li><li>千层饼</li></ul><p>猫咪最讨厌的三件东西：</p><ol><li>跳蚤</li><li>打雷</li><li>同类</li></ol><form action="/submit-cat-photo"><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>

引入谷歌字体

除了大多数系统提供的默认字体以外，我们也可以使用自定义字体。网络上有各种各样的字体，不过在这个例子中，我们将会尝试使用Google字体库。

Google 字体是一个免费的字体库，可以通过在 CSS 里面设置字体的 URL 来引用。

因此，下一步，我们将引入和使用Google字体。

引入Google字体，你需要复制Google字体的 URL，并粘贴到你的 HTML 里面。在这个挑战中，我们需要引入Lobster字体。因此，请复制以下代码段，并粘贴到代码编辑器顶部，即放到style标签之前。

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">

现在你可以设置font-family属性为Lobster，来使用Lobster字体。例子如下：
font-family: FAMILY_NAME, GENERIC_NAME;.

GENERIC_NAME是可选的，其他字体不可用时便作为后备字体，在下一个挑战中可以得到体现。

字体名区分大小写，并且如果字体名含有空格，需要用引号括起来。例如，使用"Open Sans"字体需要添加引号，而Lobster字体则不需要。

创建一个 CSS 规则，font-family属性里设置为Lobster字体，并把这个字体应用到所有的h2元素。

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>.red-text {color: red;}p {font-size: 16px;font-family: monospace;}h2 {font-family: Lobster;}
</style><h2 class="red-text">CatPhotoApp</h2>
<main><a href="#"><img src="http://cdn.chenzhicheng.com/relaxing-cat.jpg" alt="一只仰卧着的萌猫"></a><p>猫咪最喜欢的三件东西：</p><ul><li>猫薄荷</li><li>激光笔</li><li>千层饼</li></ul><p>猫咪最讨厌的三件东西：</p><ol><li>跳蚤</li><li>打雷</li><li>同类</li></ol><form action="/submit-cat-photo"><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>

字体如何优雅降级

所有浏览器都有几种默认字体。这些通用字体包括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字体。

<!--
<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;}
</style><h2 class="red-text">CatPhotoApp</h2>
<main><a href="#"><img src="http://cdn.chenzhicheng.com/relaxing-cat.jpg" alt="一只仰卧着的萌猫"></a><p>猫咪最喜欢的三件东西：</p><ul><li>猫薄荷</li><li>激光笔</li><li>千层饼</li></ul><p>猫咪最讨厌的三件东西：</p><ol><li>跳蚤</li><li>打雷</li><li>同类</li></ol><form action="/submit-cat-photo"><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>

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

调整图片的大小

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

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

<style>.larger-image {width: 500px;}</style>

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

<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;}.smaller-image{width: 100px;}
</style><h2 class="red-text">CatPhotoApp</h2>
<main><a href="#"><img src="http://cdn.chenzhicheng.com/relaxing-cat.jpg" alt="一只仰卧着的萌猫" class="smaller-image"></a><p>猫咪最喜欢的三件东西：</p><ul><li>猫薄荷</li><li>激光笔</li><li>千层饼</li></ul><p>猫咪最讨厌的三件东西：</p><ol><li>跳蚤</li><li>打雷</li><li>同类</li></ol><form action="/submit-cat-photo"><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>

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

在元素周围添加边框

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

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

    <style>.thin-red-border {border-color: red;border-width: 5px;border-style: solid;}</style>

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

<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;}.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 src="http://cdn.chenzhicheng.com/relaxing-cat.jpg" alt="一只仰卧着的萌猫" class="smaller-image thick-green-border"></a><p>猫咪最喜欢的三件东西：</p><ul><li>猫薄荷</li><li>激光笔</li><li>千层饼</li></ul><p>猫咪最讨厌的三件东西：</p><ol><li>跳蚤</li><li>打雷</li><li>同类</li></ol><form action="/submit-cat-photo"><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>

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

<img class="class1 class2">

用 border-radius 添加圆角边框

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

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

<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: 10px;}.smaller-image {width: 100px;}
</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><p>猫咪最喜欢的三件东西：</p><ul><li>猫薄荷</li><li>激光笔</li><li>千层饼</li></ul><p>猫咪最讨厌的三件东西：</p><ol><li>跳蚤</li><li>打雷</li><li>同类</li></ol><form action="/submit-cat-photo"><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>

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

用 border-radius 制作圆形图片

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

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

<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;}
</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><p>猫咪最喜欢的三件东西：</p><ul><li>猫薄荷</li><li>激光笔</li><li>千层饼</li></ul><p>猫咪最讨厌的三件东西：</p><ol><li>跳蚤</li><li>打雷</li><li>同类</li></ol><form action="/submit-cat-photo"><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>

给 div 元素添加背景色

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

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

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

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

<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;}
</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"><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>

设置元素的 id

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

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

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

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

<h2 id="cat-photo-app">

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

<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;}
</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>

使用 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。

<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;}#cat-photo-form {background-color: green;}
</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>

调整元素的内边距

我们先暂时把猫咪图片放在一边，让我们去学习更多 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>

调整元素的外边距

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

在这里，我们可以看到蓝色盒子和红色盒子都在黄色盒子里。请注意，红色盒子的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>

给元素添加负外边距

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

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

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

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

<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: -15px;}.blue-box {background-color: blue;color: #fff;padding: 20px;margin: -15px;}
</style><div class="box yellow-box"><h5 class="box red-box">padding</h5><h5 class="box blue-box">padding</h5>
</div>

给元素的每一侧添加不同的内边距

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

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

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

<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-top: 40px;padding-right: 20px;padding-bottom: 20px;padding-left: 40px;}.blue-box {background-color: blue;color: #fff;padding-top: 40px;padding-right: 20px;padding-bottom: 20px;padding-left: 40px;}
</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>

给元素的每一侧添加不同的外边距

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

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

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

<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;margin-top: 40px;margin-right: 20px;margin-bottom: 20px;margin-left: 40px;}.blue-box {background-color: blue;color: #fff;margin-top: 40px;margin-right: 20px;margin-bottom: 20px;margin-left: 40px;}
</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>

使用顺时针方向指定元素的内边距

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

padding: 10px 20px 10px 20px;

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

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

<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: 20px 40px 20px 40px;}.red-box {background-color: crimson;color: #fff;padding: 20px 40px 20px 40px;}.blue-box {background-color: blue;color: #fff;padding: 40px 20px 20px 40px;    }
</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>

使用顺时针方向指定元素的外边距

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

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

margin: 10px 20px 10px 20px;

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

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

<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: 20px 40px 20px 40px;}.red-box {background-color: crimson;color: #fff;margin: 20px 40px 20px 40px;}.blue-box {background-color: blue;color: #fff;margin: 40px 20px 20px 40px;}
</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>

使用属性选择器来设置元素的样式

你已经通过设置元素的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>

理解绝对单位与相对单位

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

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

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

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

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

<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: 20px 40px 20px 40px;}.red-box {background-color: red;margin: 20px 40px 20px 40px;padding: 1.5em;}.green-box {background-color: green;margin: 40px 20px 20px 40px;}
</style>
<h5 class="injected-text">margin</h5><div class="box yellow-box"><h5 class="box red-box">padding</h5><h5 class="box green-box">padding</h5>
</div>

给 HTML 的 Body 元素添加样式

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

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

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

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

body {background-color: black;
}

从 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;color: green;font-family: monospace;}</style><h1>hello world
</h1>

样式中的优先级

有时候，你的 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>

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="pink-text blue-text">Hello World!</h1>

ID 选择器优先级高于 Class 选择器

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

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

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

给h1元素添加 id 属性，属性值为orange-text。设置方式如下：
h1 id=“orange-text”
h1元素继续保留blue-text和pink-textclass。
在style元素中创建名为orange-text的 id 选择器。例子如下：
#orange-text {
color: orange;
}
注意：无论在pink-textclass 的上面或者下面声明，id 选择器的优先级总是会高于 class 选择器。

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

内联样式的优先级高于 ID 选择器

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

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

使用行内样式尝试让h1的字体颜色变白。像下面这样使用：
h1 style=“color: green”
你的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 id="orange-text" class="pink-text blue-text" style="color: white" >Hello World!</h1>

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>

使用十六进制编码获得指定颜色

你知道在 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>

使用十六进制编码混合颜色

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

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

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

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

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

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

<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>

使用缩写的十六进制编码

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

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

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

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

<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>

使用 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>

使用 RGB 混合颜色

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

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

<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>

使用 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>

创建一个自定义的 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>

使用一个自定义的 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>

给 CSS 变量附加回退值

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

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

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

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

在penguin-top和penguin-bottomclass 里面，background属性设置一个black的备用色。
注意：因为 CSS 变量名拼写错了，所以备用值会被使用。

<style>.penguin {--penguin-skin: black;--penguin-belly: gray;--penguin-beak: yellow;position: relative;margin: auto;display: block;margin-top: 5%;width: 300px;height: 300px;}.penguin-top {top: 10%;left: 25%;/* change code below */background: var(--pengiun-skin,black);/* 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(--pengiun-skin,black);/* change code above */width: 53%;height: 45%;border-radius: 70% 70% 100% 100%;}.right-hand {top: 0%;left: -5%;background: var(--penguin-skin, black);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, black);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>

层级 CSS 变量

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

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

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

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

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

<style>:root {/* add code below */--penguin-belly: pink;/* add code above */}body {background: var(--penguin-belly, #c6faf1);}.penguin {--penguin-skin: gray;--penguin-beak: orange;position: relative;margin: auto;display: block;margin-top: 5%;width: 300px;height: 300px;}.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%;}.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-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%;}.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>

更改特定区域的变量

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

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

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

<style>:root {--penguin-skin: gray;--penguin-belly: pink;--penguin-beak: orange;}body {background: var(--penguin-belly, #c6faf1);}.penguin {/* add code below */--penguin-belly: white;/* add code above */position: relative;margin: auto;display: block;margin-top: 5%;width: 300px;height: 300px;}.right-cheek {top: 15%;left: 35%;background: var(--penguin-belly, pink);width: 60%;height: 70%;border-radius: 70% 70% 60% 60%;}.left-cheek {top: 15%;left: 5%;background: var(--penguin-belly, pink);width: 60%;height: 70%;border-radius: 70% 70% 60% 60%;}.belly {top: 60%;left: 2.5%;background: var(--penguin-belly, pink);width: 95%;height: 100%;border-radius: 120% 120% 100% 100%;}.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-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%;}.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>

使用媒体查询更改变量

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

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

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

<style>: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 */}}.penguin {position: relative;margin: auto;display: block;margin-top: 5%;width: var(--penguin-size, 300px);height: var(--penguin-size, 300px);}.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%;}.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: 5%;left: 25%;background: var(--penguin-skin, black);width: 30%;height: 60%;border-radius: 30% 30% 120% 30%;transform: rotate(130deg);z-index: -1;animation-duration: 3s;animation-name: wave;animation-iteration-count: infinite;transform-origin:0% 0%;animation-timing-function: linear;}@keyframes wave {10% {transform: rotate(110deg);}20% {transform: rotate(130deg);}30% {transform: rotate(110deg);} 40% {transform: rotate(130deg);}  }.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-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:-23%;background: white;width: 150%;height: 100%;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>

1.2 CSS 基础相关推荐

1. html与css项目,项目六HTML与CSS基础.doc

   项目六HTML与CSS基础.doc 项目六: HTML与CSS基础 课题名称:6．2 CSS样式表的使用(一) 教学目标 1．知识与技能目标 熟练掌握插入Div 标签和设置样式定义的方法:理解CSS样 ...

2. CSS基础_Day04

   CSS基础 一.CSS继承 1.给 HTML 的 body 元素添加样式 每一个 HTML 页面都有一个 body 元素. 我们可以通过设置 background-color 的属性值为黑色,来证明 ...

3. CSS基础_Day03

   CSS基础 一.给 div 元素添加背景色 background-color 属性可以设置元素的背景颜色. .green-background {background-color: green; } ...

4. CSS基础_Day02

   CSS基础 一.字体 1.更改元素的字体大小 字体大小由font-size属性控制. <style>p{font-size:16px;}//设置p元素字体大小为16px </styl ...

5. CSS基础_Day01

   CSS基础 一.CSS简介 CSS 的全称是 Cascading Style Sheet(层叠样式表),它主要用来控制网页的样式. CSS 的选择器区分大小写,因此要谨慎使用大写. 可以设置以下内容: ...

6. 学习笔记（二）——CSS基础

   文章目录 一.什么是CSS 二.CSS基本使用 2.1.行内式(内联样式) 2.2.内部样式 2.3.外部样式 2.3.1.嵌入式 2.3.2.导入式 三.选择器 3.1.基础选择器 3.1.1.标签 ...

7. css点击a标签显示下划线_好程序员HTML5培训教程-html和css基础知识

   好程序员HTML5培训教程-html和css基础知识,Html是超文本标记语言(英语全称:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言. Css ...

8. 和前端撕出逼格，撕的硬气 - 产品应该懂的html/css基础知识

   之前和前端交流页面的实现方案时,经常被告知:这个效果实现不了:那个东西兼容性不好:这个做不了...明明这些效果别人家已经实现出来了,哎,奈何不懂前端相关,没辙! 最近花了点时间看了些前端相关的博客.论 ...

9. CSS基础笔记（w3school）

   CSS 概述 CSS 基础语法 1.CSS语法 2.值的不同写法和单位 3.记得写引号 4.多重声明 5.空格和大小写 CSS 高级语法 1.选择器的分组 2.继承及其问题 3.友善地对待Netsca ...

10. 〖前端开发〗HTML/CSS基础知识学习笔记

    经过一天的学习,把慕课网的HTML/CSS基础知识学完了,笔记整理: 1. 文件结构:HTML文件的固定结构:<html><head>...</head><b ...

最新文章

1. #每天问自己个问题#6. SIP标准协议 RFC3261
2. 使用正则替换文件头注释
3. Python+opencv 机器视觉 - 基于霍夫圈变换算法检测图像中的圆形实例演示
4. No space left on device 解决 Cydia 安装应用错误
5. 关于站库分离渗透思考总结
6. GPU Gems1 - 22 颜色控制（Color Controls）
7. C语言封装带省略参数的函数,C与C++的函数声明中省略参数的不同意义
8. 实现编辑功能有哪几个action_Web 应用的撤销重做实现
9. 前端学习（1535）：单一页面的优势
10. Chrome developer tool介绍（javascript调试）
11. 综合评价模型的缺点_【必备】目标检测中的评价指标有哪些？
12. 力扣-169 多数元素
13. ActivityGroup详解
14. 三菱FX+GS2107无序组合程序，说明：任意点击触摸屏1-15工位
15. Java运行准备JDR JRE JVM知识和环境变量的作用
16. 粉刷匠计算机音乐,音乐《粉刷匠》
17. ios13.5.1降级_升级iOS 14尝鲜后 无法降级iOS13.5.1？
18. 多个视频的音频互换软件，一键互换视频的音频声音
19. 域名被劫持了怎么处理
20. 2021-07-21技术丨音响系统噪音新解及抑制

热门文章

1. Android平台上的Native内存分析
2. 企业最大的危机，永远来在于内部
3. pytorch 和torchvision 版本对应（2021年12月15日最新版）
4. Python之操作Excel异常错误
5. python P51-60
6. IOT平台架构设计思路
7. 数据结构：空间复杂度
8. 这套表情包，居然开源了
9. CCF A类 B类 C类 中国计算机学会推荐中文科技期刊目录【迷惑了好久】
10. linux -- 编写shell脚本对磁盘自动分区和自动挂载