编写咖啡店菜单基础CSS

文章目录

html
- 1. `style` 元素
- 2. 创建并在HTML中连接CSS文件
- - 创建CSS文件
  - 连接CSS文件
- 3. 同步移动端与笔记本端界面
- 4. `div` 元素
- 5. `article` 元素
- 6. `flavor`属性
- 7. `class`属性
- 8. `hr` 元素
css
- 1. `text-align` 属性
- 2. `background-color` 属性
- - 颜色模型
- 3. `width` 属性
- 4. `margin` 属性
- - 将元素居中
  - 改变行间距
  - 消除默认边距
  - 属性简写
- 5. 注释
- 6. `class` 选择器（类选择器）
- 7. `background-image` 属性
- 8. 内联元素
- - `display：inline-block`
  - `display:block`
- 9. `padding` 属性
- - 简写padding
- 10. `max-width` 属性
- 11. `font-family` 属性
- 12. `font-size` 属性
- 13. `height` 属性
- 14. `border-color` 属性
- 15. 改变链接颜色
- - `pseudo-selector` 属性
  - - 设置被实际访问时的颜色
    - 设置鼠标悬停时的颜色
    - 设置被实际点击时的颜色
完整代码
- index.html
- styles.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>

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

效果图