注：最后有面试挑战，看看自己掌握了吗
文章目录
网页内容位置
是时候添加一些菜单内容。 在现有的 body 元素里面添加一个 main 元素。 它最终将包含有关咖啡馆提供的咖啡和甜点的价格信息。
内容分块
用section来分块
装饰网页元素
你可以在 style 元素中指定一个样式，并为此设置一个属性，像这样：
element {property: value;
}
通过设置 text-align 属性值为 center，让你的 h1 元素居中，。
<style>h1 {text-align: center;}
</style>
一次装饰多个网页元素
<style>h1 {text-align: center;}h2 {text-align: center;}p {text-align: center;}</style>
你现在有三个样式完全相同的类型选择器。 你可以通过创建一个选择器列表将同一组样式添加到许多元素上。 每个选择器都用逗号分隔，如下所示：
selector1, selector2 {property: value;
}
删除三个现有的类型选择器，并将它们替换为一个选择器列表，该列表使 h1、h2 和 p 元素的文本居中。
用单独文件装饰网页
你已经通过在 style 标签内编写 CSS 来设置了三个元素的样式。 这样做可以，但由于会有更多的样式，最好把所有的样式放在一个单独的文件中并链接到它。
我们已经为你创建了一个单独的 styles.css 文件，并将编辑器视图切换到该文件。 你可以通过编辑器顶部的标签在不同的文件之间转换。
首先，将你创建的样式改写到 styles.css 文件中。 请确保排除开头和结尾的 style 标签。
现在你需要链接 styles.css 文件，以便再次应用这些样式。 在 head 元素中嵌套一个自闭合 link 元素。 给它一个 rel 属性，值为 stylesheet 和一个 href 属性，值为 styles.css。
<head><meta charset="utf-8" /><title>Cafe Menu</title><link rel="stylesheet" href="styles.css"/></head>
保持网页各客户端一致
为了使页面样式在移动端看起来与在桌面或笔记本电脑上相似，你需要添加一个带有特殊 content 属性的 meta 元素。
在 head 元素中添加以下内容：
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
改背景色
文本再次居中，因此指向 CSS 文件的链接是正常运行的。 将另一种样式添加到文件中，将 body 元素的 background-color 属性更改为 brown。
设计网页布局
div 元素主要用于设计布局，这与你迄今为止使用的其他内容元素不同。 在 body 元素内添加一个 div 元素，然后将所有其他元素移到新的 div 内。
<body><div><main><h1>CAMPER CAFE</h1><p>Est. 2020</p><section><h2>Coffee</h2></section></main></div></body>
以比例设计盒子布局
现在很容易看到文本在 div 元素内居中。 目前，div 元素的宽度以像素（px）为单位。 将 width 属性的值更改为 80%，使其为其父元素（body）的宽度的 80%。
让盒子在中间，设置边距
接下来，你要在水平方向上将 div 居中。 你可以通过把它的 margin-left 和 margin-right 属性设置为 auto 来做到这一点。 可以把页边距看作是元素周围不可见的空间。 使用这两个 margin 属性，将 div 元素置于 body 元素的中心。
设置样式的另一种方式
到目前为止，你一直在使用类型选择器来设置元素的样式。 class 选择器由前面带有一个点的名称定义，如下所示：
.class-name {styles
}
将现有的 div 选择器改为类选择器，用一个名为 menu 的类代替 div。
设置网页图片背景
由于咖啡馆主要销售的产品是咖啡，因此你可以使用咖啡豆的图像作为页面背景。
删除 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);
}
写网页内容
article 元素通常包含多个具有相关信息的元素。 在这个示例里，它将包含咖啡风味和该风味的价格。 在 article 元素中嵌套两个 p 元素。 第一个的文本应该是 French Vanilla，第二个的文本应该是 3.00。
把两行调到一行
这正是你想要的，但如果口味和价格在同一条线上，那就太好了。 p 元素是 块级 元素，因此它们占据了其父元素的整个宽度。
要将它们放在同一行，你需要对 p 元素应用一些样式，因此它们更像内联元素。 将值为 item 的 class 属性添加到 Coffee 标题下的第一个 article 元素。
两个合到一行
p 元素嵌套在具有 item 类属性的 article 元素中。 你可以使用名为 item 的 class 为嵌套在元素中任何位置的所有 p 元素设置样式，如下所示：
.item p {
}
使用上面的选择器，添加一个值为 inline-block 的 display 属性，这样 p 元素更像是内联元素。
.item p {display: inline-block;
}
将一行的元素分开
这更接近了，但价格没有停留在右边的位置。 这是因为 inline-block 元素只占据其内容的宽度。 要将它们分散开，请将 width 属性添加到 flavor 和 price class 选择器，两个属性的值都是 50%。------------------------------行不通
好吧，那样做行不通。 给 p 元素添加 inline-block 样式，并将它们放置在代码中的单独行上，会在第一个 p 元素的右侧创建一个空格，导致第二个元素转移到下一行。 解决此问题的一种方法是使每个 p 元素的宽度略小于 50%。
将每个 class 的 width 值更改为 49%，看看会发生什么。----------可以
前面的方法是可行的，但是价格右侧仍有一点空格。
你可以继续尝试各种百分比的宽度。 当然，也可以删除 class 为 price 的 p 元素和 class 为 flavor 的 p 中间的换行，让它们在编辑器上显示在同一行。 确保两个元素之间没有空格。
内容到侧边之间加空间
你可以用各种 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;
}
由于菜单的所有 4 个边具有相同的内部间距，请继续删除四个属性并设置 padding 属性的值为 20px。
设置字体
你可以更改文本的 font-family，使其看起来与浏览器的默认字体不同。 每个浏览器都有一些可用的常用字体。
通过添加值为 sans-serif 的 font-family 属性来更改 body 中的所有文本。 这是一种相当常见的字体，易于阅读。
所有的文字都有相同的 font-family，这有点无聊。 你仍然可以让大部分文字都是 sans-serif ，只是用不同的选择器使 h1和 h2 元素不同。
对 h1 和 h2 元素进行样式设计，使这些元素的文本只使用 Impact 字体。
后备字体
你可以通过添加另一个用逗号分隔的字体名称来为 font-family 添加一个后备值。 Fallback 是在初始值找不到/无法使用的情况下使用的。
在 Impact 字体之后添加后备（fallback）字体serif。
body {background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);font-family: sans-serif;
}
设置斜体
分界线
你可以使用 hr 元素在不同内容的部分之间显示一个分隔符。
首先，在具有 established 类的 p 元素和第一个 section 之间添加一个 hr 元素。 注意：hr 元素是没有结束标签的。
注意到线条如何更粗了吗？ 对于 hr 元素的所有边缘，名为 border-width 的属性的默认值为 1px。 通过将边框改为与背景相同的颜色，线条的总高度为 5px（3px 加上上下边框宽度 1px）。
将 hr 的 height 属性改为 2px，这样它的总高度就变成了 4px。
字间距
关注菜单上的项目和价格，每一行之间有相当大的差距。
定位所有嵌套在 class 名为 item 的元素中的 p 元素，并将它们的顶部和底部 margin 设置为 5px。
超链接颜色
链接在未点击状态下的默认颜色通常为蓝色。 已经在页面上被访问过的链接的默认颜色通常是紫色。
要使 footer 链接的颜色相同，无论是否已访问链接，请为锚元素（a）使用类型选择器，并将 color 属性设置为 black。
访问后超链接颜色
当链接被实际访问时，你可以使用类似 a:visited { propertyName: propertyValue; } 的 pseudo-selector 来更改链接的属性。
当用户访问链接时，将页脚 Visit our website 链接的颜色更改为 grey。
a:visited {color: grey;
}
鼠标悬停改颜色
当鼠标悬停在链接上时，你可以使用类似于 a:hover { propertyName: propertyValue; } 的 pseudo-selector 更改链接的属性。
当用户将鼠标悬停在页脚 Visit our website 链接上时，将其颜色更改为 brown。
a:hover {color: brown;
}去除默认空间
菜单文本 CAMPER CAFE 的顶部空间与菜单底部的地址空间不同。 这是由于浏览器对 h1 元素有一些默认顶部 margin。
将 h1 元素的顶部 margin 更改为 0 以删除所有顶部 margin。
现在顶部的间隔看起来很好。 菜单底部地址下方的空间比菜单顶部和 h1 元素的空间大一点。
要减少地址 p 元素下方的默认 margin 空间，请创建一个名为 address 的 class 选择器，并为 margin-bottom 属性设置值 5px。
调整上下空间
如果 h2 元素及其相关图标之间的垂直空间更小，那就太好了。 h2 元素具有默认的顶部和底部 margin 空间，因此你可以将 h2 元素的底部 margin 更改为 0 或其他数字。
有一种更简单的方法，只需向 img 元素添加一个负的顶部 margin，以将它们从当前位置拉上来。 负值是通过在值前面添加 - 创建的。 要完成这个项目，请继续在 img 类型选择器中使用 25px 的负顶部 margin。
🌸I could be bounded in a nutshell and count myself a king of infinite space.
特别鸣谢：木芯工作室 、Ivan from Russia
