<!DOCTYPE html>
<html lang="en">
</html>

2head、title

<head>
    <title>
        Cafe Menu
    </title>
</head>

3meta-charset

<head>
    <title>Cafe Menu</title>
    <meta charset="UTF-8">
</head>

4body

 <head>
    <meta charset="utf-8" />
    <title>Cafe Menu</title>
  </head>
  <body>
  </body>

5main

<body>
    <main>
    </main>
</body>

6h1

<main>
        <h1>CAMPER CAFE</h1>
    </main>

7p

 <h1>CAMPER CAFE</h1>
      <p>Est. 2020</p>

8section

<main>
      <h1>CAMPER CAFE</h1>
      <p>Est. 2020</p>
      <section>
      </section>
 </main>

9

 <section>
          <h2>Coffee</h2>
 </section>

10head>style,内部css样式

 <head>
    <meta charset="utf-8" />
    <title>Cafe Menu</title>
    <style>
    </style>
  </head>
  <body>
    <main>
      <h1>CAMPER CAFE</h1>
      <p>Est. 2020</p>
      <section>
        <h2>Coffee</h2>
      </section>
    </main>
  </body>

11css内部样式格式,text-align文本对齐方式

h1选择器，text-align属性，center值

<style>
        h1 {
          text-align: center;
        }
</style>

12

<style>
      h1 {
        text-align: center;
      }
      h2 {
        text-align: center;
      }
      p {
        text-align: center;
      }
</style>

13并集选择器，多选

 <style>
     h1,
     h2,
     p {
       text-align: center;
     }
    </style>

14外部css样式表

h1, h2, p {
        text-align: center;
      }

在外部样式表中不加<style>

15删除内部样式表

删除.html中的style

16链接外部样式表，head>link rel href

<head>
    <meta charset="utf-8" />
    <title>Cafe Menu</title>
    <link rel="stylesheet" href="styles.css">
</head>

在head中用link链接到外部样式表，link中的rel属性=“stylesheet”,表示这是一个样式表，href="styles.css" target="_blank" rel="external nofollow" 表示链接到styles.css文件

17meta元素设置视窗

为了使页面样式在移动端看起来与在桌面或笔记本电脑上相似，你需要添加一个带有特殊 content 属性的 meta 元素。

在 head 元素中添加以下内容：

name为视窗，内容为宽度=设备宽度，初始比例1.0

 <head>
    <meta charset="utf-8" />
    <title>Cafe Menu</title>
    <link href="styles.css" rel="stylesheet"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  </head>

18background-color背景颜色

h1, h2, p {
  text-align: center;
}
body {
  background-color: brown;
}

19

body {
  background-color: burlywood;
}

20div

div 元素主要用于设计布局，这与你迄今为止使用的其他内容元素不同。在 body 元素内添加一个 div 元素，然后将所有其他元素移到新的 div 内。

<body>
    <div>
          <main>
              <h1>CAMPER CAFE</h1>
              <p>Est. 2020</p>
              <section>
                <h2>Coffee</h2>
              </section>
         </main>
    </div>
    
  </body>

21div的width

现在的目标是使这个 div 不占用整个页面的宽度。 CSS 的 width 属性在这方面是完美的。在样式表中创建一个新的类型选择器，使你的 div 元素的宽度为 300px。

body {
  background-color: burlywood;
}

h1, h2, p {
  text-align: center;
}
div {
  width: 300px;
}

22css注释

在你的样式表中，注释掉包含 background-color 属性和值的行，这样你就可以看到仅设置 div 元素样式的效果。这将使背景再次变成白色。

 /* background-color: burlywood; */

23div的background-color

现在使用现有的 div 选择器，将div 元素的背景颜色设置为 burlywood。

div {
  width: 300px;
  background-color: burlywood;
}

24使用比例设置div的width

