XML Step by Step- P15 potx

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: VER

Chapter 8 Displaying XML Documents Using Basic Cascading Style Sheets 251

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}

■ 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

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 ele-ment an amount equal to half of the width of the eleele-ment:

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

nega-tive value to the text-indent property, the first part of the line will be hidden, as

shown here:

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

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

Effect: Capitalizes the first letter of every word

Text sample:

text-transform keyword: uppercase

Effect: Capitalizes every letter

Text sample:

text-transform keyword: lowercase

Effect: Displays every letter in lowercase

Text sample:

text-transform keyword: 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

Text sample:

text-decoration keyword: overline

Text sample:

text-decoration keyword: line-through

Text sample:

text-decoration keyword: none

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}

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

docu-ment 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

proper-ties 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

ele-ment; and to place an element at a precise position on the page outside the

nor-mal 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

CHAPTER

9

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:

outside of any visible border

around the element

content, inside of any visible border

element’s content area plus any padding or border that’s included (as shown in the following figure)

element at a specific position on the page, outside of the normal flow of text

ele-ment is floating A floating eleele-ment 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:

Comment ProcessingInstruction

Document

Attribute

Element (BOOK)

Element (INVENTORY)

Element (BOOK)

Element (AUTHOR)

Text

Attribute Element

(TITLE) Element Element(PRICE)

Element (BOOK)

Element (AUTHOR)

Text

Element (TITLE) Element Element(PRICE)

Element (AUTHOR)

Text Text Attribute Text Text

Element (TITLE) Element Element(PRICE)

Text Attribute Attribute Text

xml

( ) ( #comment )

version

( )

#text

( ) ( Born ) ( #text ) ( #text ) ( #text ) ( #text ) ( Born ) ( #text ) ( #text ) ( #text )

#document

Binding

( ) (AttributeBinding )

Attribute

Binding

( )

Chapter 9 Displaying XML Documents Using Advanced Cascading Style Sheets 259

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, how-ever, 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 mar-gin 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

<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;&#8212;vainly I had

sought to borrow</VERSE>

<VERSE>From my books surcease of sorrow&#8212;sorrow

for the lost Lenore&#8212;</VERSE>

<VERSE>For the rare and radiant maiden whom the angels

name Lenore&#8212;</VERSE>

<VERSE>Nameless here for evermore.</VERSE>

</STANZA>

</POEM>

Listing 9-2.

note

&#8212; is a character reference for the em dash (—).

Here’s how the elements look without margins:

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 margin height between the two STANZA elements

is the same as the width of the left or right margin (2.5em), and is not the sum

of the bottom margin of the first STANZA element plus the top margin of the second STANZA element (which would be a total margin height of 5em) That’s

because the browser always collapses adjoining vertical (top or bottom) margins

to use the maximum of the individual margin values In the example, both verti-cal margins are 2.5em, so the browser collapses the two margins into a single 2.5em margin The rationale for collapsing margins is that the result is usually more visually pleasing and 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

Setting the Border Properties

You can use the following properties to draw visible borders around an element:

■ border-style

■ border-width

■ border-color

Setting the border-style Property

You can use the border-style property to add a visible border to one or more sides of an element, and to set the border’s style You can assign border-style any

of the CSS keyword values shown in the following table:

border-style keyword: solid

Text sample:

border-style keyword: dotted (Internet Explorer 5.5–6.0 only)

Text sample:

border-style keyword: dashed (Internet Explorer 5.5–6.0 only)

Text sample:

border-style keyword: double

Text sample:

border-style keyword: groove

Text sample:

border-style keyword: ridge

Text sample:

264 XML Step by Step

border-style keyword: inset

Text sample:

border-style keyword: outset

Example CSS rule: TITLE {border-style:outset}

Text sample:

border-style keyword: none (default)

Text sample:

note

To create some of the text samples in the preceding table, I altered the back-ground 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 on the top and bottom sides of a TITLE element, but

no border on the left or right sides:

TITLE {border-style:solid none solid none}

As another example, adding the following rule to the style sheet shown in List-ing 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 are solid, as shown here:

Setting the border-width Property

If you’ve applied a visible border to one or more sides of an element using

the border-style property, you can adjust the width of the borders by assigning one of the CSS keyword values shown in the following table to the

border-width property:

border-width keyword: thin

{border-style:solid;

border-width:thin}

Text sample:

border-width keyword: medium (default)

{border-style:solid;

border-width:medium}

Text sample:

266 XML Step by Step

border-width keyword: thick

{border-style:solid;

border-width:thick}

Text sample:

Alternatively, you can give a border a specific thickness by assigning border-width any of the types of size values described in the sidebar “Specifying Size

Values” on page 227 For example, the following rule assigns the TITLE element

a 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

prop-erty The values refer to the top, right, bottom, and left borders, in that order For instance, adding the following rule to the example style sheet shown in List-ing 9-1 creates a solid border on all sides of a STANZA element:

STANZA

{margin:2.5em;

border-style:solid;

border-width:1px thick 1px thick}

The top and bottom borders have the minimum thickness, while the left and right borders are thick, as shown here: