Tài liệu CSS Cookbook- P8 pptx

Figure 6-22. Moving the term to the left side of the definitions
For
the definitions, set their floats to the left as well and set their widths to be 100%,
as shown in Figure 6-23:
dd {
float: left;
width: 100%;
}
Figure 6-23. Adjusting the definitions’ width
6.12 Styling a Definition List | 325
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Then adjust the margin and padding to reinforce the visual distinction between the
definitions, as shown in Figure 6-24:
dd {
float:left;
width:100%;
padding: .2em 0 0 0;
margin: 0 0 1em 0;
}
Figure 6-24. Adjusting the padding and margins of the definitions
After that, style elements to taste for better visual rendering, as shown in Figure 6-25:
dt {
width: 4em;
float: left;
clear: left;
margin:0 0 1em −5em;
font-weight: bold;
border-top: 1px solid #000;
padding: .2em 0 0 0;
}
dd {

float: left;
width: 100%;
padding: .2em 0 0 0;
margin: 0 0 1em 0;
color: #333;
}
326 | Chapter 6: Lists
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
dt+dd {
border-top: 1px solid #000;
}
Figure 6-25. Polishing the look of the definition list
Discussion
Placing
a term next to its definition is a fairly common solution. By applying a margin
to the definition list as a whole on its left side, you can make the terms slide into the
open area. After that, using floats (along with judicious use of padding) finalizes the
manipulation.
Using generated content
To indicate that there are definitions after a term, use the :after pseudo-element on
the definition term:
dt:after {
content: ":";
}
Since terms may have more than one definition, it’s possible to assign numbers to each
definition. The CSS specification has a counter-mechanism that is suited for this
purpose.
6.12 Styling a Definition List | 327
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
First, use the counter-reset property on the dt element:

dt {
counter-reset: item;
}
The counter-reset property either creates or resets a counter. As the dt elements are
rendered and the CSS is associated with the element, the counter is initiated and then
subsequently reset with each rendering of this element in the document.
The next step is to tell the browser to output the number before each definition through
the counters() function:
dd:before {
content: counters(item, "") ". " ;
}
Within the counters() function, two parameters are passed: the counter to be used and
then a string. The string is used to separate subsections. Examples of separators within
a counter include the period within Recipe 1.8 and the hyphen in Recipe 6.11. In this
Solution, there aren’t any subsections, so the string is empty.
To insert a period after the number and a space, quotation marks are used after the
counters() function.
With the counter output in place in the document, the next step is to tick the counter
each time there is a new definition. This is done through the counter-increment prop-
erty, which accepts the value of the counter name given to the counter-reset property:
dd:before {
content: counters(item, "") ". " ;
counter-increment:item;
}
Figure 6-26 shows the final result.
Generated content is not supported in versions of Internet Explorer for
Windows earlier than IE8. All other modern browsers do support gen-
erated content.
See Also
Robert

O’Rourke’s original work on getting the definition list to look like a table at
after being inspired
by Bruce Lawson’s CSS Challenge at />328 | Chapter 6: Lists
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
6.13 Styling a Screenplay with the HTML5 dialog Element
Problem
You want to stylize a screenplay.
Solution
Mark up the content of the screenplay with the HTML5 dialog element:
<div id="screenplay">
<h3>Cut to</h3>
<p>Int. Kitchen - Continuous</p>
<dialog>
<dt>Beth</dt>
<dd> I told you the one about Salma Hayek?</dd>
</dialog>
<p>Beth walks closer to John.</p>
<p>The innocuous baby monitor gets <strong>louder</strong>.</p>
<dialog>
<dt>Beth</dt>
Figure 6-26. Using generated content in the definition list
6.13 Styling a Screenplay with the HTML5 dialog Element | 329
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
<dd>Nursing a hungry baby in some destitute African village?</dd>
<dt>John</dt>
<dd><span class="how">(gasps)</span>No.</dd>
<dt>Beth</dt>
<dd>This actually happened, but the commentator, I forget who, ended the piece with
"your move, Jolie"</dd>
</dialog>

