https://blog.csdn.net/weixin_46521444/article/details/117118592
The first chapter, page rendering runYus:
RunYus only focus on two parts of data rendering, first: px pt em pixel data, such as beginning to use us - instruction method; Second: # FFF # 000 color such as data, begin to use uc - instruction methods,
1, and the us - instructions - key - num - dom) : focus on the attributes of the pixel rendering support, support the properties of the key list corresponding to the following:
"W", "width",
"H", "height",
"T", "top",
"R" : "right,"
"B", "bottom",
"L", "left",
"P" : "padding",
"M", "margin",
"Pt" : "padding - top,"
"Pr" : "padding - right,"
"Pb" : "padding - bottom,"
"Pl" : "padding - left,"
"Mt" : "margin - top,"
"Mr", "margin - right",
MB: "margin - the bottom",
"Ml" : "margin - left,"
"Bo" : "border",
"Bt" : "border - top - width",
"Br" : "border - right - width",
"Bb", "border - bottom - width",
"Bl" : "the border - left - width",
"Ra" : "border - the radius,"
"Bw" : "border - width,"
"Fs" : "the font, size,"
"Lh" : "line - height,"
"Ls" : "letter - spacing,"
"Ti", "text" text-indent,
"Ws" : "word - spacing,"
"Ol" : "the outline",
"Ow" : "the outline - width,"
"Oo" : "the outline - offset,"
Xw: "Max - width",
Nw: "min - width,"
Xh: "Max - height",
"Nh" : "min - height,"
"The va" : "vertical - align,"
Example: the us - w - 500 indicates that the width is 500 px, without specifying unit, the default use px pixels; Us - w - 100 vw indicates that the width for the entire screen, vw is unit; Us - w - 100 pr, this also indicates that the width of the 100%, pr representative %, which, of course, you can also write us directly - w - 100%; Us - mt - 5 represents the top margin to 5 pixels, us - mt - ^ 5 or us - mt - ms5 represents the top margin is negative 5 pixels, or ms ^ tip number represents a negative (-)
Under normal circumstances, the us - the command control is the current node, but sometimes also want to consider the following feeling, so joined the child element control parameters, such as: us - w - 80-1 on behalf of the children of the first layer> child element width 80 pixels, in the same way us - w - 80-3 represents the third element of straton width 80
At the same time, the us - instruction also supports several units without CSS properties, such as: us - z - 8 representative layer of z - the index values of 8; Us - fw - 700 on behalf of the font for the coarse; Us - opa - 0.2 on behalf of the transparency of 0.2
"Z" : "z - index",
Fw: "the font - weight",
"Opa" : "opacity,"
2, uc - instruction (uc - key - color - dom) : focus on support color rendering properties, support the properties of the key list corresponding to the following:
"C", "color",
"Bg" : "background",
"Institute", "background - image",
"BGC" : "background - color,"
"Data" : "border - color,"
"BTC" : "border - top - color,"
"The BRC" : "border - right - color,"
"BBC" : "border - bottom - color,"
"BLC" : "border - left - color,"
For example: the us - c - FFF represents the font color to white, which do not need # #, and us - instructions for the same reason uc - bg - f00-1 on behalf of the child dom background color to red, the other is not to do too much explanation.
3, CSS instruction extension support: for example, to set the padding properties as follows: 5 px 8 px 6 8 px, px use us so directly - p - 5 px 8 px 6 px 8 px is not possible, need to be expanded attribute, namely the us - p - 8 px] [5 px 8 px 6 px, also set a background color transition style, use the uc - bg - [linear - gradient (to bottom, rgba (56121217,0.6), rgba (13109190, 1))] that can be implemented,
Yus don't recommend this method of use, however, this will make the HTML code looks very bloated, very complex, but if you insist on such use, that is no problem,
In addition, it is important to note that in the example above [linear - gradient (to bottom, rgba (56121217,0.6), rgba (13109190, 1))], because of there is space for them to bottom, happen to you and defines a bottom class, the class will take effect, in order to avoid this kind of situation space can use an underscore "_" instead, in the same way in which linear - dash of gradient, also can use the vertical bar "|" instead, of course, you also can not instead of, if not a problem,
4, rotate - command (rotate - deg) : this is easy to understand, is the Angle of rotation, clockwise rotate - 45 representative element 45 degrees, the same rotate also supports extensions, for example: the rotate - [matrix (1.8, 0.5, 1.2, 0.5, 0.2, 0.2)]
5, shadow - instruction (shadow - px1 - px2 - px3 - color) : this is to generate the shadow's instructions, such as: shadow - the 3-3-3-666 to generate a downward shift 3 gray shadow to the right, or numerical can use ms ^ to represent negative Numbers, in the same way, if you feel shadow instructions not enough use, can also use the extension [] support, namely the shadow - style [attribute]
6, the filter - instruction (filter - key - val) : this instruction is support for the filter, the corresponding key attributes list as follows:
The blur, huerotate, saturate, brightness, contrast, grayscale, invert, opacity, sepia
For example: the filter - blur - 20, the filter or filter - saturate huerotate - 80-30, which is no need to bring the unit, yus automatically judgment and additional units, namely the filter to saturate - 30 and filter to saturate - 0.3 is the same, the effect of yus automatically give no decimal point the value of the additional percentage %
7, nl - instruction (nl - CLS - obj) : this is to give children the children to add a class style, or add style to specify obj, indicating that a mundane involves in the yus style in most cases of obj is the corresponding class name, and it comes to data interaction, obj corresponding data - is the name of the name tag, data corresponding to the existing data (" val "), please recognize, that will be used, as to why not class or id, since to do their own thing, always have difference with others, isn't it? Directly to the example below,
The above example, in turn, represents a, the child block to display: block; float:left; Red background color, font color to white,
As for the block, fl, bgred, white is the built-in class defined in advance, yus predefined and support several kinds of commonly used class, the class was in existence already before loading yus, don't need to write separately, the corresponding list as follows:
B {the font - weight: bold; } \
. Arial {the font-family: \ "arial "; } \
I. {the font - style: italic; } \
The vm {vertical - align: middle; } \
The fl {float: left! important; } \
The fr {float: right! important; } \
. Al {text - align: left! important; } \
And so on...
In addition, the above nl - instructions written in complicated, so the nl - instruction also support the extension, the simplified method, which is [] to all class box, also written as there is a problem, as mentioned above, because the block fl bgred exists between white Spaces, so this a few style level pair in addition to the dom, is effective on ul itself, if you want to avoid this situation, with underscores instead of Spaces & lt; Ul & gt; , so as not to cause any problems,
So, some children's shoes will ask questions, nl - instruction can not contain us -- - uc, rotate - such as instruction? The author's answer is yes, the above example can such writing,
And then a run, you will scold me, hello, this is cheating is good, no effect, it is really like, nl - instruction of nested rendering does have some weak, you must be at least a us - is added in the child dom or uc - instruction to produce effect, like this, for example,
Of course, there are other solutions, users only need in their writing js file runYus () can be realized rendering
The $(document). Ready (function (event) {
RunYus ();
});
Obj in nl - CLS - obj is a class name, namely the nl - instruction in addition to affect the child the dom, also can affect other dom, for example the following code, you can give all contain nav element to add the class name style: