Tài liệu Web Programming with HTML, XHTML, and CSS- P6 doc

❑ You can change the appearance of several pages by altering just the style sheet rather than each individual page; this is particularly helpful if you want to change your company’s colors, or the font used for a certain type of element wherever that element appears across the whole site. ❑ The style sheet can act as a style template to help different authors achieve the same style of document without learning all of the individual style settings. ❑ Because the source document does not contain the style rules, different style sheets can be attached to the same document. So you can use the same XHTML document with one style sheet when the viewer is on a desktop computer, another style sheet when the user has a handheld device, another style sheet when the page is being printed, another style sheet when the page is being viewed on a TV, and so on. You reuse the same document with different style sheets for different visitors’ needs. ❑ A style sheet can import and use styles from other style sheets, making for modular development and good reuse. ❑ If you remove the style sheet, you make the site more accessible for those with visual impairments, because you are no longer controlling the fonts and color schemes. It is fair to say, therefore, that whenever you are writing a whole site, you should be using an external style sheet to control the presentation, although as you will see in the next chapter you might use several exter- nal style sheets for different aspects of the site. CSS Properties Now that you have learned the background of CSS, how to write CSS rules, and where you can place those rules, the rest of this chapter looks at the properties you can use to affect the presentation of your documents. In particular, you will learn the font, text, border, padding, and margin properties. The following table shows the main properties available to you from CSS1 and CSS2, all of which you meet in this chapter or Chapter 8. Continued FONT FONT (continued) TEXT (continued) TEXT (continued) font font-variant text-align white-space font-family font-weight text-decoration word-spacing font-size TEXT text-indent BACKGROUND font-size-adjust color text-shadow background font-stretch direction text-transform background- attachment font-style letter-spacing unicode-bidi background-color 221 Chapter 7: Cascading Style Sheets 59313c07.qxd:WroxPro 3/24/08 11:39 PM Page 221 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. BACKGROUND (continued) BORDER (continued) DIMENSIONS (continued) TABLE (continued) background-image border-top-style min-width table-layout background-position border-top-width width LIST and MARKER background-repeat border-width POSITIONING list-style BORDER MARGIN bottom list-style-image border margin clip list-style-position border-bottom margin-bottom left list-style-type border-bottom-color margin-left overflow marker-offset border-bottom-style margin-right right GENERATED CONTENT border-bottom-width margin-top top content border-color PADDING vertical-align counter-increment border-left padding z-index counter-reset border-left-color padding-bottom OUTLINES quotes border-left-style padding-left outline CLASSIFICATION border-left-width padding-right outline-color clear border-right padding-top outline-style cursor border-right-color DIMENSIONS outline-width display border-right-style height TABLE float border-right-width line-height border-collapse position border-style max-height border-spacing visibility border-top max-width caption-side border-top-color min-height empty-cells 222 Chapter 7: Cascading Style Sheets 59313c07.qxd:WroxPro 3/24/08 11:39 PM Page 222 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. I will not cover certain properties in this book, either because they are very rarely used or because there is little support for them. (For example, I avoid covering aural style sheets because there are not many aural browsers that support them.) You can find out more about these properties on the following web sites (or you can pick up a book dedicated to CSS): ❑ www.w3.org/style/css/ ❑ www.devguru.com/Technologies/css/quickref/css_index.html ❑ www.w3schools.com/css/css_reference.asp Controlling Fonts Several properties allow you to control the appearance of text in your documents. These can be split into two groups: ❑ Those that directly affect the font and its appearance ❑ Those that have other formatting effects upon the text The table that follows lists the properties that directly affect the font. Property Purpose font Allows you to combine several of the following properties into one font-family Specifies the family of font to be used (the user must have this installed on his or her computer) font-size Specifies the size of a font font-weight Specifies whether the font should be normal, bold, or bolder than the containing element font-style Specifies whether the font should be normal, italic, or oblique (an oblique font is the normal font on a slant rather than a separate italic version of the font) font-stretch Allows you to control the width of the actual letters in a font (not spaces between them) font-variant Specifies whether the font should be normal or small caps font-size-adjust Allows you to alter the aspect ratio of the size of characters of the font 223 Chapter 7: Cascading Style Sheets 59313c07.qxd:WroxPro 3/24/08 11:39 PM Page 223 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Before you start looking at fonts, it’s important to understand a few issues. Perhaps most importantly, a font is not the same thing as a typeface: ❑ A typeface is a family of fonts, such as the Arial family. ❑ A font is a specific member of that family, such as Arial 12-point bold. You will often see the terms used interchangeably, but it is helpful to be aware of the distinction. Typefaces tend to belong to one of two groups: serif and sans-serif fonts. Serif fonts have extra curls on letters. For example, the following l contains a serif on the top of the letter leaning back and at the bottom of the letter, whereas sans-serif fonts have straight ends to the letters. The third common example of a typeface is of a monospaced serif font. Every letter in a monospaced font is the same width, whereas non-monospace d fonts have different widths for different letters. (In serif and sans-serif fonts, the l tends to be narrower than the m.) See Figure 7-4 for an example. Figure 7-4 In general print theory, serif fonts are easier to read for long periods of text. However, on the Internet this does not hold true; many people find serif fonts harder to read on a screen, largely because the resolution of the screen is not as good as printed words. This makes sans-serif fonts easier to read onscreen because they are not so detailed. To study the properties that affect fonts, most of the examples will follow a similar structure using para- graphs of text; each <p> element carries a class attribute with a different value: <p class=”one”>Here is some text.</p> <p class=”two”>Here is some text.</p> <p class=”three”>Here is some text.</p> The use of the class attribute allows you to add different styles to different elements that share the same name. The font-family Property The font-family property allows you to specify the typeface that should be used. The big drawback with this property is that those viewing the page must have this font on their computers; otherwise they will not see the page in that font. You can, however, specify more than one font so that, if the user does not have your first choice of font, the browser looks for the next font in the list ( ch07_eg02.css). p.one {font-family:arial, verdana, sans-serif;} p.two {font-family:times, “times new roman”, serif;} p.three {font-family:courier, “courier new”, serif;} serif font sans-serif font monospace font 224 Chapter 7: Cascading Style Sheets 59313c07.qxd:WroxPro 3/24/08 11:39 PM Page 224 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. If a font name contains spaces, such as times new roman or courier new, you should place the name in double quotation marks. Figure 7-5 shows what this example would look like in a browser; you can see the different types of font used for each paragraph ( ch07_eg02.html). Figure 7-5 The comma-separated list of fonts you can use should end with one of five generic font names so that the computer can use its default generic font if it cannot find any of the typefaces you specify: One thing to keep in mind when choosing fonts is that they can each be of different heights or widths, so you will probably want to choose a similar-sized font as an alternative to your first choice. For example, Courier New is a lot shorter and wider than Impact (which is quite tall and narrow). If you designed your page with one font in mind, the layout can be significantly different should a second-choice font be a different size. When designers want to use a specific typeface that is not likely to be on the majority of users’ computers, they tend to use a GIF image for that text. It is generally frowned upon to use images for large sections of text, but for logos or headings and other small amounts of text, this is a good solution. If you do this, remember that you must provide the text that would be seen in the image as the value of the alt attrib ute. Generic font name Type of font Example serif Fonts with serifs Times sans-serif Fonts without serifs Arial monospace Fixed-width fonts Courier cursive Fonts that emulate handwriting Comic Sans fantasy Decorative fonts for titles, and so on Impact 225 Chapter 7: Cascading Style Sheets 59313c07.qxd:WroxPro 3/24/08 11:39 PM Page 225 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. There are several efforts to allow you to use fonts that others are not likely to have on their computers that involve downloading the font in question; however, most fonts are copyrighted and — like software — cannot simply be distributed by the purchaser. In addition, many users are wary of downloading files from web sites, so this cannot be relied upon as a technique for achieving the look you require. If you really want to use a non-standard font for small amounts of text, an alternative to images is a combi- nation of Flash and JavaScript in SIFR, which allows you to create some interesting effects (http://novemberborn.net/sifr). The font-size Property The font-size property enables you to specify a size for the font. You can specify a value for this property in several ways: ❑ Absolute size ❑ Relative size ❑ Length ❑ Percentage (in relation to parent element) The following values are absolute sizes: xx-small x-small small medium large x-large xx-large The following two values are relative sizes: smaller larger Length can be expressed in one of the following units of length: px em ex pt in cm pc mm You will see what each of these different units means later in the chapter in the section “Lengths” (as they are used in conjunction with several properties, not just fonts). Probably the most common is px for pixels. A percentage is calculated as a proportion of the element that contains the text: 2% 10% 25% 50% 100% For example: p.one {font-size:xx-small;} p.twelve {font-size:12px;} p.thirteen {font-size:3pc;} p.fourteen {font-size:10%;} Figure 7-6 shows you how some of these different font sizes work in the browser. (ch07_eg03.html and ch07_eg03.css contain several examples of different ways of specifying size and compare how they look.) 226 Chapter 7: Cascading Style Sheets 59313c07.qxd:WroxPro 3/24/08 11:39 PM Page 226 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Figure 7-6 The font-weight Property Most fonts have different variations, such as bold and italic. While many well-made fonts have com- pletely different versions of each character for bold text, browsers tend to use an algorithm to calculate and add to the character’s thickness when it is supposed to be bold. Because it uses an algorithm, it means you can also create a lighter version of fonts, too. This is what the font-weight property is for. 227 Chapter 7: Cascading Style Sheets 59313c07.qxd:WroxPro 3/24/08 11:39 PM Page 227 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. The possible values for font-weight are: normal bold bolder lighter 100 200 300 400 500 600 700 800 900 So you assign a bold font like this (ch07_eg04.css): p.one {font-weight:normal;} p.two {font-weight:bold;} p.three {font-weight:bolder;} p.four {font-weight:lighter;} p.five {font-weight:100;} p.six {font-weight:200;} Figure 7-7 shows you how these values appear in the browser (ch07_eg04.html). Figure 7-7 Of these values, bold is most commonly used, although you might also come across the use of normal (especially if a large body of text is already in bold and an exception has to be created). The font-style Property The font-style property allows you to specify that a font should be normal, italic, or oblique, and these are the values of the font-style property; for example: p.one {font-style:normal;} p.two {font-style:italic;} p.three {font-style:oblique;} 228 Chapter 7: Cascading Style Sheets 59313c07.qxd:WroxPro 3/24/08 11:39 PM Page 228 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Figure 7-8 shows you how these values appear in the browser (from ch07_eg05.css). Figure 7-8 The font-variant Property There are two possible values for the font-variant property: normal and small-caps. A small caps font looks like a smaller version of the uppercase letterset. For example, look at the following paragraph, which contains a <span> with a class attribute (ch07_eg06.html): <p>This is a normal font, but then <span class=”smallcaps”>there are some small caps</span> in the middle.</p> Now look at the style sheet (ch07_eg06.css): p {font-variant:normal;} span.smallcaps {font-variant:small-caps;} As you can see from Figure 7-9, the rule associated with the <span> element indicates that its content should be shown in small caps. Figure 7-9 229 Chapter 7: Cascading Style Sheets 59313c07.qxd:WroxPro 3/24/08 11:39 PM Page 229 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. The font-stretch Property The font-stretch property sets the width of the actual letters in a font (not the space between them). It can take either relative or fixed values. The relative values are as follows: normal wider narrower The fixed values are as follows: ultra-condensed extra-condensed condensed semi-condensed semi-expanded expanded extra-expanded ultra-expanded For example, you can make a condensed Arial font using the following syntax: p {font-family:arial; font-stretch:condensed;} Unfortunately, however, this property is not supported by either IE 7 or Firefox 2. The font-size-adjust Property As I mentioned earlier in the chapter, fonts can be different heights and widths. A font’s aspect value is the ratio between the height of a lowercase letter x in the font and the height of the font. The font-size- adjust property allows you to alter the aspect value of a font. For example, Verdana has an aspect value of 0.58 (which means that when the font’s size is 100 px, its x- height is 58 pixels). Times New Roman has an aspect value of 0.46 (which means that when the font’s size is 100 px, its x-height is 46 pixels). This makes Verdana easier to read at smaller sizes than Times New Roman. By altering a font’s aspect value you can, therefore, change its height. Unfortunately, neither Firefox 2 nor IE 7 supports this property. Text Formatting In addition to the font properties, you can use several properties to affect the appearance or formatting of your text. They are listed in the table that follows. Property Purpose color Specifies the color of the text text-align Specifies the alignment of the text within its containing element vertical-align Vertical alignment of text within containing element and in relation to containing element text-decoration Specifies whether the text should be underlined, overlined, strikethrough, or blinking text 230 Chapter 7: Cascading Style Sheets 59313c07.qxd:WroxPro 3/24/08 11:40 PM Page 230 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. [...]... the element subscript With images, the top of the image should be on the baseline With text, the top of the font body should be on the baseline super Makes the element superscript With images, the bottom of the image should be level with the top of the font With text, the bottom of the descender (the parts of letters such as g and p that go beneath the line of text) should align with the top of the font... midpoint of the element should be aligned with the vertical midpoint of the parent bottom The bottom of the text and the bottom of the image should align with the bottom of the lowest element on the line text-bottom The bottom of the text and the bottom of the image should align with the bottom of the lowest text on the line This property may also accept a length and a percentage value You can try out... element So the child and adjacent sibling selectors add a lot of flexibility to how you style documents and can make for much cleaner markup Take a look at the following XHTML content (ch07_eg19.html): Here is an example of some adjacent sibling and child selectors. One Two Three Four Five Using the adjacent and adjacent sibling and child selectors... individually control the top, bottom, left, and right border, margin, and padding of each box; and you can specify a different width and color for each side of the box The padding and margin properties are especially important in creating white space, which is the space between parts of the page, in your designs For example, if you have text inside a box with a border, you would want to have some padding... relationship between the document containing the link and the document it is linking to, and so that the style sheet can be located The browser should now use the style sheet to lay out the example as specified in font-test.css Each element in the XHTML document carried a class attribute, which is used by CSS to identify that particular element’s content and style it differently than other elements... XHTML Hyphen selector p[language|=”en”] Any element carrying an attribute called language whose value begins with en and is followed with a hyphen (it is designed for use with language attributes) Prefix selector (CSS3) p[attr^”b”] Any element carrying any attribute whose value begins with b (CSS3) Substring selector (CSS3) p[attr*”on”] Any element carrying any attribute whose value contains... resolutions), and a pica is 1⁄12 of an inch (12 points) Typographers tend to use points to measure font sizes and leading (the gaps between lines), while picas are used to measure line lengths Relative Units Relative units and percentages can be very useful, but they also bring their own issues that you need to be aware of for two reasons: ❑ They can adjust size with the kind of media that the document... Users can increase and decrease the size of fonts on a web browser and the rest of the page will scale to fit Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark 249 59313c07.qxd:WroxPro 3/24/08 11:40 PM Page 250 Chapter 7: Cascading Style Sheets px A pixel is the smallest unit of resolution on a screen and probably the most common way of specifying font sizes and lengths in CSS... that most modern laser and bubble jet printers are set with a higher resolution — my current printer runs at 300 dpi In contrast, mobile phones and PDAs can have an even lower resolution than computer screens So, a table that is 500 pixels wide could be 9.9444 inches wide on a 72 dpi screen, 1.666 inches wide at 300 dpi, or 13.888 inches wide on a 32 dpi screen (and a screen with such low resolution... about selectors, and looked at some of the basic units of length, you will soon be ready to look at more sets of properties that you can use to control the presentation of element content But before you do, you need to understand how CSS is based on a box model Every element gets treated as a box in CSS, and remembering this will really help you understand how to create attractive layouts with CSS As you . follows: ultra-condensed extra-condensed condensed semi-condensed semi-expanded expanded extra-expanded ultra-expanded For example, you can make a condensed Arial font using. With images, the bottom of the image should be level with the top of the font. With text, the bottom of the descender (the parts of letters such as g and