</div><! /#screenplay >
Then
apply style rules to adjust the formatting of the content to look like a screenplay:
body {
font-size: 62.5%;
font-family: "Courier New", Courier, monospace;
margin: 0 auto;
width: 612px;
}
#screenplay {
padding: 0 10.9em;
}
#screenplay h3 + p {
text-transform: uppercase;
}
#screenplay h3 {
text-transform: uppercase;
text-align: right;
background: white;
}
#screenplay h3:after {
content: ":";
}
dialog {
font-size: 1.2em;
}
dt {
text-transform: uppercase;
text-align: center;
margin-top: 1.6em;

}
dd {
margin-left: 7.2em;
}
span.how {
display: block;
text-align: center;
margin-right: 7.2em;
padding-right: 5em;
}
#screenplay strong {
text-transform: uppercase;
}
330 | Chapter 6: Lists
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Discussion
The HTML5 specification brings in a new element, dialog, specifically for indicating
conversation. The format the markup uses is the same as dt and dd elements, but it
replaces the dl element with dialog.
See Also
The HTML5 specification for dialog at />-20080122/#the-dialog
6.14 Turning a List into a Directory Tree
Problem
You want to re-create a directory tree structure from a list.
Solution
First, set up a series of nested ordered lists to serve as the basis for the directory tree
structure:
<ul class="itinerary">
<li>Morning Sessions
<ul>

<li>Troubleshooting IE6</li>
<li>Object Oriented CSS</li>
<li>Fluid Typography</li>
<li>Tomorrow's CSS3 Today</li>
</ul>
</li>
<li>Afternoon Sessions
<ul>
<li>Web Form Elements</li>
<li>Flexible Layouts</li>
<li>Coding Layouts</li>
<li>Future CSS &amp; Markup</li>
</ul>
</li>
</ul>
Create three sets of small graphics: a vertical pipe or trunk; a branch; and an end branch
graphic, as shown in Figure 6-27.
6.14 Turning a List into a Directory Tree | 331
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Figure 6-27. Default rendering of the unordered lists
Apply
the vertical pipe graphic to the sides of the unordered lists, as shown in Fig-
ure 6-28:
.itinerary, .itinerary ul {
list-style-type: none;
background-image: url(pipe.gif);
background-repeat: repeat-y;
margin: 0;
padding: 0;
}

.itinerary ul {
margin-left: 12px;
}
Apply a branch graphic at each list item:
.itinerary li {
margin: 0;
padding: 0 12px 0 28px;
background-image: url(branch.gif);
background-repeat: no-repeat;
line-height: 1.5;
}
332 | Chapter 6: Lists
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Figure 6-28. The vertical lines set
Then
hardcode the last list item in each unordered list with a class attribute in the
HTML:
<ul class="itinerary">
<li>Morning Sessions
<ul>
<li>Troubleshooting IE6</li>
<li>Object Oriented CSS</li>
<li>Fluid Typography</li>
<li class="branchend">Tomorrow's CSS3 Today</li>
</ul>
</li>
<li class="branchend">Afternoon Sessions
<ul>
<li>Web Form Elements</li>
<li>Flexible Layouts</li>

