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

希望每个元素看起来不一样怎么办？输入 CSS 选择器！元素选择器

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

h1 {
  字体大小：32px；
  字体系列：Arial；
  字体粗细：500；
}

这个规则集中在所有人身上

元素，设置其字体大小、系列和厚度。元素选择器非常适合提纲，例如为整个页面设置风格指南。但让我们面对现实。不是全部

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

类选择器

拯救课程！想要两个

标签看起来不一样吗？添加课程：

<p class="big red">这个词又大又红。</p>
<p class="small blue">这篇文章很小，呈蓝色。</p>

每个

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

.大{
  字体大小：100px；
}

。小的 {
  字体大小：9px；
}

。红色的 {
  红色;
}

。蓝色的 {
  颜色: 蓝色;
}

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

ID选择器

请使用唯一的元素 ID。看看这个：

<p id="name">我的名字是诺兰！</p>

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

#name {
  文本装饰：下划线；
}

简单吧？

风格冲突

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

<p id="red" class="blue">我会是红色还是蓝色？</p>

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

<p id="red" class="underline">我的风格是由三个规则集决定的！</p>

p {
  字体大小：12px；
  颜色：黑色；
  文本装饰：无；无；
}

.下划线{
  文本装饰：下划线；
}

＃红色的 {
  红色;
}

字体大小为12px的红色和下划线。 ID 类比类好，类会覆盖元素选择器。这种级联风格使您的页面看起来非常优雅，无需重复代码。

挑战

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

尝试不同的风格，看看哪些规则获胜。你能找出原因吗？

谢谢你的阅读！如果你想让我在这个系列中讨论任何其他主题，请在评论中告诉我，或者只是让我知道你有多喜欢这个系列！

以上是进一步完善造型的详细内容，请关注其他相关文章！

最新文章

相关文章