XML Step by Step- P15 potx

Chapter 8 Displaying XML Documents Using Basic Cascading Style Sheets 251 8 Basic Cascading Style Sheets whether the child elements are block or inline (block and inline elements are described in the earlier section “Setting the display Property.”) The text-align property affects the alignment of the text within the text content area. By default, the text content area extends across almost the entire width of the browser window. However, as you’ll learn in the next chapter (in “Setting Box Properties”), you can modify both the width and the position of an element’s text content area. You can assign text-align one of the following three keyword values: ■ left. Aligns each line at the left. Assume, for example, that you apply the following rule to the XML document of Listing 8-4 (in addition to the other rules shown in the style sheet in Listing 8-3, except the background-image setting, which I removed for clarity): POEM {text-align:left} The poem would be aligned like this: ■ right. Aligns each line at the right. For example, the following rule aligns the poem to the right, as shown in the figure: POEM {text-align:right} 252 XML Step by Step ■ center. Centers each line horizontally. For example, the following rule centers the entire poem, as you can see in the figure: POEM {text-align:center} Chapter 8 Displaying XML Documents Using Basic Cascading Style Sheets 253 8 Basic Cascading Style Sheets Setting the text-indent Property You can use the text-indent property to indent the first line of an element’s text. You can assign text-indent any of the kinds of size values described in the sidebar “Specifying Size Values” on page 227. For example, the following rule indents the first line of a VERSE element by three times the height of its font: VERSE {text-indent:3em} Here’s how a VERSE element would look: Alternatively, you can specify the indentation as a percentage of the total width of the element’s text. For example, this rule indents the first line of a VERSE element an amount equal to half of the width of the element: VERSE {text-indent:50%} Here’s a VERSE element showing how this would look: tip To indent all lines of an element (instead of just the first line), use the margin- left property, described in “Setting the Margin Properties” in Chapter 9. You can assign a negative value—either a size value or percentage—to move the first line out to the left of the other lines. However, if you simply assign a negative value to the text-indent property, the first part of the line will be hidden, as shown here: 254 XML Step by Step To avoid hiding text, you can apply a left margin to the element. For example, the following rule applies a 4em left margin (margin-left:4em) and then moves the first line out by 2em (text-indent:-2em), creating a hanging indent, as shown in the figure: VERSE {margin-left:4em; text-indent:-2em} Setting the line-height Property The line-height property controls the distance between the baselines of succes- sive lines of an element’s text. You can use it to adjust the text’s vertical line spacing. You can assign line-height any of the kinds of size values described in the sidebar “Specifying Size Values” on page 227. Assume, for example, that you apply the following rule to the XML document in Listing 8-4 (in addition to the rules in the style sheet in Listing 8-3, except the background-image setting, which I removed for clarity): STANZA {line-height:2em} STANZA text would be displayed in double-spaced lines, as shown here: Chapter 8 Displaying XML Documents Using Basic Cascading Style Sheets 255 8 Basic Cascading Style Sheets Alternatively, you can specify the line-height as a percentage of the height of the element’s text. The following rule, for instance, would be equivalent to the rule given above and would generate double line spacing: STANZA {line-height:200%} Setting the text-transform Property You can use the text-transform property to control the capitalization style of an element’s text as the browser displays it. You can assign text-transform one of the following CSS keyword values: text-transform keyword: capitalize Example CSS rule: STANZA {text-transform:capitalize} Effect: Capitalizes the first letter of every word Text sample: text-transform keyword: uppercase Example CSS rule: STANZA {text-transform:uppercase} Effect: Capitalizes every letter Text sample: text-transform keyword: lowercase Example CSS rule: STANZA {text-transform:lowercase} Effect: Displays every letter in lowercase Text sample: text-transform keyword: none Example CSS rule: STANZA {text-transform:none} Effect: Displays the text without changing its capitalization style Text sample: Setting the text-decoration Property You can use the text-decoration property to draw various types of lines through an element’s text. Here are the keyword values you can assign to this property: text-decoration keyword: underline Example CSS rule: TITLE {text-decoration:underline} Effect: Draws a line under the text Text sample: 256 XML Step by Step text-decoration keyword: overline Example CSS rule: TITLE {text-decoration:overline} Effect: Draws a line above the text Text sample: text-decoration keyword: line-through Example CSS rule: TITLE {text-decoration:line-through} Effect: Draws a line through the text Text sample: text-decoration keyword: none Example CSS rule: TITLE {text-decoration:none} Effect: Displays the text without a line Text sample: You can apply more than one type of line by assigning text-decoration several values. (Including the keyword none, however, cancels the effect of all previously listed keywords.) For example, the following rule causes the browser to draw a line above and below the text: TITLE {text-decoration:underline overline} 257 Displaying XML Documents Using Advanced Cascading Style Sheets This chapter continues the discussion started in Chapter 8 on using cascading style sheets to display XML documents. As explained in Chapter 8, if you link a cascading style sheet (CSS) to an XML document, you can open that document directly in the Microsoft Internet Explorer browser and the browser will display and format the document’s elements according to the property settings in the CSS. In this chapter, you’ll learn how to use some slightly more advanced CSS properties. First, you’ll learn how to use the powerful box properties, which allow you to display borders, margins (space outside borders), and padding (space inside borders) around an element’s content; to control the displayed size of an element; and to place an element at a precise position on the page outside the normal flow of text. You’ll then learn how to use pseudo-elements to apply formatting to just the first letter or the first line of an element. Next you’ll learn how to have the browser render and display specific HTML elements when it displays your XML document. The chapter concludes with an exercise in which you’ll create and apply a full-featured style sheet that uses most of the tech- niques and properties covered in Chapters 8 and 9. Advanced CSS CHAPTER 9 258 XML Step by Step Setting Box Properties The CSS specification provides a set of properties known as box properties that you can use to format the block of text belonging to an element. The different types of box properties are as follows: ■ Margin properties add a transparent margin around the element, outside of any visible border. ■ Border properties display a visible border—in a variety of styles— around the element. ■ Padding properties add space immediately outside of the element’s content, inside of any visible border. ■ Size properties, height and width, control the dimensions of the element’s content area plus any padding or border that’s included (as shown in the following figure). ■ Relative and absolute positioning properties allow you to place the element at a specific position on the page, outside of the normal flow of text. ■ Float positioning properties, float and clear, control whether the element is floating. A floating element is displayed to the left or right of the following document content rather than in its normal position within the flow of text. The following figure illustrates the first four groups of box properties applied to a block element: CommentProcessingInstruction Document Attribute Element (BOOK) Element (INVENTORY) Element (BOOK) Element (AUTHOR) Text Text Text Attribute Element (TITLE) Element (PAGES) Element (PRICE) Element (BOOK) Element (AUTHOR) Text Text Text Element (TITLE) Element (PAGES) Element (PRICE) Element (AUTHOR) Text Text Text Text Attribute Element (TITLE) Element (PAGES) Element (PRICE) Text Attribute Text Attribute xml () #comment () version () #text () #text () #text () #text () #text () #text () #text () #text () Born () Born () #text () Born () #text () #text () #text () #document () Binding () Attribute Binding () Attribute Binding () Chapter 9 Displaying XML Documents Using Advanced Cascading Style Sheets 259 9 Advanced CSS Recall from the section “Setting the display Property” in Chapter 8 that a block element is one whose display property is set to the value block, while an inline element is one whose display property is set to inline. With Internet Explorer 5.0 and 5.01, the first three groups of properties (margin, border, and padding) have an effect only on block elements. With Internet Explorer 5.5 through 6.0, however, you can use these properties with either block or inline elements. With any of the Internet Explorer versions covered in this book (5.0 through 6.0), you can apply the size or positioning properties (relative, absolute, or float) to either block or inline elements. Child elements do not inherit the box properties. Setting the Margin Properties By default, the width of the margins around an element is zero. To add a margin to one or more sides of an element, you can assign a nonzero value to one or more of the following properties: ■ margin-top ■ margin-right ■ margin-bottom ■ margin-left You can assign these properties any of the kinds of size values described in the sidebar “Specifying Size Values” on page 227. For example, the following rule adds a margin to the left and right of a STANZA element. The width of the margin is two times the height of the element’s text: STANZA {margin-left:2em; margin-right:2em} You can also specify the size of a margin as a percentage of the width of the element’s parent (or, if the parent isn’t a block element, of the closest ancestor that is a block element). For example, the following rule creates a left margin equal to one-quarter of the width of the element’s parent: STANZA {margin-left:25%} As a shortcut, you can add equal-sized margins to all four sides of an element by assigning a single value—a size value or a percentage—to the margin property. To illustrate, first consider the style sheet given in Listing 9-1, which is linked to the XML document given in Listing 9-2, and displays the text without margins. Chapter 9 Displaying XML Documents Using Advanced Cascading Style Sheets 261 9 Advanced CSS <VERSE>Ah, distinctly I remember it was in the bleak December,</VERSE> <VERSE>And each separate dying ember wrought its ghost upon the floor.</VERSE> <VERSE>Eagerly I wished the morrow;—vainly I had sought to borrow</VERSE> <VERSE>From my books surcease of sorrow—sorrow for the lost Lenore—</VERSE> <VERSE>For the rare and radiant maiden whom the angels name Lenore—</VERSE> <VERSE>Nameless here for evermore.</VERSE> </STANZA> </POEM> Listing 9-2. note — is a character reference for the em dash (—). Here’s how the elements look without margins: [...]... border-width:medium} Text sample: 9 265 Advanced CSS Chapter 9 Displaying XML Documents Using Advanced Cascading Style Sheets 266 XML Step by Step border-width keyword: thick Example CSS rule: TITLE {border-style:solid; border-width:thick} Text sample: Alternatively, you can give a border a specific thickness by assigning borderwidth any of the types of size values described in the sidebar “Specifying Size Values” on... {border-style:double} groove TITLE {border-style:groove} ridge TITLE {border-style:ridge} Advanced CSS border-style keyword: Example CSS rule: Text sample: dashed (Internet Explorer 5.5–6.0 only) 264 XML Step by Step border-style keyword: Example CSS rule: Text sample: TITLE {border-style:inset} inset border-style keyword: Example CSS rule: Text sample: TITLE {border-style:outset} border-style keyword: Example...262 XML Step by Step Adding the following rule to the style sheet inserts a 2.5em margin around all four sides of both STANZA elements, as shown in the figure: STANZA {margin:2.5em} Notice that the total vertical... width of the borders by assigning one of the CSS keyword values shown in the following table to the borderwidth property: border-width keyword: thin Example CSS rule: TITLE {border-style:solid; border-width:thin} Text sample: border-width keyword: medium (default) Example CSS rule: TITLE {border-style:solid; border-width:medium} Text sample: 9 265 Advanced CSS Chapter 9 Displaying XML Documents Using... right sides: TITLE {border-style:solid none solid none} As another example, adding the following rule to the style sheet shown in Listing 9-1 displays a border on all sides of each STANZA element in the XML document of Listing 9-2, with a margin outside of the borders: STANZA {margin:2.5em; border-style:double solid double solid} The top and bottom borders are double, while the left and right borders... closer to what the style sheet author expects note The margin area is always transparent, meaning that the parent element’s (or browser’s) background color or image shows through it Chapter 9 Displaying XML Documents Using Advanced Cascading Style Sheets 263 Setting the Border Properties You can use the following properties to draw visible borders around an element: I border-style I border-width I border-color... (default) note To create some of the text samples in the preceding table, I altered the background color to make the border style more effective You can vary the style of the border on each side of an element by assigning four different keyword values to the border-style property The values refer to the top, right, bottom, and left borders, in that order For example, the following rule displays a solid border... border that’s 1 pixel wide (the thinnest border that a monitor can display) on all sides: TITLE {border-style:solid; border-width:1px} You can vary the thickness of the border on each side of an element by assigning four different values—CSS keywords or size values—to the border-width property The values refer to the top, right, bottom, and left borders, in that order For instance, adding the following . sample: 266 XML Step by Step border-width keyword: thick Example CSS rule: TITLE {border-style:solid; border-width:thick} Text sample: Alternatively, you can give a border a specific thickness by assigning. to the text-indent property, the first part of the line will be hidden, as shown here: 254 XML Step by Step To avoid hiding text, you can apply a left margin to the element. For example, the following. rule: TITLE {text-decoration:underline} Effect: Draws a line under the text Text sample: 256 XML Step by Step text-decoration keyword: overline Example CSS rule: TITLE {text-decoration:overline} Effect: