Tài liệu Sams Teach Yourself CSS in 24 Hours- P10 ppt

50 513 0

Daniel Gửi tin nhắn Báo tài liệu vi phạm

Tải lên: 111,449 tài liệu

  • Loading ...
1/50 trang

Thông tin tài liệu

Ngày đăng: 26/01/2014, 14:20

<author><name>Kynn Bartlett</name><email>&lt;kynn@idyllmtn.com&gt;</email></author><tipbody><para>When a blind user accesses a Web page using ascreenreader, the screenreader uses a specificlanguage dictionary to know how words should bepronounced, based on the language of the page.If the wrong dictionary is used, the speechwill be very difficult to understand.</para><para>If the language changes in the middle of the Webpage, you need to mark that change with the<code>lang</code> attribute, which can be seton any HTML tag but is usually set on the<code>&lt;span&gt;</code> element. This will letthe screenreader know which language dictionaryto use when synthesizing speech.</para><para paratype=”note”>The XML equivalent of the <code>lang</code>attribute is <code>xml:lang</code>.</para></tipbody><tipexample>&lt;p&gt;&lt;span lang=”de”&gt;Ich bin Berliner.&lt;/span&gt;(I am a resident of Berlin)&lt;/p&gt;</tipexample></accesstip></tippage>Notice that in the listing, the <tipexample> element contains HTML code, but the anglebrackets have been converted to character entities using &lt; and &gt;.Also notice that this document says absolutely nothing about how to display the content;it just defines the information and leaves it at that. This is one of the primary uses ofXML—completely separating presentation from content. Later this hour you’ll see howCSS can be used to define that presentation.432 Hour 24LISTING 24.1 Continued30 0672324091 ch24 6/13/02 10:34 AM Page 432Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.DTDs and SchemasTo make the jump from an XML document to an XML-based language, you need to have aformal definition for a language. An XML document is not required to be part of an XML-based language, though! An XML document without a formal definition basically createsan ad hoc language as it goes along, and by the rules of XML, that’s perfectly valid.However, if you’re writing an application that you mean for others to use, you may needto have the syntax of your XML document written down. There are two primary ways todo this: XML Document Type Definitions (DTDs) and XML Schemas.DTDs are the original way to define an XML-based language and are based on the waySGML languages are defined. Schemas are a newer development and allow for types ofvalues to be defined in a broader fashion than DTDs allow. Schema support is still underdevelopment, however, and DTDs are currently more widely used.A DTD’s purpose is to define exactly what types of elements and attributes can be usedin a document and in which combination and structure they may be arranged. A DTD filelooks somewhat similar to an XML or HTML file, but technically speaking, it’s notXML because it doesn’t follow the rules for XML; schemas, on the other hand, do fol-low the XML rules because XML Schema Language is also an XML-based language.An example of an XML DTD for our simple accessibility tip language is shown inListing 24.2. You probably won’t be able to understand everything unless you’ve workedwith XML DTDs before, but the effect of this file is to determine what is allowablewithin the context of our XML-based language.LISTING 24.2 A Simple DTD for Our XML-based Language<! DTD for accessibility tip pages ><!ELEMENT tippage (accesstip)+><!ATTLIST tippagerevision CDATA #REQUIREDxml:lang CDATA #REQUIRED><!ELEMENT accesstip (headline, author, tipbody, tipexample*)><!ELEMENT headline (#PCDATA)*><!ELEMENT author (name, email?)><!ELEMENT name (#PCDATA)*><!ELEMENT email (#PCDATA)*><!ELEMENT tipbody (para+)><!ELEMENT para (#PCDATA | code)*><!ATTLIST paraparatype (normal|note|warning|tip) #IMPLIED><!ELEMENT code (#PCDATA)*><!ELEMENT tipexample (#PCDATA)*>CSS and XML 4332430 0672324091 ch24 6/13/02 10:34 AM Page 433Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.What does that mean? Here’s some of what you can glean from the DTD about the struc-ture of the document. This DTD defines a <tippage> element as consisting of one ormore <accesstip> elements and requires that the revision and xml:lang attributes beset on <tippage>. Each <accesstip> contains a <headline>,an<author>,a <tipbody>,and zero or more <tipexample> elements. A <tipbody> holds one or more <para> tags,which themselves contain either normal text (#PCDATA in DTD terminology) or <code>elements. A <para> tag can optionally have a paratype attribute set, which can take oneof four values.XLinkAs I noted before, there’s no intrinsic meaning to XML tags, which means there’s nodefault presentation or behavior connected with them. In HTML, the <a> link means both“use the default presentation, usually blue underlined text” and “when this link is clickedon, go to the address in the href attribute.” In XML, we’ll use CSS to provide the pre-sentation, but the ability to define behaviors isn’t part of the CSS language.To address this need in XML, several additional specifications have been developed thatcreate special tags and attributes, defining specific behavior or meaning in XML. To dis-tinguish these from other tags or attributes you might create in your own language, theyare created using namespaces and namespace prefixes. A namespace is a unique URLthat is associated with the specification, and a prefix is associated with that URL andappended on the front of the tag or attribute.The way to represent hypertext links and other types of document relationships in XMLis to use XLink. The XLink specification defines several attributes related to the XLinknamespace; these attributes are used to define relationships among data in XML.We can use XLink to create a navigation bar for our content, allowing us to link torelated resources. XLink allows for simple and complex links; in this case, all we needare simple XLinks.434 Hour 24Listing 24.3 is a revision of the previous XML file with a navigator bar added, completewith simple XLink attributes.Warning for Internet Explorer (Windows, Macintosh) and OperaOnly Netscape 6 supports the simple XLink language; the other browsersthat display XML do not understand XLink at all. This means that you areunable to create hypertext links in XML that function like the HTML <a> tagfor users of other browsers.30 0672324091 ch24 6/13/02 10:34 AM Page 434Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.LISTING 24.3 An XML Document with XLinks<?xml version=”1.0”?><tippage xmlns:xlink=”http://www.w3.org/1999/xlink”revision=”2002-06-13” xml:lang=”en”><accesstip><headline>Accessibility Tip:Identify Language Changes</headline><author><name>Kynn Bartlett</name><email>&lt;kynn@idyllmtn.com&gt;</email></author><tipbody><para>When a blind user accesses a Web page using ascreenreader, the screenreader uses a specificlanguage dictionary to know how words should bepronounced, based on the language of the page.If the wrong dictionary is used, the speechwill be very difficult to understand.</para><para>If the language changes in the middle of the Webpage, you need to mark that change with the<code>lang</code> attribute, which can be seton any HTML tag but is usually set on the<code>&lt;span&gt;</code> element. This will letthe screenreader know which language dictionaryto use when synthesizing speech.</para><para paratype=”note”>The XML equivalent of the <code>lang</code>attribute is <code>xml:lang</code>.</para></tipbody><tipexample>&lt;p&gt;&lt;span lang=”de”&gt;Ich bin Berliner.&lt;/span&gt;(I am a resident of Berlin.)&lt;/p&gt;</tipexample></accesstip><navbar><navlink xlink:type=”simple” xlink:href=”http://kynn.com”>Kynn’s Home Page</navlink>CSS and XML 43524continues30 0672324091 ch24 6/13/02 10:34 AM Page 435Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.<navlink xlink:type=”simple”xlink:href=”http://cssin24hours.com”>CSS in 24 Hours</navlink><navlink xlink:type=”simple”xlink:href=”http://www.w3.org/WAI/”>Web Accessibility Initiative</navlink><navlink xlink:type=”simple”xlink:href=”http://www.webaim.org”>WebAIM</navlink></navbar></tippage>The effect of the xlink:type attribute is to declare the <navlink> elements to be part ofa relationship link. In this case, they are a simple link that goes from the <navlink> to anexternal resource indicated by an xlink:href attribute. The end result is a link that isfunctionally the same as an <a href> link in HTML. Browsers that understand XLinkshould treat a <navlink> the same as an <a> link. Styles can be added to display this linkin various ways, as well.Displaying XMLXML is quite useful for direct computer-to-computer communication. Using an agreed-upon common data format, a corporate Web site can communicate automatically with apartner company’s site to exchange information. Instant messages can be marked up inan XML-based language for interoperability among messaging systems.However, all of those aren’t really of interest to us when we’re talking about XML andCSS. More relevant to this book is the ability of Cascading Style Sheets to provide XMLwith the presentation layer that it lacks. HTML tags have built-in meaning and presenta-tion styles, but XML tags don’t, and that’s where CSS styles come in handy.Default Browser DisplayIf a browser understands the XML format, it will display an XML page as it displays anHTML page, except that it has no idea what the tags are, so the content alone is shown.Figure 24.1 shows how Netscape 6 displays the XML file from Listing 24.1.436 Hour 24LISTING 24.3 Continued30 0672324091 ch24 6/13/02 10:34 AM Page 436Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.Internet Explorer does something a little more clever with default XML display.Recognizing that XML documents describe a hierarchical tree, Internet Explorer showsunstyled XML files in a clickable tree structure. This is shown in Figure 24.2. You canclick on a minus to close one branch of the tree or on a plus to open it up again.CSS and XML 43724FIGURE 24.1An XML file displayedby Netscape 6.FIGURE 24.2An XML file displayedby Internet Explorer.30 0672324091 ch24 6/13/02 10:34 AM Page 437Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.Linking Style Sheets in XMLNow, what you’d probably like to be able to do is apply a style sheet to the XML file anduse that to create a better presentation than the Netscape 6 or Internet Explorer defaultviews. In HTML, we have three ways of associating CSS styles with content: linked stylesheets (using the <link> tag), embedded style sheets (using the <style> element), andinline styles (using the style attribute). All of those depend on the fact that a tag orattribute has specific meaning in HTML.XML doesn’t provide any inherent meaning for any tags or attributes, so the HTMLapproach won’t necessarily work for any generic XML document. Specific XML-basedlanguages can be designed to have the equivalent of <link>, <style>,orstyle,butXML is meant to work with CSS even if the browser doesn’t know what the specific tagsand attributes represent.The problem of linking CSS to XML is solved by using an XML processing instruction(PI for short). Processing instructions are, as the name implies, instructions to whateverprogram is processing the document and aren’t actually part of the content itself. A pro-cessing instruction looks similar to an XML tag, but it has question marks directly insidethe angle brackets. Processing instructions are not tags, which means that they don’t everhave closing tags, although they have something similar to attributes to provide addi-tional parameters.The processing instruction for linking an external style sheet is called xml-stylesheet,and you write it like this:<?xml-stylesheet type=”text/css” href=”filename”?>As you can see, this parallels the <link> element of HTML in syntax and function. The<?xml-stylesheet?> processing instruction should be placed before your first elementof the document, and you can have multiple style sheets if needed.438 Hour 24Styles for XMLCSS rules for XML elements are written just like the rules for HTML elements. Theselector indicates what part of the file the rule applies to, and the declarations give valuesto properties.Workaround for Internet Explorer (Mac)Internet Explorer for Mac recognizes only one style sheet per document.Therefore, you will need to use either a single style sheet for each file or an@import rule within the first style sheet to apply additional style sheets.30 0672324091 ch24 6/13/02 10:34 AM Page 438Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.Selectors for XML are the same as selectors for HTML; element names, attribute values,pseudo-classes, and relationship selectors can all be used in an XML rule. Property val-ues, likewise, are the same as for HTML; you just have to remember that there are nodefault values already assigned to them. As an example, if you want a <notice> elementto be styled as bold, red text in a block box, you simply write a rule like this:notice { display: block;font-weight: bold;color: red; }Although any CSS property and value can be used with XML, there are a number ofproperties that are especially useful when designing style sheets for XML display, andlater in this hour, we’ll discuss how to use them most effectively.A longer example of styles for XML is shown in Listing 24.4, which is a style sheet fordisplaying the simple version of the accessibility tip XML document from Listing 24.1(without XLinks).LISTING 24.4 A Style Sheet for Our Accessibility Tips/* tip-24.4.css */tippage { display: block; font-size: medium;background-color: white; color: navy;font-family: sans-serif; }accesstip { display: block; margin: 1em;padding: 1em; border: 2px solid black;background-color: #CCCCFF; }headline { display: block; margin-bottom: 0.75em;font-size: x-large; font-weight: bold;font-family: Verdana, sans-serif; }author { display: block; margin-bottom: 0.75em;font-size: large; font-weight: bold; }name { display: inline; margin-right: 0.5em; }email { display: inline; margin-right: 0.5em; }tipbody { display: block; border: 2px solid white;padding: 0.5em; margin-bottom: 0.75em; }para { display: block; margin-bottom: 0.65em;margin-top: 0.65em; }para[paratype=”note”]{ border: 1px solid black; padding: 1em; }code { display: inline; font-family: monospace;color: black; font-weight: bold; }tipexample { display: block; padding: 0.5em;border: 2px solid white; margin-bottom: 0.75em;font-family: monospace; white-space: pre; }CSS and XML 4392430 0672324091 ch24 6/13/02 10:34 AM Page 439Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.To use this style sheet with the XML file in Listing 24.1, we simply need to add the fol-lowing line before the <tippage> tag:<?xml-stylesheet type=”text/css” href=”tip-24.4.css”?>To see how the browser shows this file, look at Figure 24.3; it’s come a long way fromthe plain inline look of Figure 24.1!440 Hour 24FIGURE 24.3An XML file with astyle sheet, displayedby Netscape 6.Using display to Control PresentationThe display property is your biggest friend when using Cascading Style Sheets withXML because it’s how you create block boxes. As a default, all elements are displayedas inline boxes, and they flow together into a mess, as seen in Figure 24.1. Using display,you can change these to the block value.You can also use the display property to create lists, as covered in Hour 14, “Lists,” byusing the display: list-item value. This allows the list style properties to be appliedto those elements.Data tables can be displayed as HTML tables by using the display values for tables, asdiscussed in Hour 15, “Styling Tables.” This allows you the full range of columnar pre-sentation supported by CSS in HTML.30 0672324091 ch24 6/13/02 10:34 AM Page 440Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.Generating Content for XML DisplayBecause the raw content represented by XML files is often lacking in basic user interfaceclues, the ability to generate content is crucial when applying CSS directly to XML. The:before and :after pseudo-selectors and the content property—all introduced in Hour 22,“User Interface and Generated Content”—are extremely useful when working with XML.Listing 24.5 is an additional style sheet to be added to the one in Listing 24.4 andapplied to the accessibility tip XML document. The easiest way to do this is simply byadding a second processing instruction after the first, as follows:<?xml-stylesheet type=”text/css” href=”tip-24.5.css”?>Alternately, an @import rule could be added to the beginning of the tip-24.4.cssstyle sheet.LISTING 24.5 Additional Style Sheet with Generated Content/* tip-24.5.css */author:before { content: “Written by “; }tipbody:before { content: “Tip: “;font-family: Verdana, sans-serif;font-size: large; }tipexample:before { content: “Example: “;font-family: Verdana, sans-serif;font-size: large; }para[paratype=”note”]{ content: “Note: “;font-weight: bold; }These will add various bits of text content to the XML, so that the presentation makes alittle more sense. Compare Figure 24.4 with Figure 24.3; it’s much clearer, in respect tothe generated content, what each section is meant to represent.CSS and XML 44124You’ll want to use only table display values for actual data tables, though;for layout, you should use positioning CSS, covered in Hours 16, “PageLayout in CSS,” and 17, “Advanced CSS Layout.”30 0672324091 ch24 6/13/02 10:34 AM Page 441Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.[...]... navlink:link or navlink:active Listing 24. 6 is a style sheet that is designed to be applied to the extended version of our accessibility tip XML, along with the tip -24. 4 .css and tip -24. 5 .css style sheets To use these, we’ll add three processing instruction lines to the XML document shown in Listing 24. 3, which is the longer tip file with the navigation bar Those lines are: LISTING 24. 6 Style Sheet for XLink Navigation Bar /* tip -24. 6 .css */ accesstip { position: absolute; left: 200px; top: 0px; } navbar { display: block; position: absolute; left: 0px; top: 0px; width: 150px; margin: 1em; border: 2px solid black; padding: 0.5em; background-color:... CSS properties to force a value to be inherited from the containing box Inline Element A markup element that appears within the flow of text across the page, rather than within a separate block box as block elements do One example of an inline element is the HTML tag Inline Style Rule A CSS rule set by using the HTML style attribute on any element The inline style rule has only a declaration... user but instead serves as notes or reminders to the Web developer In CSS, comments are indicated by /* slashes and asterisks */ Containing Box The box that contains an element and from which certain properties may be inherited For example, in the HTML markup , the element is the containing box around the element Content Generically, any information... up on If you’re interested in learning more, here are some resources to get you started: • Learn more about XML by visiting the W3C’s XML pages at http://www.w3.org/XML/ or by reading Sams Teach Yourself XML in 24 Hours • XHTML is covered in Sams Teach Yourself HTML and XHTML in 24 Hours, or you can learn more from the W3C’s XHTML page at http://www.w3.org/Markup/ Be sure to check out the free HTML... be unique within a Web page id Importing The process of loading style rules from an outside file The @import rule in CSS allows for style sheets to be imported Inheritance The method by which elements take on the property values of their containing boxes Properties in CSS are of two types: those that are inherited and those that are not The inherit property value can be used with most CSS properties... and you can also read about them in Sams Teach Yourself SVG in 24 Hours • The definitive source for XUL information is the Mozilla Web site at http://www.mozilla.org/ • Information on XSL, XSL-FO, and XSLT can be found at http://www.xslinfo.com/ as well as on the W3C’s site 24 PART V Appendices A How to Read W3C Recommendations B Replacing Presentational HTML with CSS C Glossary APPENDIX A How to Read... HTML elements CSS Level 3 The next stage of development for the Cascading Style Sheets is embodied in the CSS Level 3 project Rather than simply adding additional properties to expand the language, the CSS working groups have split the specification into a number of modules, in a process called modularization (The same process has been applied to XHTML as well, as discussed in Hour 24, CSS and XML.”)... #FFFFCC; } CSS and XML LISTING 24. 6 443 Continued navbar:before { font-size: large; content: “Links: “; font-weight: bold; font-family: Verdana, sans-serif; } navlink { display: block; font-size: small; font-weight: bold; text-align: center; margin: 0em 0.4em; font-family: Verdana, sans-serif; } navlink:link { color: blue; } navlink:visited { color: purple; } navlink:hover { color: red; } navlink:active... specification Older versions may have included these obsolete items, but their functions have been replaced by newer elements or by CSS properties Display Box A box, either visible or not, corresponding to an element in the markup Boxes can be either inline or block and can contain text content or other boxes Everything in CSS is conceptualized and displayed as a box according to the CSS box model Glossary 465 . watermark.<navlink xlink:type=”simple”xlink:href=”http://cssin24hours.com”> CSS in 24 Hours</navlink><navlink xlink:type=”simple”xlink:href=”http://www.w3.org/WAI/”>Web. by visiting the W3C’s XML pages athttp://www.w3.org/XML/ or by reading Sams Teach Yourself XML in 24 Hours.• XHTML is covered in Sams Teach Yourself
- Xem thêm -

Xem thêm: Tài liệu Sams Teach Yourself CSS in 24 Hours- P10 ppt, Tài liệu Sams Teach Yourself CSS in 24 Hours- P10 ppt, Tài liệu Sams Teach Yourself CSS in 24 Hours- P10 ppt

Từ khóa liên quan

Mục lục

Xem thêm

Gợi ý tài liệu liên quan cho bạn