什么是 CSS（层叠样式表）–完整指南

作者： / 22. 3 月 2024 / 发表评论

你需要了解的关于 CSS（层叠样式表）的一切信息–它是什么、有什么用、如何使用 CSS 格式化你的网页。

什么是 CSS

CSS 代表层叠样式表。 在翻译中，它的意思是层叠样式表。 CSS 是一种可视化格式化网络文档的简单机制。

在 HTML 文档中应用 CSS 时，可以修改字体、颜色和间距等元素。 这样，您就可以在网站的多个页面上保持一致的外观。 CSS 将内容与设计分离开来，确保了网站的可访问性和有效的样式设计，改善了用户体验。

在学习 CSS 之前，我建议您首先查看本完整的 HTML 教程 .

CSS 的历史

CSS 的正式名称是层叠样式表，它的诞生可以追溯到 1996 年，当时W3C（万维网联盟）发布了CSS1。 CSS 的引入彻底改变了网页设计，提供了一种新的、更有效的网页样式设计方法。 从那时起，CSS 已经发展了多个版本。在 CSS1 之后推出的CSS2.1 引入了固定定位和 z-index 等功能。 最新的发展版本CSS3 将该规范分成了多个模块，并引入了动画、用于布局的 flexbox 和用于响应式设计的媒体查询等新功能。

当你了解了 CSS 及其历史背景后，你就能更好地在网络开发中充分发挥它的潜力。

CSS 无处不在

这种语言用于对 Internet 上的大多数网站进行视觉风格化。例如，CSS 用于定义页面的布局、颜色和整体页面样式。您可以使用 CSS 设置字体、图像、页面背景、页面布局等。

在 WordPress中，CSS 使用单独的主题。 它决定了它们的布局、整体设计和风格。

CSS 基础知识

了解 CSS 的基础知识包括学习 CSS 的语法和结构，以及如何使用选择器和属性对网页元素进行样式设置。

语法和结构

CSS 包含一系列定义 HTML 元素显示方式的规则。 这些规则由选择器和声明组成。 声明本身由属性及其相应值组成，其结构如下

selektor {
   vlastnosť: hodnota;
}

选择器是为网页上要编辑的元素指定的名称。这些声明用大括号括起来{} ，并声明了要如何为所选元素设计样式。

选择器和功能

有不同类型的选择器：

  • 根据标签名称选择 HTML 元素的元素选择器。
  • 根据class 属性选择元素的类选择器。 它们的前缀是. (dot)。
  • ID 选择器可根据id 属性（前缀为# ，哈希符号）选择唯一元素。

每个选择器后面都可以跟一个或多个声明，声明是由冒号分隔的属性值对，以分号结束。

属性是要修改的 HTML 元素的各个方面，如color,font-size,margin,padding 等。规则代表整个语句，包括选择器和声明块。

.trieda {
   color: blue;
   font-size: 14px;
}

每个属性后面都有一个值，用于指定如何将该属性应用于元素。 每个属性值对都是一个声明。

了解了语法、选择器和 CSS 属性的基础知识后，你就可以开始为网页元素设计样式，从而创建具有视觉冲击力的网页内容。

CSS 集成

将 CSS 整合到 HTML 代码中，有助于控制网站的表现形式。 无论你是喜欢将样式与标签紧密结合，平衡可访问性和可维护性，还是将它们完全分开，CSS 都能为你提供多种应用样式的方法。

内联 CSS

内联 CSS 是指使用style 属性直接在 HTML 标记中应用样式。 这种方法一般用于对单个 HTML 元素应用独特的样式。 这里有一个例子：

<p style="color: blue;">Tento text je modrý.</p>

使用内联 CSS 会影响 HTML 文档的可维护性，因为样式不是集中管理的，当同一样式有多个实例时就很难管理。

内部 CSS

内部 CSS 样式定义在 HTML 文档<head> 部分的<style> 标记中。 在处理单个 HTML 文档并希望使用该页面独有的样式时，这是一个可行的选择。

<head>
<style>
  body {
    background-color: lightgrey;
  }
</style>
</head>

