span Formatting Text Inline

<span> Formatting Text Inline

The <span> element lets you select inline text to apply styles. It's supported in XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset, and XHTML 1.1. Here are the attributes of this element:

  • class Gives the style class of the element. (XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset, XHTML 1.1.)

  • dir Sets the direction of text that doesn't have an inherent direction in which you should read it, called directionally neutral text. You can set this attribute to LTR , for left-to-right text, or RTL , for right-to-left text. (XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset, XHTML 1.1.)

  • id Refers to the element; set this attribute to a unique identifier. (XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset, XHTML 1.1.)

  • lang Specifies the base language used in the element. Applies only when the document is interpreted as HTML. (XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset, XHTML 1.1.)

  • style Set to an inline style to specify how the browser should display the element. (XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset, XHTML 1.1.)

  • title Contains the title of the element (which might be displayed in ToolTips). (XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset, XHTML 1.1.)

  • xml:lang Specifies the base language for the element when the document is interpreted as an XML document. (XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset, XHTML 1.1.)

This element supports these XHTML events: onclick , ondblclick , onmousedown , onmouseup , onmouseover , onmousemove , onmouseout , onkeypress , onkeydown , and onkeyup .

You usually use <span> to apply styles inline, such as in the middle of a sentence , to a few words or even characters . When styling blocks of text, you can use <div> ; for individual characters, words, or sentences, use <span> .

As we saw, you can use <div> to replace the deprecated <center> element; there's also a deprecated element that you can replace with <span> : the <font> element. Using <span> , you can apply styles inline to a few characters or words, which is what Web authors previously used <font> for. For example, here I'm applying a style to a section of text using <span> , displaying that text in bold red italics:

Listing ch16_17.html
 <?xml version="1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">     <head>         <title>             Using the &lt;span&gt; Element         </title>  <style>   span {color: red; font-weight: bold; font-style: italic}   </style>  </head>     <body>         <center>             <h1>                 Using the &lt;span&gt; Element             </h1>         </center>         <h2>  Sometimes, for <span>emphasis</span>, you might want to   target <span>specific words</span> in your text.  </h2>     </body> </html> 

You can see the results of this XHTML in Figure 16-13, where the words we want styled in a specific way are styled correctly.

Figure 16-13. Using <span> to style text.

graphics/16fig13.gif

There's more XHTML to cometake a look at the next chapter.



Real World XML
Real World XML (2nd Edition)
ISBN: 0735712867
EAN: 2147483647
Year: 2005
Pages: 440
Authors: Steve Holzner

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net