现在很容易看到文本在 div 元素内居中。目前，div 元素的宽度以像素（px）为单位。将 width 属性的值更改为 80%，使其为其父元素（body）的宽度的 80%。

div {
  width: 80%;
  background-color: burlywood;
}

25div水平方向上居中margin-left：auto，margin-right：auto

div {
  width: 80%;
  background-color: burlywood;
  margin-left: auto;
  margin-right: auto;
}

26.class类选择器

到目前为止，你一直在使用类型选择器来设置元素的样式。 class 选择器由前面带有一个点的名称定义，如下所示：

.class-name {
  styles
}

将现有的 div 选择器改为类选择器，用一个名为 menu 的类代替 div。

.menu {
  width: 80%;
  background-color: burlywood;
  margin-left: auto;
  margin-right: auto;
}

27设置类名

28background-image背景图片

由于咖啡馆主要销售的产品是咖啡，因此你可以使用咖啡豆的图像作为页面背景。

删除 body 类型选择器中的注释及其内容。现在添加一个 background-image 属性并将其值设置为 url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg)。

body {
      background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg)
}

29article

看起来很好。是时候开始添加一些菜单项了。在 Coffee 标题下添加一个空的 article 元素。它将包含你当前提供的每种咖啡的风味和价格。

          <h2>Coffee</h2>
          <article></article>

30

article 元素通常包含多个具有相关信息的元素。在这个示例里，它将包含咖啡风味和该风味的价格。在 article 元素中嵌套两个 p 元素。第一个的文本应该是 French Vanilla，第二个的文本应该是 3.00。

          <article>
              <p>French Vanilla</p>
              <p>3.00</p>
          </article>

31

从现有的咖啡/价格对开始，使用 article 元素添加以下咖啡和价格，每个元素内部有两个嵌套的 p 元素。和之前一样，第一个 p 元素的文本应该包含咖啡风味，第二个 p 元素的文本应该包含价格。

Caramel Macchiato 3.75
Pumpkin Spice 3.50
Hazelnut 4.00
Mocha 4.50

          <article>
            <p>French Vanilla</p>
            <p>3.00</p>
          </article>
           <article>
            <p>Caramel Macchiato</p>
            <p>3.75</p>
          </article>
           <article>
            <p>Pumpkin Spice</p>
            <p>3.50</p>
          </article>
           <article>
            <p>Hazelnut</p>
            <p>4.00</p>
          </article>
          <article>
            <p>Mocha</p>
            <p>4.50</p>
          </article>

32

口味和价格目前堆叠在一起，并以各自的 p 元素居中。如果口味在左边，价格在右边，那就太好了。

给 French Vanilla p 元素添加 flavor class。

            <p class="flavor">French Vanilla</p>
            <p>3.00</p>

33

使用你的新 flavor class 作为选择器，将 text-align 属性的值设置为 left。

.flavor {
  text-align: left;
}

34

接着，你想要将价格（price）右对齐。给你的 p 元素添加一个名为 price 的类，其文本为 3.00。

35

现在将文本与具有 price class 的元素的对齐方式设置为 right。

.price {
  text-align: right;
}

36

这正是你想要的，但如果口味和价格在同一条线上，那就太好了。 p 元素是块级元素，因此它们占据了其父元素的整个宽度。

要将它们放在同一行，你需要对 p 元素应用一些样式，因此它们更像内联元素。将值为 item 的 class 属性添加到 Coffee 标题下的第一个 article 元素。

 <h2>Coffee</h2>
          <article class="item">
            <p class="flavor">French Vanilla</p>
            <p class="price">3.00</p>
          </article>

37后代选择器，display更改显示模式

p 元素嵌套在具有 item 类属性的 article 元素中。你可以使用名为 item 的 class 为嵌套在元素中任何位置的所有 p 元素设置样式，如下所示：

使用上面的选择器，添加一个值为 inline-block 的 display 属性，这样 p 元素更像是内联元素。

.item p {
        display: inline-block;
}

