freecodecamp通过编写咖啡店菜单学习基础CSS-CSDN博客

本文链接：https://blog.csdn.net/qq_44884766/article/details/128627605

本文介绍了通过freecodecamp学习基础CSS的过程，包括文档类型声明、HTML元素、CSS内部和外部样式表的使用，以及如何设置背景颜色、布局、文本样式等。还涉及到元素的对齐、宽度、背景图片、内联元素、类选择器等内容，通过实例展示了如何创建一个咖啡店菜单的布局和样式设计。

摘要由CSDN通过智能技术生成

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

1文档类型声明、html-lang

<!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"表示链接到styles.css文件

17meta元素设置视窗

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

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

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

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设置类名

    <div class="menu">

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