Creating Cool Web Sites with HTML, XHTML and CSS (2010)- P3

Tham khảo tài liệu creating cool web sites with html, xhtml and css (2010)- p3, công nghệ thông tin, kỹ thuật lập trình phục vụ nhu cầu học tập, nghiên cứu và làm việc hiệu quả
Nội dung trích xuất từ tài liệu:
Creating Cool Web Sites with HTML, XHTML and CSS (2010)- P3 74 Creating Cool Web Sites with HTML, XHTML, and CSS The effects of both word and line spacing are shown in Figure 4-7. Figure 4-7: Word and line spacing can dramatically change the way text looks on a page. Not all possible settings are good, of course. A line height that’s too small results in the lines of text becoming illegible as they’re overlapped. The single addition of line-height: 1.25, however, can significantly improve the appearance of a page, and you can increase line height for the entire document by changing the style of the body tag. Adding the following code to the top block changes all the text on the page: body { line-height: 1.25 } Cool, eh? I tweak the body container again and again as I proceed. It’s very useful! Text alignment HTML includes some attributes for the 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 75 Table 4.3: CSS Vertical Alignment Values 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. Don’t forget, all the code list ...