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 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/ 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 http://www.w3.org/TR/2008/WD-html5 -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. [...]... Europan lingues See Also The CSS 2.1 specification for :active and :hover at http://www.w3.org/TR /CSS2 1/se lector.html#x36; an explanation about links and specificity at http://www.meyerweb com/eric /css/ link-specificity.html 7.9 Animating Rollovers on Links with CSS3 Transitions Problem You want to adjust the time a rollover effect takes on a link Solution Use CSS3 transition properties to set... blog post introducing transitions at http://webkit.org/blog/138 /css -animation/; the CSS3 specification for transitions at http://www.w3.org/TR /css3 -tran sitions/#transitions- 7.9 Animating Rollovers on Links with CSS3 Transitions | 357 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark Figure 7-10 A complex CSS- enabled rollover effect 7.10 Creating Text Navigation Menus and... the CSS rules As the Solution shows, successfully creating the menu requires some browser bug workarounds as well as straightforward CSS design implementation Setting up the list In the division marked with the div, a line of text labels the set of links as navigational links: Site navigation: If the user’s browser doesn’t have CSS support, the line of text is visible To hide the text from CSS- enabled... Chapter 7: Links and Navigation Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark See Also The CSS 2.1 specification for cursor at http://www.w3.org/TR /CSS2 1/ui.html#propdef -cursor; examples of the various cursors in action at http://www.zimmertech.com/tuto rials /css/ 20/changing-cursors-tutorial.php 7.8 Creating Rollovers Without JavaScript Problem You want to create a simple rollover... :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 http://www.w3.org/TR /CSS2 1/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... 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 http://www.w3schools.com /css/ css_pseu 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... remove this watermark Figure 7-5 Icons placed at the end of links Solution Set up links within a document: Sed sed nisi Quote me on an estimate nulla ligula Etiam pulvinar, CSS Cookbook web site quisque ante quam, ultricies quis, rutrum dignissim, fermentum a, est Nulla felis dolor,... 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... 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 http://www.w3.org/TR /CSS2 1/text html#propdef-text-decoration; Jakob Nielsen’s updated “Design Guidelines for Visualizing Links” at http://www.useit.com/alertbox/20040510.html 7.2 Removing Underlines...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, . 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/ 328 | Chapter 6: Lists Please purchase. IE6</li> <li>Object Oriented CSS& lt;/li> <li>Fluid Typography</li> <li>Tomorrow's CSS3 Today</li> </ul>