YUS框架的uc颜色控制命令

时间：2023-03-28 19:35:37 HTML

yus简单地将CSS的常用属性分为两类，即尺寸和颜色。yus认为所有px、pt、em、cm、vw、vh或百分比符号%都是尺寸的度量单位，可以使用us命令渲染；而#f00,#ff00,rgb(255,0,0),rgba(255,0,0,1)等颜色的渲染是由uc命令完成的。例如：redborder

解析如下：solid　是内置的css样式系统，边框线类型为实线。uc-c-f00　字体颜色为红色uc-bdc-f00　边框颜色为红色us-bw-1　边框宽度为1px像素，因为字体颜色与边框颜色相同，上面的代码可以简写成如下格式：所以yus框架尽量做到简单，那么父元素控制子元素，这个功能不得不提上日程，n在指令描述的语法中，也就是子元素的后代层数子元素，例如n=1时表示子元素；n=2表示孙辈；n=3表示曾孙。示例：

运行效果如下：详细解释：us-ml-2em，代表ul元素左边距的2个字符，即{margin-left:2em;}us-w,h-50-1，表示ul的所有子元素li，宽高均为50像素，即us-mr-10-1，代表ul的所有子元素li，右边距10个像素，即uc-bg-f00-1，代表所有子元素ul的元素li，背景色为红色，即，参考《uc颜色指令》nl-[block_fl]uc指令，给child添加block和fl两个类样式元素，即，nl指令参考《nl子级管控》高级教程再举个栗子：

1234

1234运行效果如下：详细解释：us-ml-2em，表示从表格的左边距起2个字符，即{margin-left:2em;}ac，表示元素中的文本居中，这个是《内置样式》，即{text-align:center;}us-borderCollapse-collapse，表示合并折叠表格边框，是典型的驼峰式语法，即{border-collapse:collapse;}us-w,h-50-3，代表表格的所有三代子元素td的宽高都是50像素，即看到这里，有同学可能会问了，明明是从表>tr>td，这怎么算呢？是两层孩子，为什么是3层而不是2层呢？什么？纳尼？怎么了？其实如果你拿到table元素和console.log()的输出，你会发现在talbe和tr之间会自动生成一个TBODY标签，所以应该真的是第三代子元素。可能不同的浏览器会有不同的解析方式。这些作者都没有做过太多的研究，所以我只是简单提一下。在这种情况下，您可以通过查看输出元素来找到问题的症结所在。us-bo-[1px_solid_#666]-3，代表宽度为1像素，实线，深灰色边框，即{border:1pxsolid#666;}uc-bg-ff0-3，代表黄色背景的第三代子元素td，即{background:#ff0;}group-tb，命令组合，复制该命令前的所有样式和命令集，tb为组名，使用其他元素时，直接写这个组名，就可以拉命令集了。tb，拉取组生成的命令集。nl-[whiteuc-bg-00f]-even，子级控制，上一篇已经介绍过，这里在表达式后加一个even参数，即表达式只对偶数级子有效级元素。表达式中的白色为子元素文本的白色《内置样式》，uc-bg-00f为子元素的蓝色背景，表达式中的子项可以用空格分隔或下划“_”符号。Yus框架官网：http://www.runyus.com微信：aiwenci