编写咖啡店菜单基础CSS

文章目录

html

1. `style` 元素

在创建的内容的演示和外观方面，一直受到限制。为了开始控制，在 head 元素中添加一个 style 元素

<style></style>

在 style 元素中指定一个样式，并为此设置一个属性。例如，通过设置 text-align 属性值为 center，让 h1 元素居中
大括号即为类型选择器，内容为CSS

<style>
      h1{
      
      
        text-align:center;
      }
    </style>

可以通过创建一个选择器列表将同一组样式添加到许多元素上，每个选择器都用逗号分隔
例如，将h1、h2 和 p 元素的文本居中

<style>
      h1,h2,p {
      
      
        text-align: center;
      }
    </style>

2. 创建并在HTML中连接CSS文件

创建CSS文件

已经通过在 style 标签内编写 CSS 来设置了三个元素的样式。这样做可以，但由于会有更多的样式，最好把所有的样式放在一个单独的文件中并链接到它
将创建的样式改写到 styles.css 文件中。请确保排除开头和结尾的 style 标签

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

连接CSS文件

在 head 元素中嵌套一个自闭合 link 元素。给它一个 rel 属性，值为 stylesheet 和一个 href 属性，值为 styles.css

  <head>
    <link rel="stylesheet" href="styles.css">
    <meta charset="utf-8" />
    <title>Cafe Menu</title>
  </head>

3. 同步移动端与笔记本端界面

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

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

4. `div` 元素

div 元素主要用于设计布局，这与其他内容元素不同。在 body 元素内添加一个 div 元素，然后将所有其他元素移到新的 div 内

  <body>
    <div>
    <main>
      <h1>CAMPER CAFE</h1>
      <p>Est. 2020</p>
      <section>
        <h2>Coffee</h2>
      </section>
    </main>
    </div>
  </body>

5. `article` 元素

article 元素通常包含多个具有相关信息的元素

<article>
<p>French Vanilla</p><!--咖啡风味 -->
<p>3.00</p><!--咖啡价格 -->
</article>

在这里插入图片描述

扫描二维码关注公众号，回复： 17213206 查看本文章

6. `flavor`属性

口味和价格目前堆叠在一起，并以各自的 p 元素居中。希望口味在左边，价格在右边
给 French Vanilla p 元素添加 flavor class

<p class="flavor">French Vanilla</p>

7. `class`属性

在.html中可以设置class属性的值，以方面在.css文件中创建类选择器
多个 classes 可以以空格分隔放在 class 属性内来一起设置给一个元素。比如，如下代码给 div 元素添加了 animal 和 dog 类：

<div class="animal dog">

如果你给一个 HTML 元素添加多个类，列出的前几个类的样式可能会被之后的类覆盖

8. `hr` 元素

使用 hr 元素在不同内容的部分之间显示一个分隔符，hr 元素是没有结束标签的

<p class="established">Est. 2020</p>
<hr>
<h2>Coffee</h2>

在这里插入图片描述

css

1. `text-align` 属性

让h1元素居中

h1 {
    
    
  text-align: center;
}

2. `background-color` 属性

将 body 元素的 background-color 属性更改为 burlywood

body{
    
    
  background-color:burlywood;
}

颜色模型

目前，有两种主要的颜色模型：用于电子设备的 叠加 RGB（红、绿、蓝）模型，以及用于打印的 消减 CMYK（青色、品红色、黄色，黑色）模型
使用 RGB 模型意味着颜色从黑色开始，色值随着红色、绿色和蓝色数值变化而变化。一个简单的方法是使用 CSS rgb 函数
创建一个定位 container 类的新 CSS 规则，并使用 rgb(0, 0, 0) 将其 background-color 设置为黑色

.container {
    
    
  background-color: rgb(0, 0, 0);
}

green 颜色关键字实际上是一个较暗的阴影，大约介于黑色和绿色最大值之间。将 rgb 函数中的绿色值设置为 127 以降低其强度

/* 亮绿色 */
background-color: rgb(0, 256, 0);
/* 深绿色 与background-color:green;颜色显示相同*/
background-color: rgb(0, 127, 0);

