CSS Codes List

层叠样式表 (CSS) 是用于描述网页外观的语言，并且是 HTML 页面的主要部分。它向分发者展示了如何调整文本、图像和其他媒体等元素，使其适合显示，这使得网页设计在视觉上更具吸引力且对用户友好。最终，我们提供了一个每个 Web 开发人员都必须知道的完整 CSS 代码列表，以支持他们的工作。

选择器

CSS 中的选择器是用于突出网页和 HTML 元素部分的工具。借助它们，我们可以指导开发人员定位到 Web 浏览器中的特定元素，然后进行所需的样式设计。选择器是允许以期望的准确性和选择性应用样式的核心问题和技术。

选择器类型

CSS 提供了多种选择器类型，每种都有特定的用途

1. 元素选择器

工具栏选择器通过名称帮助查找 HTML 元素。它可以配置为将样式应用于您希望用特定属性进行分类的任何元素。

示例

此样式规则是页面 CSS 的基础，因为它将所有 <p> 元素的字体大小设置为 16px，并将颜色值设置为 #333。

2. 类选择器

类选择器定位所有具有已设置的特定类属性的元素。使用样式选项，共享元素可以具有相同的样式。

示例

此标签选择所有具有 class="button" 属性的元素组，并为它们提供蓝色背景色、白色文本颜色、10px 的上下垂直内边距以及 20px 的左右水平内边距。

3. ID 选择器

