XML Step by Step- P12 doc

Displaying XML Documents Using Basic Cascading Style Sheets In this chapter and in Chapter 9, you’ll learn how to display an XML document in the Microsoft Internet Explorer browser by li

Trang 1

Chapter 7 Creating Valid XML Documents Using XML Schemas 191

<TITLE>The Legend of Sleepy Hollow</TITLE>

<FIRSTNAME>Washington</FIRSTNAME>

<LASTNAME>Irving</LASTNAME>

</AUTHOR>

<BINDING>mass market paperback</BINDING>

<PUBLISH_DATE>1973-06</PUBLISH_DATE>

</BOOK>

<TITLE>The Marble Faun</TITLE>

<FIRSTNAME>Nathaniel</FIRSTNAME>

<LASTNAME>Hawthorne</LASTNAME>

</AUTHOR>

<BINDING>trade paperback</BINDING>

</BOOK>

<TITLE>Moby-Dick <SUBTITLE>Or, the Whale</SUBTITLE></TITLE> <AUTHOR Born=”1819">

<FIRSTNAME>Herman</FIRSTNAME>

<LASTNAME>Melville</LASTNAME>

</AUTHOR>

<BINDING>hardcover</BINDING>

<PUBLISH_DATE>2001-06</PUBLISH_DATE>

</BOOK>

<TITLE>The Portrait of a Lady</TITLE>

<FIRSTNAME>Henry</FIRSTNAME>

<LASTNAME>James</LASTNAME>

</AUTHOR>

Trang 2

PART 3

Displaying XML Documents on the Web

Trang 4

Displaying XML

Documents Using

Basic Cascading

Style Sheets

In this chapter and in Chapter 9, you’ll learn how to display an XML

document in the Microsoft Internet Explorer browser by linking a cascading

style sheet (CSS) to the document and then opening the document directly

in the browser A cascading style sheet is a file that contains instructions for

formatting the elements in the XML document Linking a cascading style

sheet is the first method covered in this book for displaying XML documents

in the Internet Explorer browser

Because you invent your own elements in XML, a browser has no built-in

knowledge of how to properly display them Creating and linking a cascading style sheet to your XML document is one way to tell the browser how to display each of the document’s elements Because an XML document with an attached cascading style sheet can be opened directly in Internet Explorer, you don’t need

to use an HTML page to access and display the data (as you do with the meth-ods for displaying XML that I’ll present in Chapters 10 and 11)

Keeping the display instructions in a style sheet separate from the actual XML document enhances the XML document’s flexibility and makes it easier to main-tain You could, for example, quickly adapt a single XML document for a vari-ety of different display situations (different browsers, applications, contexts,

devices, and so on) by simply attaching an appropriate style sheet for each situa-tion, without having to restructure or edit the document itself Also, you could rapidly update the formatting of a group of similar XML documents by merely revising the common style sheet that is attached to these documents, without

having to open and edit each document

CHAPTER

8

Trang 5

196 XML Step by Step

Creating and linking a cascading style sheet is probably the simplest method for displaying an XML document The CSS language is already familiar to many Web page designers because of its established use with HTML pages, and most current Web browsers provide a high level of support for cascading style sheets However, compared to the XML display methods you’ll learn in later chapters, linking a cascading style sheet to an XML document is a fairly limited means for controlling the display of the document Although a cascading style sheet provides a high level of control over the way the browser formats the content of each of the elements in an XML document, it doesn’t let you select, filter, rear-range, or add to the elements’ data, or work with that information in other ways Also, a CSS doesn’t allow you to access XML attributes, unparsed entities, processing instructions, and other document components—or to process the information that these components contain (But take a look at the Note at the end of this section for an explanation of the importance of CSS properties regardless of the method you use to display your XML documents.)

In this chapter, you’ll learn the basic steps for using a cascading style sheet, how these style sheets work, and the meaning of the term “cascading.” You’ll also learn how to use the CSS properties that control the most basic formatting features of your XML documents, such as the text font, color, background, spacing, and alignment In Chapter 9, you’ll learn how to use CSS properties

to achieve more sophisticated formatting effects; for example, you’ll learn how

to add margins and borders to an element’s content, how to control the exact size and position of an element, and how to format just the first letter or line of

an element

note

