XHTML Online Lernen - Physische Auszeichnung

Physische Auszeichnung von Elementen eignet sich dafür, Text einfach nur anders zu formatieren. Planen Sie die Auswertung ihrer XHTML-Dokumente mit XML-Anwendungen, lohnt es sich, logische Elemente einzusetzen, um mit den Elementen auch den Inhalt zu klassifizieren.

Die meisten dieser Elemente kennen Sie bereits aus den vorangegangenen Lektionen.

big
groß: Schrift wird in etwa 1,2-facher Größe des Elternelementes angezeigt, je nach verwendeter Schriftart auch fetter. Setzen Sie CSS-Regeln ein, wenn Sie ein bestimmtes Größenverhältnis erzeugen wollen.

small
klein: Schrift wird in etwa 0,9-facher Größe des Elternelements angezeigt. Setzen Sie CSS-Regeln ein, wenn Sie ein bestimmtes Größenverhältnis erzeugen wollen.

tt
teletype (wörtl. = Fernschreiber): Anzeige in Schreibmaschinenschrift oder Schrift mit festem Buchstabenabstand.

br
(break = Umbruch) br ist ein leeres Element. Es erzeugt an der eingesetzten Stelle einen Zeilenumbruch. br soll in XHTML nur innerhalb von Block-Elementen (ausser body) und Inline-Elementen vorkommen.

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD/ XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">


                                <html xmlns="http://www.w3.org/TR/xhtml1">

<head>

<title>Inline-Elemente: Physische Auszeichung</title>
    

                                  <style type="text/css">
      

                                  .rot { color:red; }
      

                                  .rot_gross { color:red; font-size:1.2em; }
    

                                  </style>

</head>
	

                                  <body>

<h3>Physische Auszeichnung</h3>

<dl>

<dt><b>span</b></dt>
        

                                  <dd>span erlaubt die Zuweisung von allgemeinen CSS-Klassen und das Definieren von Inline-Styles für beliebige Textabschnitte:</dd>
        

                                  <dd>Schrift mit <span style="letter-spacing:0.2em;">mehr Buchstabenabstand</span></dd>
        

                                  <dd>Text mit der <span class="rot">Klasse "rot"</span> ausgezeichnet</dd>
				<dt><b>b</b></dt>

                              <dd>b setzt Text in <b>Fettschrift.</b></dd>

                              <dt><b>big</b></dt>

                              <dd style="font-family: Arial">big lässt Text <big>größer</big> erscheinen und mit big <big>innerhalb von big <big>noch viel größer</big></big>.</dd>

                              <dt><b>i</b></dt>

                              <dd>i setzt Text in <i>Kursivschrift</i></dd>

                              <dt><b>small</b></dt>

                              <dd>small macht Text <small>kleiner</small> und small <small>innerhalb von small wird <small>noch kleiner</small></small></dd>

                              <dt><b>tt</b></dt>

                              <dd>tt gibt Text mit einem <tt>Font mit festem Zeichenabstand</tt> aus.</dd>

                              <dt><b>br</b></dt>

                              <dd>br erzeugt einen Zeilenumbruch<br />im Textfluss in einem Element.</dd>

</dl>

</body>

</html>

span (Bereich)
Mit dem Element span können Sie bestimmte Textabschnitte in einem beliebigen Style formatieren. Sie können allgemeine Klassen zuweisen oder individuelle Inline-Styles definieren. span löst das in HTML häufig verwendete font-Element ab. Es bietet über die reine Schriftformatierung hinausgehende Eigenschaften wie Rahmen und Abstände.

... Schrift mit <span style="letter-spacing:0.2em;">mehr Buchstabenabstand </span> ...

                                ... Text mit der <span class="rot">Klasse "rot"</span> ausgezeichnet ...

Tipp:
Wenn Sie Dokumente produzieren, die von Browsern ohne CSS-Unterstützung angezeigt werden sollen, schreiben Sie Ihren Code am besten nach den Regeln von XHTML Transitional und verwenden Sie font und span gleichzeitig:

<font color="#FF0000" size="+1">

                                     <span class="rot_gross">Text größer und rot</span>

                                </font>

Browser ohne CSS-Unterstützung ignorieren die Werte für class und setzen die Attribute des font-Elementes um.
Browser mit CSS-Unterstützung setzen die CSS-Eigenschaften für das span-Element um. Diese überschreiben die Attribute des font-Elementes, da span innerhalb von font geschachtelt ist.