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

Ngui简介

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

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

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并不支持idtagName。还是因为同样的原因效率问题,所以我希望尽量简单。当然这一切都需要在使用体验上付出代价,也许在某一天会有人想出更好的替代方案也说不定,要知道众人的力量是无穷的况且现在框架本身不需限制于任何标准。

名称组合

样式表首先都是全局的,后面定义的同名样式表会与前面定义的样式表合并如果有重复的属性会进行替换。怎样的名字是同名的呢?并不是说定义时的名称组合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>
);
  • 子级样式表权重会更高上面的例子中Textheight应该是200 .a .b的样式表属性会覆盖.b
  • 多级样式表的应用也必须对应视图的嵌套关系,这样样式才能生效,比如上面的例子中.a .b这个样式表应用于视图时,这个视图的父级或顶级视图的样式表必须亦一个.a

伪类

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

例:

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' }, // 这条规则会抛出异常
});

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏青蛙要fly的专栏

Android技能树 — Drawable小结

我们知道平常使用最多的Drawable可能是图片了,我们知道一个图片的原本的尺寸,比如下面这个图:

441
来自专栏前端开发之路

前端系列教学 - HTML基础

作为还在慢慢前端学习路上的一位自学者。我以写教程文章的方式来整理自己对于知识的理解,同时也希望能够把自己的理解作为一个分享。希望能够和大家共同进步,如有任何纰漏...

33711
来自专栏极乐技术社区

微信小程序开发详解《五》布局基础

1:Flex布局 Flex布局如图所示 image.png 1.1 Flex容器属性 image.png 1.2 Flex容器内元素属性 image...

3205
来自专栏Web 开发

WordPress主题修改之Html5语义化

Html5最大的特点在于多媒体和移动互联网方面,小弟不才,对那些了解不多,本次修改仅仅是为了那么一点点语义化。

910
来自专栏小灰灰

cocos2dx-v3.4 2048(四):单元格的设计与实现

前言 ---- 单元格即显示2、4、8等数字的不同颜色的方格,如下图。本项目中Grid类实现单元格的相关内容,包括数字、背景更新,移动、新增、消除特效 ? ...

1796
来自专栏数据小魔方

Xcelsius(水晶仪表)系列11——选择器高级用法(页面级切换工具)

今天继续跟大家分享关于水晶仪表系列选择器高级用法——页面级切换工具。 之前讲过很多关于菜单选择器的用法, 但是那些基本都是基于单个部件及统计图之间的切换,今天这...

2534
来自专栏非著名程序员

Android 自定义 view 动画按钮

昨天偶偶然看见UI 给的一个交互的效果,原图如下 ? 就是下面的loginbutton,于是大概模仿了一下, 并没有做这个UI的全部效果,有兴趣的可以完善后面...

1998
来自专栏行者常至

001.html常用的基础知识点

主要包括结构(Structure)、表现(Presentation)和行为(Behavior)三个方面。

1062
来自专栏IT可乐

frameset标签设计页面

重要事项:不能将 <frameset></frameset> 标签放在<body></body> 标签里。且 HTML5 已经不支持 frameset 标签的使...

1759
来自专栏向治洪

制作.9.png

1. PNG格式。       在这里不过多的讨论PNG格式的定义问题。但是.9.PNG确实是标准的PNG格式,只是在最外面一圈额外增加1px的边框,这个1p...

2205

扫码关注云+社区