眾所周知的是,頁面的樣式渲染是由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;} | 設定或檢索彈性盒模型物件的子元素如何分配空間。 |