Sciter.js 指南 - GUI应用中 CSS 实现漂亮的界面布局

好的，这是针对初学者的 Sciter.js CSS 教学文章，我也是这样从后端一步步转过来，旨在帮助没有 GUI 或 CSS 经验（例如后端开发者）的开发者理解和使用 CSS 来构建 Sciter 应用界面。

Sciter.js CSS 入门指南：为你的桌面应用添彩

如果你想为你的桌面应用程序创建漂亮的用户界面，那么理解 CSS 是必不可少的一步。CSS（层叠样式表）是一种用来描述 HTML 文档外观和格式的语言。在 Sciter.js 中，CSS 的作用与 Web 开发中基本类似兼容度 90% 的样子，但也有一些 Sciter 特有的增强功能，专门设计出来特别适合桌面 UI 的 GUI 开发。

这需要先介绍一些 CSS 的基本概念、用法和一些最佳实践，即使你之前从未接触过 CSS 或 GUI 开发，也能轻松上手。

1. CSS 是什么？为什么需要它？

想象一下 HTML 负责构建你应用的骨架（有哪些元素，如按钮、文本框、列表等），而 CSS 则负责给这个骨架"穿上衣服"，定义它的外观：颜色、大小、位置、字体等等。

Sciter 使用自己的 HTML/CSS 渲染引擎，它兼容大部分 Web 标准（如 CSS 2.1 和部分 CSS 3 功能），同时也进行了一些优化和扩展，使其更适合桌面应用的需求。

核心作用：

样式化 (Styling): 定义元素的颜色、背景、边框、字体、大小等视觉表现。
布局 (Layout): 控制元素在页面上的排列方式和位置（例如，水平排列、垂直排列、网格布局）。
响应式设计 (Conditional Styling): 根据不同条件（如操作系统）应用不同的样式。

2. CSS 基础概念

a. 选择器 (Selectors)

要为某个 HTML 元素应用样式，你首先需要"选中"它。选择器就是用来查找和匹配 HTML 元素的模式。

常用选择器类型 :

标签选择器 (Type Selector): 直接使用 HTML 标签名。
css 复制代码
```
button { color: blue; } /* 选中所有 <button> 元素 */
```
类选择器 (Class Selector): 使用 . 加上类名。你可以在 HTML 元素上添加 class 属性。
html 复制代码
```
<div class="warning">错误信息</div>
```
css 复制代码
```
.warning { color: red; font-weight: bold; } /* 选中所有 class="warning" 的元素 */
```
ID 选择器 (ID Selector): 使用 # 加上 ID 名。ID 在一个 HTML 文档中应该是唯一的。
html 复制代码
```
<div id="main-content">主要内容</div>
```
css 复制代码
```
#main-content { padding: 10px; } /* 选中 id="main-content" 的元素 */
```

属性选择器 (Attribute Selector): 根据元素的属性来选择。

css 复制代码

input[type="text"] { border: 1px solid grey; } /* 选中所有 type="text" 的 <input> 元素 */

后代选择器 (Descendant Combinator): 使用空格分隔，选择某个元素内部的后代元素。
css 复制代码
```
div span { color: green; } /* 选中所有 <div> 元素内部的 <span> 元素 */
```
子选择器 (Child Combinator): 使用 > 分隔，仅选择某个元素的直接子元素。
css 复制代码
```
ul > li { list-style: none; } /* 选中所有 <ul> 元素的直接子元素 <li> */
```

b. 属性和值 (Properties and Values)

选中元素后，你需要告诉浏览器要改变哪些样式以及具体改成什么样。这就是通过"属性: 值;"对来实现的。

常见属性示例:

color: 文本颜色
background-color: 背景颜色
font-size: 字体大小
font-family: 字体类型
width: 宽度
height: 高度
padding: 内边距（元素内容与边框之间的距离）
margin: 外边距（元素边框与相邻元素之间的距离）
border: 边框（如 border: 1px solid black;）
text-align: 文本对齐方式 (left, center, right)
text-decoration: 文本装饰（如 underline, line-through）

css 复制代码

button {
  background-color: lightblue; /* 背景色 */
  color: black;               /* 文字颜色 */
  padding: 5px 10px;          /* 内边距：上下5px，左右10px */
  border: 1px solid blue;     /* 边框 */
  border-radius: 3px;         /* 圆角 (CSS3) */
}

.important-text {
  font-weight: bold;          /* 字体加粗 */
  color: darkred;
}

c. 单位 (Units)

设置尺寸（如 width, height, font-size, padding, margin）时，需要指定单位。常用单位有：