Chapters 8 and 9 cover CSS as defined by the World Wide Web Consortium (W3C) and as implemented by Internet Explorer These chapters cover most of the features defined by the W3C’s original CSS specification (CSS Level 1), and present a sampling of the features defined by the W3C’s more recent CSS speci-fication (CSS Level 2), which is largely a superset of CSS Level 1 (Internet Ex-plorer only partially implements CSS Level 2.) You can view the W3C

specification for CSS Level 1 at http://www.w3.org/TR/REC-CSS1 and the W3C specification for CSS Level 2 at http://www.w3.org/TR/REC-CSS2 To

learn more about the CSS features supported by Internet Explorer, see the topic

“Cascading Style Sheets” in the MSDN (Microsoft Developer Network) Library

on the Web at http://msdn.microsoft.com/library/.

Trang 6

Chapter 8 Displaying XML Documents Using Basic Cascading Style Sheets 197

In Chapters 10 through 12, you’ll learn somewhat more complex—but also

more flexible—ways to display XML documents In Chapter 10, you’ll learn how to link an XML document to an HTML page and display the XML ele-ments by binding standard HTML eleele-ments to them In Chapter 11, you’ll learn how to access and display individual elements, attributes, and other components

of an XML document by writing script code in an HTML page And in Chapter

12, you’ll discover how to use a more powerful style sheet language—Extensible Stylesheet Language Transformations (XSLT)—which allows you to select and transform an XML document’s data in highly flexible ways, to display its data using HTML elements, and to format the data using CSS properties

note

Even if you choose to use the XML display methods given in Chapters 10 through 12 instead of linking cascading style sheets to your documents, the CSS properties and techniques you’ll learn in Chapters 8 and 9 will still be the pri-mary tools that you’ll ultimately use to format the data from your XML docu-ments That’s because the methods in Chapters 10 through 12 all use HTML elements to display XML data, and CSS properties are the most powerful means for formatting HTML elements

In Chapters 10 through 12, you’ll see many examples in which an individual HTML element is formatted by directly applying one or more CSS property settings using the STYLE attribute in the element’s start-tag Keep in mind that you can also embed an entire cascading style sheet within an HTML page by using the HTML STYLE element You can also attach an external cascading style sheet by using the HTML LINK element For an introduction to these techniques, see the topic “2.1 A brief CSS2 tutorial for HTML” in the W3C page “2

Intro-duction to CSS2” at http://www.w3.org/TR/REC-CSS2/intro.html.

The Basic Steps for Using a

Cascading Style Sheet

To use a cascading style sheet to format an XML document that you open di-rectly in the Internet Explorer browser, you must complete the following two basic steps:

1 Create the style sheet file

2 Link the style sheet to the XML document

Trang 7

The First Step: Creating the Style Sheet File

A cascading style sheet is a plain text file, typically with the css extension, that contains a set of rules telling the browser how to format and display the ele-ments in a specific XML document As with an XML document, you can create

a style sheet using your favorite text editor

Listing 8-1 contains an example of a simple cascading style sheet (You’ll find a copy of this listing on the companion CD under the filename Inventory01.css.)

Inventory01.css

/* File Name: Inventory01.css */

BOOK

{display:block;

margin-top:12pt;

font-size:10pt}

TITLE

{font-style:italic}

AUTHOR

{font-weight:bold}

Listing 8-1.

This style sheet is designed to be attached to the XML document shown in List-ing 8-2 (You’ll find a copy of this listList-ing on the companion CD under the filename Inventory01.xml.) You might want to put a sticky note on the page with Listing 8-2—it’s used with other examples in this chapter, and you’ll prob-ably want to refer back to it

Inventory01.xml

<?xml version=”1.0"?>

<!— File Name: Inventory01.xml —>

<?xml-stylesheet type=”text/css” href=”Inventory01.css”?>

<BOOK>

<TITLE>The Adventures of Huckleberry Finn</TITLE>

<AUTHOR>Mark Twain</AUTHOR>

Trang 8

</BOOK>

<BOOK>

<TITLE>The Turn of the Screw</TITLE>

<AUTHOR>Henry James</AUTHOR>

<BINDING>trade paperback</BINDING>

</BOOK>

</INVENTORY>

Listing 8-2.

note

The example style sheet in Listing 8-1 and the example XML document in Listing 8-2 are copies of files you created in the exercise given in “Display the XML Document Using a Cascading Style Sheet” in Chapter 2

A style sheet consists of one or more rules (sometimes known as rule sets) A

