CSS样式表简介CSS样式表全称叫Cascading Style Sheets是一种用来表现HTML文件样式的语言,是Web前端开发中一定会用到的排版语言,那么Ngui中css的灵感就来自于此。与其说是灵感还不如果说是借鉴并通过精简而来,因为开发这个框架的初衷效率一直就是最重的目 ...
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 > <Text >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 />);
上面.a.b
与.b.a
表示其实是同一个名称。并且最后的width
为200。
并且越长的名称组合就会有越多的组合结果,也就是说查询也会需要更多的时间。比如
的样式组合会有.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 > <Text >Hello!</Text> </Div>);
伪类
伪类有三种类型分为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 />);
有一点需要注意伪类不可以再有子级伪类,如:
CSS({ '.a:hover': { backgroundColor: '#f00' }, '.a:hover .b': { width: 200 }, '.a:hover .b:hover': { backgroundColor: '#ff0' }, // 这条规则会抛出异常});
海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理:https://www.xlkjsw.com
原标题:Ngui样式表(CSS)规则及用法
关键词:CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。