<li>Coding Layouts</li>
<li class="branchend">Future CSS &amp; Markup</li>
</ul>
</li>
</ul>
6.14 Turning a List into a Directory Tree | 333
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Now apply a class selector to bring in the end branch graphic, as shown in Figure 6-29:
.itinerary li.branchend {
/* matches background color of */
/* parent element or page */
background-color: #fff;
background-image: url(branchend.gif);
}
Figure 6-29. Applying the end branches
Discussion
The
technique for this Solution builds off Recipe 6.8, which uses icons placed in the
background of the list item. This Solution calls for three different small images to be
placed at certain areas in the ordered lists to pull off the effect.
Using CSS3
To place the end branch of the directory tree, we had to include a class attribute in the
markup for the Solution to work.
334 | Chapter 6: Lists
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
In CSS3, the :last-of-type pseudo-class can replace the need for that class attribute:
.itinerary li:last-of-type {
/* matches background color of */
/* parent element or page */
background-color: #fff;

background-image: url(branchend.gif);
}
At
the time of this writing, the :last-of-type pseudo-class is supported in Safari 3 and
later and Opera9.5 and later.
For a listing of CSS3 selectors, see Appendix D.
See Also
Michal Wojciechowski’s “Turning Lists into Trees” at />ing-lists-into-trees/
6.15 Creating a Star Ranking System
Problem
You want to display a star rating system that allows users to visually pick their own
ratings.
Solution
The first step is to set up the HTML to include an unordered list with five options, as
shown in Figure 6-30:
<div class="product" id="prod345781">
<h1>CSS Cookbook</h1>
<p>Submit your review:</p>
<ul class="rating">
<li class="one"><a href="#">1 Star</a></li>
<li class="two"><a href="#">2 Stars</a></li>
<li class="three"><a href="#">3 Stars</a></li>
<li class="four"><a href="#">4 Stars</a></li>
<li class="five"><a href="#">5 Stars</a></li>
</ul>
</div>
Next, create an image containing every combination of star ratings, along with an active
hover state, as shown in Figure 6-31. (You may want to make each star a square shape,
as it makes coding the CSS a little bit easier.)
6.15 Creating a Star Ranking System | 335

Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Figure 6-30. Default rendering of the star ranking HTML
Figure 6-31. Every combination of star rankings in one image
With
the star image set, use CSS rules to restrict the width and height of the unordered
list and bring in the star matrix:
.rating {
margin: 0;
padding: 0;
list-style: none;
clear: both;
width: 75px;
height: 15px;
background-image: url(stars.gif);
background-repeat: no-repeat;
336 | Chapter 6: Lists
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
position: relative;
}
Next,
float each list item (for IE6 support) while removing its text using a negative value
with the text-indent property:
.rating li {
text-indent: −9999em;
float: left; /* for IE6 */
}
The next step is to absolutely position each list item’s link in a row within the 75 px
boundary of the unordered list set previously:
.rating li a {
position: absolute;

top: 0;
left: 0;
z-index: 20;
height: 15px;
width: 15px;
display: block;
}
.rating .one a {
left: 0;
}
.rating .two a {
left: 15px;
}
.rating .three a {
left: 30px;
}
.rating .four a {
left: 45px;
}
.rating .five a {
left: 60px;
}
With the blocks in place, you can apply the default rating to the product through CSS.
For example, a 2 out of 5 star review would need a simple background-position decla-
ration block, as shown in Figure 6-32:
#prod345781 .rating {
/* background-position: 0 0px; 0 out of 5 */
/* background-position: 0 −15px; 1 out of 5 */
background-position: 0 −30px; /* 2 out of 5 */
/* background-position: 0 −45px; 3 out of 5 */

/* background-position: 0 −60px; 4 out of 5 */
/* background-position: 0 −75px; 1 out of 5 */
}
6.15 Creating a Star Ranking System | 337
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Figure 6-32. A two-star rating
To
add the user feedback portion of the star ranking system, set each list item’s link to
expand to fit the entire 75-pixel width and reinsert the star image as the background
image:
#prod345781 .rating li a:hover {
z-index: 10;
width: 75px;
height: 15px;
overflow: hidden;
left: 0;
background-image: url(stars.gif);
background-repeat: no-repeat;
}
Then write specific rules that move the background image so that the second set of
color stars appears. How far the background image moves upward depends on which
star ranking the user is mousing over, as shown in Figure 6-33:
#prod345781 .rating .one a:hover {
background-position: 0 −105px; /* 1 out of 5 */
}
#prod345781 .rating .two a:hover {
background-position: 0 −120px; /* 2 out of 5 */
}
#prod345781 .rating .three a:hover {
background-position: 0 −135px; /* 3 out of 5 */

}
#prod345781 .rating .four a:hover {
338 | Chapter 6: Lists
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
background-position: 0 −150px; /* 4 out of 5 */
}
#prod345781 .rating .five a:hover {
background-position: 0 −165px; /* 5 out of 5 */
}
Figure 6-33. Hovering over the stars, which shows the user’s personal rating of a product or service
Discussion
This Solution relies on several techniques.
The
first crucial technique is the use of a CSS sprite, an image with several icons placed
within the same image (see Recipe 4.33 for more information). Using the background
image of the unordered list itself, the initial star rating is set through background
positioning of the star image.
The next technique is to change the positioning technique, called shackling (see Rec-
ipe 2.25). By absolutely positioning each link within the unordered list side by side, the
user is able to click on how many stars to assign the product or service.
Finally, the last technique reuses the CSS sprite image. As the user selects which star
rating to give the product or service, the width of the link changes to fill the entire width
of all the stars. This allows the background image to come in and appear over the
unordered list’s own background image.
6.15 Creating a Star Ranking System | 339
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Even though these two elements are using the same background image, the link is
placed higher or above the li property’s background. Therefore, the link’s background
image is visible while the li property’s background is not.
Setting the background-position value to a higher negative value moves the different

