Tài liệu CSS Cookbook- P11 pdf

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 t

Trang 1

Now it’s time to stylize the dates and add event links in each cell To reproduce the boxdate effect seen in most calendars, place a border to the right and bottom of the textand float the content to the left.

You want the add event links to be close to the dates Floating the link to the rightmeans the link will be positioned next to the date of the following day By floating theadd event link to the left, you are telling the user that the plus sign (+) means “add anevent 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;

Figure 9-13 Styles introduced to the date and add event links

9.10 Sample Design: An Elegant Calendar | 475

Trang 2

Now it’s time to look at how the event listings can be stylized Because the previouslinks 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 onthe 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 cellfrom running into each other Also, the padding acts as a nice visual buffer, allowingthe eye to easily discern between two events:

.event { clear: both;

Trang 3

To each table cell, apply a width of 14% You’re using 14% because 7 (representing theseven 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 thecell and position all the content to the top with the vertical-align property (see Fig-ure 9-15)

td { width: 14%;

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 weekdaydates (see Figure 9-16):

.weekend { background-color: #999;

}

Trang 4

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;

Trang 5

For the current day (in this example the current day is the 27th), place a 2-pixel blackborder 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

Trang 7

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 modernbrowsers support this aspect of the technology, including Firefox, Internet Explorer forWindows, Safari, Chrome, and Opera

This chapter teaches the basics of how to tell the browser which stylesheet to use whensending a document to print It also discusses how to switch graphics from web to printCSS, 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 HTMLfile

481

Trang 8

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:

sep-Media types

Stylesheets can dictate the presentation of documents to a wide range of media Bydefault, 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 specificationactually 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)

Trang 9

When defining the styles for your web page, you can use one stylesheet for all forms ofmedia:

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 themedia values with a comma:

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 designfor 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 andprojection media:

@import URI(print.css) print,projection;

You need to place the @import rule within a style element or within an external sheet However, since Internet Explorer doesn’t render print stylesheets through the

style-@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:

@media print {

body { font-size: 10pt;

Trang 10

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:

#header h1 img { display: none;

}

Trang 11

Then bring in the color logo through the background of the h1 element, as shown in

Figure 10-1:

#header h1 img { display: none;

}

#header h1 a { display: block;

In-is more suitable for full-color dIn-isplay

This swapping of images works by setting specific rules based on the media type beingused When you set the media type in the initial CSS code snippet to screen, the browserignores the CSS rules that hid the black-and-white image as it starts to process thedocument for printing

10.2 Replacing a Color Logo for a Black-and-White Logo When Printing Web Pages | 485

Trang 12

If you don’t distinguish the CSS rules for your main stylesheet with a media type, the browser assumes the value is all Any additional print- only 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.

Trang 13

First, create a print media stylesheet and a class selector that transforms the form ments so that they display black text and feature a 1-pixel border on the bottom.For example, consider the following HTML code for an input text element:

ele-<label for="fname">First Name</label>

To style the form element requires the following CSS rule:

.fillout { color: black;

<label for="bitem">Breakfast Item</label>

</select><span class="postselect"> </span>

Then, in the CSS rules, convert the inline span element to a block element This enablesyou to set the width of the span element and places the border at the bottom to equalthat of the input elements in the preceding CSS rule:

select { display: none;

} postselect { display: block;

For elements such as a Submit button, which can’t be used on the printed page, set the

display property to none You can see the finished product in Figure 10-4

10.3 Making a Web Form Print-Ready | 487

Trang 14

Lines created in the print stylesheet on an order form tell users they can fill out the formfields By using the border property, you can easily create these lines in a browser,making web forms useful both online and offline

For select elements, the workaround is somewhat of a hack that involves interferingwith the ideal semantic markup; it still works and is valid HTML Place a span elementafter the select element:

Figure 10-4 The same form primed for printing

Trang 15

Then set the select element to disappear:

select { display: none;

}

Next, set the span element to display as a block to enable the width and height erties With those width and height properties set, you can place the bottom border tomatch the rest of the form elements:

prop-.postselect { display: block;

Using attribute selectors to differentiate form elements

Attribute selectors from the CSS specification make it easier to style forms for print.When you use attribute selectors, it’s easier to distinguish which form elements should

be stylized than it is when you insert class attributes and their respective values in themarkup

In the following code, the first CSS rule applies only to input elements for text, whereasthe second rule hides the Submit button and the Select drop-down box:

Adding user friendliness

Since the form is now being printed, site visitors cannot use the Submit button totransmit their information Be sure to provide the next steps users should follow afterthey have completed the printed form

For example, if you want users to mail the form, add a mailing address to the page onwhich the form is printed, as shown in the following code:

<div id="print">

<p>Please mail the form to the following address:</p>

10.3 Making a Web Form Print-Ready | 489

Trang 16

<style type="text/css" media="screen">

Trang 17

Selector constructs such as :after are known as pseudo-elements The browser prets the selector as though additional elements were used to mark up the webdocument

inter-For example, by using the following CSS, you can make the first letter of a paragraph

2 em units in size:

p:first-letter { font-size: 2em;

}

You use the :after selector (or the :before selector) to insert generated content after(or before) an element In this recipe, the value of the href attribute, which containsthe URI information, is placed after every anchor element in a p element

To have brackets appear around the URI, place quote marks around the brackets Toadd a buffer of space between the anchor element and the next inline content, put onespace in front of the left bracket and one after the right bracket, and then insert the URIusing the attr(x) function CSS finds in the element whatever attribute is replaced for

x, returning its value as a string

Another example of the power of this pseudo-element involves returning the value ofabbreviations and acronyms in a buzzword-laden document:

<p>The W3C makes wonderful things like CSS!</p>

To accomplish this, first put the expanded form of the word or phrase in the title

attribute for abbr or acronym:

<p>The <acronym title="World Wide Web Consortium">W3C</acronym>

makes wonderful things like <abbr title="Cascading Style

Sheets">CSS</abbr>!</p>

Then, in the CSS rules, tell the browser to return the value for the title attribute:

abbr:after, acronym:after { content: " (" attr(title) ") ";

}

Placing the domain name before absolute links

With absolute links, only the forward slash and any other folder and filename data willappear once the page is printed To work around this dilemma, the CSS3 specificationoffers a solution through a substring selector:

p a:after { content: " <" attr(href) "> " ; }

Trang 18

The caret (^) signifies that the selector picks every link that starts with the forward slash,which signifies an absolute link.

Known browser issues

Currently, generating content through pseudo-elements works only in Firefox,Chrome, and Safari browsers Microsoft introduced support for :after and :before

Next, place the hexadecimal equivalent of the special character before the link:

p a:after { text-decoration: underline;

“00BB” would be displayed instead:

00BB http://www.csscookbook.com/

Trang 19

Due to the nature of CSS syntax, it is not possible to use HTML numbers or names toidentify 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 the ted page Try it within your screen media presentation of your web design Make sureyou include the CSS declaration in a stylesheet with media set to all or screen to viewthe output

prin-Known browser issues

Currently, generating content through pseudo-elements works only in Firefox, Mozilla,Chrome, and Safari browsers Generated content works in Internet Explorer forWindows 8

See Also

A list of special characters and their hexadecimal equivalents at http://www.ascii.cl/ htmlcodes.htm; the CSS 2.1 specification for escaped characters at http://www.w3.org/ TR/CSS21/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

Trang 20

Use the page-break-before property to signify that a document should skip to the nextpage when printed, as shown in Figure 10-6:

h3 ~ h3 { page-break-before: always;

The Solution code uses a CSS3 general sibling combinatory selector The rule states that

every time an h3 element is preceded by another h3 element, there should be a forcedpage break To paraphrase that meaning, basically every h3 element will be at the top

of a printed page starting with the second h3 element in the row

Using class selectors

The Solution works because it uses a structured document with semantic heading tagsand a browser that understands the CSS3 selector However, when dealing with adocument that does not use semantic markup, pinpointing the page breaks within the

Trang 21

First, create a class selector containing the page-break-before property:

.pageBreak { page-break-before: always;

}

Then, embed the rule whenever you want a page break before the content:

<table cellspacing="0" class="pageBreak">

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 opers to change the way they provide printer-friendly versions of their documents.Instead of having to create separate pages or write scripts, you can use CSS to create aprinter-friendly document as soon as the user clicks the Print button The HTML forthe page isn’t in the book because the miracle of CSS lets us change the presentationwithout having to change the HTML

devel-When creating a stylesheet for print, you actually use a web browser This enables you

to quickly see how the CSS rules affect the display of the document (just like for mediadelivery), but it’s also easier on the environment and you save money by not wastingink in the printer So, comment out the stylesheet used for the screen to create new CSSrules:

<! Hide screen media CSS while working on print CSS >

<! link href="adv.css" type="text/css" rel="stylesheet"

media="screen" >

/* Print CSS rules go here */

</style>

Setting the Page for Black-and-White Printing

Apply the first CSS rule to the body element In this rule, set the background color towhite and set the type to black:

Trang 22

Next, set the typeface for the page to a serif font Reading text online in sans serif iseasier on the eyes, but in print media the serif font is still the choice for reading passages

of text For a later fallback choice, you might want to go with the Times typeface forprint documents, since it’s installed on most (if not all) computers and it’s a workhorse

of a font In case your users don’t have Times installed, supply alternatives as well:

body { background-color: white;

Trang 23

Now you want to get rid of navigation-related links and other page elements you don’twant to see in the final printout This includes the main navigation bar below the mainheader, as well as internal anchors in the page itself If you have a page with ad banners,

it might be a good idea to hide those, too (see Figure 10-8):

#navigation, hr, body>div>a, #blipvert {

display: none;

}

Figure 10-8 Hiding the navigation bar and other elements

Designing the Main Heading

Because you are dealing with black and gray type on a white page, you have few optionswhen it comes to designing how the main heading for the page should look However,using what you have at your disposal, it’s nonetheless easy to create a masthead thatcalls attention to itself

First, set the background to black and the text to white:

#header h1 { color: white;

background-color: black;

}

10.7 Sample Design: A Printer-Friendly Page with CSS | 497

Trang 24

Because you want people to actually read the header, you want the text to be white tocreate enough contrast In this instance, the main header also acts as a homing device—

it is a link to the home page Therefore, the color of the heading is dictated by the stylerules set for the links To remedy this situation, add a separate rule:

#header h1 { background-color: black;

}

#header h1 a { color: white;

}

Now that the text is visible, stylize it a bit so that it stands out Your goal is to centerthe text, increase the size of the text, and make all the letters uppercase:

#header h1 { background-color: black;

Styling the Article Header and Byline

For the article title and byline, create a more dramatic look by zeroing out the marginsand padding of both the h2 and h3 elements:

#content h2 { padding: 0;

margin: 0;

}

margin: 0 ; }

Trang 25

Figure 10-9 Stylizing the main header

Then increase the font size for the article title and create a thin hairline rule below it.Next, align the byline to the right and set the type style to italic (see Figure 10-10):

Tiêu đề	Stylizing Dates And Event Links In Css
Thể loại	tài liệu

Định dạng
Số trang	50
Dung lượng	2,78 MB