Creating Applications with Mozilla-Chapter 4. CSS in Mozilla Applications-P2
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (54.71 KB, 16 trang )
Chapter 4. CSS in Mozilla Applications-P2
4.2.2.6. Pseudoclass selectors
Another feature of CSS-2 that Mozilla makes extensive use of is the
pseudoclass. In CSS, pseudoclasses are used to represent different states for
elements 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 actually
correspond 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 style
rules inherit from more general rules (see the section Section 4.3.1
later in
this chapter for more information about this inheritance), the example above
picks 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), but
substitutes whatever image is used with this special GIF that represents a
button being moused or hovered over.
In Mozilla's Modern skin, the pseudoclasses work collectively to give
buttons their appearance and behavior. Each of the following button images
in Figure 4-3
is associated with a different pseudoclass (or attribute, as we
discuss in the next section). As soon as the pseudoclass is changed by user
interaction (e.g., the user hovers the mouse over the button), the state
changes and the effect is one of seamless transition.
Figure 4-3. The different states for buttons in the Modern theme
4.2.2.7. Element relation selectors
Contextual subgroups -- elements appearing within other elements, such as
italicized text within a <p> element or a <body> in HTML -- can be
grouped in CSS, but this is an extremely inefficient way to style XUL. CSS2
also provides ways to group elements for styling based on their relationship
in the object model. Table 4-1
lists these relational selectors.
Table 4-1. Relational selectors
Selector Syntax Example
Descendent
ancestor
descendent {
attribute:
value;
}
toolbar.primary
menutitem#F {
border: 1px;
}
Selector Syntax Example
Parent-Child
parent > child {
attribute:
value;
}
menu#file >
menuitem {
font-weight:
bold;
}
Precedence
elBefore +
elAfter {
attribute:
value;
}
menuitem#file +
menuitem#edit {
background-
color: black;
}
In the descendent example in Table 4-1, the "F" menuitem has a border
only when it appears within the toolbar whose class is given as
"primary." In the parent-child example, all menu items in a menu with the
id "file" are made bold. Using +, the precedence selector says that the "edit"
menu should have a black background only when it comes after the "file"
menu. You can use these element relation selectors to create longer
descensions (e.g., toolbar.primary > menu#file >
menuitem#new), but remember that the processing gets more expensive
with each new level, and that the descendent operation is particularly
processor-intensive.
4.2.2.8. The !important keyword
As you might imagine, when you have a technology with such strong
notions of precedence as Cascading Style Sheets (the ID-based style trumps
the class-based style, inline style attributes trump those loaded from an
external stylesheet, etc.), you may need to identify and set aside certain
styles as the most important, regardless of where they are found in the
cascade.
This is the role played by the !important keyword. Sitting to the right of
a style value, it specifies that style rule should take precedence over all of its
competitors and that it should be applied all the time. Example 4-3
demonstrates how no borders are rendered on treecells of the class
treecell-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 source
code tool and see its use in the Mozilla CSS.
4.2.2.9. The inherits value
CSS uses inheritance all over the place. Inheritance is implicit in the way
style rules are applied, stylesheets are organized in the chrome, and skins
borrow from one another in Mozilla. However, a special CSS value indicates
that the selector explicitly inherits its value from the parent element.
When a CSS property has a value of inherit, that property's real value is
pulled 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 other
two properties are inherited from the parent. In many cases, this has the
same effect as not specifying any value at all for the child and letting the
style rules above the current one in the document inheritance chain cascade
down. However, not all style rules are inherited. Properties such as
!important, left, and height are not inherited automatically by child
elements, so you must use the inherit keyword to pick them up.
4.2.2.10. Box layout properties in CSS
People sometimes get confused about the various element spacing properties
in CSS, such as border, padding, and margin. Though they work
together a lot and often affect or overlap one another, these properties
specify different things, as Table 4-2
shows.
Table 4-2. CSS spacing and layout properties
Property group Description Display
padding
Defines the space
between the element's
border and the content in
the element.
td {padding-
left: .25in;}
td {padding-
left: .0125in;}
margin
Defines the space
around elements.
td {margin-left:
.25in;}
border
Defines the border itself;
it can control the
thickness, color, style,
and other aspects of an
element's border.
td {border-
style: inset;}
td {border-
color: blue;}
