Styling Hyperlinks
The anchor pseudo-classes can be used in style sheets to create specific designs
that are associated with each condition in which a hyperlink can be found. Here’s
a typical style sheet that provides for the special treatment of hyperlinks:
a:link {
color: darkgreen;
background-color: transparent;
}
a:visited {
color: lightgreen;
background-color: transparent;
}
a:hover {
color: green;
background-color: black;
}
a:active {
color: black;
background-color: green;
}
The order in which you declare each of these pseudo-classes is important because,
given the rules of cascading (which we’ll discuss in the final section of this
chapter), each of these sets of rules will be overridden by an earlier rule of the
same importance. Thus, if you declare a rule for a :hover pseudo-class before
you define a rule for the :link or :visited pseudo-classes, the color you choose
for :hover links will never appear, as all links are either visited or unvisited. In
the above code fragment, if you relocated the a:hover rule to the first position
in the list, it would never be used, because the subsequent :link or :visited
rule (whichever applied to the link in question) would override it. Some people
find it helpful to use the mnemonic “love–hate” to remember that the pseudo-
classes should be used in the order :link, :visited, :hover, and :active.
It is possible to specify two pseudo-classes in one rule. For example, you can apply
a special “hover” color to visited links with this rule:
a:visited:hover {
color: blue;
background-color: transparent;
}
You can turn off the underlining of all hyperlinks in a document with a single
style rule:
133
Licensed to siowchen@darke.biz
Chapter 7: Text Effects and the Cascade
a {
text-decoration: none;
}
However, unless your link is otherwise very obviously a link—for example, it
appears in a navigation bar styled using CSS instead of images—it is not good
practice to remove underlines from links. Without underlines, it’s difficult to tell
the links from ordinary text.
Styling Lists with CSS
Lists in HTML begin with one of two tags: <ul> is used for an unordered or
bulleted list; <ol> denotes a numbered or ordered list.
4
The items within each
of these lists are marked up with <li> and </li> tags.
Apart from headings and paragraphs, lists are probably the most commonly used
of the elements intended to present textual content to the web user. There are
three styling properties in CSS that apply only to lists:
❑
list-style-type
❑
list-style-position
❑
list-style-image
There is also a list-style shorthand property with which we can set multiple
properties for a list.
The list-style-type Property
The list-style-type property defines the kind of marker that is to be associated
with each item in the list. The property takes a constant value that’s chosen from
the options shown in Table 7.2 and Table 7.3.
4
There are other types of lists for glossary items or definitions, directories, and menus, but they’re
seldom used, so I’ve omitted them from this discussion. For the most part, they’re styled identically
to the two major kinds of lists we’ll discuss here.
134
Licensed to siowchen@darke.biz
The list-style-type Property
Table 7.2. Values for the list-style-type property and
unordered lists
MeaningConstant Value
open circle circle
filled circle (bullet) disc
filled square square
Table 7.3. Values for the list-style-type property and ordered
lists
MeaningConstant Value
1, 2, 3, 4, 5 …decimal
01, 02, 03, 04, 05 …decimal-leading-zero
a, b, c, d, e …lower-alpha
i, ii, iii, iv, v …lower-roman
A, B, C, D, E …upper-alpha
I, II, III, IV, V …upper-roman
There are a number of other possible values for the list-style-type property,
including those that define item markers in languages such as Hebrew, Armenian,
Japanese, and Chinese.
Figure 7.17. Nested lists to which the page author applied no CSS
rules
135
Licensed to siowchen@darke.biz
Chapter 7: Text Effects and the Cascade
By default, an unordered list displays with an item marker of a filled circle, or
bullet. In nested unordered lists, the item marker changes to an open circle for
the first level of indentation, and a square for the second level, as shown in Fig-
ure 7.17.
What if you prefer to have the item marker be a square for the outermost list, a
bullet for the next one, and an open circle for the third? Apply a set of style sheet
rules like the ones below, and you can accomplish this objective quite easily:
ul {
list-style-type: square;
}
ul ul {
list-style-type: disc;
}
ul ul ul {
list-style-type: circle;
}
Notice that I’ve used contextual selectors to define the three nesting levels of
lists and their associated styles. Figure 7.18 shows the result.
Figure 7.18. Applying list-style-type property to nested
unordered lists
136
Licensed to siowchen@darke.biz
The list-style-position Property
Figure 7.19. Nested ordered lists with a single CSS
list-style-type
Ordered lists appear more complex because of the wide variety of markers that
can be used, but essentially they’re the same as unordered lists. If you use CSS
to set the types of list item markers for a given kind of list, those same marker
types will be used for nested lists. For example, Figure 7.19 shows the effect of
assigning uppercase Roman numerals as the list-style-type on a set of nested
ordered lists.
Not very attractive or helpful, is it? Let’s fix it by applying some different
list-style-type values to nested lists with the CSS rules shown here:
ol {
list-style-type: upper-roman;
}
ol ol {
list-style-type: upper-alpha;
}
ol ol ol {
list-style-type: decimal;
}
This results in the much-improved output shown in Figure 7.20.
The list-style-position Property
Both ordered and unordered lists are displayed so that their item markers align
vertically, and the text associated with each item is indented from the marker.
This gives a neat, orderly appearance and is almost always the right design choice.
137
Licensed to siowchen@darke.biz
Chapter 7: Text Effects and the Cascade
Figure 7.20. Nested ordered lists to which CSS styling has been
applied
CSS permits you to define a list in such a way that the item markers line up
vertically, but text in the line items wraps under each item marker as it returns
to the left margin. To create this effect, use the list-style-position property
and give it a value of inside. Figure 7.21 shows two lists, one of which uses the
default list-style-position value of outside, while the second has a value of
inside.
Figure 7.21. Two different settings for the list-style-position
property
Here’s the HTML that generates the page in Figure 7.21:
<ul style="list-style-position: outside;">
<li>This list uses the default <code>outside</code>setting for
the <code>list-style-position</code> property. Thus, the
item marker is outdented from the text, and appears to be
outside the text area.</li>
<li>This list uses the default <code>outside</code>setting for
the <code>list-style-position</code> property. Thus, the
138
Licensed to siowchen@darke.biz
The list-style-image Property
item marker is outdented from the text, and appears to be
outside the text area.</li>
</ul>
<ul style="list-style-position: inside;">
<li>This list sets a value of <code>inside</code> for the
<code>list-style-position</code> property. As you can see,
wrapped list item text appears immediately under the item
marker.</li>
<li>This list sets a value of <code>inside</code> for the
<code>list-style-position</code> property. As you can see,
wrapped list item text appears immediately under the item
marker.</li>
</ul>
The list-style-image Property
You can replace the bullets in front of list items with any graphic image that the
browser is capable of rendering. This includes GIF, JPEG, and PNG images, at a
minimum.
The list-style-image property takes as a value a full or relative URL that points
to the image you wish to use. Figure 7.22 shows the use of an image as an item
marker in a list.
Figure 7.22. Using an image as an item marker with
list-style-image property setting
139
Licensed to siowchen@darke.biz
Chapter 7: Text Effects and the Cascade
Here’s the style sheet that creates the effect:
ul {
list-style-image: url(images/ball.gif);
}
Notice that you must supply the image’s location as a URL in CSS format, which
requires that you use the url operator and provide the location in parentheses,
without using quotation marks. This URL can be a relative URL, as shown here,
or an absolute URL, which is the image’s full address.
Cascading and Inheritance
The “C” in CSS stands for “cascading.” Until now, we haven’t dealt with any
aspect of CSS that required an understanding of that term. However, now that
we’re dealing with relatively complex display-related issues, the time has come
to devote some serious attention to this topic.
Cascading is not confined to text components, objects, and elements. It applies
across the board to CSS usage on a web page. The reason why it’s often discussed
in conjunction with textual elements is because its impact is most apparent and
most easily demonstrable in this context.
Inheritance is related to cascading in terms of its impact, but the two terms have
quite different meanings.
Cascading addresses the question of how any given element will be displayed if
there are multiple style rules that could be applied to it. Inheritance addresses the
question of how any given element will be displayed if one or more of its properties
is defined in a style rule that applies to an ancestor element, but is omitted in
the element itself.
This sounds much more complicated than it usually is in practice. I’m going to
start by providing a couple of simple examples that will clearly demonstrate the
difference. Then, I’ll drill down more deeply into both of these subjects.
Basic Principles of Cascading
If you keep your use of CSS simple, you’ll rarely have a need to understand cas-
cading on a deep level. For example, if you always use external style sheets, and
override the settings in those style sheets with embedded style rules only in spe-
140
Licensed to siowchen@darke.biz
Basic Principles of Cascading
cific situations, you probably won’t need to spend a great deal of time ferreting
out the nuances in the cascading process.
But, when you begin to design pages of any complexity—and to use style sheets
across multiple pages and sites in the interests of efficiency and ease of mainten-
ance—you will almost certainly run into situations where what you see isn’t what
you intended. If you’re designing complex pages and sites, you can take advantage
of the basic rules of cascading to apply CSS rules logically, consistently, and ef-
fectively.
There are four basic factors involved in creating what is called the “cascade” in
CSS:
❑
weight
❑
origin
❑
specificity
❑
sort order
These factors are taken into account in the order in which I’ve listed them.
To sort out possible conflicts in style rules that could be applied to any element
in an HTML page, think of the browser as going through a set of decisions about
each element. This decision-making process follows this path, in precisely this
order:
1. Scan through the declarations that apply to the element and look for declar-
ations that contain the keyword !important. Assign each of those declara-
tions a greater weight than those without the symbol. This is the “weight”
factor referred to above.
!important is simply a keyword that you can add to a CSS declaration, as
shown in the example below, to make it override other declarations when
usually it wouldn’t:
div.warning {
background-color: red !important;
}
We’ll see !important in action throughout this section.
141
Licensed to siowchen@darke.biz
Chapter 7: Text Effects and the Cascade
2. Within the declarations marked as !important, assign a greater weight to
those that come from the user’s style sheet (if there is one) than those that
come from the author’s style sheet. This is the “origin” factor referred to
above.
3. Within the declarations that are not marked !important, assign a greater
weight to those that come from the author’s style sheet than to those that
have come from the user’s style sheet. This is also the “origin” factor at work.
4. To resolve any remaining ties, examine each rule to see how narrowly it ap-
plies to the specific element in question. If, for example, you have a paragraph
element of class warning, a declaration inside a style rule that applies to
paragraphs in general will be given less weight than one that applies to
paragraphs of the class warning. Rules declared inline (with the style attrib-
ute in your markup) apply only to one element, and therefore always win
out at this stage. This is the “specificity” factor at work.
5. Finally, if any ties still remain after all the above steps, sort things out based
on the order in which the declarations are defined in the document, with
later declarations taking precedence over earlier ones. This is the “sort order”
factor referred to above.
At the end of all this processing, all applicable declarations are applied in the
order established above, with the property values that are assigned in declarations
of greater weight overriding those assigned in declarations of lesser weight.
Generally, you think about this process in the reverse order from that which the
browser uses. Most often, you have only to deal with the sort order issue on pages
of relatively low complexity. As designs and sites become more complex and your
use of style sheets becomes more involved, specificity will become the next major
concern for you. You’ll typically use !important very rarely, if ever. I’ll discuss
the cascading rules in the order in which you are most likely to think of them,
rather than in the order in which the browser uses them.
Sort Order
As you know, styles can be defined in three different places: an external style
sheet, an embedded style sheet, or an inline style attribute as part of a markup
tag for a particular HTML element. The sort order factor in the cascade ensures
that, regardless of whether a style sheet is embedded in the head of the document
or is loaded with a link element, it’s the order in which it appears that determines
its relative precedence.
142
Licensed to siowchen@darke.biz
Không có nhận xét nào:
Đăng nhận xét