XML Step by Step- P14 docx

230 XML Step by Step font-weight keyword: bold Example CSS rule: TITLE {font-weight:bold} Effect: Displays the text in typical bold characters Text sample: font-weight keyword: bolder Example CSS rule: TITLE {font-weight:bolder} Effect: Displays the text in a bolder font than the parent element’s font (or, for the root element, than the browser’s font) Text sample: font-weight keyword: lighter Example CSS rule: TITLE {font-weight:lighter} Effect: Displays the text in a lighter font than the parent element’s font (or, for the root element, than the browser’s font) Text sample: font-weight keyword: 100 Example CSS rule: TITLE {font-weight:100} Effect: Displays the text in the lightest available font weight. The following values in this table (200-900) display the text with increasing degrees of boldness. Text sample: font-weight keyword: 200 Example CSS rule: TITLE {font-weight:200} Text sample: font-weight keyword: 300 Example CSS rule: TITLE {font-weight:300} Text sample: font-weight keyword: 400 Example CSS rule: TITLE {font-weight:400} Effect: Equivalent to assigning the normal keyword value Text sample: font-weight keyword: 500 Example CSS rule: TITLE {font-weight:500} Text sample: Chapter 8 Displaying XML Documents Using Basic Cascading Style Sheets 231 8 Basic Cascading Style Sheets font-weight keyword: 600 Example CSS rule: TITLE {font-weight:600} Text sample: font-weight keyword: 700 Example CSS rule: TITLE {font-weight:700} Effect: Equivalent to assigning the bold keyword value Text sample: font-weight keyword: 800 Example CSS rule: TITLE {font-weight:800} Text sample: font-weight keyword: 900 Example CSS rule: TITLE {font-weight:900} Effect: The boldest available font weight Text sample: A browser might not be able to display all of these different degrees of boldness. The samples in the table show the actual text that Internet Explorer displays in response to each of the font-weight values. Setting the font-variant Property You can use the font-variant property to convert an element’s text to all capital letters. You can assign this property one of the following two keyword values: font-variant keyword:small-caps Example CSS rule: TITLE {font-variant:small-caps} Effect: Converts the text to all capital letters. Internet Explorer 6.0 makes the letters that were lowercase in the original text smaller than those that were originally uppercase (as shown in the text sample). Text sample: font-variant keyword:normal Example CSS rule: TITLE {font-variant:normal} Effect: Leaves the text in its original mix of uppercase and lowercase letters (that is, the text is not converted) Text sample: 232 XML Step by Step Setting the color Property The color property sets the color of an element’s text. You can assign this prop- erty a color value by using any of the formats discussed in the sidebar “Specify- ing Color Values” on page 233. For example, the following rule sets the color of the AUTHOR element’s text to light blue: AUTHOR {color:blue} And the following rule sets the AUTHOR element’s text to light red: AUTHOR {color:rgb(255,0,0)} The color property is inherited by child elements. Thus, if you attached the fol- lowing style sheet to the example XML document in Listing 8-2, all text would be light blue except the PRICE text, which would be light red because the style sheet includes an overriding color setting for this element: BOOK {display:block; margin-top:12pt; font-size:10pt; color:blue} TITLE {font-style:italic} AUTHOR {font-weight:bold} PRICE {color:red} tip The color property sets the color of the individual letters in the text (sometimes called the text foreground color). To set the text background color, use the background-color property discussed in “Setting the background-color Prop- erty” later in the chapter. Chapter 8 Displaying XML Documents Using Basic Cascading Style Sheets 235 8 Basic Cascading Style Sheets Setting Background Properties The CSS standard provides the following properties that allow you to modify an element’s background: ■ background-color ■ background-image ■ background-repeat ■ background-position The background is the area surrounding the individual characters of the element’s text. You can assign either a solid color or an image to an element’s background. Technically, child elements inherit none of these properties. However, by default, an element’s background is transparent. This means that if you omit all back- ground properties from a child element, the parent element’s (or browser’s) background color or image shows through, effectively giving the child element the same background as the parent (or browser). Setting the background-color Property You can apply a solid background color to an element by assigning a color value to its background-color property. The different types of color values you can as- sign are described in the sidebar “Specifying Color Values” on page 233. For ex- ample, the following rule sets the background color of the TITLE element to light yellow: TITLE {background-color:yellow} Recall that the color property sets an element’s foreground color—that is, the color of the characters themselves. Thus, the following rule creates blue letters on a yellow background: TITLE {color:blue; background-color:yellow} If you don’t want to specify a solid background color for an element, you can assign the background-color property the transparent value, as shown here: TITLE {background-color:transparent} 236 XML Step by Step Or, because transparent is the default value, you can simply omit the back- ground-color property from that element. Unless you assign a background im- age to the element, the transparent setting causes the parent element’s (or browser’s) background to show through. Setting the background-image Property You can add a background image to an element by assigning the URL of an im- age file to the background-image property. For information on specifying URLs, see the sidebar “Specifying URL Values” on page 209. For example, the follow- ing rule assigns the background image contained in the file Leaf.bmp to the STANZA element: STANZA {background-image:url(Leaf.bmp)} To illustrate further, consider the style sheet shown in Listing 8-3, which is at- tached to the XML document shown in Listing 8-4. (You’ll find a copy of both listings on the companion CD under the filenames Leaves.css and Leaves.xml.) Leaves.css /* File Name: Leaves.css */ POEM {font-size:140%} POEM, TITLE, SUBTITLE, AUTHOR, SECTION, NUMBER, STANZA, VERSE {display:block} SECTION, STANZA {margin-top:1em} STANZA {background-image:url(Leaf.bmp)} Listing 8-3. Leaves.xml <?xml version=”1.0"?> <!— File Name: Leaves.xml —> <?xml-stylesheet type=”text/css” href=”Leaves.css”?> <POEM> 238 XML Step by Step Internet Explorer would display Leaves.xml as shown here: Notice that the image is repeated (that is, tiled) as needed to fill the entire area occupied by the element’s content, extending almost to the right edge of the browser window. (The next section describes how to control tiling.) Notice also that any portion of an image that extends above or below the element’s text is cropped (that is, eliminated). In the example, only a very small portion of the images on the bottom row of each STANZA element is cropped. If you don’t want to specify a background image for an element, you can assign the background-image property the value none, like this: STANZA {background-image:none} Or, because none is the default value, you can simply omit the background-im- age property from that element. Unless you assign a solid background color to the element, the none setting causes the parent’s (or browser’s) background to show through. note If you assign both a background image and a solid background color (using the background-color property), the image will cover the solid color. 240 XML Step by Step ■ repeat-y. Repeats the image in the vertical direction only. For ex- ample, the STANZA rule given here would display the document as shown in the following figure: STANZA {background-image:url(Leaf.bmp); background-repeat:repeat-y} ■ no-repeat. Causes the image to be displayed only once. For ex- ample, this STANZA rule would display the document as shown in the following figure: Chapter 8 Displaying XML Documents Using Basic Cascading Style Sheets 241 8 Basic Cascading Style Sheets STANZA {background-image:url(Leaf.bmp); background-repeat:no-repeat} Setting the background-position Property By default, the upper left corner of the background image (or the upper left cor- ner of the upper left copy of the image if it repeats) aligns with the upper left corner of the element. You can change this alignment by assigning a value to the background-position property. You can assign this property three different types of values: ■ Horizontal and vertical size values. You can assign the background- position property two size values. The first value indicates the hori- zontal position of the left edge of the image within the element, and the second value indicates the vertical position of the top edge of the image within the element. You can assign any of the types of size values described in the sidebar “Specifying Size Values” on page 227. For example, the following rule places the upper left corner of the image .5 inches to the right and .25 inches down from the upper left corner of a STANZA element: STANZA {background-image:url(Leaf.bmp); background-repeat:no-repeat; background-position:.5in .25in} 242 XML Step by Step Here’s the result of this rule: If the image repeats as specified in the following rule, the entire pat- tern of repeated images shifts by the amount indicated, as shown in the figure: STANZA {background-image:url(Leaf.bmp); background-repeat:repeat; background-position:.5in .25in} Chapter 8 Displaying XML Documents Using Basic Cascading Style Sheets 245 8 Basic Cascading Style Sheets The following figure shows the image position resulting from each combination of keywords. center bottom or bottom right bottomleft bottom center top or top center center or center right center or right left center or left right top left top (the default) center top top left center left center center center right center right center bottom bottom The order of the keywords is unimportant. For example, background-position:bottom right is equivalent to background- position:right bottom. [...]... displays the XML document that it’s attached to: 8 SUBTITLE {letter-spacing:normal} Setting the word-spacing Property (Internet Explorer 6.0 only) The word-spacing property works just like the letter-spacing property except that it increases or decreases the spacing between entire words As with wordspacing, you can assign letter-spacing a positive or negative size value to change 248 XML Step by Step the... to increase the character spacing by the indicated amount For example, the following rule increases the character spacing by an amount equal to one-quarter of the text height: TITLE {letter-spacing:.25em} You can assign letter-spacing a negative size value to decrease the character spacing by the indicated amount For example, this rule decreases the character spacing by one-half point: TITLE {letter-spacing:-.5pt}...246 XML Step by Step Setting Text Spacing and Alignment Properties The CSS standard provides the following properties that modify the spacing, alignment, and other features of the text: I letter-spacing I word-spacing... {font-size:75%; vertical-align:text-bottom} Effect: Text sample: Aligns the bottom of the element with the bottom of the parent element’s font Basic Cascading Style Sheets Effect: Text sample: 250 XML Step by Step vertical-align keyword: top (Internet Explorer 5.5–6.0 only) Example CSS rule: CHILD {font-size:75%; vertical-align:top} Effect: Aligns the top of the element with the tallest element on the... see the sidebar “Specifying Size Values” on page 227 Or, you can select normal character spacing by assigning letter-spacing the CSS keyword value normal For example, the following style sheet, attached to the XML document in Listing 8-4, assigns an expanded character spacing to the Chapter 8 Displaying XML Documents Using Basic Cascading Style Sheets 247 TITLE element, and it assigns a normal character... positive or negative size value to specify the absolute distance by which the element is to be raised or lowered; or you can assign it a positive or negative percentage value to indicate the amount by which the element is to be raised or lowered as a percentage of the line height of the current element (An element’s line height is determined by the line-height property, discussed later.) Also, with any... to the XML document in Listing 8-4, Internet Explorer 6.0 would add 1.5em of additional word spacing to both the TITLE element and to its child element SUBTITLE (which would inherit the word-spacing setting from TITLE) POEM {font-size:140%} POEM, TITLE, SUBTITLE, AUTHOR, SECTION, NUMBER, STANZA, VERSE {display:block} SECTION, STANZA {margin-top:1em} TITLE {word-spacing:1.5em} Here’s how the XML document... affects only inline elements (An inline element is one whose display property is set to inline, as discussed in the section “Setting the display Property” earlier in the chapter.) Chapter 8 Displaying XML Documents Using Basic Cascading Style Sheets 249 You can assign vertical-align one of the CSS keywords in the following table To create each text sample, I assigned the setting to the vertical-align... line-height property, discussed later.) Also, with any of the Internet Explorer versions covered in this book (5.0 through 6.0), you can use relative positioning to raise or lower text from its normal position by any amount, as explained in “Setting the Relative and Absolute Positioning Properties” in Chapter 9 Setting the text-align Property You can use the text-align property to control the horizontal alignment . {background-image:url(Leaf.bmp)} Listing 8-3. Leaves .xml < ?xml version=”1.0"?> <!— File Name: Leaves .xml —> < ?xml- stylesheet type=”text/css” href=”Leaves.css”?> <POEM> 238 XML Step by Step Internet Explorer. converted) Text sample: 232 XML Step by Step Setting the color Property The color property sets the color of an element’s text. You can assign this prop- erty a color value by using any of the formats. background-position:.5in .25in} 242 XML Step by Step Here’s the result of this rule: If the image repeats as specified in the following rule, the entire pat- tern of repeated images shifts by the amount indicated,