XML Step by Step- P14 docx

font-weight keyword: boldExample CSS rule: TITLE {font-weight:bold} Effect: Displays the text in typical bold characters Text sample: font-weight keyword: bolder Example CSS rule: TITLE

Trang 1

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:

Effect: Equivalent to assigning the normal keyword value

Text sample:

Trang 2

Chapter 8 Displaying XML Documents Using Basic Cascading Style Sheets 231

Text sample:

Effect: Equivalent to assigning the bold keyword value

Text sample:

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:

Trang 3

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 follow“Specify-ing 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

Trang 4

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}

Trang 5

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-imim-age 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>

Trang 6

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.

Trang 7

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

Trang 8

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}

Trang 9

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}

Trang 10

The following figure shows the image position resulting from each

combination of keywords

center bottom

or

bottom right bottom

left 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,

position:bottom right is equivalent to

background-position:right bottom.

Trang 11

Setting Text Spacing and

Alignment Properties

The CSS standard provides the following properties that modify the spacing, alignment, and other features of the text:

■ letter-spacing

■ word-spacing (Internet Explorer 6.0 only)

■ vertical-align

■ text-align

■ text-indent

■ line-height

■ text-transform

■ text-decoration Child elements inherit all of these properties except vertical-align and

text-decoration.

Setting the letter-spacing Property

You can use the letter-spacing property to increase or decrease the spacing be-tween the characters of an element’s text You can assign letter-spacing a positive

size value to increase the character spacing by the indicated amount For ex-ample, 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}

For information on the different kind of size values you can assign, 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

Trang 12

TITLE element, and it assigns a normal character spacing to the SUBTITLE ele-ment (the second assignele-ment is necessary to override the expanded character spacing that SUBTITLE would otherwise inherit from its parent element, TITLE): POEM

{font-size:140%}

POEM, TITLE, SUBTITLE, AUTHOR, SECTION, NUMBER, STANZA, VERSE

{display:block}

SECTION, STANZA

{margin-top:1em}

TITLE

{letter-spacing:.5em}

SUBTITLE

{letter-spacing:normal}

With the rules in this style sheet, here’s how Internet Explorer displays the XML document that it’s attached to:

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 word-spacing, you can assign letter-spacing a positive or negative size value to change

Trang 13

the default word spacing, or you can assign it the CSS keyword normal to use

the default word spacing

If, for example, you attached the following style sheet 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

in-herit 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 would appear:

Setting the vertical-align Property

You can use the vertical-align property to create superscript or subscript text This property affects only inline elements (An inline element is one whose dis-play property is set to inline, as discussed in the section “Setting the disdis-play

Property” earlier in the chapter.)

Trang 14

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 property of only the CHILD element, which is an inline element that appears in the

docu-ment like this:

<PARENT>PARENT ELEMENT<CHILD>CHILD ELEMENT</CHILD></PARENT>

I also reduced the size of the CHILD element’s font to 75% of the size of the PARENT element’s font, as shown in the example CSS rules

vertical-align keyword: baseline (default)

Example CSS rule: CHILD

{font-size:75%; vertical-align:baseline}

Effect: Aligns the baseline of the element with the

baseline of the parent element

Text sample:

vertical-align keyword: sub

{font-size:75%; vertical-align:sub}

Effect: Displays the element’s text as subscript

Text sample:

vertical-align keyword: super

{font-size:75%; vertical-align:super}

Effect: Displays the element’s text as superscript

Text sample:

vertical-align keyword: text-top (Internet Explorer 5.5–6.0 only)

{font-size:75%; vertical-align:text-top}

Effect: Aligns the top of the element with the top of the

parent element’s font

Text sample:

vertical-align keyword: text-bottom (Internet Explorer 5.5–6.0 only)

{font-size:75%; vertical-align:text-bottom}

Effect: Aligns the bottom of the element with the bottom

of the parent element’s font

Text sample:

Tiêu đề	XML Step By Step
Trường học	Standard University
Chuyên ngành	Computer Science
Thể loại	Thesis
Năm xuất bản	2023
Thành phố	New York

Định dạng
Số trang	15
Dung lượng	797,85 KB