你不需要任何额外的文件，而且样式会在整个页面中一致使用，但与内联 CSS 一样，内部样式不支持在多个页面中重复使用。

外部 CSS

使用外部 CSS 从 HTML 文档中创建一个指向单独.css 文件的链接，该文件可控制网站上多个页面的样式。 这种方法是通过在<head> 部分使用<link> 标签来实现的：

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

您的样式包含在一个扩展名为.css 的文件中，便于编辑和维护。 您可以在文本编辑器中编写 CSS，然后将带有样式的模板与 HTML 文件一起上传。 这是编辑多个具有一致设计的 HTML 文档的最有效方法。

编辑文本样式

在 CSS 中，你可以控制文本的视觉效果，从字体家族到字母间距。 您可以使用属性来定义文本在网站上的显示方式，确保可读性和美观性。

字体和排版

为网站选择字体时，既要考虑美观，也要考虑可读性。字体族决定了字体的类型，它可以是一个特定的名称，如 “Arial”，也可以是一个通用的组别，如 “serif”。 字体大小属性用于调整文本的大小，通常以像素、em 或 rem 为单位定义。

字体系列使用示例： 

p {
  font-family: Arial, sans-serif;
}

字体大小使用举例： 

h1 {
  font-size: 32px;
}

文本属性和效果

不同的属性会影响文本的其他方面：

  • 颜色：指定文本的颜色。 您可以使用已命名的颜色、十六进制、RGB 或 HSL 值。
  • 字母间距： 增加或减少字符之间的间距，通常以像素或 em 为单位。

请务必保持文字特征的一致性，以便为您的网站打造统一的外观。

CSS 盒模型

CSS 方框模型是一个基本概念，它决定了元素在网页上的呈现方式。 将每个 HTML 元素的结构和布局定义为一个包含边距、边框、填充和实际内容的矩形框。

边缘和轮廓

在方框模型中，边界包括内容和缩进，是缩进和页边距之间的中介。 使用 CSS 设置边框宽度时，就等于定义了边框的厚度。 border 属性可拆分为针对每个页面的子属性（border-top,border-right,border-bottom,border-left ），这样就可以对每个页面进行单独定制。 您还可以定义边框的样式（solid,dotted,dashed 等）和颜色。outline 类似于边框，但它不占用方框模型的空间–它绘制在元素方框之外，不会影响元素的位置。

边距和缩进

边缘是盒子模型的外层，在一个盒子的边缘和另一个盒子的边缘之间形成空间。 当它们相遇时会折叠；当相邻数组有边缘时，会使用较大的边缘尺寸。 页边距是透明的，并具有以下属性：margin-top,margin-right,margin-bottom, 代码margin-left> 。

缩进位于边距内，围绕着实际内容，其主要作用是在框架内、内容和边距之间创造空间。 与边缘不同，填充物是方框元素的一部分，因此可以定义与设计相匹配的填充物颜色。 它还为每一方设置了单独的属性 (padding-top,padding-right,padding-bottom 和padding-left)。

请记住，CSS 属性width 和height 指的是内容的大小。 如果包含边距和缩进，它们会增大方框的整体尺寸，除非使用box-sizing 属性设置为border-box ，这样可以调整内容尺寸，在声明的宽度和高度内包含填充和边距。

可视化格式

在 CSS 中，可视化格式是决定元素如何在网页上显示的一个关键方面。 对其原理的理解会影响到从布局到构图的方方面面。

背景和颜色

CSS 允许您设置元素的背景颜色和背景图片。 background-color 等属性用于指定全彩，而background-image 则允许您将图片放在内容后面。 background 属性将这些设置与其他设置（如background-position 和background-repeat ）结合在一起，让您可以对元素的背景视觉效果进行精细控制。

定位和 Z 索引

CSS 使用 CSS 属性来控制元素的布局 position 值为 static, relative, absolute, fixed a sticky. z-index 属性与定位相结合，可确定元素的堆叠顺序；z-index 越高，表示元素越靠近堆叠上下文的顶部。 请注意，z-index 只影响position 值不是static 的元素。

Flexbox 和 CSS 网格

