Workshop: Elemente
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)
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:
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.
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,
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,
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.