set of star colors into position.
See Also
Paul O’Brien’s in-depth article about this star matrix technique at rch
-this.com/2007/05/23/css-the-star-matrix-pre-loaded/
340 | Chapter 6: Lists
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
CHAPTER 7
Links and Navigation
7.0 Introduction
Without links, the point of the Web would be lost.
Links let you follow a trail of information from one web page to another and from one
idea to another, regardless of where the site’s server is located in the world.
In 1996, web usability expert Jakob Nielsen listed the use of nonstandard link colors
as one of the top 10 mistakes in web design (see />.html). However, his advice to use blue for the link color for pages that the user hasn’t
visited and purple or red to represent previously visited pages came from consistency
concerns, not aesthetics.
Thankfully, he has updated his thoughts on link colors for the new millennium (see
Links, being an essential part of the
World Wide Web, can be both consistent and visually pleasing.
This chapter shows how to improve aesthetics by changing link styles. You’ll learn
everything, from how to remove the underline from links to how to change cursors,
create rollovers without the need for JavaScript, create a horizontal tab menu, and much
more.
7.1 Easily Generating Text-Based Menus and Submenus
Problem
You want to quickly generate the markup for a navigation list along with premade
styles.
341
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Solution

Go to Accessify’s menu builder, List-O-Matic (see />ards/developer-tools/list-o-matic/).
Fill out labels for navigation menus, link addresses, and the optional title attributes, as
shown in Figure 7-1.
Figure 7-1. Online web application for generating accessible menus with unordered lists
342 | Chapter 7: Links and Navigation
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Next, pick the style of navigation menu, as shown in Figure 7-2.
Figure 7-2. Examples of the menu designs
Click
“Show me the markup” to get the markup and CSS rules that can be added directly
to your web page.
Discussion
Utilizing both unordered lists and links (see Recipe 1.10), Accessify’s List-O-Matic
handles the heavy lifting of coding and styling a navigation menu. To fit a style within
your site, be sure to customize the CSS rules to your site’s design.
See Also
A video tutorial on how to use List-O-Matic, with a voiceover by someone with a British
accent, at />7.2 Removing Underlines from Links (and Adding Other Styles)
Problem
You want to remove the default underlining of links, as shown in Figure 7-3.
7.2 Removing Underlines from Links (and Adding Other Styles) | 343
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Solution
Use the text-decoration
property with the pseudo-class selector for unvisited and vis-
ited links:
a:link, a:visited {
text-decoration: none;
}
Discussion

Use the :link and :visited pseudo-classes to apply styles to links within a web docu-
ment. The :link pseudo-class applies to links that the user has not visited.
The :visited pseudo-class corresponds to links that the user has visited.
The text-decoration property can take up to five settings, shown in Table 7-1.
Figure 7-3. Links without underlines
344 | Chapter 7: Links and Navigation
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Table 7-1. Text-decoration settings
Text-decoration value Result
underline A line is placed beneath the text
overline A line is placed above the text
blink The text flashes
line-through A line is placed through the middle of the text
none No effect is associated with the text
These text-decoration properties are often used to enhance the presentation of a web
page. Instead of having all the links in a document underlined, designers set text-
decoration to none along with changing the link’s background color, text color, or both:
a:link, a:visited {
text-decoration: none;
background-color: red;
color: white;
}
To complement the design for site visitors who might have color blindness and there-
fore might not be able to determine a link color from the default color of regular HTML
text, designers also set the weight of the font to bold:
a:link, a:visited {
font-weight: bold;
text-decoration: none;
color: red;
}

The value of line-through might be an interesting element you can add to a page design
to indicate that a link has already been visited by a user, similar to an item scratched
off a to-do list, as shown in Figure 7-4:
a:link {
font-weight: bold;
text-decoration: none;
color: red;
}
a:visited {
font-weight: bold;
text-decoration: line-through;
color: black;
}
See Also
The CSS 2.1 specification for text-decoration at />.html#propdef-text-decoration; Jakob Nielsen’s updated “Design Guidelines for Visu-
alizing Links” at />7.2 Removing Underlines from Links (and Adding Other Styles) | 345
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
7.3 Changing Link Colors
Problem
You
want to create different styes for links: one style for navigation and another style
for links within the main text.
Solution
Use the :link, :visited, :hover, and :active pseudo-classes, in that order:
body {
color: #9ff;
}
a:link {
color: #3cf;
}

a:visited {
color: #cecece;
Figure 7-4. Visited link crossed out
346 | Chapter 7: Links and Navigation
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
}
a:hover {
color: #366;
}
a:active {
color: #399;
}
Discussion
The
hyperlink pseudo-classes are equal in terms of priority within the cascade;
you avoid this conflict by listing the selectors in the following order: :link,
:visited, :hover, and :active. The mnemonic device commonly used to remember the
order is “LoVe/HAte.”
A visited or an unvisited link can enter the hover and active states at the same time.
Since hyperlink pseudo-classes have the same ranking, the one listed last is what the
user sees, and that’s why :hover won’t work in some cases. When :hover appears be-
fore :active or :visited, the :active or :visited selector hides the hover state based
on the cascading rules.
See Also
The CSS 2.1 specification for the dynamic pseudo-classes :hover, :active,
and :focus at />Eric Meyer’s Q&A on link specificity at />icity.html
7.4 Removing Dotted Lines When Clicking on a Link in Internet
Explorer
Problem
You want to remove the dotted lines that appear when you click on links in Internet

Explorer.
Solution
Set the outline property to none for links:
a {
outline: none;
}
7.4 Removing Dotted Lines When Clicking on a Link in Internet Explorer | 347
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Discussion
The outline property is not a part of the box model like margin, border, and padding
are. Even though the border is taken into account when adding up the width of an
element, the outline is not.
Unlike for borders, the sides of an outline do not have specific CSS
properties. For example, there is not an outline-top property.
The dotted outlines common in Internet Explorer for Windows aid in accessibility,
allowing site visitors to know where they clicked or what is clickable on a page. How-
ever, there might be a few times when an outline of a link would compromise the visual
style of a design.
To provide some feedback for site visitors (even if outline is set to none or not), it’s
recommended to set the :focus pseudo-class when styling links along with setting the
rollover effects:
a:hover, a:active, a:focus {
color: #399;
}
The use of :focus occurs when an element, such as an input element, is activated by
the user’s keyboard or other input.
Internet Explorer requires a valid DOCTYPE (see Recipe
1.3) for the
outline property to be applied.
See Also

The CSS2 specification for outline at />-outlines
7.5 Changing Link Colors in Different Sections of a Page
Problem
You want to apply different links to the main text and the navigation.
348 | Chapter 7: Links and Navigation
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Solution
First, wrap sections of the page with div elements and different attribute values:
<div id="nav">
[ ]
</div><! /#nav >
<div id="content">
[ ]
</div><! /#content >
Then
use descendant selectors with ID selectors along with the LV/HA method dis-
cussed in Recipe 7.3 to isolate different link styles to different areas of a web page:
/* navigation link design */
#nav a:link {
color: blue;
}
#nav a:visited {
color: purple;
}
/* content link design */
#content a:link {
color: white;
}
#content a:visited {
color: yellow;

}
Discussion
The use of the ID selector to identify sections of a web page opens the door for applying
different styles to the same elements. Rely on the same selectors to create links with
different styles by section. For more on the ID selector, see Recipe 2.2. Applying
LV/HA mnemonic order to links also ensures that your links operate as expected.
See Also
W3Schools’ tutorial on CSS pseudo-classes at />do_classes.asp
7.6 Placing Icons at the End of Different Kinds of Links
Problem
You want a way to display icons at the end of an inline link, as shown in Figure 7-5.
7.6 Placing Icons at the End of Different Kinds of Links | 349
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.