38inline-block,width百分比

这更接近了，但价格没有停留在右边的位置。这是因为 inline-block 元素只占据其内容的宽度。要将它们分散开，请将 width 属性添加到 flavor 和 price class 选择器，两个属性的值都是 50%。

.flavor {
  text-align: left;
  width: 50%;
}

.price {
  text-align: right;
  width: 50%;
}

39==？==

好吧，那样做行不通。给 p 元素添加 inline-block 样式，并将它们放置在代码中的单独行上，会在第一个 p 元素的右侧创建一个空格，导致第二个元素转移到下一行。解决此问题的一种方法是使每个 p 元素的宽度略小于 50%。

将每个 class 的 width 值更改为 49%，看看会发生什么。

.flavor {
  text-align: left;
  width: 49%;
}

.price {
  text-align: right;
  width: 49%;
}

40

前面的方法是可行的，但是价格右侧仍有一点空格。

你可以继续尝试各种百分比的宽度。当然，也可以删除 class 为 price 的 p 元素和 class 为 flavor 的 p 中间的换行，让它们在编辑器上显示在同一行。确保两个元素之间没有空格。

41

现在继续把 flavor 和 price 类的宽度（width）都改成 50%。

.flavor {
  text-align: left;
  width: 50%;
}

.price {
  text-align: right;
  width: 50%;
}

42

现在你知道它是有效的，你可以改变其余的article 和 p 元素以匹配第一组。首先，将 item 类添加到其他 article 元素中。

<article class="item">
            <p>Caramel Macchiato</p>
            <p>3.75</p>
          </article>
          <article class="item">
            <p>Pumpkin Spice</p>
            <p>3.50</p>
          </article>
          <article class="item">
            <p>Hazelnut</p>
            <p>4.00</p>
          </article>
          <article class="item">
            <p>Mocha</p>
            <p>4.50</p>
          </article>

43

接下来，将其他 p 元素定位在同一条线上，它们之间没有间隔空间。

          <article class="item">
            <p>Caramel Macchiato</p><p>3.75</p>
            
          </article>
          <article class="item">
            <p>Pumpkin Spice</p><p>3.50</p>
            
          </article>
          <article class="item">
            <p>Hazelnut</p><p>4.00</p>
            
          </article>
          <article class="item">
            <p>Mocha</p><p>4.50</p>
            
          </article>

44

为了完成样式设计，在所有剩余的 p 元素上添加适用的类名称 flavor 和 price。

 <article class="item">
            <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
          </article>
          <article class="item">
            <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
          </article>
          <article class="item">
            <p class="flavor">Hazelnut</p><p class="price">4.00</p>
          </article>
          <article class="item">
            <p class="flavor">Mocha</p><p class="price">4.50</p>
          </article>

45

如果你将页面预览的宽度调小，那么调小的过程中会注意到，左侧的一些文本会开始换到下一行。这是因为左侧 p 元素的宽度只能占用 50% 的空间。

由于你知道右侧价格的字符明显减少，因此将 flavor class 的 width 值更改为 75%，将 price class 的 width 值为更改为 25%。

.flavor {
  text-align: left;
  width: 75%;
}

.price {
  text-align: right;
  width: 25%;
}

46

你将在几个步骤中回到菜单的样式的调整，但现在，继续添加第二个 section 元素，在第一个部分下面显示咖啡馆提供的甜点。

<section>
          <h2>Coffee</h2>
          <article class="item">
            <p class="flavor">French Vanilla</p><p class="price">3.00</p>
          </article>
          <article class="item">
            <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
          </article>
          <article class="item">
            <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
          </article>
          <article class="item">
            <p class="flavor">Hazelnut</p><p class="price">4.00</p>
          </article>
          <article class="item">
            <p class="flavor">Mocha</p><p class="price">4.50</p>
          </article>
        </section>
        <section>
            
        </section>

47

