author

第5节 CSS样式实战和总结

回到目录
回到项目首页
上一节

❤️💕💕HTML和CSS高级教程。更多的文章请移步博客Myblog:http:https://nsddd.top

[TOC]

CSS字体样式

导入谷歌字体样式

在我们的网站上，除了使用系统提供的默认字体以外，我们也可以使用自定义字体。网络上有很多字体库。在这个例子中，我们将使用 Google 字体库。

Google 字体库是一个免费的 Web 字体库，我们只需要在 CSS 里设置字体的 URL 即可使用。

接下来，我们就要引入和使用 Google Fonts（注意：如果 Google 在你的地区被限制访问，你可以选择跳过这个挑战）。

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

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

现在可以在 CSS 中使用 Lobster 字体，并像下面一样使用 Lobster 作为 FAMILY_NAME：

font-family: FAMILY_NAME, GENERIC_NAME;

GENERIC_NAME 是可选的，它用来指明在其他字体不可用时的后备字体。我们会在下一个挑战中详细说明。

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

给你的网页导入 Lobster 字体。然后使用元素选择器将 h2 元素的 font-family 设置为 Lobster。

代码

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

<style>
  .red-text {
    color: red;
  }
  h2 {
    font-family: Lobster;
  }
  p {
    font-size: 16px;
    font-family: monospace;
  }
</style>

<h2 class="red-text">CatPhotoApp</h2>
<main>
  <p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>

  <a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>

  <div>
    <p>Things cats love:</p>
    <ul>
      <li>cat nip</li>
      <li>laser pointers</li>
      <li>lasagna</li>
    </ul>
    <p>Top 3 things cats hate:</p>
    <ol>
      <li>flea treatment</li>
      <li>thunder</li>
      <li>other cats</li>
    </ol>
  </div>

  <form action="https://freecatphotoapp.com/submit-cat-photo">
    <label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
    <label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
    <label><input type="checkbox" name="personality" checked> Loving</label>
    <label><input type="checkbox" name="personality"> Lazy</label>
    <label><input type="checkbox" name="personality"> Energetic</label><br>
    <input type="text" placeholder="cat photo URL" required>
    <button type="submit">Submit</button>
  </form>
</main>

关键代码

  h2 {
    font-family: Lobster;
  }

效果

字体的优雅降级

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

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

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

p {
  font-family: Helvetica, sans-serif;
}

通用字体名不区分大小写。同时，也不需要使用引号，因为它们是 CSS 中的关键字。

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

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

Note: 如果你的电脑里已经安装了 Lobster 字体，你就看不到这个降级过程，因为浏览器会在你的电脑中找到该字体。

关键代码

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

  h2 {
    font-family: Lobster, monospace;
  }

多个样式

我们在第三节说过一个class可以有多个样式，如果重复，以最后一个样式为主

  .thick-green-border {
    border-color: green;
    border-width: 10px;
    border-style: solid;
  }

  .smaller-image {
    width: 100px;
  }
</style>
  <a href="#">
      <img class="smaller-image thick-green-border" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" 
           alt="A cute orange cat lying on its back."></a>

边框样式

  .thick-green-border {
    border-color: green;
    border-width: 10px;
    border-style: solid;
  }

解释：

设置边框颜色
边框宽度
边框是否为实线

不仅仅如此，看起来边框的角太尖锐了，我们让它变的柔滑一些：

  .thick-green-border {
    border-color: green;
    border-width: 10px;
    border-style: solid;

    border-radius: 20px;
    <!--
     也可以设置百分比：
    -->
	border-radius: 50%;
  }

添加背景色

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

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

id属性

我们之前学过设置id属性，现在可以用于实战了

💡 ID属性介绍

除了 class 属性，每一个 HTML 元素都有一个 id 属性。使用 id 有几个好处：你可以通过 id 选择器来改变单个元素的样式。在稍后的课程中，你还会了解到如何在 JavaScript 里面用它来选择和操作元素。根据规范，id 属性应是唯一的。尽管浏览器并非必须执行这条规范，但这是广泛认可的最佳实践。因此，请不要给多个元素设置相同的 id。设置 h2 元素的 id 为 cat-photo-app 的代码如下：

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

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

不过，id 不可以重复，它只能作用于一个元素上。如果一个元素同时应用了 class 和 id，且两者设置的样式有冲突，会优先应用 id 中所设置的样式。

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

#cat-photo-element {
  background-color: green;
}

注意在 style 标签里，声明 class 的时候必须在名字前插入 . 符号。同样，在声明 id 的时候，也必须在名字前插入 # 符号。

调整元素的内边距

我们暂时把要做的猫咪图片 App 放在一边，先来多了解一下如何给 HTML 添加样式。

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

每个 HTML 元素所占有的矩形空间由这三个重要的属性来控制：内边距 padding、外边距 margin 、边框 border。

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

我们可以看到蓝色框和红色框是嵌套在黄色框里的。注意红色框的 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: 10px;
  }

  .blue-box {
    background-color: blue;
    color: #fff;
    padding: 10px;
  }
