开源跨平台移动项目 Ngui【CSS 样式表规则及用法】

Ngui 简介

这是一个 GUI 的排版显示引擎和跨平台的 GUI 应用程序开发框架，基于 NodeJS/OpenGL，这也是第一个在移动端 Android/iOS 融合 NodeJS 的前端 GUI 项目，至此 JavaScript 成为了真正意义上前后端通吃的语言。

Ngui 的目标：在此基础上开发 GUI 应用程序可拥有开发 WEB 应用般简单与速度同时兼顾 Native 应用程序的性能与体验。

• 开源跨平台移动项目Ngui【简介】

• 开源跨平台移动项目Ngui【入门】

• 开源跨平台移动项目Ngui【视图与布局系统】

• 开源跨平台移动项目Ngui【Action动作系统】

• 开源跨平台移动项目Ngui【CSS样式表规则及用法】

• Ngui API 文档

CSS 样式表到底是什么

CSS 样式表全称叫 Cascading Style Sheets 是一种用来表现 HTML 文件样式的语言，是 Web 前端开发中一定会用到的排版语言，那么 Ngui 中 css 的灵感就来自于此。与其说是灵感还不如果说是借鉴并通过精简而来，因为开发这个框架的初衷效率一直就是最重的目标，其次才是使用体验。

下面是 Ngui 中 CSS 样式表的写法：

import { CSS, Div, Text } from 'ngui';
CSS({
	'.a': {
		width: '100%',
		height: '100%',
		contentAlign: 'center',
	},
	'.a .b': {
		width: 100,
		height: 100,
		marginTop: 'auto',
		marginBottom: 'auto',
		backgroundColor: '#f00',
	},
});
const vx = (
	<Div class="a">
		<Text class="b">Hello!</Text>
	</Div>
);

是不是很熟悉呢。

CSS 样式表运行时

这里说的是新式表到底是什么时间应用到视图上的。样式表并不会主动去查询 View.class，绘图线程在渲染帧画面前会先查询并解决所有需要更新的样式表 class。请记住样式表只是静态的属性集合，样式表的应用是需要的视图对像主动查询。所以当一个视图先前已经应用过样式表，然后样式表属性被更改后并不会影响到先前应用样式表的视图。需要注意的一点是样式表样表应用只是简单的对视图对像属性的更改，并没有权重的概念，所以在应用样式表时需要注意与直接设置属性的先后顺序，很有可能先前设置的视图属性被样式表覆盖，因为样式表 class 的设置并不会立即生效它总是在渲染开始前才应用到视图。

CSS 样式表名称规则

非常抱歉的告诉各位，现在的样式表体系只支持 class 并不支持 id 与 tagName。还是因为同样的原因效率问题，所以我希望尽量简单。当然这一切都需要在使用体验上付出代价，也许在某一天会有人想出更好的替代方案也说不定，要知道众人的力量是无穷的况且现在框架本身不需限制于任何标准。

名称组合

样式表首先都是全局的，后面定义的同名样式表会与前面定义的样式表合并如果有重复的属性会进行替换。怎样的名字是同名的呢？并不是说定义时的名称组合 key 本身，看下面的例子。

CSS({
	'.a': { height: 100 },
	'.b': { backgroundColor: '#f00' },
	'.c': { border: '1 #000' },
	'.a.b': { width: 100 },
	'.b.a': { width: 200 },
});
const vx = (
	<Div class="a b c" />
);

上面 .a.b 与 .b.a 表示其实是同一个名称。并且最后的 width 为 200。
并且越长的名称组合就会有越多的组合结果，也就是说查询也会需要更多的时间。比如 class="a b c" 的样式组合会有 .a、.b、.c、.a.b、.a.c、.b.c、.a.b.c 7 种结果，当视图应用这个样式时需要查询这 7 种可能性。所以在 Ngui 中 CSS 样式表的组合限制在 4 个，多于 4 个时的组合时可能会出现意想不到结果。

多级名称

样式表的数据结构其实是个树状结构，每个具名的样式表都可以有子样式表，子级样式表以空格区分且级数没有限制但理论来说越多的级数查询的速度也会越慢。如：

CSS({
	'.a': { width: 200, height: 200 },
	'.b': { height: 100 },
	'.a .b': { width: 100, height: 200 },
});
const vx = (
	<Div class="a">
		<Text class="b">Hello!</Text>
	</Div>
);

• 子级样式表权重会更高上面的例子中 Text 的 height 应该是 200 .a .b 的样式表属性会覆盖 .b。

• 多级样式表的应用也必须对应视图的嵌套关系，这样样式才能生效，比如上面的例子中 .a .b 这个样式表应用于视图时，这个视图的父级或顶级视图的样式表必须亦一个 .a。

伪类

伪类有三种类型分为 normal、hover、down 分别对应正常、光标进入、光标按下。当然在触摸屏上没有光标所有 hover 也不会存在。只有 normal、down 对应触摸开始与触摸结束。

例：

CSS({
	'.a': { width: 100, height: 100 },
	'.a:normal': { backgroundColor: '#aaa' },
	'.a:hover': { backgroundColor: '#f00' },
	'.a:down': { backgroundColor: '#f0f' },
});
const vx = (
	<Div class="a" />
);

有一点需要注意伪类不可以再有子级伪类，如：

CSS({
	'.a:hover': { backgroundColor: '#f00' },
	'.a:hover .b': { width: 200 },
	'.a:hover .b:hover': { backgroundColor: '#ff0' }, // 这条规则会抛出异常
});