Creating Applications with Mozilla-Chapter 4. CSS in Mozilla Applications-P2

Tham khảo tài liệu creating applications with mozilla-chapter 4. css in mozilla applications-p2, công nghệ thông tin, kỹ thuật lập trình phục vụ nhu cầu học tập, nghiên cứu và làm việc hiệu quả
Nội dung trích xuất từ tài liệu:
Creating Applications with Mozilla-Chapter 4. CSS in Mozilla Applications-P2Chapter 4. CSS in Mozilla Applications-P24.2.2.6. Pseudoclass selectorsAnother feature of CSS-2 that Mozilla makes extensive use of is thepseudoclass. In CSS, pseudoclasses are used to represent different states forelements that are manipulated by the user, such as buttons. The states --represented by pseudoclasses such as active, focus, and hover --change when the user interacts with an element. The pseudoclasses actuallycorrespond to events on the interface elements.The : character is used to add these pseudoclasses in the CSS notation:#forwardButton:hover{ list-style-image :url(chrome://navigator/skin/forward-hover.gif);}The pseudoclass is often appended to another style. Since specific CSS stylerules inherit from more general rules (see the section Section 4.3.1 later inthis chapter for more information about this inheritance), the example abovepicks up any styles defined for the button with the id of forwardButton(and any class-based information, as well as the basic CSS for a button), butsubstitutes whatever image is used with this special GIF that represents abutton being moused or hovered over.In Mozillas Modern skin, the pseudoclasses work collectively to givebuttons their appearance and behavior. Each of the following button imagesin Figure 4-3 is associated with a different pseudoclass (or attribute, as wediscuss in the next section). As soon as the pseudoclass is changed by userinteraction (e.g., the user hovers the mouse over the button), the statechanges and the effect is one of seamless transition.Figure 4-3. The different states for buttons in the Modern theme4.2.2.7. Element relation selectorsContextual subgroups -- elements appearing within other elements, such asitalicized text within a element or a in HTML -- can begrouped in CSS, but this is an extremely inefficient way to style XUL. CSS2also provides ways to group elements for styling based on their relationshipin the object model. Table 4-1 lists these relational selectors.Table 4-1. Relational selectorsSelector Syntax Example ancestor toolbar.primary descendent { menutitem#F {Descendent attribute: border: 1px; value; } }Selector Syntax Example menu#file > parent > child { menuitem { attribute:Parent-Child font-weight: value; bold; } } elBefore + menuitem#file + elAfter { menuitem#edit {Precedence attribute: background- value; color: black; } }In the descendent example in Table 4-1, the F menuitem has a borderonly when it appears within the toolbar whose class is given asprimary. In the parent-child example, all menu items in a menu with theid file are made bold. Using +, the precedence selector says that the editmenu should have a black background only when it comes after the filemenu. You can use these element relation selectors to create longerdescensions (e.g., toolbar.primary > menu#file >menuitem#new), but remember that the processing gets more expensivewith each new level, and that the descendent operation is particularlyprocessor-intensive.4.2.2.8. The !important keywordAs you might imagine, when you have a technology with such strongnotions of precedence as Cascading Style Sheets (the ID-based style trumpsthe class-based style, inline style attributes trump those loaded from anexternal stylesheet, etc.), you may need to identify and set aside certainstyles as the most important, regardless of where they are found in thecascade.This is the role played by the !important keyword. Sitting to the right ofa style value, it specifies that style rule should take precedence over all of itscompetitors and that it should be applied all the time. Example 4-3demonstrates how no borders are rendered on treecells of the classtreecell-editor because of the !important keyword.Example 4-3. !important keyword in CSS.treecell-editor,.treecell-editor > box { margin: 0px !important; padding: 0px !important;}.treecell-editor { border: 0px !important;}You can search for the !important keyword in the LXR Mozilla sourcecode tool and see its use in the Mozilla CSS.4.2.2.9. The inherits valueCSS uses inheritance all over the place. Inheritance is implicit in the waystyle rules are applied, stylesheets are organized in the chrome, and skinsborrow from one another in Mozilla. However, a special CSS value indicatesthat the selector explicitly inherits its value from the parent element.When a CSS property has a value of inherit, that propertys real value ispulled from the parent element:.child { color: darkblue; height: inherit; background-color: inherit;}This block specifies a dark blue color for the font, but the values of the othertwo properties are inherited from the parent. In many cases, this has thesame effect as not specifying any value at all for the ...