Hier bist Du: Home « Workshops « Workshop: Elemente

Workshop: Elemente

 

nach oben

url()

Angabe einer relativen oder absoluten Web-Adresse. Das Format ist url( gefolgt von einem optionalem Leerzeichen, der Webadresse, wieder einem optionalem Leerzeichen und eine schließende Klammer. Die Adresse kann in einfache (') oder doppelte (") Anführungszeichen gesetzt werden.

url(http://www.css4you.de/images/bild.gif)
url("../images/bild.gif")
url( '../images/bild.gif' )

Wenn du deine Stylesheets in eine externe Datei auslagerst, musst du darauf achten, dass sich die Pfadangabe auf den Ort der Stylesheet- und nicht der XHTML-Datei bezieht. Befindet sich die Stylesheet-Datei z.B. im Verzeichnis css und das Hintergrundbild in images, so wäre die gültige Pfadangabe url(../images/bild.gif)

 

nach oben

Eltern- und Kind-Elemente

Das folgende Beispiel zeigt den Quellcode eines einfachen XHTML-Dokuments.

<body>
<div style="width:760px;margin:0px auto;">
 <h1>Überschrift 1</h1>
 <div>
 <h2>Kapitel 1</h2>
  <p>Franz jagt im komplett 
   <span style="color:red;">
    verwahrlosten Taxi
   </span>
   quer durch Bayern
  </p>
 </div>
</div>
</body>

Die Grafik zeigt das gleiche Dokument als Baumstruktur:

Bild eines Dokumentenbaums Die einzelnen Elemente werden intern im Browser als Baumstruktur dargestellt. D.h. dass das oberste Element, das <body>-Tag, den nachfolgenden <div>-Container als Nachfahre, bzw. Kind-Element enthält. Das <body>-Tag ist für den <div>-Container der Vorfahre, bzw.das Eltern-Element. Ähnlich verhält es sich mit den anderen Elementen:
Die Überschrift <h1> und das zweite <div>-Tag sind Kind-Elemente des ersten <div>-Containers und der zweite <div>-Container ist Eltern-Element der Überschrift <h2> und des <p>-Tags.
Warum ist das nun für CSS wichtig?
Diverse Eigenschaften beziehen sich auf das übergeordnete, dem Eltern-Element. In dem aktuellen Beispiel wird die Überschrift <h1> an der linken, oberen Ecke des zentrierten <div>-Containers eingefügt und nicht am Rand des Browserfensters. Änderst du die Breite des <div>s, verschiebt sich auch die Position der Überschrift. Ein weitere wichtiges Thema ist die Vererbung. Elemente übernehmen Stylesheet-Eigenschaften von Eltern-Elementen und geben sie an Kind-Elemente weiter.

 

nach oben

Block-Elemente

Block-Elemente erzeugen eine neue Zeile im Textfluß und können zum vorherigen und zum nachfolgenden Element einen größeren Abstand aufweisen. Sie sind im Textfluß somit immer untereinander angeordnet.
Block-Elemente können Text, Inline- und je nach Element auch weitere Block-Elemente enthalten.

Die folgenden Elemente gehören zu den Block-Elementen:
address, blockquote, div, dl, fieldset, form, h1-h6, hr, noframes, noscript, ol, p, pre, table, ul

center, dir, isindex, menu,

 

nach oben

Inline-Elemente

Inline-Elemente erzeugen keine neue Zeile und sind im normalen Textfluß immer nebeneinander angeordnet. Es sei denn, sie sind zusammen breiter als das übergeordnete Element. Dann wird eine weitere Zeile eingefügt. Inline-Elemente dürfen Text und weitere Inline-Elemente aber in der Regel keine Block-Elemente enthalten.
Inline-Elemente teilen sich in ersetzende und nichtersetzende Elemente auf. Für ersetzende Elemente wie img, input und textarea kannst du Breite und Höhe angeben, für nichtersetzende Elemente wie em und span sind diese Eigenschaften unwirksam.

Die folgenden Elemente gehören zu den Inline-Elementen:
a, abbr, acronym, b, bdo, big, br, button, cite, code, dfn, em, i, img, input, kbd, label, map, object, q, samp, script, select, small, span, strike, strong, sub, sup, textarea, tt, var

basefont, font, s, u,

 

nach oben

Positionierte Elemente

Positionierte Elemente werden mit der Eigenschaft position:absolute; erzeugt. Sie werden aus dem normalen Textfluß entfernt und über die Elemente gelegt.
Die Eigenschaften top, left, right und bottom positionieren das Element relativ zum Rand der Seite, bzw. zum Rand des Eltern-Elements, wenn dieses absolut oder relativ (nicht aber statisch) positioniert ist.

nach oben