<span> Formatting Text InlineThe <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:
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 <span> Element </title> <style> span {color: red; font-weight: bold; font-style: italic} </style> </head> <body> <center> <h1> Using the <span> 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.
There's more XHTML to cometake a look at the next chapter. |