開源跨平臺移動項目Ngui【CSS樣式表規則及用法】

Ngui簡介

這是一個GUI的排版顯示引擎和跨平臺的GUI應用程序開發框架，基於NodeJS/OpenGL，這也是第一個在移動端Android/iOS融合NodeJS的前端GUI項目，至此JavaScript成爲了真正意義上先後端通吃的語言。

Ngui的目標：在此基礎上開發GUI應用程序可擁有開發WEB應用般簡單與速度同時兼顧Native應用程序的性能與體驗。

• 開源跨平臺移動項目Ngui【簡介】
• 開源跨平臺移動項目Ngui【入門】
• 開源跨平臺移動項目Ngui【視圖與佈局系統】
• 開源跨平臺移動項目Ngui【Action動做系統】
• 開源跨平臺移動項目Ngui【CSS樣式表規則及用法】
• Ngui API 文檔

CSS樣式表究竟是什麼

CSS樣式表全稱叫Cascading Style Sheets是一種用來表現HTML文件樣式的語言，是Web前端開發中必定會用到的排版語言，那麼Ngui中css的靈感就來自於此。與其說是靈感還不若是說是借鑑並經過精簡而來，由於開發這個框架的初衷效率一直就是最重的目標，其次纔是使用體驗。

下面是Ngui中CSS樣式表的寫法：

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 = (
    <Div class="a">
        <Text class="b">Hello!</Text>
    </Div>
);

是否是很熟悉呢。

CSS樣式表運行時

這裏說的是新式表究竟是什麼時間應用到視圖上的。樣式表並不會主動去查詢[View.class]，繪圖線程在渲染幀畫面前會先查詢並解決全部須要更新的樣式表class。請記住樣式表只是靜態的屬性集合，樣式表的應用是須要的視圖對像主動查詢。因此當一個視圖先前已經應用過樣式表，而後樣式表屬性被更改後並不會影響到先前應用樣式表的視圖。須要注意的一點是樣式表樣表應用只是簡單的對視圖對像屬性的更改，並無權重的概念，因此在應用樣式表時須要注意與直接設置屬性的前後順序，頗有可能先前設置的視圖屬性被樣式表覆蓋，由於樣式表class的設置並不會當即生效它老是在渲染開始前才應用到視圖。

CSS樣式表名稱規則

很是抱歉的告訴各位，如今的樣式表體系只支持class並不支持id與tagName。仍是由於一樣的緣由效率問題，因此我但願儘可能簡單。固然這一切都須要在使用體驗上付出代價，也許在某一天會有人想出更好的替代方案也說不定，要知道衆人的力量是無窮的何況如今框架自己不需限制於任何標準。

名稱組合

樣式表首先都是全局的，後面定義的同名樣式表會與前面定義的樣式表合併若是有重複的屬性會進行替換。怎樣的名字是同名的呢？並非說定義時的名稱組合key自己，看下面的例子。

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

上面.a.b與.b.a表示實際上是同一個名稱。而且最後的width爲200。
而且越長的名稱組合就會有越多的組合結果，也就是說查詢也會須要更多的時間。好比class="a b c"的樣式組合會有.a、.b、.c、.a.b、.a.c、.b.c、.a.b.c 7種結果，當視圖應用這個樣式時須要查詢這7種可能性。因此在Ngui中CSS樣式表的組合限制在4個，多於4個時的組合時可能會出現意想不到結果。

多級名稱

樣式表的數據結構實際上是個樹狀結構，每一個具名的樣式表均可以有子樣式表，子級樣式表以空格區分且級數沒有限制但理論來講越多的級數查詢的速度也會越慢。如：

CSS({
    '.a': { width: 200, height: 200 },
    '.b': { height: 100 },
    '.a .b': { width: 100, height: 200 },
});
const vx = (
    <Div class="a">
        <Text class="b">Hello!</Text>
    </Div>
);

• 子級樣式表權重會更高上面的例子中[Text]的height應該是200 .a .b的樣式表屬性會覆蓋.b。
• 多級樣式表的應用也必須對應視圖的嵌套關係，這樣樣式才能生效，好比上面的例子中.a .b這個樣式表應用於視圖時，這個視圖的父級或頂級視圖的樣式表必須亦一個.a。

僞類

僞類有三種類型分爲normal、hover、down 分別對應正常、光標進入、光標按下。固然在觸摸屏上沒有光標全部hover也不會存在。只有normal、down 對應觸摸開始與觸摸結束。

例：

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

有一點須要注意僞類不能夠再有子級僞類，如：

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