CSS 闪卡

类别赞助商

CSS（层叠样式表）是由 Håkon Wium Lie 创建的用于描述用标记语言编写的文档的外观和格式的样式表语言。它是万维网的关键技术，旨在将文档的表现与结构分开。CSS 以其灵活性和强大的样式能力著称，能够精确控制页面元素的布局、颜色、字体和动画。该语言提供高级选择器和属性，为开发人员提供工具来创建响应式、视觉上吸引人的界面。CSS 还支持样式的模块化和重用，保持性能并实现跨不同浏览器和设备的一致设计。

我们的闪卡应用包含精心挑选的 CSS 面试问题及全面的答案，可以有效地为您准备任何需要 CSS 知识的面试。IT 闪卡不仅是求职者的工具——无论您当前的职业计划如何，这是一个加强和测试您知识的好方法。定期使用该应用有助于您保持最新的 CSS 趋势，并保持高水平的技能。

我们的应用中的 CSS 闪卡示例

从App Store或Google Play下载我们的应用程序，获取更多免费的闪卡，或订阅以访问所有的闪卡。

CSS 中类和 ID 有什么区别？

类和标识符是CSS工具，允许你为特定的HTML元素设置样式。虽然这两种选择方法几乎相同，但也有一些区别。

1. 唯一性：类是非唯一的，这意味着你可以在许多不同的元素上使用相同的类。另一方面，标识符在页面上是唯一的，这意味着每个标识符只能在每个页面上使用一次。

2. 具体性：与类相比，标识符更具特定性。这意味着如果样式冲突，标识符的样式将覆盖类的样式。

3. JavaScript 应用：标识符通常用于使用JavaScript操作HTML元素，而类则较少用于此类目的。

4. 可扩展性：页面上的许多元素可以重新使用类样式。标识符不够灵活，更可能用于设置特定部分的样式。

请注意，最佳实践之一是为CSS样式使用类，为JavaScript使用标识符。

如何将 CSS 样式表链接到 HTML 文档？

CSS样式表可以通过以下方式之一附加到HTML文档：

1. **内联样式：** 使用`style`属性直接将样式附加到HTML元素。例如：

<p style="color:red;">这段文本是红色的</p>

通常情况下，此方法很少使用，主要用于"一次性"的样式更改。

2. **内部CSS：** 样式包含在HTML文档的`<head>`部分的`<style>`标签中。示例：

<head>
     <style>
       p { color: red; }
     </style>
   </head>

对于单页HTML文档，这种方法很有用。

3. **外部CSS：** 附加CSS的最常用方法。CSS样式表写在一个单独的文件中（通常带有.css扩展名），并通过`<head>`部分的链接附加到HTML文档。示例：

<head>
     <link rel="stylesheet" type="text/css" href="styles.css">
   </head>

由于它使得更新、维护和分享样式表到不同的HTML文档变得容易，所以这种方法最常被使用。

什么是 CSS 伪类，并举例说明它们的用途。

CSS中的伪类是选择器的关键字添加，它定义了给定元素的特定状态。它们不仅允许基于直接包含在代码中的信息进行HTML元素的样式设计，还允许基于元素的某些上下文或状态。

例如，:hover伪类允许鼠标悬停在元素上时对元素进行视觉改变。其他有用的伪类包括:active（当元素处于活动状态或被点击时）,:visited（当链接被访问过时）或:first-child（样式化给定元素的第一个子元素）。

示例代码展示了如何使用:hover伪类在鼠标悬停时更改给定元素的背景颜色：

button:hover {
  background-color: red;
}

在这种情况下，当用户用鼠标悬停在按钮上时，按钮的背景颜色将变为红色。这种交互效果如果没有伪类的使用将不可能实现。

CSS 中定位元素的方法是什么，它们有哪些限制？

在CSS中，我们有几种定位元素的方法可以选择：

1. 静态：这是默认设置，元素按HTML结构的设定一个接一个地堆叠。元素的位置无关紧要，不能使用"top"，"right"，"bottom"，或 "left" 属性来改变。其限制是对元素放置位置的控制能力不足。

2. 相对：允许您根据其原始位置改变元素的位置。位置由"top"，"right"，"bottom"，"left"属性确定，但不影响其他元素的布局。其限制是元素只是被移动，而未从正常的文档流程中移除。

3. 绝对：元素的位置是相对于最接近的、不同于静态定位（相对，绝对，固定，粘性）的较高结构元素而确定的。如果没有这样的元素，位置就相对于文档本身确定。该元素从正常文档流程中移除，并不影响其他元素的布局。其限制是需要控制定位上下文。

4. 固定：元素的位置是相对于浏览器边缘确定的。这样的元素即使在滚动页面时也不会移动。它从正常文档流程中移除，并不影响其他元素的布局。这种方式的限制是它可能会覆盖掉被永久放置的其他元素。

5. 粘性：这是相对和固定定位的结合体。元素像静态对象一样行动，直到其顶部达到一个特定的位置（例如，屏幕的顶部），然后元素就表现得如同它是固定定位的。其限制在于需要浏览器的支持。