青训营笔记-CSS

我的兔子先生
84 阅读5分钟

这是我参与「第四届青训营 」笔记创作活动的第2天

  • CSS 初步

    这个模块介绍了使用 CSS 的基础知识，包括选择器和属性，编写 CSS 的规则，将 CSS 应用于 HTML 的方法，如何在 CSS 中指定长度、颜色和其他单位，层叠与继承，盒模型基础以及 CSS 的调试。

  • 构建 CSS 块

    • 本模块承接CSS 初步，进行进一步的学习——既然你已经熟悉了 CSS 的语言和语法，有了一些使用 CSS 的基本经验，是时候再深入一些了。本模块涉及了层叠与继承、可用的所有种类的选择器、单位、尺寸、样式化背景和边框、调试，还有更多。
    • 这样做的目的是，在继续深入到更加具体的规则，例如样式化文本和CSS 布局前，为你提供一个用于编写堪用的 CSS 的工具箱，帮你理解所有必要的理论。

  • 样式化文本

    这个模块介绍基础的文本样式，包括字体属性的设置，粗体和斜体，行和字母间距，阴影和其他文本功能。我们通过在网页上设置特定的字体，指定列表和链接的样式来完成这一模块。

  • CSS 布局

    到目前为止，我们已经学习了 CSS 基础知识、如何设置文本样式、如何设计并操作内容所在的框。现在应该考虑如何把你的框以合适的位置放置在视口内和其他框旁边了。我们已经学习了在深入 CSS 布局之前需要学会的必要知识，下一步我们通过学习设置 display 属性、使用新的布局工具如弹性盒（flexbox），CSS 网格和定位、以及你仍想知道的一些传统技术，来深入学习 CSS 布局。

解决常见的 CSS 问题

使用 CSS 解决常见问题解释了怎样使用 CSS 解决创建一个网页时常遇到的问题。

从这里开始，你大致就能在 HTML 元素和它们的背景上应用颜色、改变形状尺寸和元素的位置、向元素上添加并定义边框。不过一旦你牢固掌握了即便是 CSS 最基础的部分，也没有很多做不到的事情。学习 CSS 最棒的一件事情就是，一旦你知道了基本的原理，即使你实际上不知道怎么做，你通常还是会很清楚什么能做到而什么不能做到！

内容和大小 #

根据 display 值、设置的尺寸以及包含的内容，方框具有不同的行为。这种内容可能是更多的方框（由子元素生成），也可能是纯文本内容。无论是哪种方式，默认情况下，内容都会影响方框的大小。

简单的选择器 #

最直接的选择器组针对 HTML 元素以及类、ID 和其他可能添加到 HTML 标签的属性。

通用选择器 #

通用选择器——也称为通配符——匹配任何元素。

* {
  color: hotpink;
}

此规则使页面上的每个 HTML 元素都具有热粉色文本。

类型选择器 #

类型选择器直接匹配 HTML 元素。

section {
  padding: 2em;
}

此规则导致每个 <section> 元素的所有边都有 2em 的 padding。

类选择器 #

一个 HTML 元素可以在其 class 属性中定义一个或多个项目。类选择器匹配应用类的任何元素。

<div class="my-class"></div>
<button class="my-class"></button>
<p class="my-class"></p>

任何应用了该类的元素都将变为红色：

.my-class {
  color: red;
}

请注意，. 只存在于 CSS 中而非 HTML 中。这是因为 . 字符指示 CSS 语言匹配类属性成员。这是 CSS 中的一种常见模式，其中使用特殊字符或字符集来定义选择器类型。

具有 .my-class 类的 HTML 元素仍将与上述 CSS 规则匹配，即使它们有多个其他类，如下所示：

<div class="my-class another-class some-other-class"></div>

这是因为 CSS 在查找包含已定义类的class 属性，而不是完全匹配该类。

类属性的值几乎可以是您想要的任何值。但有一件事可能会让您失望，那就是您不能用数字来开始一个类（或一个 ID），比如 .1element。可在规范中阅读更多内容。

ID 选择器 #

具有 id 属性的 HTML 元素应该是页面上具有 ID 值的唯一元素。您可以使用ID 选择器选择元素，如下：

#rad {
  border: 1px solid blue;
}

此 CSS 会将蓝色边框应用于 id 为 rad 的 HTML 元素，如下所示：

<div id="rad"></div>

与类选择器 . 类似，使用 # 字符指示 CSS 查找与其后面的 id 匹配的元素。

如果浏览器遇到多个 id 实例，它仍会应用与其选择器匹配的任何 CSS 规则。但是，任何具有 id 属性的元素都应该具有唯一的值，因此除非您为单个元素编写非常具体的 CSS，否则请避免使用 id 选择器应用样式，因为这意味着您无法重复使用其他地方的那些风格。

属性选择器 #

您可以使用属性选择器查找具有特定 HTML 属性或具有特定 HTML 属性值的元素。可通过用方括号 ([ ]) 将选择器括起来的方式指示 CSS 查找属性。

[data-type='primary'] {
  color: red;
}

该 CSS 查找具有 data-type 属性且值为 primary 的所有元素，如下所示：

<div data-type="primary"></div>

除了查找 data-type 的特定值之外，您还可以查找具有该属性的元素，而不管其值如何。

[data-type] {
  color: red;
}

<div data-type="primary"></div>
<div data-type="secondary"></div>

这两个 <div> 元素都将具有红色文本。

您可以通过向属性选择器添加 s 运算符来使用区分大小写的属性选择器。

[data-type='primary' s] {
  color: red;
}

这意味着，如果一个 HTML 元素的 data-type 值是 Primary 而非 primary ，则其不会得到红色文本。您可以使用 i 运算符来执行相反的操作——不区分大小写。

除了 case 运算符，您还可以访问与属性值内的字符串部分匹配的运算符。

avatar
文章
阅读
粉丝