Learn Basic CSS by Building a Cafe Menu(1-30)

最新推荐文章于 2022-11-14 16:51:53 发布

%二桃杀三士%

最新推荐文章于 2022-11-14 16:51:53 发布

阅读量906

点赞数

分类专栏： FreeCodeCamp学习日记文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_45609187/article/details/127760452

版权

FreeCodeCamp学习日记专栏收录该内容

11 篇文章 8 订阅

订阅专栏

Step 1

As you learned in the last few steps of the Cat Photo App, there is a basic structure needed to start building your web page.

Add the <!DOCTYPE html> tag, and an html element with a lang attribute of en.
<!DOCTYPE html>
<html lang="en">
  
</html>

Step 2

Add a head element within the html element, so you can add a title element. The title element's text should be Cafe Menu.
<head>
  <title>Cafe Menu</title>
</head>

Step 3

The title is one of several elements that provide extra information not visible on the web page, but it is useful for search engines or how the page gets displayed.

Inside the head element, nest a meta element with an attribute named charset set to the value utf-8 to tell the browser how to encode characters for the page. Note that meta elements are self-closing.
  <head>
    <meta charset="utf-8">
    <title>Cafe Menu</title>
  </head>

Step 4

To prepare to create some actual content, add a body element below the head element.
 <head>
    <meta charset="utf-8" />
    <title>Cafe Menu</title>
  </head>
  <body>
  </body>

Step 5

It's time to add some menu content. Add a main element within the existing body element. It will eventually contain pricing information about coffee and desserts offered by the cafe.
  <body>
    <main>
    </main>
  </body>

Step 6

The name of the cafe is CAMPER CAFE. Add an h1 element within your main element. Give it the name of the cafe in capitalized letters to make it stand out.
    <main>
      <h1>CAMPER CAFE</h1>
    </main>

Step 7

To let visitors know the cafe was founded in 2020, add a p element below the h1 element with the text Est. 2020.
      <h1>CAMPER CAFE</h1>
      <p>Est. 2020</p>

Step 8

There will be two sections on the menu, one for coffees and one for desserts. Add a section element within the main element so you have a place to put all the coffees available.
    <main>
      <h1>CAMPER CAFE</h1>
      <p>Est. 2020</p>
      <section></section>
    </main>

Step 9

Create an h2 element in the section element and give it the text Coffee.
      <section>
        <h2>Coffee</h2>
      </section>

Step 10

Up until now, you have been limited regarding the presentation and appearance of the content you create. To start taking control, add a style element within the head element.
  <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>

Step 11

You can add style to an element by specifying it in the style element and setting a property for it like this:
element {
 property: value;
}
Center your h1 element by setting its text-align property to the value center.
    <style>
      h1{
        text-align:center
      }
    </style>

Step 12

In the previous step, you used a type selector to style the h1 element. Center the h2 and p elements by adding a new type selector for each one to the existing style element.
    <style>
      h1 {
        text-align: center;
      }
      h2{
        text-align:center;
      }
      p{
        text-align:center;
      }
    </style>

Step 13

You now have three type selectors with the exact same styling. You can add the same group of styles to many elements by creating a list of selectors. Each selector is separated with commas like this:
selector1, selector2 {
  property: value;
}
Delete the three existing type selectors and replace them with one selector list that centers the text for the h1, h2, and p elements.
    <style>
      h1,h2,p {
        text-align: center;
      }
    
    </style>

Step 14

You have styled three elements by writing CSS inside the style tags. This works, but since there will be many more styles, it's best to put all the styles in a separate file and link to it.

We have created a separate styles.css file for you and switched the editor view to that file. You can change between files with the tabs at the top of the editor.

Start by rewriting the styles you have created into the styles.css file. Make sure to exclude the opening and closing style tags.
h1,h2,p{
  text-align:center;
}

Step 15

Now that you have the CSS in the styles.css file, go ahead and remove the style element and all its content. Once it is removed, the text that was centered will shift back to the left.
  <head>
    <meta charset="utf-8" />
    <title>Cafe Menu</title>
   
  </head>

Step 16

Now you need to link the styles.css file so the styles will be applied again. Nest a self-closing link element in the head element. Give it a rel attribute value stylesheet and an href attribute value of styles.css.
  <head>
    <meta charset="utf-8" />
    <title>Cafe Menu</title>
    <link rel="stylesheet" href="styles.css">
  </head>

Step 17

For the styling of the page to look similar on mobile as it does on a desktop or laptop, you need to add a meta element with a special content attribute.

