开源跨平台移动端项目Ngui【CSS样式表规则及用法】
Ngui简介这是一个GUI排版显示引擎，也是一个跨平台的GUI应用开发框架，基于NodeJS/OpenGL，也是第一个在移动端Android/iOS集成了NodeJS的前端GUI项目，至此JavaScript成为真正意义上的前后端通吃的语言。Ngui的目标：在此基础上开发GUI应用程序，既能兼顾Native应用程序的性能和体验，又能拥有开发WEB应用程序的简单和速度。开源跨平台移动项目Ngui【介绍】开源跨平台移动项目Ngui【入门】开源跨平台移动项目Ngui【视图和布局系统】开源跨平台移动项目Ngui【Action动作系统】开源跨平台手机项目Ngui【CSS样式表规则及使用】什么是NguiAPI文档CSS样式表？CSS样式表的全称是CascadingStyleSheets。它是一种用于表达HTML文件样式的语言。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',},});constvx=(你好！
);你熟悉吗？CSS样式表运行时指的是新样式表应用于视图的时间。样式表不会主动查询[View.class]，绘制线程会先查询并解决所有需要更新的样式表类，然后再渲染框架。请记住，样式表只是属性的静态集合，样式表的应用是对所需视图对象的主动查询。所以当一个视图之前应用了一个样式表，然后样式表的属性发生变化，不会影响到之前应用的样式表视图。需要注意的一点是，样式表示例表的应用只是对视图对象的属性进行了简单的改变，并没有权重的概念。因此，在应用样式表时，需要注意直接设置属性的顺序。很可能是之前设置的view属性被样式表覆盖了，因为样式表类的设置不会立即生效，它总是在渲染开始之前应用到视图上。CSS样式表命名规则很遗憾的告诉大家，目前的样式表系统只支持class，不支持id和tagName。仍然出于同样的原因效率问题，所以我希望它尽可能简单。当然，这一切都需要以用户体验为代价。也许有一天会有人想出更好的选择。要知道每个人的力量都是无穷的，框架本身不需要拘泥于任何标准。名称组合样式表首先是全局的，后面定义的同名样式表会和前面定义的样式表合并，如果有重复的属性，则替换掉。什么样的名字才是同名？它并不意味着名称组合键本身在定义时，请看下面的例子。CSS({'.a':{height:100},'.b':{backgroundColor:'#f00'},'.c':{border:'1#000'},'.a.b':{width:100},'.b.a':{width:200},});constvx=(
);上面的.a.b和.b.a其实代表的是同一个名字。而最终的宽度是200。而且名字组合越长，组合结果越多，也就意味着查询会耗费更多的时间。例如，class="abc"的样式组合将有7个结果：.a、.b、.c、.a.b、.a.c、.b.c和.a.b.c。当视图应用这种样式时，它需要查询这7种可能性。所以Ngui中CSS样式表的组合限制为4种，超过4种组合可能会出现意想不到的结果。多级名称样式表的数据结构实际上是一个树结构。每个命名样式表都可以有子样式表。子级样式表之间用空格隔开，级数没有限制。但是理论上，你查询的层级越多，速度也会越慢。如：CSS({'.a':{width:200,height:200},'.b':{height:100},'.a.b':{width:100,height:200},});constvx=(
你好！ );上例中子级样式表的权重会高于[Text]的高度Astylesheetattribute本应为200.a.b覆盖了.b。多级样式表的应用也必须对应视图的嵌套关系，这样样式才能生效。例如，在上面的例子中。a.a.伪类伪类有normal、hover、down三种，分别对应normal、cursorentry、cursordown。当然，如果触摸屏上没有光标，所有的悬停都不会存在。只有normal和down对应touchstart和touchend。示例：CSS({'.a':{width:100,height:100},'.a:normal':{backgroundColor:'#aaa'},'.a:hover':{backgroundColor:'#f00'},'.a:down':{backgroundColor:'#f0f'},});constvx=(
);需要注意的一点是伪类不能有子伪类，比如：CSS({'.a:hover':{backgroundColor:'#f00'},'.a:hover.b':{width:200},'.a:hover.b:hover':{backgroundColor:'#ff0'},//此规则抛出异常});
