你应该知道的 Vanilla CSS 基础知识-css教程-PHP中文网

你应该知道的 Vanilla CSS 基础知识

DDD

发布： 2024-12-28 05:29:10

原创

520 人浏览过

VANILLA CSS BASICS YOU SHOULD KNOW

CSS 基础知识（层叠样式表）

在 CSS 中，我们获得一个目标并从网页中选取我们想要处理的特定元素。

CSS 是如何工作的。

CSS主要有2个部分，也就是说；

选择器
声明：这又分为：属性，然后是值。

CSS 的三个级别；

内联 CSS

   * Here, CSS is used within the target element.
   * For example:`<p color="white"> This is inline CSS </p>`

登录后复制

内部 CSS

  * Here, CSS is written within the html file above the body tag and within the head tag.
  * This is done with the help of `<style>` tags.

登录后复制

外部 CSS

对于这种情况，CSS 文件链接到index.html 文件。
在编译 CSS 代码时，CSS 也是基于优先级的。在这种情况下，内联 CSS 始终具有最高优先级，其次是内部 CSS，然后是外部 CSS。

CSS 选择器

这些选择器使我们能够知道如何从 html 文件中选择元素。对于CSS选择器，我们只需要知道我们想要使用的选择器的类型，以及它对目标元素的作用。

以下是一些常用的 CSS 选择器。

通用选择器：使用此类选择器时，html 文件中的所有内容（所有 html 标签）都会被定位或选择。

例如：
*{
背景颜色：灰色
}
这意味着所有网页的背景颜色将为灰色

个人选择器

这针对单个元素，例如，
相应地定位index.html 中的所有段落。
如果您希望每个段落都有自己的颜色或外观，我们可以选择 *Class 或 Id 选择器。

类和 ID 选择器

对于类选择器，我们在应用时使用点。然后对于 id 选择器，我们在应用时使用井号 (#)。

例如；
.警告{
对齐项目：居中；
}

id 名称不应多次应用或使用，尽管即使这样做，在编译过程中我们的文件中也不会抛出错误。但这将是一种糟糕的编码实践。
但是对于类名，您可以多次使用同一个名称。

子选择器

在此选择器中，我们定位父元素的子元素。
例如：nav ul{ 显示：柔性 }
这意味着我们的目标是 ul 元素，它是父元素 nav 的子元素。

我们还有其他选择器

就像第 n 个子选择器。

最常用的选择器是类和 id 选择器

笔记：

在 CSS 中使用颜色时，最好的做法是使用标准颜色代码（如 #4d4d4d），这与红色或绿色等文字颜色不同。
这是因为，不同的浏览器以不同的方式查看颜色，但如果使用颜色代码，这就像标准的整体颜色，即使在不同的浏览器中也会被视为相同的颜色。

边距和填充。

边距是距外部的空间量，内边距是距文本内部的空间量。*

注意：我们仅将FOCUS应用于输入标签。

CSS 上的位置

绝对；

这根据父网页给出了目标的位置，即整个网页的边框。

亲戚；

这根据当前目标所在的主体或框来确定目标元素的位置，即取决于目标的原始位置。

粘性；

这为目标提供了位置，在此之后，它不会移动到另一个位置。

已修复；

应用此后，目标将不会更改或修改。它将固定在这个位置，因为它已被分配。