Tài liệu CSS Cookbook- P11 pdf

Now it’s time to stylize the dates and add event links in each cell. To reproduce the box date effect seen in most calendars, place a border to the right and bottom of the text and float the content to the left. You want the add event links to be close to the dates. Floating the link to the right means the link will be positioned next to the date of the following day. By floating the add event link to the left, you are telling the user that the plus sign (+) means “add an event for that particular day” (see Figure 9-13): .date { border-right: 1px solid black; border-bottom: 1px solid black; font-family: Consolas, "Lucida Console", Monaco, monospace; text-decoration: none; float: left; width: 1.5em; height: 1.5em; background-color: white; text-align: center; } .addevent { display: block; float: left; width: 1em; height: 1em; text-align: center; background-color: #666; color: white; font-weight: bold; text-decoration: none; } Figure 9-13. Styles introduced to the date and add event links 9.10 Sample Design: An Elegant Calendar | 475 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Now it’s time to look at how the event listings can be stylized. Because the previous links are floated, you need to create a visible break and move the events below the date. Setting the clear property to both achieves this visual break. The clear property is used to indicate which sides of an element should not be positioned next to a floated element. In this case, you don’t want the left side to run next to the date and add event links. However, just in case the design changes in the future and the dates are positioned on the opposite side, use a value of both instead of left. Next, change the display of the link to block and place padding on the bottom (see Figure 9-14). You’re making these changes to prevent multiple events in a table cell from running into each other. Also, the padding acts as a nice visual buffer, allowing the eye to easily discern between two events: .event { clear: both; padding-left: 1em; padding-bottom: .75em; display: block; } Figure 9-14. Event links treated like block-level elements 476 | Chapter 9: Tables Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. To each table cell, apply a width of 14%. You’re using 14% because 7 (representing the seven sections of the calendar, or days of the week) goes into 100 (representing 100% of the viewport) approximately 14 times. Also, place a white border on all sides of the cell and position all the content to the top with the vertical-align property (see Fig- ure 9-15). td { width: 14%; background-color: #ccc; border: 1px solid white; vertical-align: top; font-size: 1.2em; padding: 1px; background: url(content-bkgd.png) repeat-x; border: 1px solid rgba(0,0,0,.5); border-top: none; } Figure 9-15. The content in each cell moved to the top Make the background color of the weekend dates darker than that used for the weekday dates (see Figure 9-16): .weekend { background-color: #999; } 9.10 Sample Design: An Elegant Calendar | 477 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Figure 9-16. The weekend days marked with a darker gray background color Slightly gray-out the look of the remaining days in the calendar (see Figure 9-17): .emptydate { border-right: 1px solid #666; border-bottom: 1px solid #666; font-family: monospace; text-decoration: none; float: left; width: 1.5em; height: 1.5em; background-color: #ccc; text-align: center; } Figure 9-17. Empty dates for the next month stylized 478 | Chapter 9: Tables Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. For the current day (in this example the current day is the 27th), place a 2-pixel black border around the box: #today { border: 2px solid black; } And with that, the calendar is complete, as shown in Figure 9-18. Figure 9-18. The current date in the calendar with a darker border 9.10 Sample Design: An Elegant Calendar | 479 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. CHAPTER 10 Designing Web Pages for Printing 10.0 Introduction To create a printer-friendly version of a web page, web developers traditionally would either manually convert the web page content to a separate stripped-down page design or use a script to dynamically generate a separate page design. With CSS, however, you can automatically apply a new stylesheet to web documents as they are printed, thereby eliminating the time and server resources needed to create a printer-friendly page. Support for print-media CSS is fairly commonplace these days. All of the major modern browsers support this aspect of the technology, including Firefox, Internet Explorer for Windows, Safari, Chrome, and Opera. This chapter teaches the basics of how to tell the browser which stylesheet to use when sending a document to print. It also discusses how to switch graphics from web to print CSS, as well as a series of techniques for developing a document for printing. Because this book focuses on the practical, cross-browser nature of CSS, the recipes in this chapter are geared toward styling the contents of the page rather than dealing with the theory of CSS printing properties. For more information on CSS printing properties, see CSS: The Definitive Guide by Eric A. Meyer (O’Reilly). 10.1 Applying a Stylesheet for Printing to a Web Page Problem You want to create a printer-friendly page without having to create a separate HTML file. 481 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Solution First, create a separate stylesheet containing the CSS rules for printing. For this exam- ple, the stylesheet with print-only CSS rules is named print.css. Then, associate the stylesheet and set the media property to print: <link rel="stylesheet" type="text/css" href="adv.css" media="screen" /> <link rel="stylesheet" type="text/css" href="print.css" media="print" /> Discussion To create a print stylesheet, comment out the screen stylesheet and then create a sep- arate, secondary stylesheet. In this second stylesheet, build the rules to dictate how you want the page to look when printed. After you have completed the stylesheet, associate the stylesheet with a link element, as mentioned in the Solution. Media types Stylesheets can dictate the presentation of documents to a wide range of media. By default, the value for the media attribute is all. Without the attribute in the link ele- ment, the user agent will apply the CSS rules in the stylesheet to all media. Although the most common attribute you probably have encountered is screen, which is used mainly for displaying documents on color monitors, the CSS 2.1 specification actually defines a total of 10 media types, as shown in Table 10-1. Table 10-1. Media types for stylesheets Media type Description all Suitable for all devices braille Intended for Braille tactile feedback devices embossed Intended for paged Braille printers handheld Intended for handheld devices (typically small-screen, limited-bandwidth devices) print Intended for paged material and for documents viewed on-screen in print preview mode projection Intended for projected presentations—for example, projectors screen Intended primarily for color computer screens speech Intended for speech synthesizers tty Intended for media using a fixed-pitch character grid (such as teletypes, terminals, or portable devices with limited display capabilities) tv Intended for television-type devices (with low-resolution, limited-scrollable color screens and available sound) 482 | Chapter 10: Designing Web Pages for Printing Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. When defining the styles for your web page, you can use one stylesheet for all forms of media: <link rel="stylesheet" type="text/css" href="uber.css" media="all" /> Or you can use one stylesheet for several, but not all, forms of media. For instance, to use one stylesheet for both projection and print media, separate the media values with a comma: <link rel="stylesheet" type="text/css" href="print.css" media="print,projection" /> In the preceding code, the print.css stylesheet is used for projection and print media when rendering the web document. (It’s probably not the ideal solution, as a design for print probably won’t be appropriate for projection.) Using @import when assigning media types You can use other methods besides link to assign media types. One method is @import, as shown in the following line, which specifies the stylesheet for print and projection media: @import URI(print.css) print,projection; You need to place the @import rule within a style element or within an external style- sheet. However, since Internet Explorer doesn’t render print stylesheets through the @import rule, it’s best to avoid its use. Using @media when assigning media types Another method you can use to associate and dictate stylesheets and media types is @media, which enables you to write blocks of CSS rules that can be set for different media, all in one stylesheet: <style type="text/css"> @media print { body { font-size: 10pt; background-color: white; color: black; } } @media screen { body { font-size: medium; background-color: black; color: white; } } </style> 10.1 Applying a Stylesheet for Printing to a Web Page | 483 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. See Also “Media types” in Section 7 of the CSS 2.1 Working Draft at http://www.w3.org/TR/ CSS21/media.html 10.2 Replacing a Color Logo for a Black-and-White Logo When Printing Web Pages Problem You want to swap a color logo for a logo that is more suitable for printing, without inserting two logo images into the HTML or creating a separate printer-friendly web page. Solution Code the HTML for the web document to include a black-and-white logo, as shown in Figure 10-1: <div id="header"> <h1><a href="/"><img src="e4h_logo-print.gif" /></a></h1> </div><! /#header > Figure 10-1. The color logo brought in through the background-image property Next, keep the black-and-white logo from being displayed in the browser: <style type="text/css" rel="stylesheet" media="screen"> #header h1 img { display: none; } </style> 484 | Chapter 10: Designing Web Pages for Printing Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. [...]... CSS finished, copy the CSS rules and put them into an external stylesheet called print .css Then, comment out the CSS for screen media and associate the print CSS through the link element: 502 | Chapter 10: Designing Web Pages for Printing Please purchase PDF. .. printer So, comment out the stylesheet used for the screen to create new CSS rules: CSS while working on print CSS > type="text /css" rel="stylesheet" media="screen" > /* Print CSS rules go here */ Setting the Page for Black-and-White Printing Apply the first CSS rule to the body element In this rule, set the background color... set the media type in the initial CSS code snippet to screen, the browser ignores the CSS rules that hid the black-and-white image as it starts to process the document for printing 10.2 Replacing a Color Logo for a Black-and-White Logo When Printing Web Pages | 485 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark If you don’t distinguish the CSS rules for your main stylesheet... sent to their printer 10.7 Sample Design: A Printer-Friendly Page with CSS | 503 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark CHAPTER 11 Page Layouts 11.0 Introduction One of the last frontiers in CSS- enabled design was creation of the page layout For a long time, web developers used HTML tables... printonly CSS rules are then mixed with your other CSS rules, which might cause unwanted results when printing the web document, as the cascade tries to determine the look of the page when it’s printed So, when setting up a print-only stylesheet, make sure you set your styles to the correct media type See Also The CSS Logo Replacement” blog post at http://www.ibloomstudios.com/articles /css _logo_replacement/... 10: Designing Web Pages for Printing Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark Due to the nature of CSS syntax, it is not possible to use HTML numbers or names to identify special characters with the content property The characters need to be escaped by a backward slash and their hexadecimal value Special characters through the CSS content property can also be used outside... class="pageBreak"> See Also The “Page Breaks” specification in the CSS3 Working Draft at http://kent.w3.org/TR/ css3 -page/#page-breaks 10.7 Sample Design: A Printer-Friendly Page with CSS In this sample design, you will transform an existing web document (as shown in Figure 10-7) to make it more suitable for print Although CSS has changed the way we design for the Web, it also has allowed developers... Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark Figure 11-3 Unwanted wrapping of text under the left column Flipping the layout If you want to have the columns reversed, switch the order of the columns by using the following markup: [ ] [ ] 510 | Chapter 11: Page Layouts Please purchase PDF Split-Merge on www.verypdf.com to... characters at http://www.w3.org/ TR /CSS2 1/syndata.html#escaped-characters 10.6 Setting Page Breaks for a Printed Document Problem You want to place page breaks when printing within a long web document, as shown in Figure 10-5 Figure 10-5 The default rendering of a page when printed 10.6 Setting Page Breaks for a Printed Document | 493 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark... structured document with semantic heading tags and a browser that understands the CSS3 selector However, when dealing with a document that does not use semantic markup, pinpointing the page breaks within the HTML is still fairly easy to do 494 | Chapter 10: Designing Web Pages for Printing Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark First, create a class selector containing . Calendar | 479 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. CHAPTER. rather than dealing with the theory of CSS printing properties. For more information on CSS printing properties, see CSS: The Definitive Guide by Eric A.