DHTMLX UI 组件库允许您更快地构建跨平台、跨浏览器 Web 和移动应用程序。它包括一组丰富的即用式 HTML5 组件，这些组件可以轻松组合到单个应用程序界面中。DHTMLX JS UI 组件可用于任何服务器端技术：PHP、Java、ASP.NET、Ruby、Grails、ColdFusion、Python 等。此外，您可以轻松地将它们集成到基于Angular、React和 Vue.js 的 Web 应用中。

DHTMLX Suite 最新版下载

“有吸引力的东西效果更好”——著名可用性专家唐·诺曼的这句话当然适用于现代网络开发。如今，开发团队必须像关注网络项目的功能一样关注其视觉吸引力。CSS 样式在满足关键设计要求方面起着至关重要的作用，确保网络应用程序不仅美观，而且用户友好且引人入胜。

在本文中，我们将探讨 CSS 样式在网页设计中的重要性、其在现代网络应用中日益增长的重要性，以及 DHTMLX UI 组件如何帮助开发人员实现各种样式目标。此外，我们还将分享一些实用技巧，以增强开发人员使用 DHTMLX 进行样式设计的体验。

CSS 样式是 Web 应用程序设计的核心

Web 应用程序设计是创建 Web 应用程序的视觉和交互方面的过程，而 CSS 样式是此过程中不可或缺的一部分。CSS 样式有助于将原始 HTML 转换为具有视觉吸引力且易于导航的 UI。Web 开发人员使用 CSS 来实现以下目标：

• 加强视觉一致性
• 使设计与品牌形象保持一致
• 提高可读性和可访问性
• 增强响应能力

简而言之，Web 应用程序设计定义了 Web 项目设计的蓝图，而 CSS 样式则作为将设计理念变为现实的工具集。

为什么灵活的 CSS 样式在现代 Web 开发中如此重要

多年来，DHTMLX 一直关注影响 Web 开发的所有重大变化，以确保我们的JavaScript UI 组件符合最新要求。这是一个不断变化的环境，今天的一些流行事物明天可能会消失并被遗忘。然而，无论技术如何发展，CSS 样式等一些基本的东西在 Web 开发中仍然是必不可少的。

考虑到近年来的 Web 开发趋势以及我们在该行业的长期经验，我们可以肯定地说，企业和开发团队现在比以往任何时候都更加关心 Web 应用程序的视觉设计。

在探索现代 Web 开发趋势时，您可能会遇到诸如暗模式、动画、现代布局技术等流行概念。对视觉设计的日益关注很大程度上归因于 CSS 领域的快速发展。近年来，CSS 生态系统已经丰富了各种出色的功能，例如 Subgrid、:has()、变量、容器查询等，使开发团队能够解决以前需要 JavaScript 解决方法的问题。最新的 CSS 状态调查的受访者列出了他们最喜欢的新 CSS 功能：

来源：CSS 2025 状态

调查还表明，一些备受期待的功能（如条件逻辑、混合和砌体布局）即将推出。

现代 Web 应用程序对视觉部分的要求很高，这迫使开发团队寻找工具来确保灵活的样式。我们还看到 DHTMLX 用户对强大样式功能的需求很高，并尽最大努力满足这一要求。去年，我们最热门的 JavaScript UI 组件（甘特图、调度程序、网格、图表）在这方面获得了显著提升。让我们深入探讨这个话题。

探索 DHTMLX CSS 样式功能

当选择流行的 DHTMLX 库为 Web 项目添加高级功能时，Web 开发人员可以确保我们的 JavaScript 组件有足够的手段来满足他们的样式需求。为了避免毫无根据，让我们来看看 DHTMLX 库中提供的主要样式选项。

可定制的内置主题

预定义主题允许 Web 开发者指定一组可应用于整个项目的样式和设计规则。借助主题，可以轻松使所有 UI 元素遵循统一的样式、适应品牌样式指南并帮助满足可访问性标准。DHTMLX 库附带多个内置主题，包括 Material、Light、Dark 和高对比度选项。

有一个实时示例，您可以在DHTMLX Gantt中切换明暗主题：

DHTMLX 主题基于 CSS 变量，可用于进一步的样式修改。

CSS 变量

如果预定义的主题选项不足以满足特定用例场景，则可以使用 CSS 变量来：

• 更改所有主题的配色方案，
• 覆盖特定主题的颜色值，
• 通过覆盖内部 CSS 变量的值来创建自定义主题。

这是一个实时示例，包括使用 DHTMLX Diagram 中的 CSS 变量创建的自定义主题。

这些主题选项适用于我们的大多数产品，并遵循相同的技术原则。所需组件的文档提供了更多详细信息。

CSS 变量通过定义可重复使用的样式属性简化了 DHTMLX 组件中特定 UI 元素的样式设置。例如，下面是一个修改了刻度、任务和链接颜色的甘特图示例：

:root {
  /* scales */
  --dhx-gantt-scale-background: #8E8E8E;
  --dhx-gantt-base-colors-border-light: #C5C5C5;
  --dhx-gantt-base-colors-border: #DFE0E1;
  --dhx-gantt-scale-color: #FFF;
  --dhx-gantt-base-colors-icons: #00000099;
 
  /* tasks */
  --dhx-gantt-task-background: #3db9d3;
  --dhx-gantt-task-color: #FFFFFF;
  --dhx-gantt-project-background: #6AA84F;
  --dhx-gantt-project-color: #FFFFFF;

  /* links */
  --dhx-gantt-link-background: #ffa011;
  --dhx-gantt-link-background-hover: #ffa011;
}

通过定义全局 CSS 变量，还可以在同一组件的不同实例之间保持统一的设计。

UI 元素模板

