Tài liệu CSS Cookbook- P8 pptx

Using generated content in the definition list 6.13 Styling a Screenplay with the HTML5 dialog Element | 329... Now apply a class selector to bring in the end branch graphic, as shown in

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

Then adjust the margin and padding to reinforce the visual distinction between thedefinitions, 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;

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 theopen area After that, using floats (along with judicious use of padding) finalizes themanipulation

Using generated content

To indicate that there are definitions after a term, use the :after pseudo-element onthe definition term:

6.12 Styling a Definition List | 327

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 arerendered and the CSS is associated with the element, the counter is initiated and thensubsequently 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 throughthe counters() function:

dd:before { content: counters(item, "") " " ; }

Within the counters() function, two parameters are passed: the counter to be used andthen 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 thisSolution, 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 countereach 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

http://www.sanchothefat.com/dev/layouts/definition-lists-ugly.html, after being inspired

by Bruce Lawson’s CSS Challenge at http://www.brucelawson.co.uk/2009/css-challenge/

6.13 Styling a Screenplay with the HTML5 dialog Element

<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

<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: ":";

}

The HTML5 specification brings in a new element, dialog, specifically for indicatingconversation The format the markup uses is the same as dt and dd elements, but itreplaces the dl element with dialog

<li>Web Form Elements</li>

Figure 6-27 Default rendering of the unordered lists

Apply the vertical pipe graphic to the sides of the unordered lists, as shown in ure 6-28:

Fig-.itinerary, itinerary ul { list-style-type: none;

}

Apply a branch graphic at each list item:

.itinerary li { margin: 0;

Figure 6-28 The vertical lines set

Then hardcode the last list item in each unordered list with a class attribute in theHTML:

<ul class="itinerary">

<li>Morning Sessions <ul>

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 */

Using CSS3

To place the end branch of the directory tree, we had to include a class attribute in themarkup for the Solution to work

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 */

<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 activehover 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

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 unorderedlist and bring in the star matrix:

.rating { margin: 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 */

Figure 6-32 A two-star rating

To add the user feedback portion of the star ranking system, set each list item’s link toexpand to fit the entire 75-pixel width and reinsert the star image as the backgroundimage:

#prod345781 rating li a:hover { z-index: 10;

#prod345781 rating one a:hover { background-position: 0 −105px; /* 1 out of 5 */

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 backgroundimage of the unordered list itself, the initial star rating is set through backgroundpositioning of the star image

The next technique is to change the positioning technique, called shackling (see ipe 2.25) By absolutely positioning each link within the unordered list side by side, theuser is able to click on how many stars to assign the product or service

Rec-Finally, the last technique reuses the CSS sprite image As the user selects which starrating 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 theunordered list’s own background image

6.15 Creating a Star Ranking System | 339

Even though these two elements are using the same background image, the link isplaced higher or above the li property’s background Therefore, the link’s backgroundimage is visible while the li property’s background is not.

Setting the background-position value to a higher negative value moves the differentset of star colors into position

See Also

Paul O’Brien’s in-depth article about this star matrix technique at http://www.search -this.com/2007/05/23/css-the-star-matrix-pre-loaded/

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 oneidea 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 http://www.useit.com/alertbox/9605 html) However, his advice to use blue for the link color for pages that the user hasn’tvisited and purple or red to represent previously visited pages came from consistencyconcerns, not aesthetics

Thankfully, he has updated his thoughts on link colors for the new millennium (see

http://www.useit.com/alertbox/link-list-color.html) 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 learneverything, 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 muchmore

7.1 Easily Generating Text-Based Menus and Submenus

Problem

You want to quickly generate the markup for a navigation list along with premadestyles

341

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-Matichandles the heavy lifting of coding and styling a navigation menu To fit a style withinyour site, be sure to customize the CSS rules to your site’s design

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

Use the text-decoration property with the pseudo-class selector for unvisited and ited links:

vis-a:link, a:visited { text-decoration: none;

}

Discussion

Use the :link and :visited pseudo-classes to apply styles to links within a web 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

docu-The text-decoration property can take up to five settings, shown in Table 7-1

Figure 7-3 Links without underlines

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

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

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

7.2 Removing Underlines from Links (and Adding Other Styles) | 345

7.3 Changing Link Colors

on the cascading rules.

See Also

The CSS 2.1 specification for the dynamic pseudo-classes :hover, :active,and :focus at http://www.w3.org/TR/CSS21/selector.html#dynamic-pseudo-classes;Eric Meyer’s Q&A on link specificity at http://www.meyerweb.com/eric/css/link-specif icity.html

7.4 Removing Dotted Lines When Clicking on a Link in Internet Explorer

}

7.4 Removing Dotted Lines When Clicking on a Link in Internet Explorer | 347

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 anelement, 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 visualstyle of a design

To provide some feedback for site visitors (even if outline is set to none or not), it’srecommended to set the :focus pseudo-class when styling links along with setting therollover effects:

a:hover, a:active, a:focus {

color: #399;

}

The use of :focus occurs when an element, such as an input element, is activated bythe user’s keyboard or other input

Internet Explorer requires a valid DOCTYPE (see Recipe 1.3 ) for the

outline property to be applied.

#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 applyingdifferent styles to the same elements Rely on the same selectors to create links withdifferent styles by section For more on the ID selector, see Recipe 2.2 ApplyingLV/HA mnemonic order to links also ensures that your links operate as expected

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

Figure 7-5 Icons placed at the end of links

Solution

Set up links within a document:

<p>Sed sed nisi <a href="mailto:orders@csscookbook.com">Quote me on

an estimate</a> nulla ligula Etiam pulvinar,

<a href="http://www.csscookbook.com/">CSS Cookbook web site</a> quisque

ante quam, ultricies quis, rutrum dignissim, <a href="sample-chapter.pdf">

fermentum</a> a, est Nulla felis dolor, tempor non, posuere ut, ornare ac,

eros Cras in metus Sed rutrum lectus ut nibh Pellentesque ipsum.</p>

Then use attribute selectors (see Recipe 2.5):

a { text-decoration: none;

padding-right: 20px;

background: url(website.gif) no-repeat right;

} a[href$="pdf"] {

padding-right: 20px;

background: url(document.gif) no-repeat right;

}

Discussion

Using attribute selectors is another method that doesn’t require the additional markup

of placing an img element in the content

Recipe 2.5 discusses many ways in which you can use attribute selectors to place icons(or text) in front of or before links (as well as other elements).

Since the Solution uses content generation, it’s not suitable for IE7 or earlier browsers.IE8 supports content generation