Add the following within the head element:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Cafe Menu</title>
    <link href="styles.css" rel="stylesheet"/>
  </head>
viewport的概念（转自）

viewport就是设备的屏幕上能用来显示我们的网页的那一块区域。

viewport标记，用于指定用户是否可以缩放Web页面，并对相关的选项进行设定。

width 和height 指令分别指定视区的逻辑宽度和高度。它们的值可以是以像素为单位的数字，也可以是一个特殊的标记符号。如上文代码中device-width即表示，视区宽度应为设备的屏幕宽度。类似的，device-height即表示设备的屏幕高度。

initial-scale用于设置Web页面的初始缩放比例。默认的初始缩放比例值因智能手机浏览器的不同而有所差异，通常情况下，设备会在浏览器中呈现出整个Web页面。设为1.0则显示未经缩放的Web页面。

maximum-scale和minimum-scale用于设置用户对于Web页面缩放比例的限制。值的范围为0.25~10.0之间

user-scalable指定用户是否可以缩放视区，即缩放Web页面的视图。值为yes时允许用户进行缩放，值为no时不允许缩放。

移动前端开发之viewport的深入理解（转自）

Step 18

The text is centered again so the link to the CSS file is working. Add another style to the file that changes the background-color property to brown for the body element.
h1, h2, p {
  text-align: center;
}
body{
  background-color:brown;
}

Step 19

That brown background makes it hard to read the text. Change the body element's background color to be burlywood so it has some color but you are still be able to read the text.
body {
  background-color: burlywood;
}

Step 20

The div element is used mainly for design layout purposes unlike the other content elements you have used so far. Add a div element inside the body element and then move all the other elements inside the new div.
  <body>
    <div>
      <main>
        <h1>CAMPER CAFE</h1>
        <p>Est. 2020</p>
        <section>
          <h2>Coffee</h2>
        </section>
      </main>
    </div>
  </body>

Step 21

The goal now is to make the div not take up the entire width of the page. The CSS width property is perfect for this. Create a new type selector in the style sheet that gives your div element a width of 300px.
body {
  background-color: burlywood;
}

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

div{
  width:300px
}

Step 22

Comments in CSS look like this:
/* comment here */
In your style sheet, comment out the line containing the background-color property and value, so you can see the effect of only styling div element. This will make the background white again.
  /*background-color: burlywood;*/

Step 23

Now use the existing div selector to set the background color of the div element to be burlywood.
div {
  width: 300px;
  background-color:burlywood;
}

Step 24

Now it's easy to see that the text is centered inside the div element. Currently, the width of the div element is specified in pixels (px). Change the width property's value to be 80%, to make it 80% the width of its parent element (body).
div {
  width: 80%;
  background-color: burlywood;
}

Step 25

Next, you want to center the div horizontally. You can do this by setting its margin-left and margin-right properties to auto. Think of the margin as invisible space around an element. Using these two margin properties, center the div element within the body element.
div {
  width: 80%;
  background-color: burlywood;
  margin-left:auto;
  margin-right:auto;
}

Step 26

So far you have been using type selectors to style elements. A class selector is defined by a name with a dot directly in front of it, like this:
.class-name {
  styles
}
Change the existing div selector into a class selector by replacing div with a class named menu.
.menu {
  width: 80%;
  background-color: burlywood;
  margin-left: auto;
  margin-right: auto;
}

Step 27

To apply the class's styling to the div element, add a class attribute to the div element's opening tag and set its value to menu.
<div class="menu">

Step 28

Since the cafe's main product for sale is coffee, you could use an image of coffee beans for the background of the page.

Delete the comment and its contents inside the body type selector. Now add a background-image property and set its value to url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg).
body {
  background-image:url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg)
}

Step 29

It’s looking good. Time to start adding some menu items. Add an empty article element under the Coffee heading. It will contain a flavor and price of each coffee you currently offer.
          <h2>Coffee</h2>
          <article></article>
<article> 标签定义独立的内容。

<article> 标签定义的内容本身必须是有意义的且必须是独立于文档的其余部分。

<article> 的潜在来源：

论坛帖子
博客文章
新闻故事
评论

<article> 定义一个文章区域

Step 30

article elements commonly contain multiple elements that have related information. In this case, it will contain a coffee flavor and a price for that flavor. Nest two p elements inside your article element. The first one's text should be French Vanilla, and the second's text 3.00.
          <article>
            <p>French Vanilla</p>
            <p>3.00</p>
          </article>