</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 用来控制元素的边框与其他元素之间的 border 距离。

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

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

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

如果你把元素的 margin 设置为负值，元素会变得占用更多空间。

有时候，你会想给一个元素每个方向的 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>

如果不想每次都要分别声明 padding-top、padding-right、padding-bottom、padding-left 属性，可以把它们汇总在一行里面一并声明，像是这样：

padding: 10px 20px 10px 20px;

这四个值按顺时针排序：上、右、下、左，并且设置的效果等同于分别声明每一个方向的内边距。

使用属性选择器设置标签的样式

我们需要使用 [attr=value] 属性选择器来修改 CatPhotoApp 中复选框的样式。这个选择器使用特定的属性值来匹配和设置元素样式。例如，下面的代码会改变所有 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;
  }
  [type='checkbox'] {
    margin: 10px 0px 15px 0px;
  }
  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>
  <p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>

  <a href="#"><img class="smaller-image thick-green-border" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>

  <div class="silver-background">
    <p>Things cats love:</p>
    <ul>
      <li>cat nip</li>
      <li>laser pointers</li>
      <li>lasagna</li>
    </ul>
    <p>Top 3 things cats hate:</p>
    <ol>
      <li>flea treatment</li>
      <li>thunder</li>
      <li>other cats</li>
    </ol>
  </div>

  <form action="https://freecatphotoapp.com/submit-cat-photo" id="cat-photo-form">
    <label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
    <label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
    <label><input type="checkbox" name="personality" checked> Loving</label>
    <label><input type="checkbox" name="personality"> Lazy</label>
    <label><input type="checkbox" name="personality"> Energetic</label><br>
    <input type="text" placeholder="cat photo URL" required>
    <button type="submit">Submit</button>
  </form>
</main>

理解绝对单位和相对单位

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

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

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

Note: 有些单位长度选项是相对视窗大小来改变值的，这种设定符合响应式网页设计的原则。

从 body 元素继承样式

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

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

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

接着，在 body 的 CSS 规则里面添加 color: green;，这会将页面内所有字体的颜色都设置为 green。

最后，在 body 的 CSS 规则里面添加 font-family: monospace;，这会将 body 内所有元素的字体都设置为 monospace。

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

</style>
<h1>Hello World</h1>

颜色

十六进制编码使用 6 个十六进制字符来表示颜色，两个字符为一组，分别代表红（R）、绿（G）、蓝（B）。

通过三原色（红、绿、蓝），我们可以创建 1600 万种不同颜色。

例如，橘色是纯红色混合一些绿色而成，其中没有蓝色。在十六进制编码里面，它可以写成 #FFA500。

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

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

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

