聲明Flex CSS樣式的基本方法有哪些

本篇內(nèi)容介紹了“聲明Flex CSS樣式的基本方法有哪些”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

Flex內(nèi)的CSS

首先，對(duì)于具有Web設(shè)計(jì)背景的人，最為重要的是要理解Flex CSS樣式并不遵循與W3CCSS規(guī)定相同的約定。在W3CCSS版本2.0中被用來(lái)分離單詞的連字符（-）并未用作Flex實(shí)現(xiàn)內(nèi)的代碼約定的一部分。相反，CSS的Flex實(shí)現(xiàn)使用了駝峰式大小寫。比如，W3CCSS2規(guī)范內(nèi)的vertical-center對(duì)等于FlexCSS內(nèi)的verticalCenter。

如果您已經(jīng)在使用了駝峰式大小寫的編程語(yǔ)言內(nèi)進(jìn)行過(guò)編程，那么，這非常容易習(xí)慣。好的消息是CSS2.0規(guī)范內(nèi)可用的大部分內(nèi)容在FlexCSS實(shí)現(xiàn)內(nèi)也可用。并且，CSS的Flex實(shí)現(xiàn)是在CSS2.0W3C標(biāo)準(zhǔn)上的顯著擴(kuò)展，提供了額外的、對(duì)Flex組件惟一的樣式屬性。

維護(hù)樣式：組件與Flex CSS樣式屬性

在開(kāi)始創(chuàng)建Flex CSS樣式表之前，我建議您首先考慮您想要如何實(shí)現(xiàn)樣式。出于簡(jiǎn)單性的考慮，我向您展示了四種聲明樣式的基本方法：

◆通過(guò)組件的類名。通過(guò)將組件的類名作為樣式名來(lái)設(shè)置組件的樣式：

TitleWindow{  borderColor:#f7f7f7;  borderAlpha:1;  borderThicknessLeft:0;  borderThicknessTop:0;  borderThicknessBottom:0;  borderThicknessRight:0;  cornerRadius:0;  headerHeight:0;  highlightAlphas:1,1;  headerColors:#f7f7f7,#f7f7f7;  footerColors:#f7f7f7,#f7f7f7;  backgroundColor:#f7f7f7;  dropShadowEnabled:true;  }

◆通過(guò)一個(gè)惟一的樣式名。通過(guò)使用一個(gè)惟一的Flex CSS樣式名來(lái)聲明樣式。請(qǐng)確保在名字之前使用一個(gè)句點(diǎn)并使用駝峰式大小寫約定：

.altText

{   fontFamily:TVNordEFCEOP-RegularCon;   fontSize:18;   color:#FFFFFF;  }

◆通過(guò)一個(gè)組件外加一個(gè)樣式名。當(dāng)同一個(gè)組件需要有多種設(shè)計(jì)時(shí)（這對(duì)于具有多個(gè)視圖狀態(tài)的應(yīng)用程序很常見(jiàn)），可以設(shè)置組件的樣式名。這種方法還確保了只有特定的組件才可以分配到特定的樣式：

Text.bigYellowText  {   color:#EFB526;   fontSize:36;   fontWeight:Bold;  }

◆通過(guò)全局選擇器。全局選擇器是一種特殊的選擇器，它能夠影響包含屬性集的應(yīng)用程序內(nèi)的每一個(gè)組件。比如，我可以將包含有cornerRadius樣式屬性的所有顯示對(duì)象組件的cornerRadius樣式屬性設(shè)置為4，如下所示：

global  {   cornerRadius:4;   }

Flex CSS樣式優(yōu)先權(quán)

雖然全局選擇器基本上設(shè)置的是一個(gè)屬性的默認(rèn)值，該值很容易被覆蓋。比如，如果我在內(nèi)聯(lián)（inline）或在我的CSS文件內(nèi)將Button組件的cornerRadius屬性設(shè)置為0，它將優(yōu)于我已經(jīng)指定的4這一全局默認(rèn)設(shè)置；因此，所有我的Button組件都將包含一個(gè)值為0的cornerRadius屬性。而且，我將通過(guò)創(chuàng)建一個(gè)額外的樣式來(lái)覆蓋4這一全局設(shè)置和0這一Button設(shè)置：

Button.altCornersButton  {   cornerRadius:8;   }

“聲明Flex CSS樣式的基本方法有哪些”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！