在新的章节中添加一个 h2 元素，并给它文本 Desserts。

  <section>
      <h2>Desserts</h2>
  </section>

48

在 Desserts 标题下添加一个空的 article 元素。给它一个 class 属性与 item 值。

          <h2>Desserts</h2>
          <article class="item"></article>

49

在 article 元素中嵌套两个 p 元素。第一个的文本应该是 Donut，第二个的文本应该是 1.50。把它们放在同一行，确保它们之间没有空格。

<article class="item">
       <p>Donut</p><p>1.50</p>            
</article>

50

对于刚刚添加的两个 p 元素，添加 dessert 作为第一个 p 元素的 class 属性的值，然后添加 price 作为第二个 p 元素的 class 属性的值。

51

有些东西看起来不对劲。你将正确的 class 属性值添加到 p 元素，其文本是 Donut，但你尚未为其定义选择器。

由于 flavor class 选择器已经具有你想要的属性，只需将 dessert class 名添加到其中即可。

.flavor,
.dessert {
  text-align: left;
  width: 75%;
}

52

在你刚刚添加的甜点下方，使用另外三个 article 元素添加其余的甜点和价格，每个元素都有两个嵌套的 p 元素。每个元素都应该有正确的甜点和价格文本，并且它们都应该有正确的类。

          <article class="item">
            <p class="dessert">Donut</p><p class="price">1.50</p>
          </article>
           <article class="item">
            <p class="dessert">Cherry Pie</p><p class="price">2.75</p>
          </article>
           <article class="item">
            <p class="dessert">Cheesecake</p><p class="price">3.00</p>
          </article>
           <article class="item">
            <p class="dessert">Cinnamon Roll</p><p class="price">2.50</p>
          </article>

53padding,会撑开盒子

你可以用各种 padding 属性给你的菜单在内容和侧面之间留一些空间。

给 menu 类一个 padding-left 和一个 padding-right，数值都是 20px。

.menu {
  width: 80%;
  background-color: burlywood;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right:20px;  
}

54padding上下左右

这看起来更好。现在尝试给菜单的顶部和底部添加 20px 的 padding。

.menu {
  width: 80%;
  background-color: burlywood;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 20px;
  padding-bottom: 20px;
}

55padding简写

由于菜单的所有 4 个边具有相同的内部间距，请继续删除四个属性并设置 padding 属性的值为 20px。

.menu {
  width: 80%;
  background-color: burlywood;
  margin-left: auto;
  margin-right: auto;
  padding: 20px;
}

56max-width

菜单的当前宽度将总是占到 body 元素宽度的80%。在一个非常宽的屏幕上，咖啡和甜点看起来与它们的价格相差甚远。

给 menu 类添加一个 max-width 的属性，其值为 500px，以防止它变得太宽。

.menu {
  width: 80%;
  background-color: burlywood;
  margin-left: auto;
  margin-right: auto;
  padding: 20px;
  max-width: 500px;
}

57 font-family

你可以更改文本的 font-family，使其看起来与浏览器的默认字体不同。每个浏览器都有一些可用的常用字体。

通过添加值为 sans-serif 的 font-family 属性来更改 body 中的所有文本。这是一种相当常见的字体，易于阅读。

body {
  background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
  font-family: sans-serif;
}

58

所有的文字都有相同的 font-family，这有点无聊。你仍然可以让大部分文字都是 sans-serif ，只是用不同的选择器使 h1和 h2 元素不同。

对 h1 和 h2 元素进行样式设计，使这些元素的文本只使用 Impact 字体。

h1, 
h2 {
  font-family: Impact;
}

59后备字体

浏览器按顺序显示字体

h1, h2 {
  font-family: Impact,serif;
}

60font-style

通过创建一个 established 类选择器，并赋予其 font-style 属性值 italic，使 Est. 2020 的文本变成斜体。

.established {
  font-style: italic;
}

61