DHTMLX UI 组件支持模板，允许更灵活地自定义 UI 中元素的外观。模板通常用于根据特定条件动态地将 CSS 样式和自定义内容应用于 UI 元素，例如：

• 使用DHTMLX Scheduler构建的 JS Scheduling 日历中的事件的空白/填充描述

...
scheduler.templates.event_class=function(start,end,event){
    if (event.text) //if event have description
        return "past_event"; //then set special css class for it
};
...

• 基于DHTMLX Grid的网格表中特定列（“余额”）的数据值

...
template: (value, { balance }) => balance > 0
    ? `<div style='color:green'>⬆ ${value}</div>`
    : `<div style='color:red'>⬇ ${value}</div>`,
...

除此之外，CSS 模板还可以帮助创建视觉上独特且组织良好的布局，提高可读性和可用性，如以下DHTMLX Dataview示例所示：

自定义 CSS 类

CSS 类是 DHTMLX 库灵活高效样式设置的重要机制。它允许根据类属性将样式规则分配给一个或多个 HTML 元素，从而实现一致且可重复使用的样式设置。

让我们考虑通过使用 DHTMLX Grid 的 CSS 类的几种样式场景：

• 数据表中的样式选择

以下是针对此场景创建自定义 CSS 类的方法：

.custom {
    --dhx-color-primary: #ff5252;
    --dhx-s-grid-selection-background: rgba(255, 198, 198, 1);
}

创建的 CSS 类的名称被指定为Grid 配置中的css属性的值：

const grid = new dhx.Grid("grid", {
    ...
    selection: true,
    css: "custom"
});

• 样式行

以下是针对此场景创建自定义 CSS 类的方法：

.my_custom_row {
    background: coral;
}

rowCss属性作为一个函数，以行的 id 作为参数并返回一个带有自定义 CSS 类名称的字符串。

const grid = new dhx.Grid("grid", {
    columns: [
    // columns config
    ],
    rowCss: row => (row.custom ? "my_custom_row" : ""),
    data: dataset,
    adjust: true
});

• 用颜色标记细胞

以下是针对此场景创建自定义 CSS 类的方法：

.my_custom_mark {
    background: lightcoral;
}
.total_col {
    background: #f2f2f2;
}

要标记网格表的特定单元格，请使用列配置中的相应属性。您可以将mark属性的值设置为一个函数，该函数返回带有标记的自定义 CSS 类的字符串。

var grid = new dhx.Grid("grid", {
    columns: [
       ...
            id: "population", header: [{ text: "Population" }],
            mark: function (cell, data, row, col) { return cell > 100000000 ? "my_custom_mark" : "" }
        },
 
        {
            id: "density", header: [{ text: "Density (P/Km²)" }],
            mark: function (cell, data) { return "total_col"; }
        },
      ...
});

使用 DHTMLX 进行 CSS 样式设计的实用技巧

DHTMLX 为开发人员提供了一套多功能的样式选项，但必须有效地使用这些工具才能实现精致且可维护的设计。以下是使用 DHTMLX 组件优化 CSS 样式的一些关键技巧。

• 充分利用可用的 CSS 样式选项

DHTMLX 组件具有结构良好的默认 CSS，但如果项目设计需要进行一些特定调整，我们的 JS 库 API 可以实现这些目标。无需手动覆盖核心样式，在完整文档化的 API 中很可能可以找到快速有效的解决方案。

• 导出为 PDF/PNG 时请记住 CSS 设置

DHTMLX 组件（如 Gantt、Grid、Scheduler 和 Diagram）支持导出为各种文件格式。但是，默认情况下，导出的文件中不包含自定义样式（例如修改的颜色、字体或布局调整）。为了确保自定义 CSS 样式反映在导出的文件中，需要指定导出后显示自定义 CSS 的配置。

例如，在 DHTMLX Diagram 组件中，您应该定义一组要导出的样式，通过将所需样式的绝对路径设置到exportStyles数组中，就像本示例中这样。

• 使用 CSS 特异性控制样式

在设置 DHTMLX 组件（或任何 Web 元素）的样式时，您不应忘记正确应用样式所需的CSS 特异性。覆盖 DHTMLX 样式时，务必确保您的 CSS 规则具有比默认样式更高的特异性（优先级）。

• 使用浏览器的元素检查器来调试和微调样式

现代浏览器提供内置的开发者工具，旨在协助编程的各个方面。元素检查器特别有助于检查 UI 元素、实时调整 CSS 样式以及识别潜在的样式冲突。

总结

DHTMLX 组件为开发人员提供了一组强大的选项，可满足任何复杂程度的样式要求。无论是应用主题、优化单个 UI 元素的外观，还是动态修改样式，DHTMLX 都能简化流程。通过正确的方法，DHTMLX JavaScript 库为开发团队提供了将高级功能与视觉创意相结合的绝佳机会。

关于慧都科技：

慧都科技是专注软件工程、智能制造、石油工程三大行业的数字化解决方案服务商。在软件工程领域，我们提供开发控件、研发管理、代码开发、部署运维等软件开发全链路所需的产品，提供正版授权采购、技术选型、个性化维保等服务，帮助客户实现技术合规、降本增效与风险可控。慧都科技DHTMLX在中国的官方授权代理商，提供DHTMLX系列产品免费试用，咨询，正版销售等于一体的专业化服务。DHTMLX专注于JavaScript和HTML5 UI小部件和库，以帮助开发人员更快地构建功能丰富的、交互式的Web界面。 遵循现代网络开发的标准和做法，DHTMLX提供针对桌面和移动设备定制的优秀Web应用程序框架。

下载|体验更多DHTMLX，请联系在线客服咨询，或拨打产品热线：023-68661681