井号 (#) 是 ID 的快捷方式。它专注于具有特定 ID 属性的单个元素，该 ID 属性应与匿名生成的 ID 系统不同。

示例

此选择器定位具有 id="header" 的元素。它将其字体大小更改为 24px，并将字体粗细设置为粗体。

4. 通用选择器

此选择器不是使用类名或 ID，而是为网页上的所有元素提供全局、普遍的样式。由于其通用性，“yet”这个词很少使用。

示例

在这里，box-sizing 是一个为所有元素添加 box-sizing 属性的选择器，它在网页上创建统一的盒模型。

组合器和伪类

CSS 还提供了组合器和伪类来进一步细化选择器

组合器

带有组合器的选择器的作用是选择在元素之间存在给定相关关系的元素。

后代组合器（空格）： 最后，选择是另一个组件的后代组件。

子组合器（>）： 选择一个元素，该元素是另一个元素的子元素。

相邻兄弟组合器（+）： 我们更喜欢更改其前面的元素。

通用兄弟组合器（~）： 转发指定元素子元素的子元素的所有调色板元素。

伪类

伪类用于为不同特殊状态的元素设置样式。

:hover: 在用户将鼠标悬停在元素上时显示元素的样式，非常方便。

:nth-child(): 根据元素在其兄弟姐妹和组中的位置来选择元素。

:first-child: 选择其父元素的第一个子元素。

选择器是 CSS 的核心，开发人员使用它们来精确地设置 HTML 标签的样式。通过了解不同类型的选择器、组合器和伪类，Web 开发人员能够使网页更具视觉吸引力，并同时保持其结构。成为选择器科学的一部分，您将获得对网站外观的更高水平的控制，从而提供更好的用户体验和更具吸引力的设计。

盒模型

盒模型是 CSS 中的基本模型，它限制了对象在 Web 文档中的放置方式。它包含四个主要组件：高度、宽度、内边距和边框外边距。盒模型功能是任何 Web 布局不可或缺的一部分，以便进行有效的样式设计。

盒模型的必要系统组成部分

内容： 内容一词实际上是指包含内容的 HTML 标签，例如文本、图像和媒体属性。网页上内容将要显示的区域需要通过宽度和高度设置进行改进。

内边距是在内容和元素边框之间创建的空间。添加的外边距将内容空间移至侧面，使其更易读且美观。这可以通过“padding”属性完成。

边框： 边框位于包含元素内容的元素内边距之外。这创建了一条由视觉图像标记的线条，位于元素内容及其周围其他元素之间。边框通过 border 属性进行配置，该属性定义了所需的颜色、宽度和样式。

外边距： 元素外部没有内容的白色区域；它可以被视为元素末端及其周围其他元素边界。外边距，就像元素之间创建的图形空间一样，有助于控制页面组织和布局的定位。可以使用 margin 属性来管理其值。

盒模型示例

考虑以下用于样式化盒子的 CSS 代码

在此示例中，宽度和高度决定了项目将要定位的尺寸。内边距为 20 像素，内容边缘与边框分离。边框包括内容和内边距周围的 1 像素黑色实线边框。十像素的空间超出了盒子边框，并且现在与其他元素隔开。

盒模型大小

默认情况下，浏览器将这些属性设置为内容区域的大小。但是，可以使用 box-sizing 属性调整 box-sizing 的行为。设置 box-sizing: border-box: 元素的内边距和边框将包含在总宽度和高度中。因此，指定的宽度和高度将适用于整个盒子。

盒模型是 CSS 中最早的网格系统，它在各种屏幕上渲染页面时定义元素的大小和位置。了解内容、内边距、边框和外边距如何影响布局，开发人员可以构建一个强大而有吸引力的布局，并拥有良好的结构组织。虽然盒模型可能看起来很复杂，但它是精确控制元素（在谈论定位和间距时）的关键，从而带来更好的设计和更好的用户体验。

排版

除了排版，网页设计还依赖于其提高可读性和可访问性以及创造出色视觉效果的能力。CSS 具有用于样式化文本的属性组，例如字体系列、大小、粗细、样式、颜色和间距的外观。

字体系列

font-family 属性控制文本使用的字体类型。它为设计人员提供了一个机会来维护一个排序的字体系列列表，这样您就可以拥有备用字体，以防设计人员喜欢的字体不可用。

示例

以下 CSS 规则将 Arial 字体设置为整个网站的默认字体。如果 Arial 不可用，则显示 Arial 作为备用字体，然后是通用无衬线字体。

字体大小

font-size 属性指示文本的大小。它可以以各种单位指定，这些单位表示其区域，如像素 (px)、em (em)、rem (rem)、百分比 (%) 以及许多其他关键字，如 small、medium 和 large。

示例

此目的是将 <h1> 标题的字体大小设置为 32 像素。

字体粗细

font-weight 属性设置文本的厚度或粗细。准确地说，它可以具有度量（数字）或精确值（精确数字），例如，或关键字（例如，“Global Hunger”、“Sustainable Agriculture”、“Hunger and Poverty”等）。例如，normal、bold）。

示例

通过此样式定义，段落的字体粗细设置为 normal。

字体样式

font-style 属性设置要使用的字体样式（例如，斜体或普通字体）。

示例

此 CSS 规则将被视为强调的文本的字体类型定义为斜体。

文本颜色

颜色调整定义文本的颜色。

示例

通过此 CSS 规则，段落的文本颜色设置为深灰色：#333。

文本对齐

text-align 负责其父容器内的文本对齐，即 text-left、text-right、text-center 或 text-justify。

示例

通过此 CSS 规则，标题与 <h1> 居中对齐。

行高

line-height 属性将处理一行文本的高度。它可以给出一个数值、百分比，甚至是一个术语或关键字的形式（例如，normal）。

示例

此 CSS 规则定义了整个网页下栏的行高：字体大小的 6 倍。

字母间距

两个主要的 letter-spacing 属性设置是字符之间的间距和单词之间的间距。

示例

此规则是 CSS 为 <h2> 标题在字符之间添加 1 像素的行间距。

字间距

此 font-spacing 选项侧重于分配给单词的空间。

示例

此代码示例用于在段落的各个单词之间添加 2 像素的间距。

文本装饰

“text-decoration”属性用于通过下划线、上划线、删除线或无效果来增强文本的视觉外观。

示例

CSS 规则用于删除锚链接的链接下划线配置。

字体，无论是排版还是它们对网站的可读性、可访问性以及整体视觉吸引力都有着非常大的影响。通过强调 CSS 的字体系列、大小、粗细、样式、颜色和间距等功能，开发人员可以开发出有吸引力且美观的 Web 排版。掌握 efficiently 管理措辞的艺术可以改善环境，使信息清晰，并帮助读者轻松地消费内容。

颜色和背景

颜色

命名颜色： CSS 允许创建特定的颜色，例如 red、blue、green 等。

十六进制颜色： 数字将以正式的语气使用；例如，红色是 #ff0000。

RGB 和 RGBA： RGB 颜色带 alpha 通道意味着使用红色、绿色和蓝色值进行颜色表示，并且还可以用于透明度显示。

HSL 和 HSLA： 颜色是复杂 RGB 系统的组成部分，它将色相、饱和度和亮度值与额外的 alpha 通道结合起来。

背景

背景颜色： 使用填充颜色作为背景创建共享图案。

背景图片： 图像成为所选元素的背景。

背景位置： 将背景图像定位为起始位置的组件。

背景重复： 描述背景图像在给定空间中应如何重复。

背景附件： 指定背景图像在页面滚动时是固定不变还是与其他元素一起滚动。

布局

Flexbox

指定允许根据其容器选择和排列项目的灵活布局。

提供 display: grid、row、grid 和 justify-content 等属性，以实现更灵活的布局控制。

这些模型的最佳匹配是创建响应式和动态的团队协作。

网格

允许将块和元素放置到行和列中的布局系统，这被称为——网格系统。

提供 display: boxes、lines、grid-template-columns、grid-template-rows 等属性以实现精确放置。

几乎毫不费力地实现了复杂的或基于网格的布局。

结论

因此，掌握这些任务的开发人员掌握了动态布局技术，并应用了吸引用户的视觉样式。因此，他们还能够开发可以在所有屏幕尺寸的各种数字设备上运行的软件。了解如何很好地使用这些 CSS 属性是当今创建出色网站的关键组成部分。