众所周知的是,页面的样式渲染是由CSS来完成的。例如:width:100px;代表元素宽度为100像素;height:50px;代表元素高度为50像素;font-size:15px;代表元素中字体大小为15像素;下面一段就是标准的CSS语句:
.css1 { width:100px; height:100px; line-height:100px; background:#ff0; }
上面的CSS代码,代表一个宽、高、行高为100px,并且背景色为黄色的方框元素,那么,用Yus如何来实现上述CSS代码的功能呢,先直接给出例子:
<div class="us-w-100 us-h-100 us-lh-100 uc-bg-ff0"></div>
解释如下:
us-w-100,代表宽度为100像素,即:width:100px;
us-h-100,代表高度为100像素,即:height:100px;
us-lh-100,代表行高为100像素,即:line-height:100px;
us-bg-ff0,代表背景色为#ff0黄色,即:background:#ff0;
由于在Yus中,数值相同的情况下,中间的属性可以用逗号分隔连续书写,所以上边的代码可以精简为:
<div class="us-w,h,lh-100 uc-bg-ff0"></div>
US指令说明
项目 | 描述 |
语法 | 指令由三部分部分,第一部分us声明尺寸指令,第二部分为参数属性缩写,第三部分为数值。 示例:us-属性参数-数值。 |
属性参数 | 是CSS属性的缩略写法,如w代表width,m代表margin,详情参见下列《属性参数表》 |
数值 | 数值为正数的情况下直接书写,数值为负数的情况下,用ms或^符号来代替。 示例:us-t-ms100或us-t-^100 |
n | 向下延伸层级,例如n为3时,影响第三代子元素,即children().children().children() |
单位 | 数值如果不带单位的情况下,默认使用px像素单位,us指令支持的尺寸单位包括px,pt,em,cm,vw,vh,vmin,vmax等,百分比可以使用%符号或pr |
属性参数表
yus将css常用属性简单的划分为两大类,即尺寸、颜色。yus认为所有px,pt,em,cm,vw,vh或者百分比符号%,都是尺寸的计量单位,可以使用us命令进行渲染,下表列出所有尺寸单位涉及到的属性参数:属性参数 | 示例 | CSS写法 | 功能描述 |
w | us-w-500 | {width:500px;} | 元素宽度,如果作用在<span>或<li>等标签上,需要首先添加block或inline样式,而这些class样式是yus系统自带的《内嵌样式》,直接书写调用即可。 例如: <span class="block us-w-300">或<li class="inline us-w-300"> |
h | us-h-20vh | {height:20vh;} | 元素高度 说明一下vw、vh,vmin,vmax几个尺寸单位,1vw等于视窗宽度的1%,1vh等于视窗高度的1%,vmax视窗宽度或高度相对大的,vmin视窗宽度或高度相对小的。 |
lh | us-lh-30 | {line-height:30px;} | 文本行高 |
fs | us-fs-15 | {font-size:15px;} | 文字大小 |
t | us-t-10vh | {top:10vh;} | 上方距离,设置顶端距离的元素,必须同时设置position位置属性,使用内嵌class样式自带的poa、por、pof都可以,参考 《内嵌样式》。 |
r | us-r-10 | {right:10px;} | 右侧距离,需设置position位置属性。 |
b | us-b-10 | {bottom:10px;} | 下方距离,需设置position位置属性。 |
l | us-l-10 | {left:10px;} | 左侧距离,需设置position位置属性。 |
m | us-m-2em | {margin:2em;} | 元素外边距,此示例代表元素外边距为2个字符。 CSS中margin属性可以这些书写:{margin:2cm 4cm 3cm 4cm;}或{margin:10px 5px;}。Yus同样也支持这种书写方式,只是在格式上稍有区别,同时对us-,uc-指令不再敏感。 例如: us-m-[2cm 4cm 3cm 4cm]或us-m-[10px 5px] |
mt | us-mt-8 | {margin-top:8px;} | 元素上方外边距。 |
mr | us-mr-8 | {margin-right:8px;} | 元素右侧外边距。 |
mb | us-mb-8 | {margin-bottom:8px;} | 元素下方外边距。 |
ml | us-ml-8 | {margin-left:8px;} | 元素左侧外边距。 |
p | us-p-8px | {padding:8px;} | 元素内边距。 |
pt | us-pt-8 | {padding-top:8px;} | 元素上方内边距。 |
pr | us-pr-8 | {padding-right:8px;} | 元素右侧内边距。 |
pb | us-pb-8 | {padding-bottom:8px;} | 元素下方内边距。 |
pl | us-pl-8 | {padding-left:8px;} | 元素左侧内边距。 |
bw | us-bw-1 | {border-width:1px;} | 边框宽度,设置元素边框宽度,必须同时设置元素边框的线型,例如:solid或dotted,内置线型class样式参见 《内嵌样式》。 |
bt | us-bt-1 | {border-top-width:1px;} | 边框上方宽度。 |
br | us-br-1 | {border-right-width:1px;} | 边框右侧宽度。 |
bb | us-bb-1 | {border-bottom-width:1px;} | 边框下方宽度。 |
bl | us-bl-1 | {border-left-width:1px;} | 边框右侧宽度。 |
ra | us-ra-5 | {border-radius:5px;} | 元素边框圆角。 |
ls | us-ls-5 | {letter-spacing:5px;} | 元素字母间距。 |
ti | us-ti-2em | {text-indent:2em;} | 段落首行文字缩进,例子中为缩进两个字符。 |
ws | us-ws-5 | {word-spacing:5px;} | 文字间距。 |
ow | us-ow-2 | {outline-width:2px;} | 元素周围轮廓线的宽度。 |
oo | us-oo-5 | {outline-offset:5px;} | 轮廓线偏移量。 |
xw | us-xw-500 | {max-width:500px;} | 设置最大宽度。 |
nw | us-nw-500 | {min-width:500px;} | 设置最小宽度。 |
xh | us-xh-500 | {max-height:500px;} | 设置最大高度。 |
nh | us-nh-500 | {min-height:500px;} | 设置最小高度。 |
va | us-va-5 | {vertical-align:5px;} | 设置元素的垂直对齐方式,注意此处只可以使用数值,如top、middle等值的写法,下面另外说明。 |
cp | us-cp-5 | {grid-column-gap:5px;} | 定义网格布局中,列间隙的大小。 |
rp | us-rp-5 | {grid-row-gap:5px;} | 定义网格布局中,行间隙的大小。 |
gap | us-gap-5 | {grid-gap:5px;} | 定义网格布局中,行与列间隙的大小。 |
z | us-z-10 | {z-index:10;} | 设置元素的堆叠顺序。 |
fw | us-fw-700 | {font-weight:700;} | 设置文本的粗细,其中数值700等价于bold。 |
opa | us-opa-0.5 | {opacity:0.5;} | 设置元素的不透明级别。 |
o | us-o-5 | {order:5;} | 设置弹性盒对象元素的顺序。 |
g | us-g-3 | {flex-grow:3;} | 设置或检索弹性盒子的扩展比率。 |
s | us-s-2 | {flex-shrink:2;} | 设置flex元素的收缩规则。 |
fb | us-fb-80 | {flex-basis:80px;} | 设置弹性项目的初始长度。 |
f | us-f-1 | {flex:1;} | 设置或检索弹性盒模型对象的子元素如何分配空间。 |