Section A.8. Miscellaneous Properties


A.8. Miscellaneous Properties

CSS 2.1 offers a few additionaland sometimes interesting properties. They let you enhance your Web pages with special content and cursors , offer more control over how a page prints, and so on. ( Unfortunately , browser understanding of these properties is spotty at best.)

A.8.1. content

Specifies text that appears either before or after an element. Use this property with the :after or :before pseudo-elements. You can add an opening quotation mark in front of quoted material and a closing quotation after the quote. This property isn't supported by Internet Explorer (not even IE 7 as of this writing), so its use is limited.

  • Values : Text inside of quotes "like this" , the keywords normal, open-quote, close-quote, no- open -quote, no-close-quote . You can also use the value of an HTML attribute. (See "Revealing Links in Print" in Section 13.3.4 for an example.)

  • Examples : p.advert:before { content: "And now a word from our sponsor "; }

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


Note: Adding text in this way (like the opening and closing quote example) is called generated content. Read a simple explanation of the generated content phenomenon at www.westciv.com/style_master/academy/css_tutorial/advanced/generated_content.html. For a deeper explanation, visit www.w3.org/TR/CSS21/generate.html.

A.8.2. cursor

Lets you change the look of the mouse pointer when it moves over a particular element. You can make a question mark appear next to the cursor when someone mouses over a link that provides more information on a subject (like a word definition).

  • Values: auto, default, crosshair, pointer, move, e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize, text, wait, help, progress . You can also use an URL value to use your own graphic as a cursor (but see the Note below).

  • Example : cursor: help; cursor: url(images/cursor.cur );


Note: Only Internet Explorer and Firefox recognize URL cursor values, and only in Windows. For more information, visit www.echoecho.com/csscursors.htm and www.quirksmode.org/css/cursor.html.

A.8.3. orphans

Specifies the minimum number of lines of text that can be left at the bottom of a printed page. Suppose you're printing your Web page on a laser printer, and a fiveline paragraph is split between two pages, with just one line at the bottom of page one, and the four remaining lines at the top of page two. Because a single line all by itself looks odd ( sort of like a lost orphan get it?), you can tell the browser to break a paragraph only if at least, say, three lines are left on the bottom of the page. (At this writing, only the Opera browser understands this property.)

  • Values : a number like 1, 2, 3 , or 5 .

  • Example : orphans: 3 ;

A.8.4. page-break-after

Determines whether a page break (in printing) occurs after a particular element. With it, you can make sure that a particular paragraph is always the last item to appear on a printed page.

  • Values : auto, always, avoid, left, right. Auto represents the normal value and lets the browser determine when and how to break content across printed pages. Always forces the element that follows to appear at the top of a separate printed page, and it's the only value that works consistently across browsers. Avoid prevents a page break after an element; it's a great way to keep a headline with the paragraph that follows it, but unfortunately, most browsers don't understand it. Left and right determine whether the element following appears on a left-or right-handed page, which may force the browser to print an extra empty page. But since no browsers understand these values, don't worry about wasting paper. Browsers treat left and right the same as always .

  • Example : page-break-after: always ;

A.8.5. page-break-before

Works like page-break-after , except the page break appears before the styled element, placing it at the top of the next printed page. You can use this property to make sure headlines for different sections of a long Web page each appear at the top of a page.

  • Values : same as page-break-after .

  • Example : page-break-before: always ;

A.8.6. page-break-inside

Prevents an element from being split across two printed pages. If you want to keep a photo and its caption together on a single page, wrap the photo and caption text in a <div> tag, and then apply a style with page-break-inside to that <div>. (At this writing, only Opera understands this property.)

  • Values : avoid

  • Example : page-break-inside: avoid ;

A.8.7. widows

The opposite of orphans (Section A.1.1), it specifies the minimum number of lines that must appear at the top of a printed page. Say the printer can manage to fit four out of five lines of a paragraph at the bottom of a page and has to move the last line to the top of the next page. Since that line might look weird all by itself, use widows to make the browser move at least two or three (or whatever number of) lines together to the top of a printed page. (Only Opera understands this property, so it's of limited use.)

Values : a number like 1, 2, 3 or 5 .

Example : widows: 3 ;



CSS[c] The Missing Manual
Dreamweaver CS3: The Missing Manual
ISBN: 0596510438
EAN: 2147483647
Year: 2007
Pages: 154

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net