本系列将讨论CSS，以期帮助新老开发者更好地理解CSS。

我为什么要写这个？

作为在本地训练营中指导学生的人，我很少对CSS表示赞赏。大多数原因是许多新开发人员在使用CSS时感到沮丧。我希望本系列可以证明CSS不是您的敌人。

无论您是否从该系列中学到什么，我都希望您喜欢阅读。

这是给谁的？

本系列适用于想学习CSS或对CSS有更好了解的人（无论是否是初学者）。

我多久发布一次？

我计划每周至少发布一次新零件，具体取决于是否需要将主题拆分为多个零件。

使用样式

让我们从完整的基础开始。我们如何使用样式？我们可以通过三种不同方式使用样式-内联样式，style标记和link标记。

内联样式

内联样式是最容易理解的，因为它是我们使用样式的所有不同方式中最冗长的。内联样式意味着您正在使用styleHTML标签的属性来指定该元素的样式。

<div style="background-color: lightblue; border: 1px solid blue;">
  <p style="font-size: 12px; font-weight: bold;"></p>
</div>

现在，内联样式并不是真正可管理的，特别是如果您要样式化的元素很多。幸运的是，我们有style标签，因此我们可以集中样式。

style 标签

样式是一个常规HTML元素，通常位于head标记的子元素中。我之所以这样说，通常是因为您可以从技术上将其放入body标签中，但不建议这样做。

<style>
  div {
    background-color: lightblue;
    border: 1px solid blue;
  }

  p {
    font-size: 12px;
    font-weight: bold;
  }
</style>

注意：您style的HTML文档中可以有多个标签，但实际上并不需要这样做。

<style>
  div {
    background-color: lightblue;
    border: 1px solid blue;
  }
</style>

<style>
  p {
    font-size: 12px;
    font-weight: bold;
  }
</style>

大！现在，我们拥有一个可以放置样式的中心位置，但是如果我们想重用样式，该怎么办？我们真的不想在各处复制和粘贴样式。很快就会变得难以处理。

这是外部样式和link标签进入的地方。

link 标签

该link标签可以让我们对外部资源链接到我们的HTML文档。我们可以将样式从style标记移到.css文件中。

我们可以创建一个名为的文件style.css并将其链接到我们的HTML中。

/* style.css */

div {
  background-color: lightblue;
  border: 1px solid blue;
}

p {
  font-size: 12px;
  font-weight: bold;
}

然后，我们可以链接此CSS文件。

<link href="style.css" rel="stylesheet">

如果我们有多个CSS文件，我们也可以链接所有这些文件。

<link href="style.css" rel="stylesheet">
<link href="style2.css" rel="stylesheet">
<link href="style3.css" rel="stylesheet">

写作风格？

既然我们知道如何将CSS合并到HTML中，我们如何实际编写它？

样式块由几部分组成-选择器和属性-名称-值对。您可以根据需要具有任意多个“属性-名称-值”对。

selector {
  property-name: property-value;
}

用分号（;）结束每个属性名称/值对很重要，因为它表示该对的结尾。

块中存在的任何“属性名称/值”对都将应用于选择器。

div {
  background-color: lightblue;
  border: 1px solid blue;
}

p {
  font-size: 12px;
  font-weight: bold;
}

divHTML中的所有元素将具有浅蓝色背景色和蓝色边框，而所有p元素将具有12px的字体大小和粗体。

如果我们希望某些div元素具有不同的背景颜色或边框怎么办？如果我们只希望其中一个p元素的字体大小为12px怎么办？这就是本系列的下一个主题-选择器。

PS。希望您喜欢我们关于CSS的第一个主题！