颜色	十六进制编码
道奇蓝	`#1E90FF`
绿色	`#00FF00`
橙色	`#FFA500`
红色	`#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>

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

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

RGB表示颜色

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

黑色的 RGB 值：

rgb(0, 0, 0)

白色的 RGB 值：

rgb(255, 255, 255)

RGB 值与我们之前学到的十六进制编码不同。RGB 值不需要用到 6 位十六进制数字，而只需要指定每种颜色的亮度大小，数值范围从 0 到 255。

如果我们稍微计算一下，就不难发现这两种表示方式本质上是等价的。在十六进制编码中，我们用两个十六进制数表示一个颜色；这样，每种颜色都有 16 * 16（即 256）种可能。所以，RGB 从零开始计算，与十六进制代码的值的数量完全相同。

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

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

制作一个企鹅

CSS 变量可以实现仅需要更新一个值，就可以将更改应用到多个 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%;
    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>

我们稍微改一下颜色

    /* 只修改这一行下面的代码 */
    --penguin-skin: gray;
    --penguin-belly: white;
    --penguin-beak: orange;
    /* 只修改这一行上面的代码 */

创建一个自定义的css变量

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

--penguin-skin: gray;

这样就会创建一个 --penguin-skin 变量，它的值为 gray。现在你可以在你的 CSS 中的其他地方使用这个变量来改变其他属性的值为灰色。

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

background: var(--penguin-skin);

因为引用了 --penguin-skin 变量的值，使用了这个样式的元素背景颜色会是灰色。请注意，除非变量名称完全匹配，否则将不会应用样式。

代码

将 --penguin-skin 的值应用到 class 为 penguin-top、penguin-bottom、right-hand、left-hand 的 background 的属性值。

<style>
  .penguin {
    --penguin-skin: gray;
    position: relative;
    margin: auto;
    display: block;
    margin-top: 5%;
    width: 300px;
    height: 300px;
  }

  .penguin-top {
    top: 10%;
    left: 25%;

    /* 修改这行下面的代码 */
    background: var(--penguin-skin);
    /* 修改这行上面的代码 */

    width: 50%;
    height: 45%;
    border-radius: 70% 70% 60% 60%;
  }

  .penguin-bottom {
    top: 40%;
    left: 23.5%;

    /* 修改这行下面的代码 */
    background: var(--penguin-skin);
    /* 修改这行上面的代码 */

    width: 53%;
    height: 45%;
    border-radius: 70% 70% 100% 100%;
  }

  .right-hand {
    top: 0%;
    left: -5%;

    /* 修改这行下面的代码 */
    background: var(--penguin-skin);
    /* 修改这行上面的代码 */

    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);
    /* 修改这行上面的代码 */

    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 属性值的时候，可以设置一个备用值来防止由于某些原因导致变量不生效的情况。

注意： 备用值不是用于增强浏览器的兼容性，它也不适用于 IE 浏览器。相反，它是用来让浏览器在找不到你的变量时可以显示一种颜色。

下面是操作方式：

background: var(--penguin-skin, black);

如果你的变量没有设置，这将会把背景设置为 black。提示：这对调试代码也会很有帮助。

  .penguin-top {
    top: 10%;
    left: 25%;

    /* 修改这行下面的代码 */
    background: var(--pengiun-skin,black);
    /* 修改这行上面的代码 */

    width: 50%;
    height: 45%;
    border-radius: 70% 70% 60% 60%;
  }

  .penguin-bottom {
    top: 40%;
    left: 23.5%;

    /* 修改这行下面的代码 */
    background: var(--pengiun-skin,black);
    /* 修改这行上面的代码 */

    width: 53%;
    height: 45%;
    border-radius: 70% 70% 100% 100%;
  }

通过浏览器降级提高兼容性

使用 CSS 时可能会遇到浏览器兼容性问题。提供浏览器降级方案来避免潜在的问题会显得很重要。

当浏览器解析页面的 CSS 时，会自动忽视不能识别或者不支持的属性。举个例子，如果使用 CSS 变量来指定站点的背景色，IE 浏览器由于不支持 CSS 变量而会忽略背景色。此时，浏览器会尝试使用其它值。但如果没有找到其它值，则会使用默认值，也就是没有背景色。

这意味着如果想提供浏览器降级方案，在声明之前提供另一个更宽泛的值即可。这样老旧的浏览器会降级使用这个方案，新的浏览器会在后面的声明里覆盖降级方案。

我们使用了 CSS 变量来定义 .red-box 的背景色。现在，我们通过在现有的声明之前添加另一个 background 声明，并将它的值设置为 red，来提升浏览器的兼容性。

<style>
  :root {
    --red-color: red;
  }
  .red-box {
    background: red;
    background: var(--red-color);
    height: 200px;
    width:200px;
  }
</style>
<div class="red-box"></div>

继承

当创建一个变量时，变量会在创建变量的选择器里可用。同时，在这个选择器的后代选择器里也是可用的。这是因为 CSS 变量是可继承的，和普通的属性一样。

CSS 变量经常会定义在 :root 元素内，这样就可被所有选择器继承。

:root 是一个伪类选择器，它是一个能够匹配文档根元素的选择器，通常指的是 html 元素。我们在 :root 里创建变量在全局都可用，即在任何选择器里都生效。

代码

在 :root 选择器里定义变量 --penguin-belly 并设置它的属性值为 pink。此时，你会发现变量被继承，所有使用该变量的子元素都会有粉色背景。

<style>
  :root {
    /* 只修改这一行下面的代码 */
    --penguin-belly:pink;
    /* 只修改这一行上面的代码 */
  }

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

然后，你可以通过在一个特定的选择器中再次设置这些变量来重写这些变量。

媒体查询

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

例如，当屏幕小于或大于媒体查询所设置的值，只要我们更新变量的值，那么使用了此变量的元素样式就都会更改。

代码 – end

在媒体查询声明的 :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 {
      /* 只修改这一行下面的代码 */
    --penguin-size: 200px;
    --penguin-skin: black;
      /* 只修改这一行上面的代码 */
    }
  }

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

缩放前：

缩放后：

END 链接

参与贡献❤️💕💕

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

5.md

5.md

第5节 CSS样式实战和总结

CSS字体样式

导入谷歌字体样式

代码

关键代码

效果

字体的优雅降级

关键代码

多个样式

边框样式

添加背景色

id属性

调整元素的内边距

代码

调整边框距离

代码

使用属性选择器设置标签的样式

案例

代码

理解绝对单位和相对单位

从 body 元素继承样式

颜色

代码

RGB表示颜色

制作一个企鹅

创建一个自定义的css变量

代码

备忘值

通过浏览器降级提高兼容性

继承

代码

媒体查询

代码 – end

END 链接

Files

5.md

Latest commit

History

5.md

File metadata and controls

第5节 CSS样式实战和总结

CSS字体样式

导入谷歌字体样式

代码

关键代码

效果

字体的优雅降级

关键代码

多个样式

边框样式

添加背景色

id属性

调整元素的内边距

代码

调整边框距离

代码

使用属性选择器设置标签的样式

案例

代码

理解绝对单位和相对单位

从 body 元素继承样式

颜色

代码

RGB表示颜色

制作一个企鹅

创建一个自定义的css变量

代码

备忘值

通过浏览器降级提高兼容性

继承

代码

媒体查询

代码 – end

END 链接