现在将 established 类应用于文本 Est. 2020。

        <h1>CAMPER CAFE</h1>
        <p class="established">Est. 2020</p>

62font-size

标题元素（如 h1、h2）的排版是由用户浏览器的默认值设置的。

添加两个新的类选择器（h1 和 h2）。对两者都使用 font-size 属性，但对 h1 使用 40px，对 h2 使用 30px 的值。

h1 {
  font-size: 40px;
}
h2 {
  font-size:30px;
}

63

在 main 元素下方添加 footer 元素，你可以在其中添加一些附加信息。

      <main>
        <h1>CAMPER CAFE</h1>
        <p class="established">Est. 2020</p>
        <section>
          <h2>Coffee</h2>
          <article class="item">
            <p class="flavor">French Vanilla</p><p class="price">3.00</p>
          </article>
          <article class="item">
            <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
          </article>
          <article class="item">
            <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
          </article>
          <article class="item">
            <p class="flavor">Hazelnut</p><p class="price">4.00</p>
          </article>
          <article class="item">
            <p class="flavor">Mocha</p><p class="price">4.50</p>
          </article>
        </section>
        <section>
          <h2>Desserts</h2>
          <article class="item">
            <p class="dessert">Donut</p><p class="price">1.50</p>
          </article>
          <article class="item">
            <p class="dessert">Cherry Pie</p><p class="price">2.75</p>
          </article>
          <article class="item">
            <p class="dessert">Cheesecake</p><p class="price">3.00</p>
          </article>
          <article class="item">
            <p class="dessert">Cinnamon Roll</p><p class="price">2.50</p>
          </article>
        </section>
      </main>
      <footer></footer>

64

在 footer 中，添加一个 p 元素。然后，在 p 中嵌套一个锚（a）元素，链接到 https://www.freecodecamp.org，并有文字 Visit our website。

      <footer>
          <p><a href="https://www.freecodecamp.org">Visit our website</a></p>
      </footer>

65

在带有链接的元素下方添加第二个 p 元素，并为其添加文本 123 Free Code Camp Drive。

        <p>
          <a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
        </p>
        <p>123 Free Code Camp Drive</p>

66

你可以使用 hr 元素在不同内容的部分之间显示一个分隔符。

首先，在具有 established 类的 p 元素和第一个 section 之间添加一个 hr 元素。注意：hr 元素是没有结束标签的。

     <main>
        <h1>CAMPER CAFE</h1>
        <p class="established">Est. 2020</p>
        <hr />
        <section>
          <h2>Coffee</h2>
          <article class="item">
            <p class="flavor">French Vanilla</p><p class="price">3.00</p>
          </article>
          <article class="item">
            <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
          </article>
          <article class="item">
            <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
          </article>
          <article class="item">
            <p class="flavor">Hazelnut</p><p class="price">4.00</p>
          </article>
          <article class="item">
            <p class="flavor">Mocha</p><p class="price">4.50</p>
          </article>
        </section>
        <section>
          <h2>Desserts</h2>
          <article class="item">
            <p class="dessert">Donut</p><p class="price">1.50</p>
          </article>
          <article class="item">
            <p class="dessert">Cherry Pie</p><p class="price">2.75</p>
          </article>
          <article class="item">
            <p class="dessert">Cheesecake</p><p class="price">3.00</p>
          </article>
          <article class="item">
            <p class="dessert">Cinnamon Roll</p><p class="price">2.50</p>
          </article>
        </section>
      </main>

67hr-height

hr 元素的默认属性将使其显示为浅灰色细线。你可以通过为 height 属性指定一个值来改变线条的高度。

将 hr 元素的高度更改为 3px。

hr {
  height: 3px;
}

68

将 hr 元素的背景颜色更改为 brown，使其与咖啡豆的颜色相匹配。

hr {
  height: 3px;
  background-color: brown;
}

69border

注意沿线边缘的灰色。这些边缘叫作 borders。元素的每一面都可以有不同的颜色，或者它们都可以相同。

