文章目录

• • 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` 属性
    • 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 元素中指定一个样式，并为此设置一个属性。例如，通过设置 text-align 属性值为 center，让 h1 元素居中
大括号即为类型选择器，内容为CSS

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

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

创建CSS文件

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

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

连接CSS文件

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

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

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

4. div 元素

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

  
CAMPER CAFE
Est. 2020
Coffee

5. article 元素

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

French Vanilla

3.00

6. flavor属性

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

French Vanilla

7. class属性

在.html中可以设置class属性的值，以方面在.css文件中创建类选择器

8. hr 元素

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

Est. 2020

Coffee

css

1. text-align 属性

让h1元素居中

h1 {text-align: center;
}

2. background-color 属性

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

body{background-color:burlywood;
}

3. width 属性

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

div{width:300px
}

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

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

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

5. 注释

/* comment here */

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

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

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

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

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

French Vanilla
3.00

.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

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

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

CAMPER CAFE
Est. 2020
Coffee
French Vanilla
3.00
Caramel Macchiato
3.75
Pumpkin Spice
3.50
Hazelnut
4.00
Mocha
4.50
Desserts
Donut
1.50
Cherry Pie
2.75
Cheesecake
3.00
Cinnamon Roll
2.50

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

效果图