3. `width` 属性

width属性改变元素的宽度（横向长度），height属性改变元素的高度（纵向宽度）
现在的目标是使 div 不占用整个页面的宽度。 CSS 的 width 属性在这方面是完美的。在样式表中创建一个新的类型选择器，使 div 元素的宽度为 300px

div{
    
    
  width:300px
}

很容易看到文本在 div 元素内居中。目前，div 元素的宽度以像素（px）为单位。将 width 属性的值更改为 80%，使其为其父元素（body）的宽度的 80%

div {
    
    
  width:80%;
  background-color: burlywood;
}

在这里插入图片描述
height 属性：设置元素的高度（纵向长度）
width 属性：设置元素的宽度（横向长度）

4. `margin` 属性

将元素居中

要在水平方向上将 div 居中，可以通过把它的 margin-left 和 margin-right 属性设置为 auto 来做到这一点。可以把页边距看作是元素周围不可见的空间。使用这两个 margin 属性，将 div 元素置于 body 元素的中心

div {
    
    
  width: 80%;
  background-color: burlywood;
  margin-left:auto;
  margin-right:auto;
}

改变行间距

关注菜单上的项目和价格，每一行之间有相当大的差距。
定位所有嵌套在 class 名为 item 的元素中的 p 元素，并将它们的顶部和底部 margin 设置为 5px

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

消除默认边距

菜单文本 CAMPER CAFE 的顶部空间与菜单底部的地址空间不同。这是由于浏览器对 h1 元素有一些默认顶部 margin
将 h1 元素的顶部 margin 更改为 0 以删除所有顶部 margin

如果 h2 元素及其相关图标之间的垂直空间更小，那就太好了。 h2 元素具有默认的顶部和底部 margin 空间，因此你可以将 h2 元素的底部 margin 更改为 0 或其他数字。

有一种更简单的方法，只需向 img 元素添加一个负的顶部 margin，以将它们从当前位置拉上来。负值是通过在值前面添加 - 创建的。要完成这个项目，请继续在 img 类型选择器中使用 25px 的负顶部 margin

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

属性简写

将其 margin 属性设置为 auto，这会将 margin-top、margin-right、margin-bottom 和 margin-left 全部设置为 auto
当简写 margin 属性有两个值时，它将 margin-top 和 margin-bottom 设置为第一个值，并将 margin-left 和 margin-right 设置为第二个值

margin: 10px auto;

5. 注释

/* comment here */

6. `class` 选择器（类选择器）

class 选择器由前面带有一个点的名称定义

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

要将该类的样式应用于 div 元素，请在.html文件中 div 元素的开始标签上添加一个 class 属性，并将其值设置为 menu

<div class="menu">

多个 classes 可以以空格分隔放在 class 属性内来一起设置给一个元素。比如，如下代码给 div 元素添加了 animal 和 dog 类

<div class="animal dog">

7. `background-image` 属性

用于设置页面背景
background-image 属性

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

8. 内联元素

`display：inline-block`