Flexbox和CSS Grid是强大的布局模型，它们为创建响应式设计提供了不同的方法。 Flexbox 可在单维轴、行或列上工作，因此非常适合线性布局。 使用display: flex 等属性以及flex-grow 和flex-shrink 等其他子属性来操作布局。

另一方面，CSS 网格基于二维网格系统运行，该系统由display: grid 等属性驱动。 您可以定义grid-template-columns 和grid-template-rows ，为内容创建一个框架。 CSS Grid 可轻松实现复杂的布局，让你可以在网格结构中将元素放置在精确的位置。

先进的设计技术

在本节中，您将学习如何使用 CSS 提高网站的视觉吸引力和交互性。 掌握了这些技术，您就可以创建动态、响应式的设计，吸引用户的注意力。

过渡和转换

通过变换，你可以旋转、缩小、倾斜和平移元素，以改变它们在网页上的呈现方式。 使用变换时，变化是瞬时的，但将其与转场相结合，就可以控制时间。

  • 转身 transform: rotate(45deg);
  • 规模： transform: scale(1.5);
  • 翻译： transform: translate(30px, 50px);
  • 斜面 transform: skew(20deg, 15deg);

过渡功能可实现状态之间的平稳转换。 指定转换时，必须定义要转换的属性、持续时间、定时功能和任何延迟。

transition: background-color 0.5s ease-in-out 0s;

通过调整这些参数，您可以创建一个平滑、自然的动作，为页面增添精致感。

动画

CSS动画通过定义元素将遍历的样式序列，将交互性提升到一个新的水平。 要创建动画，首先必须指定关键帧，关键帧勾勒出动画的起点和终点，以及任何中间步骤：

@keyframes slidein {
   from { transform: translateX(0%); }
   to { transform: translateX(100%); }
}

要激活动画，可将其应用于元素，并定义其持续时间、定时函数和迭代次数：

prvok {
    animation: slidein 3s easy-in-out infinite;
}

动画可以无休止地重复播放，也可以按一定次数播放，让您可以精确控制网站元素与用户的交互方式。 利用这些先进的设计技术，您的网站将以专业、流畅的外观和引人入胜的用户体验脱颖而出。

响应式网页设计

响应式网页设计（RWD）可确保您的网站在不同设备上都美观大方、运行良好。 它的重点是利用可变网格、灵活图像和媒体查询，在各种尺寸的屏幕上提供无缝体验。

媒体查询

媒体查询是响应式网页设计的基石。 它们允许你根据设备的屏幕尺寸、方向和分辨率应用 CSS 样式。 例如，当显示区域的宽度小于 768 像素时，可以编写媒体查询来更改页面布局：

@media (max-width: 768px) {
  .container {
    width: 100%;
  }
}

这段代码可确保.container 类在显示区域大于 768 像素的设备上占据整个屏幕的宽度。

响应式单元

在响应式设计中，使用能让布局适应用户环境的单元非常重要。

像素（px）是绝对单位，不会根据屏幕大小进行调整，这可能会导致移动设备上的用户体验不佳。

取而代之的是使用相对单位，如百分比(%)、视口宽度(vw) 和视口高度 (vh)。 例如，按百分比改变元素的大小可以使内容按显示区域的比例变化：

.content {
   width: 80%;
}

这样，div.content 就比其父元素宽 80%，从而实现了适应不同设备的无缝布局。

框架和预处理器

在创建时尚、响应式网页设计的过程中，你会发现 CSS 框架和预处理器是提高代码效率和可维护性的强大工具。 使用这些工具可简化工作流程，轻松应用复杂的样式。

流行的 CSS 框架

Bootstrap：作为使用最广泛的 CSS 框架之一，Bootstrap 为你提供了一整套预制样式表。 您将获得响应式网格系统、预设计组件和 JavaScript 插件，从而大大加快开发进程。

基础部分：这是一个复杂的企业级框架，具有模块化和灵活性。 基础版采用模块化方法，提供各种模板，帮助你轻松创建复杂的布局和响应式设计。