px: 像素 (Pixel)，最常用的绝对单位。
%: 百分比，相对于父元素的尺寸。
em: 相对于当前元素的字体大小。
rem: 相对于根元素（通常是 <html>）的字体大小。
vw, vh: 相对于视口（窗口可见区域）的宽度和高度的百分比。
dip: 设备无关像素 (Device Independent Pixel)，Sciter 特有，推荐在桌面 UI 中使用以适应不同 DPI 设置。 1dip 在 96 DPI 下等于 1px，下次写文章单独介绍，非常有用。

3. 如何在 Sciter.js 中应用 CSS

有多种方式可以将 CSS 应用到你的 HTML 元素上，有如下几种方式，来比普通浏览器更加方便使用：

a. 内联样式 (Inline Styles)

直接在 HTML 元素的 style 属性中编写 CSS 规则。这种方式不推荐大量使用，因为它会使 HTML 结构混乱且难以维护。

html 复制代码

<button style="color: white; background-color: green;">保存</button>

你也可以通过 JavaScript 访问和修改元素的 style 对象。

b. `<style>` 标签

将 CSS 规则写在 HTML 文件头部的 <style> 标签内。适用于单个 HTML 文件或简单应用。

html 复制代码

<html>
<head>
  <style>
    body { font-family: sans-serif; }
    button { padding: 8px; }
    .error { color: red; }
  </style>
</head>
<body>
  <button>点击我</button>
  <p class="error">发生错误！</p>
</body>
</html>

c. 外部 CSS 文件 (External CSS Files) - 推荐

将所有 CSS 规则保存在一个或多个 .css 文件中，然后在 HTML 中使用 <link> 标签引入。这是最常用且推荐的方式，便于管理和复用样式。

styles.css:

css 复制代码

body {
  font-family: Arial, sans-serif;
  margin: 10px;
}

button {
  background-color: #eee;
  border: 1px solid #ccc;
  padding: 5px 15px;
}

button:hover { /* :hover 是伪类，表示鼠标悬停时的状态 */
  background-color: #ddd;
}

main.html:

html 复制代码

<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <button>确认</button>
</body>
</html>

d. 样式集 (Style Sets) - Sciter 特有

Style Sets 是 Sciter 提供的一种强大的 CSS 组织方式，允许你定义命名的样式块 (@set)，然后在需要的地方通过 styleset 属性应用。这对于创建可复用的 UI 组件特别有用。。

my-component-styles.css:

css 复制代码

@set my-button {
  :root { /* :root 在 @set 中指向应用该样式的元素 */
    display: inline-block;
    padding: 10px 20px;
    background-color: cornflowerblue;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer; /* 鼠标指针样式 */
  }
  :root:hover {
    background-color: dodgerblue;
  }
  :root:active { /* :active 是伪类，表示鼠标按下时的状态 */
     background-color: royalblue;
  }
}

main.html:

html 复制代码

<button styleset="my-component-styles.css#my-button">自定义按钮</button>

或者在 JavaScript/JSX (Reactor/React) 组件中动态应用:

javascript 复制代码

import { Element } from "@sciter";

// 假设 myStyles 定义在一个 CSS 文件或通过 CSS.set 创建
// const myStyles = CSS.set`...`; // 或者加载自文件

class MyComponent extends Element {
  render() {
    // 注意: 如果 myStyles 是从外部 CSS 文件加载的 set,
    // 需要确保路径正确，例如使用 __DIR__
    // const stylesPath = __DIR__ + "my-component-styles.css#my-button";
    // return <button styleset={stylesPath}>组件按钮</button>;

    // 如果 myStyles 是通过 CSS.set 创建的 StyleSet 对象:
    const myStyles = CSS.set`
      :root {
        padding: 5px; background: gold;
      }
    `;
    return <button styleset={myStyles}>组件按钮</button>;
  }
}

4. Sciter 特有的 CSS 功能简介

除了标准 CSS，Sciter 还提供了一些有用的扩展：

CSS 变量 (Variables): 方便定义和复用颜色、尺寸等值。Sciter 支持标准 --name 和特有的 var(name) 语法。参考文档 CSS\variables-and-attributes.md 可以得到更多信息。
css 复制代码
```
:root {
  --primary-color: blue; /* 标准语法 */
  var(default-padding): 10px; /* Sciter 语法 */
}

button {
  background-color: var(--primary-color);
  padding: var(default-padding);
}
```

布局 (Flow & Flex): Sciter 使用 flow 属性进行布局，提供了 horizontal, vertical, horizontal-wrap, vertical-wrap, grid 等值，是 display: flex 和 display: grid 的替代方案。flex 单位 (1*, 2* 等) 用于在 flow 布局中分配空间。。