rule contains the display information for a particular element type in the XML document The example style sheet contains three rules: one for BOOK ele-ments, one for TITLE eleele-ments, and one for AUTHOR elements Here’s the rule for BOOK elements, with all of its parts labeled:

Selector

Declaration

Property Value

Rule

The selector is the name of the element type to which the display information

applies

Following the selector is a declaration block, which is delimited with brace char-acters ({}) and contains one or more declarations separated with semicolons (;) Each declaration specifies the setting of a particular property, such as the size of

the font to use for displaying the element A declaration consists of a property,

Trang 9

followed by a colon (:), followed by a value for that property For example, the following declaration sets the font-size property to the value 10pt (10 points):

Property Value

Declaration

A style sheet can also contain comments A style sheet comment begins with the

slash and asterisk characters (/*) and ends with the asterisk and slash characters (*/) Between these two delimiting character pairs, you can type any text you want, and when the browser reads the style sheet to format the document, it will ignore that text You can use comments to help document or explain the style sheet for the benefit of human readers An example is the comment at the begin-ning of the example style sheet in Listing 8-1:

/* File Name: Inventory01.css */

You can also use comments as you develop a style sheet to temporarily deacti-vate a rule or a part of a rule For example, if you wanted to see how BOOK ele-ments would look without a top margin, you could temporarily add comment characters as in the following BOOK rule:

BOOK

{display:block;

/* margin-top:12pt; */

font-size:10pt}

note

White space characters (spaces, tabs, and line breaks) are used to separate different CSS components, such as the individual declarations in the declara-tion block The way I use white space in this book is only one possible style You can use white space in whatever way helps you to organize and clarify your own style sheets For example, you might put all declarations belonging to a rule on the same line, rather than on separate lines as you see in the examples

The example style sheet in Listing 8-1 includes the following declarations:

■ display:block Inserts a line break before and after the element’s text.

Trang 10

■ margin-top:12pt Adds a 12-point-wide margin above the element’s text.

■ font-size:10pt Sets the size of the font used to display the element’s

text to 10 points

■ font-style:italic Displays the element’s text in italic characters.

■ font-weight:bold Displays the element’s text in bold characters.

Here’s how Internet Explorer displays the XML document that uses this style sheet, following the instructions provided by these declarations:

The properties available in cascading style sheets are similar to those you can apply to text in a word processor Later in the chapter, you’ll learn about the dif-ferent properties you can use and the specific values you can assign to them

Case Insensitivity in CSS

With Internet Explorer, cascading style sheets are case-insensitive That is, when Internet Explorer processes a style sheet, it ignores the case of the letters For ex-ample, you could type the following rule in any of these three ways:

TITLE

{font-style:italic}

Title

{FONT-STYLE:Italic}

title

{Font-Style:ITALIC}

Trang 11

Case insensitivity in cascading style sheets has an important implication for

XML Because XML documents are case-sensitive, you can normally have two distinct element types whose names vary only in case, such as Book and BOOK.

In a cascading style sheet, however, these two names would be regarded as the

same element type, and you wouldn’t be able to assign them different property

settings Therefore, if you intend to display your XML document using a cascad-ing style sheet, you should not have element types whose names vary only in the case of one or more letters

Inheritance of Property Settings

In general, a property setting that you assign to a particular element (such as BOOK) affects all child elements nested directly or indirectly within it, unless it’s overridden by a different setting made for a specific child element

The following properties, however, are exceptions and are not inherited by child

elements:

■ The display property, discussed in “Setting the Display Property”

later in this chapter

■ The background properties (background-color, background-image,

background-repeat, and background-position), described in “Setting

Background Properties” later in this chapter

■ The vertical-align and text-decoration properties, explained in

“Set-ting Text Spacing and Alignment Properties” later in this chapter

■ The box properties, covered in “Setting Box Properties” in Chapter 9

For instance, the example style sheet in Listing 8-1 formats the BOOK elements (in the document in Listing 8-2) like this:

BOOK

{display:block;

margin-top:12pt;

font-size:10pt}

Each BOOK element has five child elements Because font-size is an inherited

property, all of the child elements within a BOOK element are displayed in a

10-point font Child elements do not, however, inherit the display and margin-top property settings (margin-top is one of the box properties).

With a noninherited property, if you don’t specify a property value for a particu-lar element, the browser will use that property’s default value For example, the

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