进一步完善造型

嘿，欢迎回到边编码边学习：HTML 和 CSS！今天，我们将深入探讨造型的世界。到目前为止，我们一直在直接设计元素的样式。但是如果你有两个

该怎么办？元素并希望每个元素看起来都不同？输入 CSS 选择器！

元素选择器

您已经熟悉这些，但让我们回顾一下：

h1 {
  font-size: 32px;
  font-family: Arial;
  font-weight: 500;
}

此规则集针对所有

元素，设置其字体大小、系列和粗细。元素选择器非常适合大纲，例如为整个页面设置样式指南。但让我们面对现实吧，并非所有

标签看起来应该是一样的。对于更具体的造型，我们需要加强我们的游戏！

类选择器

课程来救援！想要两个

标签看起来不同？添加课程：

<p class="big red">This text is BIG and red.</p>
<p class="small blue">This text is small and blue.</p>

每个

标签有两个类。在 CSS 中，使用 .:
定位这些类

.big {
  font-size: 100px;
}

.small {
  font-size: 9px;
}

.red {
  color: red;
}

.blue {
  color: blue;
}

繁荣！应用样式。您可能会问，“为什么不将样式合并到更少的类中呢？”好问题！我喜欢保持课程的灵活性。你永远不知道什么时候你会想重复使用没有蓝色的小东西。

ID选择器

对于唯一元素，请使用 ID。看看这个：

<p id="name">My Name is Nolan!</p>

谨慎使用 ID，每页仅使用一次。在 CSS 中使用 #:
定位它们

#name {
  text-decoration: underline;
}

简单吧？

风格冲突

现在，如果一个元素同时具有类和 ID 会怎样？像这样：

<p id="red" class="blue">Will I be red or blue?</p>

它会变红！为什么？因为 ID 比类更具体。这是一个简单的例子：

<p id="red" class="underline">I’m styled by three rulesets!</p>

p {
  font-size: 12px;
  color: black;
  text-decoration: none;
}

.underline {
  text-decoration: underline;
}

#red {
  color: red;
}

文字变成红色并带有下划线，字体大小为12px。 ID 胜过类，而类又会覆盖元素选择器。这种级联样式使您的页面看起来很优雅，无需重复代码。

挑战

是时候升级你的“关于我”页面了！这是你的使命：

• 设置

  、

  和

  的默认样式使用元素选择器。

• 在您的名字下添加带有

  的标语使用 ID 对其进行标记和样式设置。

• 使用类选择器让其他文本变得有趣。

尝试相互冲突的风格，看看哪种规则获胜。你能找出原因吗？

感谢您的阅读！如果您希望我在本系列中探讨任何其他主题，请在评论中告诉我，或者只是让我知道您对本系列的喜爱程度！

以上是进一步完善造型的详细内容。更多信息请关注PHP中文网其他相关文章！