css 复制代码

.container {
  flow: horizontal; /* 子元素水平排列 */
  width: 100%;
  border: 1px solid black;
}
.container > div {
  width: 1*; /* 占据 1 份弹性空间 */
  height: 50px;
  border: 1px solid red;
  text-align: center;
}
.container > div:nth-child(2) {
  width: 2*; /* 占据 2 份弹性空间 */
}

条件 CSS (@if, @supports): @if 基于加载时的媒体变量（如操作系统）应用样式，@supports 基于引擎是否支持某个 CSS 属性/值应用样式。CSS\conditionals.md。

css 复制代码

@if (Windows) {
  body { font-family: "Segoe UI", sans-serif; }
}
@else if (OSX) {
  body { font-family: "Helvetica Neue", sans-serif; }
}

@supports (backdrop-filter: blur(5px)) {
  .blurred-dialog { backdrop-filter: blur(5px); }
}

行为和切面 (Behaviors and Aspects): 可以通过 CSS 的 prototype 和 aspect 属性将 JavaScript 类或函数（控制器）附加到 DOM 元素上，实现声明式的行为绑定。这对于创建自定义组件非常有用。参考 CSS\behaviors-and-aspects.md 与 DOM\Components.md 。
css 复制代码
```
/* 将 MyComponent 类 (在 component.js 中定义) 绑定到所有 <my-widget> 元素 */
my-widget {
  prototype: MyComponent url(component.js);
  display: block; /* 自定义元素通常需要设置 display */
  /* ... 其他样式 ... */
}
```

5. 最佳实践

组织性: 优先使用外部 CSS 文件 (<link>) 或 Style Sets (@set) 来组织样式，避免内联样式和过多的 <style> 标签。
可维护性: 使用类选择器进行通用样式定义，ID 选择器用于特定、唯一的元素。利用 CSS 变量来管理颜色、字体、间距等，方便全局修改。
可复用性: 将组件相关的样式封装在 Style Sets 中，便于在不同地方复用。
单位选择: 在桌面 UI 中，优先考虑使用 dip 单位来适应不同的屏幕 DPI 设置，保证界面在不同显示器上看起来大小一致。
利用 Sciter 特性: 熟悉并利用 flow 布局、Style Sets、CSS 变量等 Sciter 提供的特性，可以更高效地开发桌面 UI。

6. 简单示例

下面是一个结合了 HTML 和 CSS 的简单例子：

example.css:

css 复制代码

:root {
  var(accent-color): #007bff;
  var(text-color): #333;
}

body {
  font-family: system-ui, sans-serif; /* 使用系统默认 UI 字体 */
  color: var(text-color);
  padding: 15dip; /* 使用 dip 单位 */
}

.my-button {
  padding: 8dip 16dip;
  background-color: var(accent-color);
  color: white;
  border: none;
  border-radius: 4dip;
  cursor: pointer;
  transition: background-color 0.2s ease; /* 添加简单的过渡效果 */
}

.my-button:hover {
  background-color: darken(var(accent-color), 10%); /* Sciter 支持 darken/lighten 等颜色函数 */
}

#status-message {
  margin-top: 10dip;
  padding: 10dip;
  background-color: #f0f0f0;
  border-left: 4dip solid var(accent-color);
}

example.html:

html 复制代码

<html>
<head>
  <title>Sciter CSS 示例</title>
  <link rel="stylesheet" href="example.css">
</head>
<body>
  <h1>欢迎使用 Sciter.js</h1>
  <p>这是一个使用 CSS 样式化的段落。</p>
  <button class="my-button">点我</button>
  <div id="status-message">状态信息会显示在这里。</div>
</body>
</html>

7. 总结与后续学习

CSS 是构建美观、用户友好的 Sciter.js 应用的关键。通过掌握选择器、属性、值以及 Sciter 特有的布局和样式管理机制（如 flow 和 Style Sets），你可以有效地控制应用的外观和感觉。

Sciter.js 指南 - GUI应用中 CSS 实现漂亮的界面布局

Sciter.js CSS 入门指南：为你的桌面应用添彩

1. CSS 是什么？为什么需要它？

2. CSS 基础概念

a. 选择器 (Selectors)

b. 属性和值 (Properties and Values)

c. 单位 (Units)

3. 如何在 Sciter.js 中应用 CSS

a. 内联样式 (Inline Styles)

b. <style> 标签

c. 外部 CSS 文件 (External CSS Files) - 推荐

d. 样式集 (Style Sets) - Sciter 特有

4. Sciter 特有的 CSS 功能简介

5. 最佳实践

6. 简单示例

7. 总结与后续学习

b. `<style>` 标签