该篇文章为 freecodecamp Learn Basic CSS by Building a Cafe Menu 学习笔记

查看效果：cafe-menu

选择器（selector）

type selector

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<head>
  <style>
    h1 {
      text-align: center;
    }
    h2 {
      text-align: center;
    }
    p {
      text-align: center;
    }
  </style>
</head>

上面三个类型选择器样式都是一样的，可以通过类型选择器列表来减少重复代码。

1
2
3
4
5
6
7
8
9
<head>
  <style>
    h1,
    h2,
    p {
      text-align: center;
    }
  </style>
</head>

id selector

1
2
3
4
5
6
7
8
#menu {
  width: 80%;
  background-color: burlywood;
  margin-left: auto;
  margin-right: auto;
}

<div id="menu">

class selector

1
2
3
4
5
6
7
8
.menu {
  width: 80%;
  background-color: burlywood;
  margin-left: auto;
  margin-right: auto;
}

<div class="menu">

pseudo-selector 伪选择器

1
2
3
a:visited {
  color: grey;
}

新增 styles.css 文件

上面通过 style 标签添加样式，由于会有更多的样式，最好将所有的样式放在一个单独的文件中，然后链接它。

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

适配移动端

为了让移动端的样式看起来与台式机和笔记本电脑相似，需要添加特殊的 meta 元素。

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

使用 div 元素

和之前的其它内容元素不同，div元素主要用于设计布局目的。

font-family fallback

可以通过添加逗号分隔另一个字体名称，来为字体系列添加备选字体。用于解决字体不存在的情况。

hr

hr 元素用于在页面中添加水平线。border-width 默认为 1px。