Tailwind CSS：与传统的框架不同，Tailwind CSS 的工作原则是 “有用”，它为你提供了原子类来创建自定义设计，而无需留下 HTML 代码。

预处理器的使用

SASS SASS：该预处理器使用变量、嵌套规则和混合体等功能对 CSS 进行了扩展。 有了 SASS，你可以编写更有条理、更易维护的样式表，然后将其编译成标准 CSS。

LESS LESS：与 SASS 一样，LESS 通过变量、混合体和函数增强了 CSS 的功能，让你可以创建更动态、更有效的样式。 它还被编译成 CSS，以确保浏览器的兼容性。

Stylus 答：Stylus 具有极大的灵活性和独特的语法，是一种既能同步运行又能异步运行的预处理器，适合各种项目要求。

有了 CSS 框架，你就可以使用现成的组件和网格系统，而预处理器则可以让你用编程结构编写 CSS，并最终编译成浏览器可理解的代码。

CSS 最佳实践

在使用 CSS 时，使用最佳实践可确保模板和样式不仅有效，而且可维护和可扩展。 请牢记这些概念，以提高项目的性能和一致性。

有效编写 CSS

选择器和特异性

  • 使用类选择器可实现低特异性和更简单的覆盖。
  • 避免使用过于具体的选择器，以降低复杂性并提高性能。

性能优化：

  • 尽量减少使用昂贵的功能，如box-shadow 和filter ，因为这些功能会导致重绘和重新格式化。
  • 使用loading="lazy" 对非屏幕图像实施懒加载，以节省带宽并提高页面速度。

CSS 架构和方法

组织战略：

可扩展性和可维护性

  • 使用CSS 预处理器（如 Sass），你可以使用变量、mixins 和函数来制作更动态的模板样式。
  • 考虑采用模块化 CSS 架构，如面向对象 CSS (OOCSS)，以鼓励重复使用并减少冗余。

遵循这些做法，你就能创建出一种不仅运行良好，而且能适应你的项目，同时又易于维护的 CSS 样式。

使用 CSS

了解如何使用 CSS 不仅仅是编写样式规则，还需要进行严格的测试，并确保不同浏览器的样式保持一致。

调试和测试

遇到 CSS 问题时，第一步是使用网络浏览器中的开发工具。 通过这些工具，您可以实时查看和编辑 HTML 和 CSS。 为了简化调整过程：

  1. 检查显示不正确的元素。
  2. 检查应用于它的 CSS 属性。
  3. 编辑属性并监控浏览器变化，以识别有问题的代码。

测试时，必须检查网站内不同网页和元素的 CSS，以确保一致性。 自动测试工具可以通过将 CSS 应用于不同的 HTML 结构来模拟各种情况，从而捕捉到不一致或意外的行为。

浏览器兼容性和退款

浏览器对 CSS 功能的支持程度各不相同，因此您有责任确保您的网站能在所有主要浏览器上正确显示。 解决浏览器兼容性问题：

  • 使用caniuse.com等资源检查 CSS 属性的兼容性
  • 为旧版浏览器提供备份版本。 例如，如果您使用 CSS 网格等现代布局功能，那么对于不支持网格的浏览器，您可以使用浮动或 display: table 等更传统的布局技术作为后备方法。

对于可从容降级的功能，可考虑使用带有@supports 的功能查询，以便仅在浏览器支持特定功能或值时应用样式。 这样，即使用户的浏览器无法呈现所有的样式增强功能，也能确保网站的功能性和视觉吸引力。

CSS 和可访问性

在进行网页设计时，将可访问性原则纳入 CSS 是关键所在。 请记住，虽然 CSS 主要控制视觉呈现，但它也会影响内容对残疾用户的可用性。

语义标记：始终将 CSS 与语义 HTML 搭配使用。 使用能表达其所封装内容类型含义的 HTML 元素，如<header> 表示章节标题或<nav> 表示导航链接。 这样就能确保在移除样式后，内容仍然清晰易懂。

  • 视觉设计：
    • 颜色：确保文字与背景颜色之间有足够的对比度。 不要将颜色作为传递信息的唯一方法。
    • 文本：使用相对单位（如 em 或 rem）调整文本大小，以便用户根据自己的需要调整文本大小。

