响应式网页设计——通过创建咖啡店菜单学习基础CSS(步骤41~91）

Step 41
Now go ahead and change both the flavor and price class' widths to be 50% again.

.flavor {
  text-align: left;
  width: 50%;
}

.price {
  text-align: right;
  width: 50%;
}

Step 42
Now that you know it works, you can change the remaining article and p elements to match the first set. Start by adding the class item to the other article elements.

   <article class="item">
            <p>Caramel Macchiato</p>
            <p>3.75</p>
          </article>
          <article class="item">
            <p>Pumpkin Spice</p>
            <p>3.50</p>
          </article>
          <article class="item">
            <p>Hazelnut</p>
            <p>4.00</p>
          </article>
          <article class="item">
            <p>Mocha</p>
            <p>4.50</p>
          </article>

Step 43
Next, position the other p elements to be on the same line with no space between them.

<article class="item">
            <p>Caramel Macchiato</p><p>3.75</p>
          </article>
          <article class="item">
            <p>Pumpkin Spice</p><p>3.50</p>
          </article>
          <article class="item">
            <p>Hazelnut</p><p>4.00</p>
          </article>
          <article class="item">
            <p>Mocha</p><p>4.50</p>
          </article>

Step 44
To complete the styling, add the applicable class names flavor and price to all the remaining p elements.

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

Step 45
If you make the width of the page preview smaller, you will notice at some point, some of the text on the left starts wrapping around to the next line. This is because the width of the p elements on the left side can only take up 50% of the space.

Since you know the prices on the right have significantly fewer characters, change the flavor class width value to be 75% and the price class width value to be 25%.

.flavor {
  text-align: left;
  width: 75%;
}

.price {
  text-align: right;
  width: 25%;
}

Step 46
You will come back to styling the menu in a few steps, but for now, go ahead and add a second section element below the first for displaying the desserts offered by the cafe.

 <section>
</section>

Step 47
Add an h2 element in the new section and give it the text Desserts.

<section>
          <h2>Desserts</h2>
        </section>

Step 48
Add an empty article element under the Desserts heading. Give it a class attribute with the value item.

<h2>Desserts</h2>
         <article class="item">
            </article>

Step 49
Nest two p elements inside your article element. The first one's text should be Donut, and the second's text 1.50. Put both of them on the same line making sure there is no space between them.

 <article class="item">
            <p>Donut</p>
            <p>1.50></p>
          </article>

Step 50
For the two p elements you just added, add dessert as the value of the first p element's class attribute and the value price as the second p elements class attribute.

  <p class="dessert">Donut</p><p class="price">1.50</p>

Step 51
Something does not look right. You added the correct class attribute value to the p element with Donut as its text, but you have not defined a selector for it.

The CSS rule for the flavor class already sets the properties you want. Add the dessert class as an additional selector for this CSS rule.

.flavor,.dessert {
  text-align: left;
  width: 75%;
}

Step 52
Below the dessert you just added, add the rest of the desserts and prices using three more article elements, each with two nested p elements. Each element should have the correct dessert and price text, and all of them should have the correct classes.

Cherry Pie 2.75
Cheesecake 3.00
Cinnamon Roll 2.50

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

Step 53
You can give your menu some space between the content and the sides with various padding properties.

Give the menu class a padding-left and a padding-right with the same value 20px.

.menu {
  width: 80%;
  background-color: burlywood;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}

Step 54
That looks better. Now try to add the same 20px padding to the top and bottom of the menu.

.menu {
  width: 80%;
  background-color: burlywood;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
  padding: 20px
}

Step 55
Since all 4 sides of the menu have the same internal spacing, go ahead and delete the four properties and use a single padding property with the value 20px.

.menu {
  width: 80%;
  background-color: burlywood;
  margin-left: auto;
  margin-right: auto;
  padding: 20px;

}

Step 56
The current width of the menu will always take up 80% of the body element's width. On a very wide screen, the coffee and dessert appear far apart from their prices.

Add a max-width property to the menu class with a value of 500px to prevent it from growing too wide.

.menu {
  width: 80%;
  background-color: burlywood;
  margin-left: auto;
  margin-right: auto;
  padding: 20px;
  max-width: 500px;
}

Step 57
You can change the font-family of text, to make it look different from the default font of your browser. Each browser has some common fonts available to it.

Change all the text in your body, by adding a font-family property with the value sans-serif. This is a fairly common font that is very readable.

body {
  background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
font-family:  sans-serif
}

Step 58
It is a bit boring for all the text to have the same font-family. You can still have the majority of the text sans-serif and make just the h1 and h2 elements different using a different selector.

Style both the h1 and the h2 elements so that only these elements' text use Impact font.

h1, h2{
font-family: Impact;
}

Step 59
You can add a fallback value for the font-family by adding another font name separated by a comma. Fallbacks are used in instances where the initial is not found/available.

Add the fallback font serif after the Impact font.

h1, h2 {
  font-family: Impact,serif;
}

Step 60
Make the Est. 2020 text italicized by creating an established class selector and giving it the font-style property with the value italic.

.established{
  font-style: italic;
}

Step 61
Now apply the established class to the Est. 2020 text.

  <h1>CAMPER CAFE</h1>
        <p class="established">Est. 2020</p>

Step 62
The typography of heading elements (e.g. h1, h2) is set by default values of users' browsers.

Add two new type selectors (h1 and h2). Use the font-size property for both, but use the value 40px for the h1 and 30px for the h2.

h1{
  font-size: 40px;
}
h2{
  font-size: 30px;
}

Step 63
Add a footer element below the main element, where you can add some additional information.

        </section>
      </main>
       <footer>
  </footer>

Step 64
Inside the footer, add a p element. Then, nest an anchor (a) element in the p that links to https://www.freecodecamp.org and has the text Visit our website.

 <footer>
        <p>
          <a href="https://www.freecodecamp.org">Visit our website</a>
          </p>
      </footer>

Step 65
Add a second p element below the one with the link and give it the text 123 Free Code Camp Drive.

  <p>
          <a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
        </p>
         <p class="address"> 123 Free Code Camp Drive</p>

Step 66
You can use an hr element to display a divider between sections of different content.

First, add an hr element between the p element with the class established and the first section element. Note that hr elements are self closing.

 <main>
        <h1>CAMPER CAFE</h1>
        <p class="established">Est. 2020</p>
        <hr>
        <section>

Step 67
The default properties of an hr element will make it appear as a thin light grey line. You can change the height of the line by specifying a value for the height property.

Change the height of the hr element to be 3px.

hr{
  height: 3px;
}

Step 68
Change the background color of the hr element to brown so it matches the color of the coffee beans.

hr {
  height: 3px;
  background-color : brown;
}

Step 69
Notice the grey color along the edges of the line. Those edges are known as borders. Each side of an element can have a different color or they can all be the same.

Make all the edges of the hr element the same color as the background of it using the border-color property.

hr {
  height: 3px;
  background-color: brown;
  border-color: brown;
}

Step 70
Notice how the thickness of the line looks bigger? The default value of a property named border-width is 1px for all edges of hr elements. By changing the border to the same color as the background, the total height of the line is 5px (3px plus the top and bottom border width of 1px).

Change the height property of the hr to be 2px, so the total height of it becomes 4px.

hr {
  height: 2px;
  background-color: brown;
  border-color: brown;
}

Step 71
Go ahead and add another hr element between the main element and the footer element.

  </article>
        </section>
      </main>
      <hr class="bottom-line">
      <footer>
        <p>
          <a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
        </p>
        <p>123 Free Code Camp Drive</p>
      </footer>

Step 72
To create a little more room around the menu, add 20px of space on the inside of the body element by using the padding property.

body {
  background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
  font-family: sans-serif;
  padding: 20px;
}

Step 73
Focusing on the menu items and prices, there is a fairly large gap between each line.

Use the existing selector that targets all the p elements nested in elements with the class named item and set their top and bottom margin to be 5px.

.item p {
  display: inline-block;
  margin-top:5px;
 margin-bottom:5px;
}

Step 74
Using the same style selector in the previous step, make the font size of the items and prices larger by using a value of 18px.

.item p {
  display: inline-block;
  margin-top: 5px;
  margin-bottom: 5px;
   font-size:18px; 
}

Step 75
Changing the margin-bottom to 5px looks great. However, now the space between the Cinnamon Roll menu item and the second hr element does not match the space between the top hr element and the Coffee heading.

Add some more space by creating a class named bottom-line using 25px for the margin-top property.

.bottom-line{
   margin-top: 25px;
}

Step 76
Now add the bottom-line class to the second hr element so the styling is applied.

 <hr class="bottom-line">

Step 77
Next you are going to be styling the footer element. To keep the CSS organized, add a comment at the end of styles.css with the text FOOTER.

/* FOOTER */

Step 78
Moving down to the footer element, make all the text have a value of 14px for the font size.

footer{
   font-size: 14px;
}

Step 79
The default color of a link that has not yet been clicked on is typically blue. The default color of a link that has already been visited from a page is typically purple.

To make the footer links the same color regardless if a link has been visited, use a type selector for the anchor element (a) and use the value black for the color property.

a{
  color:black;
}

Step 80
You change properties of a link when the link has actually been visited by using a pseudo-selector that looks like a:visited { propertyName: propertyValue; }.

Change the color of the footer Visit our website link to be grey when a user has visited the link.

a:visited { 
  color: grey; }

Step 81
You change properties of a link when the mouse hovers over them by using a pseudo-selector that looks like a:hover { propertyName: propertyValue; }.

Change the color of the footer Visit our website link to be brown when a user hovers over it.

a:hover { 
color: brown; 
}

Step 82
You change properties of a link when the link is actually being clicked by using a pseudo-selector that looks like a:active { propertyName: propertyValue; }.

Change the color of the footer Visit our website link to be white when clicked on.

a:active { color: white; }

Step 83
To keep with the same color theme you have already been using (black and brown), change the color for when the link is visited to black and use brown for when the link is actually clicked.

a:visited {
  color: black;
}

a:hover {
  color: brown;
}

a:active {
  color: brown;
}

Step 84
The menu text CAMPER CAFE has a different space from the top than the address's space at the bottom of the menu. This is due to the browser having some default top margin for the h1 element.

Change the top margin of the h1 element to 0 to remove all the top margin.

h1 {
  font-size: 40px;
  margin-top: 0;
  
}

Step 85
To remove some of the vertical space between the h1 element and the text Est. 2020, change the bottom margin of the h1 to 15px.

h1 {
  font-size: 40px;
  margin-top: 0;
  margin-bottom: 15px;
}

Step 86
Now the top spacing looks good. The space below the address at the bottom of the menu is a little bigger than the space at the top of the menu and the h1 element.

To decrease the default margin space below the address p element, create a class selector named address and use the value 5px for the margin-bottom property.

.address{
  margin-bottom: 5px;
}

Step 87
Now apply the address class to the p element containing the street address 123 Free Code Camp Drive.

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

Step 88
The menu looks good, but other than the coffee beans background image, it is mainly just text.

Under the Coffee heading, add an image using the url https://cdn.freecodecamp.org/curriculum/css-cafe/coffee.jpg. Give the image an alt value of coffee icon.

    <h2>Coffee</h2>
          <img src="https://cdn.freecodecamp.org/curriculum/css-cafe/coffee.jpg" alt="coffee icon"/>

Step 89
The image you added is not centered horizontally like the Coffee heading above it. img elements are "like" inline elements.

To make the image behave like heading elements (which are block-level), create an img type selector and use the value block for the display property and use the applicable margin-left and margin-right values to center it horizontally.

img{
  display: block;
  margin-left: auto;
  margin-right: auto;
}

Step 90
Add one last image under the Desserts heading using the url https://cdn.freecodecamp.org/curriculum/css-cafe/pie.jpg. Give the image an alt value of pie icon.

 <h2>Desserts</h2>
          <img src="https://cdn.freecodecamp.org/curriculum/css-cafe/pie.jpg" alt="pie icon"/>

Step 91
It would be nice if the vertical space between the h2 elements and their associated icons was smaller. The h2 elements have default top and bottom margin space, so you could change the bottom margin of the h2 elements to say 0 or another number.

There is an easier way, simply add a negative top margin to the img elements to pull them up from their current positions. Negative values are created using a - in front of the value. To complete this project, go ahead and use a negative top margin of 25px in the img type selector.

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: -25px;
}