在网页设计的世界里，HTML（HyperText Markup Language）和CSS（Cascading Style Sheets）是一对形影不离的好伙伴，HTML负责网页的结构，而CSS则负责网页的外观，想要让你的网页穿上华丽的外衣，就得学会如何在HTML中调用CSS。

我们得了解CSS有两种主要的“召唤”方式：

1. **内部样式**：直接在HTML文档内部定义CSS样式，这种方式适合快速测试或对单个页面进行样式设置，你可以在HTML文档的``部分使用`

这是一个标题

这是一个段落。

```

2. **外部样式**：将CSS样式放在一个单独的文件中，并在HTML文档中通过``标签引入，这种方式适合于多个页面共用一套样式，使得维护和更新变得更加方便，你需要创建一个CSS文件，比如叫`styles.css`，并在其中定义样式：

```css

/* styles.css */

body {

background-color: lightblue;

h1 {

color: navy;

margin-left: 20px;

```

在HTML文件中通过``标签引入这个CSS文件：

```html

这是一个标题

这是一个段落。

```

在实际应用中，外部样式表更为常见，因为它可以帮助你保持代码的整洁和可维护性。

我们聊聊CSS选择器，选择器是CSS的“寻宝图”，它帮助你找到HTML中的特定元素，并为其应用样式，这里有一些基本的选择器：

- **标签选择器**：根据HTML标签来选择元素，p`会选择所有的`

`标签。

- **类选择器**：使用点`.`加上类名来选择元素，.box`会选择所有class属性为`box`的元素。

- **ID选择器**：使用井号`#`加上ID名来选择元素，#header`会选择ID为`header`的元素。

使用这些选择器，你可以精确地控制网页中每个元素的外观。

```css

/* 选择所有的段落 */

p {

color: red;

/* 选择class为'box'的元素 */

.box {

border: 1px solid black;

/* 选择ID为'header'的元素 */

#header {

background-color: yellow;

```

别忘了CSS的层叠性质，如果同一个元素被多个选择器选中，那么最后定义的样式会覆盖之前的样式，这就是为什么有时候你的网页看起来和你预期的不一样——可能是CSS的层叠规则在起作用。

了如何在HTML中调用CSS，并且了解了CSS选择器和层叠规则，你就可以开始打造自己的风格独特的网页了，实践是学习的最佳方式，所以不要害怕尝试和犯错，随着时间的推移，你会越来越熟练，最终成为一名出色的网页设计师。