AR 和 ARIA： ARIA（可访问的富互联网应用）属性可以补充 HTML，从而在创建复杂的网络组件时提高可访问性。 例如，role="button" 可将非本地按钮元素作为辅助技术按钮使用。

  • CSS 技术：
    • 使用visibility:hidden 或display:none 适当地隐藏元素，以便屏幕阅读器也能隐藏它们。
    • 为交互式元素使用focus 样式，为键盘导航提供清晰的说明。
CSS对可用性的影响
color必须与背景形成高对比度，以便于辨认
字体大小使用相对单位放大/缩小
显示/可见度使用它们隐藏元素，提高可读性

在 CSS 中使用这些做法将提高网页内容的可访问性，使其更具包容性，对每个人都更友好。

CSS 规范和文档

有效使用 CSS 的能力取决于对其规范和文档的透彻理解。 W3C 概述的指南和参考资料对于掌握网页设计至关重要。

万维网联盟规范

万维网联盟（W3C）负责制定 CSS 规范。 您会发现这些规格涵盖了从基本结构到高级功能的广泛信息。

CSS 规范旨在告诉您如何在网络文档中正确实施 CSS 的各个方面。

例如，媒体查询（Media Queries）通过添加参数来定制显示尺寸、颜色深度和宽高比变化，从而扩展了 @media 规则的功能。CSS 工作组在这些标准的制定过程中发挥了关键作用，确保了这些标准的全面性和时效性。

CSS 链接和资源

各种在线平台提供实用的CSS 参考资料和资源。 网络文件 MDN 作为宝贵的资源脱颖而出，提供了全面的 CSS 文档。 在这里，您可以找到有关以下方面的详细信息：

  • CSS 语法答：了解 CSS 的正确书写格式，包括选择器、伪类、伪元素、属性和值。
  • 样式规则示例说明：实际应用 CSS 规则在网络文档中设置样式。

利用这些资源加深你对 CSS 的了解，并改进你在不同媒体和平台上对 CSS 的应用。 请记住，层叠是 CSS 的基本概念，CSS 规则的顺序及其特殊性决定了如何将样式应用于 HTML 元素。

学习 CSS

开始学习 CSS 时，你会发现有很多资源和方法可以提高你的网页开发技能。 重要的是要从全面的教程开始，然后通过实际练习和项目来应用所学知识。

CSS 教程和手册

通过提供分步说明和清晰示例的CSS 指南开始你的旅程。 平台，如 W3Schools 等平台提供互动式教程，您可以通过编辑 CSS 并在其在线编辑器中查看结果，立即亲身体验。 每章通常都包含有助于强化概念的示例。

类似的是 MDN 网络文档 是学习 CSS 等网络技术的可靠资源。 他们的CSS 教程涵盖 HTML 样式编辑、框模型、选择器等基础知识，以及动画和布局技术等更高级的主题。

CSS 练习和项目

在通过教程学习了基础知识后，亲身体验非常重要。 查找 CSS练习，创建小型项目，学以致用。

你可以从编辑段落样式或设计导航栏等简单任务开始，然后扩展到创建多栏布局甚至整个网页。

如果你想测试一下自己的 CSS 知识：

  1. 创建一个简单的 HTML 页面。
  2. 使用链接到 HTML 代码的 CSS 文件自定义样式。
  3. 尝试使用不同的 CSS 属性，了解其效果。

下面是编辑段落文字的基本练习：

<!-- Index.html -->
<!DOCTYPE html>
<html>
<head>
<link href="styles/style.css" rel="stylesheet" />
</head>
<body>
<p>Hello, World!</p>
</body>
</html>

/* styles/style.css */
p {
  color: red;
}

通过完成这些实践项目，你将巩固所学知识，并逐步建立自己的作品集，以展示你在 CSS 方面不断增长的专业知识。

🤷‍♂️ Need help? Check out our services.

相关文章

发表评论

您的邮箱地址不会被公开。 必填项已用 * 标注

Own website for free
滚动至顶部