p 元素嵌套在具有 item 类属性的 article 元素中。你可以使用名为 item 的 class 为嵌套在元素中任何位置的所有 p 元素设置样式，使用下面的选择器，添加一个值为 inline-block 的 display 属性，这样 p 元素更像是内联元素(使得两个p元素内的文本在同一行）
.html

<article class="item">
            <p class="flavor">French Vanilla</p>
            <p class="price">3.00</p>
          </article>

.css

.item p {
    
    display:inline-block; }

给 p 元素添加 inline-block 样式，并将它们放置在代码中的单独行上，会在第一个 p 元素的右侧创建一个空格，导致第二个元素转移到下一行。解决此问题的一种方法是使每个 p 元素的宽度略小于 50%。将每个 class 的 width 值更改为 49%

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

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

在这里插入图片描述

`display:block`

使图像表现得像标题元素（块级），请创建一个 img 类型选择器，为 display 设限设置值 block

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

在这里插入图片描述

9. `padding` 属性

可以用各种 padding 属性给菜单在内容和侧面之间留一些空间
给 menu 类一个 padding-left 和一个 padding-right，数值都是 20px

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

在这里插入图片描述
顶部：padding-top；底部：padding-bottom
由于菜单的所有 4 个边具有相同的内部间距，可以删除四个属性并设置 padding 属性的值为 20px

简写padding

添加上下 padding 各为10px，并将左右 padding 设置为 0，类似于简写 margin 属性

padding:10px 0;

10. `max-width` 属性

菜单的当前宽度将总是占到 body 元素宽度的80%。在一个非常宽的屏幕上，咖啡和甜点看起来与它们的价格相差甚远。给 menu 类添加一个 max-width 的属性，其值为 500px，以防止它变得太宽

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

在这里插入图片描述

11. `font-family` 属性

可以更改文本的 font-family，使其看起来与浏览器的默认字体不同。每个浏览器都有一些可用的常用字体
通过添加值为 sans-serif 的 font-family 属性来更改 body 中的所有文本。这是一种相当常见的字体，易于阅读(字体与未设置该属性时相同)

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

另一种字体(加粗)：

font-family:Impac;

在这里插入图片描述
可以通过添加另一个用逗号分隔的字体名称来为 font-family 添加一个后备值。 Fallback 是在初始值找不到/无法使用的情况下使用的。在 Impact 字体之后添加后备（fallback）字体serif

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

另一种字体(斜体)：

font-style:italic;

在这里插入图片描述

12. `font-size` 属性

标题元素（如 h1、h2）的排版是由用户浏览器的默认值设置的
添加两个新的类选择器（h1 和 h2）。对两者都使用 font-size 属性，该属性可以改变文本的字体大小。对 h1 使用 40px，对 h2 使用 30px 的值

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

13. `height` 属性

hr 元素的默认属性将使其显示为浅灰色细线。你可以通过为 height 属性指定一个值来改变线条的高度（即宽度）

hr{
    
    
  height:15px;
}

在这里插入图片描述
height 属性：设置元素的高度（纵向长度）
width 属性：设置元素的宽度（横向长度）

14. `border-color` 属性

注意沿线边缘的灰色，这些边缘叫作 borders。元素的每一面都可以有不同的颜色，或者它们都可以相同
对于 hr 元素的所有边缘，名为 border-width 的属性的默认值为 1px。通过将边框改为与背景相同的颜色，线条的总高度为 5px（3px 加上上下边框宽度 1px）

15. 改变链接颜色

链接在未点击状态下的默认颜色通常为蓝色。已经在页面上被访问过的链接的默认颜色通常是紫色
要使 footer 链接的颜色相同，无论是否已访问链接，请为锚元素（a）使用类型选择器，并将 color 属性设置为 black

a{
    
    
  color:black;
}

`pseudo-selector` 属性

设置被实际访问时的颜色

当链接被实际访问时，你可以使用类似 a:visited { propertyName: propertyValue; } 的 pseudo-selector 来更改链接的属性
当用户访问链接时，将页脚 Visit our website 链接的颜色更改为 grey

a:visited {
    
    color:grey; }

设置鼠标悬停时的颜色

当鼠标悬停在链接上时，你可以使用类似于 a:hover { propertyName: propertyValue; } 的 pseudo-selector 更改链接的属性
当用户将鼠标悬停在页脚 Visit our website 链接上时，将其颜色更改为 brown

a:hover {
    
    color:brown; }

设置被实际点击时的颜色

当链接被实际点击时，你可以使用类似 a:active { propertyName: propertyValue; } 的 pseudo-selector 来更改链接的属性
将页脚 Visit our website 链接的颜色更改为 white

a:active {
    
    color:white; }

完整代码

index.html

<!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="styles.css" rel="stylesheet"/>
  </head>
  <body>
    <div class="menu">
      <main>
        <h1>CAMPER CAFE</h1>
        <p class="established">Est. 2020</p>
        <hr>
        <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>

styles.css

body {
    
    
  background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
  font-family: sans-serif;
  padding: 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;
  margin-top:-25px;
}
hr {
    
    
  height: 2px;
  background-color: brown;
  border-color: brown;
}

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

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

.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;
}

效果图

在这里插入图片描述