CSS代码
body {
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
/* 引入背景 */
font-family: sans-serif;
/* 指定元素中文本的字体样式 */
padding: 20px;
/* 内边距设置为20px */
}
h1 {
font-size: 40px;
/* 文本字体大小 */
margin-top: 0;
/* 外边距 */
margin-bottom: 15px;
}
h2 {
font-size: 30px;
}
.established {
font-style: italic;
/* 字体风格 */
}
h1, h2, p {
text-align: center;
/* 字体位置 */
}
.menu {
width: 80%;
background-color: burlywood;
margin-left: auto;
margin-right: auto;
padding: 20px;
max-width: 500px;
/* 设置该元素的最大像素（大小） */
}
img {
display: block;
/* 将内联元素变成块级元素就可以设置外边距这些东西了 */
margin-left: auto;
margin-right: auto;
}
hr {
height: 2px;
background-color: brown;
border-color: brown;
}
.bottom-line {
margin-top: 25px;
}
h1, h2 {
font-family: Impact, serif;
/* 字体堆栈 */
}
.item p {
/*针对所有嵌套在类名为 item 的元素中的 p 元素*/
display: inline-block;
margin-top: 5px;
margin-bottom: 5px;
font-size: 18px;
}
.flavor, .dessert {
text-align: left;
width: 75%;
}
.price {
text-align: right;
width: 25%;
}
/* FOOTER */
footer {
font-size: 14px;
}
.address {
margin-bottom: 5px;
}
a {
color: black;
}
a:visited {
/*伪类*/
color: black;
}
/* 设置连接还没有点击前的状态颜色 */
a:hover {
color: brown;
}
/* 设置鼠标放在连接上显示的颜色 */
a:active {
color: brown;
}
/* 设置连接点击后显示的颜色 */h5代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Cafe Menu</title>
<link href="./style.css" rel="stylesheet"/>
<!-- 引用CSS文件 -->
</head>
<body>
<div class="menu">
<main>
<h1>CAMPER CAFE</h1>
<p class="established">Est. 2020</p>
<hr>
<!--hr是HTML的水平标签是一个自闭合的标签-->
<section>
<h2>Coffee</h2>
<img src="https://cdn.freecodecamp.org/curriculum/css-cafe/coffee.jpg" alt="coffee icon"/>
<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>
<img src="https://cdn.freecodecamp.org/curriculum/css-cafe/pie.jpg" alt="pie icon"/>
<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 class="bottom-line">
<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>
</div>
</body>
</html>结果图
知识点：
一、字体样式font-family:可以是具体的字体名称也可以是通用字体族分类
字体族：
serif：衬线字体，如 Times New Roman、Georgia。sans-serif：无衬线字体，如 Arial、Helvetica。monospace：等宽字体，如 Courier New、Consolas。cursive：草书风格字体，如 Comic Sans MS。fantasy：装饰性字体，如 Impact。
字体堆栈：你还可以指定一系列字体族作为备用，以便在指定的字体不可用时，浏览器可以依次使用备用字体
eg：font-family: "Arial", "Helvetica", sans-serif;
引号：如果字体名称中包含空格或特殊字符，通常需要将其放在引号内，以确保浏览器正确解析
eg:font-family: "Times New Roman", serif;
二、CSS盒子模型
CSS盒子模型是网页布局的基础概念之一，用于描述HTML元素仔页面中所占的控件以及它们之间的关系。盒子模型由四个部分组成：内容区域（content)、内边距（padding）、边框（border）、外边距（margin）
-
内容区域（Content）：内容区域是指元素内部实际包含内容的区域。它的大小由元素的宽度（width）和高度（height）属性决定。
-
内边距（Padding）：内边距是内容区域与边框之间的空白区域。内边距可以使用
padding属性来设置，可以分别设置上（padding-top）、右（padding-right)、下(padding-bottom)、左（padding-left）四个方向的内边距值，也可以同时设置四个方向的值。auto是 -
边框（Border）：边框是围绕内容和内边距的线条或边界。边框的样式、颜色和宽度可以使用
border属性来设置，也可以分别设置边框的样式、颜色和宽度。 eg:border:1px solid(实线) #000（颜色）； border-radius: 5px; /* 边框圆角半径为5像素 */ -
外边距（Margin）：外边距是元素与相邻元素之间的空白区域。外边距可以使用
margin属性来设置，可以分别设置上、右、下、左四个方向的外边距值，也可以同时设置四个方向的值。eg:
margin-top: 5px; /* 顶部外边距为5像素 */
margin-right: 10px; /* 右侧外边距为10像素 */
margin-bottom: 15px; /* 底部外边距为15像素 */
margin-left: 20px; /* 左侧外边距为20像素 */
margin-left: auto; /* 左侧外边距自动调整，使元素水平居中 */
margin-right: auto; /* 右侧外边距自动调整，使元素水平居中 */
三、font-style：设置文本风格
- nomal：正常
- italic：斜体
- oblique：倾斜
四、伪类
在CSS中伪类（pseudo-class)是一种用于向元素的特定状态或位置应用样式的方法。它们允许你根据用户行为或元素的状态来选择元素，并为其应用特定的样式，而无需修改文档的HTML结果。
伪类通常以冒号‘：’开头，紧跟伪类的名称，放置在CSS选择器的末尾。它们可以用于选择某个元素的特定状态，比如鼠标悬停在元素上、元素被点击后的状态，或者元素被点击后的状态，或者是一个链接的情况
常见的伪类：
'：hover':当用户将鼠标悬停在元素上应用的样式。
‘：active‘：当元素处于活动状态（被点击并按住鼠标）时应用的样式
’：focus‘：当元素获得焦点时应用的样式，比如通过键盘导航到以恶搞链接或表单元素时
’：first-chlid‘：选择第一个子元素
’：last-chlid':选择最后一个子元素
‘：nth-chlid':根据其父元素中的位置选择元素
':nth-of-type():根据元素在其父元素的类型和位置选择元素
‘：nth-last-child()：从元素列表的末尾开始选择元素
’：nth-last-of-type(）‘：从元素列表的末尾开始选择特定类型的元素
’：not()‘：排除特定选择器的元素，时选择器选择不匹配的元素。
’：checked()‘：用于选择已选中的复选框或单选按钮。
’：disabled‘：用于选择被禁用的表单元素
’：enable‘：用于选择可用的表单元素
’：empty‘：用于选择没有子元素的元素
“：target：“选择当前活动的目标元素，通常与锚点链接结合使用。
”：before“：在元素的内容前面插入内容
”：after“：在元素的内容后面插入内容，也用于添加仪式化的伪元素。
