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

本篇內容介紹了“聲明Flex CSS樣式的基本方法有哪些”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

Flex內的CSS

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

如果您已經在使用了駝峰式大小寫的編程語言內進行過編程，那么，這非常容易習慣。好的消息是CSS2.0規范內可用的大部分內容在FlexCSS實現內也可用。并且，CSS的Flex實現是在CSS2.0W3C標準上的顯著擴展，提供了額外的、對Flex組件惟一的樣式屬性。

維護樣式：組件與Flex CSS樣式屬性

在開始創建Flex CSS樣式表之前，我建議您首先考慮您想要如何實現樣式。出于簡單性的考慮，我向您展示了四種聲明樣式的基本方法：

◆通過組件的類名。通過將組件的類名作為樣式名來設置組件的樣式：

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;  }

◆通過一個惟一的樣式名。通過使用一個惟一的Flex CSS樣式名來聲明樣式。請確保在名字之前使用一個句點并使用駝峰式大小寫約定：

.altText

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

◆通過一個組件外加一個樣式名。當同一個組件需要有多種設計時（這對于具有多個視圖狀態的應用程序很常見），可以設置組件的樣式名。這種方法還確保了只有特定的組件才可以分配到特定的樣式：

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

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

global  {   cornerRadius:4;   }

Flex CSS樣式優先權

雖然全局選擇器基本上設置的是一個屬性的默認值，該值很容易被覆蓋。比如，如果我在內聯（inline）或在我的CSS文件內將Button組件的cornerRadius屬性設置為0，它將優于我已經指定的4這一全局默認設置；因此，所有我的Button組件都將包含一個值為0的cornerRadius屬性。而且，我將通過創建一個額外的樣式來覆蓋4這一全局設置和0這一Button設置：

Button.altCornersButton  {   cornerRadius:8;   }

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