Tài liệu Creating Cool Web Sites with HTML, XHTML and CSS (2010)- P3 doc

tag that let you specify if you want the text to be left, center, or right aligned, or justified, where both the left and right margins are aligned These attributes are replaced in CSS with the text-align style, which has the following possible values: • left • right • center • justify Vertical text alignment Here’s one feature that you don’t see in HTML except in the exceptionally awkward form of and for superscripts and subscripts, respectively Instead, use vertical-align and pick one of the values shown in Table 4-3 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark Chapter 4: Moving into the 21st Century with Cascading Style Sheets Table 4.3: CSS Vertical Alignment Values Ł 75 Value Explanation top Specifies that top of element aligns with top of highest element in line middle Specifies that middle of element aligns with middle of line bottom Specifies that bottom of element aligns with bottom of lowest element in line text-top Specifies that top of element aligns with top of highest text element in line text-bottom Specifies that bottom of element aligns with bottom of lowest text element in line super Indicates superscript sub Indicates subscript A nice demonstration of this capability is a technique for having trademark (tm) character sequences displayed attractively on a page: tm { vertical-align: top; font-size: 33%; font-weight: bold; } In use, this might appear as Though just about lost to common parlance, it remains the case that Xeroxtm is a trademark of Xerox Corporation Text decorations One HTML text decoration that, surprisingly, made it to CSS is underlining As discussed in Chapter 3, underlining text on a Web page is somewhat problematic because it can become quite difficult to differentiate links from underlined text But the CSS text-decoration style enables more than just underlining It provides the following four values: • underline • overline • line-through • blink With the exception of overline, these all have HTML equivalents: for underline, for line-through, and for blink In CSS, however, it’s much easier to apply a number of them simultaneously, like this: h1 { text-decoration: overline underline; } By using the underlining styles, you can rather dramatically change the appearance of head­ ers throughout a document Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark Ł 76 Creating Cool Web Sites with HTML, XHTML, and CSS Changing text case This is the last new CSS style for this chapter, I promise I know that this chapter must seem like quite a monster with all this thrown at you at once! That’s why it’s incredibly important that you try things on your computer as you read about them If you just sip your latté while you go through this book, your retention is likely to be minimal But if you’re trying each and every style and example on your computer, you’ll have lots of “a ha!” moments, and you should start to see the tremendous value of CSS for even the most rudimentary pages Ł on the web Don’t forget, all the code listings are available on the book Web site at http://www.intuitive.com/coolsites/ The final style to learn in this chapter, text-transform, deals with the capitalization of text and has the values specified in Table 4-4 Table 4-4: Text Transformation Values Value Meaning capitalize Displays the first letter of each word as caps and all others as lowercase uppercase Displays all letters as uppercase lowercase Displays all letters as lowercase none Displays characters as specified To have a paragraph of text transformed into all uppercase, for example, use text-transform: uppercase;, and to instantly ensure that all header level ones are in proper case, use: h1 { text-transform: capitalize; } Putting it all together Let’s pull the example from the end of the last chapter and see how using CSS can help jazz up the presentation Here’s what I’ve produced with just a little CSS tweaking (notice that I always include a font-family default value, too): body { font-family: Arial,Helvetica,sans-serif; font-size:90%; line-height: 1.25; } h1 { text-transform: capitalize; text-decoration: overline underline; color: blue; letter-spacing: 0.05em; text-align: center; } i { font-variant: small-caps; font-weight: bold; } email { color: #909; font-family: monospace; font-size: 90% } tm { vertical-align: top; font-size: 40%; font-weight: bold; } Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark Chapter 4: Moving into the 21st Century with Cascading Style Sheets Travels with Tintin

Of the various reporters with whom I’ve travelled around the world, including writers for UPI, AP, and Reuters, the most fascinating has clearly been Tintin, boy reporter from Belgium ( tintin@intuitive.com)

After winning the Pulitzer for Red Rackham’s Treasure tm, Tintin told me he wanted a vacation Remembering some of his earlier adventures, he decided to visit Nepal Early one Sunday, I was sipping my tea and reading the Times when he rang me up, asking whether I’d be able to take a break and come along