使用 border-color 属性使 hr 元素的所有边缘与其背景颜色相同。

hr {
  height: 3px;
  background-color: brown;
  border-color: brown;
}

70

注意到线条如何更粗了吗？对于 hr 元素的所有边缘，名为 border-width 的属性的默认值为 1px。通过将边框改为与背景相同的颜色，线条的总高度为 5px（3px 加上上下边框宽度 1px）。

将 hr 的 height 属性改为 2px，这样它的总高度就变成了 4px

hr {
  height: 2px;
  background-color: brown;
  border-color: brown;
}

71

继续在 main 元素和 footer 元素之间添加另一个 hr 元素。

   <main>
        <h1>CAMPER CAFE</h1>
        <p class="established">Est. 2020</p>
        <hr>
        <section>
          <h2>Coffee</h2>
          <article class="item">
            <p class="flavor">French Vanilla</p><p class="price">3.00</p>
          </article>
          <article class="item">
            <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
          </article>
          <article class="item">
            <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
          </article>
          <article class="item">
            <p class="flavor">Hazelnut</p><p class="price">4.00</p>
          </article>
          <article class="item">
            <p class="flavor">Mocha</p><p class="price">4.50</p>
          </article>
        </section>
        <section>
          <h2>Desserts</h2>
          <article class="item">
            <p class="dessert">Donut</p><p class="price">1.50</p>
          </article>
          <article class="item">
            <p class="dessert">Cherry Pie</p><p class="price">2.75</p>
          </article>
          <article class="item">
            <p class="dessert">Cheesecake</p><p class="price">3.00</p>
          </article>
          <article class="item">
            <p class="dessert">Cinnamon Roll</p><p class="price">2.50</p>
          </article>
        </section>
      </main>
      <hr />
      <footer>
        <p>
          <a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
        </p>
        <p>123 Free Code Camp Drive</p>
      </footer>

72

要在菜单周围创建更多空间，请使用 padding 属性在 body 元素的内部添加 20px 空间。

body {
  background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
  font-family: sans-serif;
  padding: 20px;
}

73

关注菜单上的项目和价格，每一行之间有相当大的差距。

定位所有嵌套在 class 名为 item 的元素中的 p 元素，并将它们的顶部和底部 margin 设置为 5px。

h1, h2 {
  font-family: Impact, serif;
}

.item p {
  display: inline-block;
  margin-top: 5px;
  margin-bottom: 5px;
}

.flavor, .dessert {
  text-align: left;
  width: 75%;
}

.price {
  text-align: right;
  width: 25%
}

74

使用与上一步相同的样式选择器，通过将值设置为 18px 来增大商品和价格的字体大小。

.item p {
  display: inline-block;
  margin-top: 5px;
  margin-bottom: 5px;
  font-size: 18px;
}

75

将 margin-bottom 更改为 5px，看起来很棒。但是，现在 Cinnamon Roll 菜单项和第二个 hr 元素之间的空间与顶部 hr 元素和 Coffee 标题之间的空间不匹配。

通过创建一个名为 bottom-line 的 class，将 margin-top 属性设置为 25px，来添加更多空间。

.bottom-line {
      margin-top: 25px;
}

76

现在将 bottom-line 类添加到第二个 hr 元素中，这样样式就生效。

77

接下来你将要调整 footer 元素。为了保持 CSS 的条理性，在 styles.css 的末尾添加一个注释，文字为 FOOTER。

/* FOOTER */

78

向下移动到 footer 元素，使所有文本的字体大小为 14px。

footer {
  font-size: 14px;
}

79

链接在未点击状态下的默认颜色通常为蓝色。已经在页面上被访问过的链接的默认颜色通常是紫色。

要使 footer 链接的颜色相同，无论是否已访问链接，请为锚元素（a）使用类型选择器，并将 color 属性设置为 black。

 a {
    color: black;
}

