摘要：簡(jiǎn)介這是一個(gè)的排版顯示引擎和跨平臺(tái)的應(yīng)用程序開(kāi)發(fā)框架，基于，這也是第一個(gè)在移動(dòng)端融合的前端項(xiàng)目，至此成為了真正意義上前后端通吃的語(yǔ)言。樣式表名稱(chēng)規(guī)則非常抱歉的告訴各位，現(xiàn)在的樣式表體系只支持并不支持與。上面與表示其實(shí)是同一個(gè)名稱(chēng)。

這是一個(gè)GUI的排版顯示引擎和跨平臺(tái)的GUI應(yīng)用程序開(kāi)發(fā)框架，基于NodeJS/OpenGL，這也是第一個(gè)在移動(dòng)端Android/iOS融合NodeJS的前端GUI項(xiàng)目，至此JavaScript成為了真正意義上前后端通吃的語(yǔ)言。

Ngui的目標(biāo)：在此基礎(chǔ)上開(kāi)發(fā)GUI應(yīng)用程序可擁有開(kāi)發(fā)WEB應(yīng)用般簡(jiǎn)單與速度同時(shí)兼顧Native應(yīng)用程序的性能與體驗(yàn)。

開(kāi)源跨平臺(tái)移動(dòng)項(xiàng)目Ngui【簡(jiǎn)介】

開(kāi)源跨平臺(tái)移動(dòng)項(xiàng)目Ngui【入門(mén)】

開(kāi)源跨平臺(tái)移動(dòng)項(xiàng)目Ngui【視圖與布局系統(tǒng)】

開(kāi)源跨平臺(tái)移動(dòng)項(xiàng)目Ngui【Action動(dòng)作系統(tǒng)】

開(kāi)源跨平臺(tái)移動(dòng)項(xiàng)目Ngui【CSS樣式表規(guī)則及用法】

Ngui API 文檔

CSS樣式表全稱(chēng)叫Cascading Style Sheets是一種用來(lái)表現(xiàn)HTML文件樣式的語(yǔ)言，是Web前端開(kāi)發(fā)中一定會(huì)用到的排版語(yǔ)言，那么Ngui中css的靈感就來(lái)自于此。與其說(shuō)是靈感還不如果說(shuō)是借鑒并通過(guò)精簡(jiǎn)而來(lái)，因?yàn)殚_(kāi)發(fā)這個(gè)框架的初衷效率一直就是最重的目標(biāo)，其次才是使用體驗(yàn)。

下面是Ngui中CSS樣式表的寫(xiě)法：

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 = (
    

        Hello!
    
);

是不是很熟悉呢。

這里說(shuō)的是新式表到底是什么時(shí)間應(yīng)用到視圖上的。樣式表并不會(huì)主動(dòng)去查詢(xún)[View.class]，繪圖線程在渲染幀畫(huà)面前會(huì)先查詢(xún)并解決所有需要更新的樣式表class。請(qǐng)記住樣式表只是靜態(tài)的屬性集合，樣式表的應(yīng)用是需要的視圖對(duì)像主動(dòng)查詢(xún)。所以當(dāng)一個(gè)視圖先前已經(jīng)應(yīng)用過(guò)樣式表，然后樣式表屬性被更改后并不會(huì)影響到先前應(yīng)用樣式表的視圖。需要注意的一點(diǎn)是樣式表樣表應(yīng)用只是簡(jiǎn)單的對(duì)視圖對(duì)像屬性的更改，并沒(méi)有權(quán)重的概念，所以在應(yīng)用樣式表時(shí)需要注意與直接設(shè)置屬性的先后順序，很有可能先前設(shè)置的視圖屬性被樣式表覆蓋，因?yàn)闃邮奖?b>class的設(shè)置并不會(huì)立即生效它總是在渲染開(kāi)始前才應(yīng)用到視圖。

