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“：在元素的内容后面插入内容，也用于添加仪式化的伪元素。