80伪类选择器，链接的4种状态

当链接被实际访问时，你可以使用类似 a:visited { propertyName: propertyValue; } 的 pseudo-selector 来更改链接的属性。

当用户访问链接时，将页脚 Visit our website 链接的颜色更改为 grey。

a:visited {
    color: grey;
}

81

当鼠标悬停在链接上时，你可以使用类似于 a:hover { propertyName: propertyValue; } 的 pseudo-selector 更改链接的属性。

当用户将鼠标悬停在页脚 Visit our website 链接上时，将其颜色更改为 brown。

a:hover {
  color: brown;
}

82

当链接被实际点击时，你可以使用类似 a:active { propertyName: propertyValue; } 的 pseudo-selector 来更改链接的属性。

将页脚 Visit our website 链接的颜色更改为 white。

a:active {
  color: white;
}

83

为了和你已经使用的颜色主题（黑色和棕色）保持一致，将访问链接时的颜色更改为 black，并在实际点击链接时将其颜色设置为使用 brown。

a:visited {
  color: black;
}

a:hover {
  color: brown;
}

a:active {
  color: brown;
}

84浏览器有默认的padding和margin

菜单文本 CAMPER CAFE 的顶部空间与菜单底部的地址空间不同。这是由于浏览器对 h1 元素有一些默认顶部 margin。

将 h1 元素的顶部 margin 更改为 0 以删除所有顶部 margin。

h1 {
  font-size: 40px;
  margin-top: 0px;
}

85

为了去除 h1 元素和文本 Est. 2020 之间的一些垂直空间，将 h1 的底边距改为 15px。

h1 {
  font-size: 40px;
  margin-top: 0;
  margin-bottom: 15px;
}

86

现在顶部的间隔看起来很好。菜单底部地址下方的空间比菜单顶部和 h1 元素的空间大一点。

要减少地址 p 元素下方的默认 margin 空间，请创建一个名为 address 的 class 选择器，并为 margin-bottom 属性设置值 5px。

.address {
  margin-bottom: 5px;
}

87

现在将 address class 应用于包含地址的 p 元素。

      <footer>
        <p>
          <a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
        </p>
        <p class="address">123 Free Code Camp Drive</p>
      </footer>

88

菜单看起来不错，但除了咖啡豆的背景图片外，主要就是文字。

在 Coffee 标题下，使用 Url https://cdn.freecodecamp.org/curriculum/css-cafe/coffee.jpg 添加一张图片。给图像一个 alt 值 coffee icon。

          <h2>Coffee</h2>
          <img src="https://cdn.freecodecamp.org/curriculum/css-cafe/coffee.jpg" alt="coffee icon">

89img转为块元素并居中

你添加的图像不像其上方的 Coffee 标题那样水平居中。 img 元素“像是”内联元素。

要使图像表现得像标题元素（块级），请创建一个 img 类型选择器，为 display 设限设置值 block，并使用适用的 margin-left 和 margin-right 值将其水平居中。

img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

90

使用 URL https://cdn.freecodecamp.org/curriculum/css-cafe/pie.jpg 在 Desserts 标题下添加最后一张图片。给图像添加 alt 值 pie icon。

          <h2>Desserts</h2>
          <img src="https://cdn.freecodecamp.org/curriculum/css-cafe/pie.jpg" alt="pie icon" />

91margin负值

如果 h2 元素及其相关图标之间的垂直空间更小，那就太好了。 h2 元素具有默认的顶部和底部 margin 空间，因此你可以将 h2 元素的底部 margin 更改为 0 或其他数字。

有一种更简单的方法，只需向 img 元素添加一个负的顶部 margin，以将它们从当前位置拉上来。负值是通过在值前面添加 - 创建的。要完成这个项目，请继续在 img 类型选择器中使用 25px 的负顶部 margin。

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: -25px;
}

freecodecamp通过编写咖啡店菜单学习基础CSS