非常抱歉的告訴各位，現(xiàn)在的樣式表體系只支持class并不支持id與tagName。還是因?yàn)橥瑯拥脑蛐蕟?wèn)題，所以我希望盡量簡(jiǎn)單。當(dāng)然這一切都需要在使用體驗(yàn)上付出代價(jià)，也許在某一天會(huì)有人想出更好的替代方案也說(shuō)不定，要知道眾人的力量是無(wú)窮的況且現(xiàn)在框架本身不需限制于任何標(biāo)準(zhǔn)。

樣式表首先都是全局的，后面定義的同名樣式表會(huì)與前面定義的樣式表合并如果有重復(fù)的屬性會(huì)進(jìn)行替換。怎樣的名字是同名的呢？并不是說(shuō)定義時(shí)的名稱(chēng)組合key本身，看下面的例子。

CSS({
    ".a": { height: 100 },
    ".b": { backgroundColor: "#f00" },
    ".c": { border: "1 #000" },
    ".a.b": { width: 100 },
    ".b.a": { width: 200 },
});
const vx = (
    

);

上面.a.b與.b.a表示其實(shí)是同一個(gè)名稱(chēng)。并且最后的width為200。
并且越長(zhǎng)的名稱(chēng)組合就會(huì)有越多的組合結(jié)果，也就是說(shuō)查詢(xún)也會(huì)需要更多的時(shí)間。比如class="a b c"的樣式組合會(huì)有.a、.b、.c、.a.b、.a.c、.b.c、.a.b.c 7種結(jié)果，當(dāng)視圖應(yīng)用這個(gè)樣式時(shí)需要查詢(xún)這7種可能性。所以在Ngui中CSS樣式表的組合限制在4個(gè)，多于4個(gè)時(shí)的組合時(shí)可能會(huì)出現(xiàn)意想不到結(jié)果。

樣式表的數(shù)據(jù)結(jié)構(gòu)其實(shí)是個(gè)樹(shù)狀結(jié)構(gòu)，每個(gè)具名的樣式表都可以有子樣式表，子級(jí)樣式表以空格區(qū)分且級(jí)數(shù)沒(méi)有限制但理論來(lái)說(shuō)越多的級(jí)數(shù)查詢(xún)的速度也會(huì)越慢。如：

CSS({
    ".a": { width: 200, height: 200 },
    ".b": { height: 100 },
    ".a .b": { width: 100, height: 200 },
});
const vx = (
    

        Hello!
    
);

子級(jí)樣式表權(quán)重會(huì)更高上面的例子中[Text]的height應(yīng)該是200 .a .b的樣式表屬性會(huì)覆蓋.b。

多級(jí)樣式表的應(yīng)用也必須對(duì)應(yīng)視圖的嵌套關(guān)系，這樣樣式才能生效，比如上面的例子中.a .b這個(gè)樣式表應(yīng)用于視圖時(shí)，這個(gè)視圖的父級(jí)或頂級(jí)視圖的樣式表必須亦一個(gè).a。

偽類(lèi)有三種類(lèi)型分為normal、hover、down 分別對(duì)應(yīng)正常、光標(biāo)進(jìn)入、光標(biāo)按下。當(dāng)然在觸摸屏上沒(méi)有光標(biāo)所有hover也不會(huì)存在。只有normal、down 對(duì)應(yīng)觸摸開(kāi)始與觸摸結(jié)束。

例：

CSS({
    ".a": { width: 100, height: 100 },
    ".a:normal": { backgroundColor: "#aaa" },
    ".a:hover": { backgroundColor: "#f00" },
    ".a:down": { backgroundColor: "#f0f" },
});
const vx = (
    

);

有一點(diǎn)需要注意偽類(lèi)不可以再有子級(jí)偽類(lèi)，如：

CSS({
    ".a:hover": { backgroundColor: "#f00" },
    ".a:hover .b": { width: 200 },
    ".a:hover .b:hover": { backgroundColor: "#ff0" }, // 這條規(guī)則會(huì)拋出異常
});