Xml For Dummies Chapter 7 Handling Formatting With Css


Published on

Published in: Technology, Education
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Xml For Dummies Chapter 7 Handling Formatting With Css

  1. 1. XML FOR DUMMIES<br />Book author: Lucinda Dykes and Ed Tittel<br />Slides Prepared by Cong Tan<br />Part 2 : XML and The Web<br />Chapter 7: Handling Formatting with CSS.<br />
  2. 2. Contents<br />Viewing XML on the Web with CSS.<br />Basic CSS Formatting : CSS1.<br />The Icing on the Cake: CSS2.<br />Building a CSS Stylesheet.<br />Adding CSS to XML.<br />Adding CSS to XSLT.<br />
  3. 3. 1. Viewing XML on the Web with CSS. <br /> If you want to see how a CSS document can affect the look and feel of a Web page, visit Dave Shea’s CSS Zen Garden page ,at www.csszengarden.com , also shown in Figure 7-1. The CSS Zen Garden beautiful demonstrates the power of CSS.<br /> Building a good stylesheet is a much easier approach, because it’s design to drive complex display.<br /> You will be using the right tool for the right job.<br />
  4. 4.
  5. 5. 1. Viewing XML on the Web with CSS(cont…).<br /> CSS is ready, ready easy to use with XML.<br /> Figure 7-2 shows how the bookstore XML file looks with the addition of a difference CSS stylesheet to display our book information.<br />CSS document are just plain text , you want to use CSS with XML, you must to learn CSS , its syntax.<br />
  6. 6. 2. Basic CSS Formatting: CSS1.<br /> CSS1 was the first version of CSS developed for use with HTML.<br /> Partial suppose for CSS1 in Web browser start with IE 3.0 and Netscape Navigator 4.o.<br /> The newer version suppose all elements in CSS1.<br /> With CSS1, you can control the format display of:<br /> Colors and backgrounds<br /> Fonts and text<br /> Lists<br /> Margins, padding , and borders<br />
  7. 7. 3. The Icing on the Cake: CSS2.<br /> CSS2 was published as a W3C recommendation in 1998.<br /> IE and Netscape Navigator , version 6 and later suppose almost all of the CSS2 specification.<br /> Additions to CSS1 in CSS2 include the following:<br /> Element positioning<br /> Element visibility<br /> Support for specifying page breaks<br /> Table styles<br /> Aural stylesheets<br /> Support for system colors and fonts<br /> Counters and automatic numbering.<br />
  8. 8. 4. Building a CSS Stylesheet.<br />The primary focus is understanding and using CSS markup, and understanding its capabilities and limitations.<br />You must also understand that not all Web browsers treat CSS definitions exactly the same, so experimentation and testing to achieve the right look may be require.<br /> Cascading refers to the capability of applying multiple stylesheet to any document.<br /> There three stylesheet cascade —are applied in order —to the Web page according to the following priority order:<br /> 1. User-defined stylesheets(a specific stylesheet created for the user).<br /> 2. Inline styles<br /> 3. Embedded styles<br /> 4. External stylesheets.<br /> 5. The user’s preferences<br /> 6. The browser’s default stylesheet.<br />
  9. 9. 5. Adding CSS to XML. <br /> Best to begin with basics —the XML to which we’ll be adding a CSS stylesheet. Listing 7-1 shows our books XML file —which includes only book information.<br />
  10. 10.
  11. 11. 5. Adding CSS to XML(cont…).<br /> This document includes the following elements.<br /> &lt;book&gt; holds everything in the document .<br /> &lt;book&gt; data should be separated for each book so it’s easy to read on-screen.<br /> &lt;title&gt; should be emphasized with a lager font and a different color background so that each book is easy to locate on the page.<br /> &lt;author&gt;, &lt;publisher&gt;, &lt;price&gt;, &lt;contentType&gt;, &lt;format&gt;, and &lt;isbn&gt; work well together and should be displayed in a similar style on separate lines.<br />
  12. 12. 5.1 A simple CSS stylesheet for XML.<br />Listing 7-2 shows a simple CSS stylesheet for our book XML file.<br />
  13. 13. 5.2 Dissecting a simple CSS stylesheet.<br /> A stylesheet is nothing more than a collection of style rules that tells the computer how to format of the various elements is an XML document when it puts them on-screen.<br /> All style rules use the same syntax, so even if you’ve never seen a CSS stylesheet, you can probably guess how to build a basic style rule.<br />
  14. 14. 5.2.1 The magic formula for building CSS style rules.<br /> CSS stylesheetsconsit of style rules called statements. <br /> A statement is made up of a selector that specifies which elements the statement applies to and a declaration that specifies which style properties to apply.<br />The declaration includes a style properly name and value. The syntax looks like this:<br /> Here’s an example of a CSS statement form the book.css stylesheet. <br /> Books is the selector, and the declaration includes background-color, a formatting property, and gray, the value of this formatting property.<br />selector {declaration}<br />books { background-color: gray;}<br />
  15. 15. 5.2.1 The magic formula for building CSS style rules(cont…).<br /> Some of the declarations from our booksstylesheet include these:<br />{backgroud-repeat: no-repeat; background-position: 80% 10px;}<br />{font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;}<br /> {margin-bottom: 20px; margin-top: 15px;}<br /> {padding: 2px;}<br />All specific CSS properties —and the values they can take —are predefined in the CSS1 and CSS2 specifications.<br /> The hardest part of learning CSS is remembering specific property names and their values.<br />
  16. 16. 5.2.2 Combining declarations.<br /> You can combine declarations in a style rule to include a collection of property and value combinations in a single selector.<br /> Syntax: property: value<br /> We did in most of our style rule, including this one:<br />title {<br />display:block;<br /> color: Maroon;<br /> font-size: medium;<br />}<br />
  17. 17. 5.2.3 Efficiency is good: Combining selectors and declarations.<br />You can combining selectors. Simply list all your selectors separated by commas, as in:<br /> Our sample stylesheet combines selectors this way in a style rule:<br />selector, selector . . . {declaration}<br />author, publisher, price, contentType, format, isbn {<br /> display: block;<br /> background-color: #ffe4c4;<br /> font-size: x-small;<br /> padding: 2px;<br />}<br />
  18. 18. 5.2.4 Variations on the magic: Selector specifications.<br /> You can also apply specific styles when elements occur in a particular order.<br /> For example, you could create a style that applies to the dog element only when it follows the cat element. <br /> To do this just add a space between element names and use them both as the selector, like so:<br /> That space between the element names tells the application processing the stylesheet to look for cat tags followed by dog tags.<br /> You can link selectors to different elements based on attribute values, context, type, parent–child relationships, and a variety of other options.<br />cat dog {color: teal}<br />
  19. 19. 5.2.5 Punctuating CSS rules.<br />
  20. 20. 5.3 Linking CSS and XML.<br /> After you’ve built some stylesheets, the next step is to use them with XML.<br /> This process is pretty easy, but the met method varies between XML and XHTML.<br /> To reference a CSS stylesheet in an XML document, use a processing instruction that takes this format:<br /> For books.xml, we added this processing instruction as the line following the XML declaration:<br /> To reference a CSS stylesheet in an HTML or an XHTML document, use a link element that takes this fotmat:<br />&lt;?xml-stylesheethref=”url” type=”text/css”?&gt;<br />&lt;?xml-stylesheet type=”text/css” href=”books.css”?&gt;<br />&lt;link href=”url” rel=”stylesheet” type=”text/css”&gt;<br />
  21. 21. 6. Adding CSS to XSLT. <br />CSS and XSL(including XSLT and XSL-FO) are completing technologies doesn’t mean you have to choose one or the other to use forevermore.<br /> CSS and XSL play well together.<br /> XSL has two primary purpose: as XSL-FO, to apply style to XML document, and as XSLT.<br /> Many XML developers use the transformation side of XSL — XSLT —to transform<br />