php-homepage.com

CSS Tutorial - Selektoren

Dieses tutorial knüpft direkt an die Einführung in CSS an, die grundlegende Verwendung und Einbindung von CSS-Dateien setzen wir also schon voraus.
Ohne zu weit in die Theorie über (spezielle) Selektoren, Elemente, Attribute, usw. einzutauchen, legen wir gleich mit praktischen Beispielen los:-)
grundlegende Syntax von CSS:
Selektor {Eigenschaft:Wert;}
Der Selektor bestimmt welches Element ausgewählt wird, danach in geschwungenen Klammern die Eigenschaft: gefolgt vom gewünschten Wert. Beispiel: body {color:red}
Um bestimmte Elemente ansprechen zu können und die Funktionsweise von CSS zu verstehen, müssen wir zunächst auf grundlegenden Arten von Selektoren eingehen:

soviel zu den wichtigsten Selektoren, mit denen wir uns im Laufe des Tutorials beschäftigen werden. Die vollständige Liste wie immer beim W3C

Nun gehen wir endlich zur Praxis über: Wir wollen beispielsweise den Hintergrund unseres gesamten (x)html-Dokuments (body) hellblau machen: body {background-color: #00ccff;} Raute-Zeichen # gefolgt vom sechsstelligen HTML-Code einer beliebigen Farbe, ermöglicht genaurere Angaben als zB. die englischen Farbbezeichnungen blue, red, green, usw.
Als nächstes haben wir ein Element in unserem Dokument, dem wir spezielle Formatierungen zuweisen wollen, die nicht überschrieben werden dürfen. ID ist in der Hierarchie höherwertig als Klasse und IDs können somit nicht von Klassen überschrieben werden. Deshalb erstellen wir beispielsweise ein Div mit Namen logo und formatieren es nach unseren Wünschen:

CSS HTML
#logo {border:2px solid #0000ff; background-color:#ff0000;} <div id="logo">Inhalt des Logos, Text, Grafik,...</div>
Außerdem sollte man bei divs auch noch Größen definieren, bzw. die Position festlegen, aber zur Veranschaulichung von IDs reichen die zwei Eigenschaften "border" und background-color" erstmal.
Als nächstes schauen wir uns die Verwendung von CSS-Klassen an:
CSS HTML
.logotext {color: 000000; font-size:100%; font-weight:normal} <span class="logotext">Text, den wir mit "logotext" formatieren</span>

Das <span>-Tag ist ein vielverwendetes Tag zur Auszeichnung von "inline"-Elementen, wie beispielsweise einfachem Text oder auch nur einem einzelnes Zeichen. Erst unsere Klasse "logotext" übergibt dem ausgezeichneten Element (unserem Text im logo) die im CSS festgelegten Formatierungen.
Für Überschriften gibt es in html spezielle tags, die Selektoren <h1> bis <h6>, die für Überschriften verwendet werden sollten. Die Standardformatierung dieser Überschriften kann natürlich beliebig angepasst werden. Verwenden wir nun das tag <h1> um eine Überschrift in unser logo einzufügen und passen auch gleich die Schriftfarbe via CSS an:

CSS HTML
h1 {color: #0000ff;} <h1>Überschrift, die wir mit <h1> formatieren</h1>

Im Gegensatz zum <span>-tag wird das tag <h1> als Blockelement behandelt, das heißt, es wird davor und danach ein Zeilenumbruch erzeugt. Ändern könnten wir dieses Verhalten natürlich auch selbst mit Veränderung des Attributs "display": h1 {display:inline;}, das Gegenteil wäre zB. unser span tag als block zu behandeln span {display:block;}, für unser Beispiel lassen wir aber die standardmäßig gesetzten Werte.
Um zu sehen, dass auch alles so aussieht wie wir erwarten, kopieren wir nun den code unseres html-Dokuments in einen editor:

<div id="logo">
<h1>Überschrift, die wir mit "h1" formatieren</h1>
<span class="logotext">Text, den wir mit "logotext" formatieren</span>
</div>

Da wir die Überschrift und den Logotext in unserem div mit der id "logo" haben wollen, schließen wir das div-tag erst nach diesen (Verschachtelung).
Da unser (4-zeiliger) html-code alleine aber keine Information über Formatierung beeinhaltet brauchen wir noch die nötigen css-Regeln:
#logo {border:2px solid #0000ff; background-color:#ff0000;}
h1 {color: #0000ff;}
.logotext {color: #000000; font-size:100%; font-weight:bold}

Damit wir für unser erstes Übungsbeispiel nicht eine seperate .css -Datei anlegen müssen, umschließen wir die css-Anweisungen einfach mit einem <style>-tag und kopieren sie in einen online-editor:

<style>
#logo {border:2px solid #0000ff; background-color:#ff0000;}
h1 {color: #0000ff;}
.logotext {color: #000000; font-size:100%; font-weight:bold}
</style>

Als Ergebnis unseres ersten Kapitels im css-tutorial sehen wir nun:
css selektoren

Fassen wir nun zusammen - wir können mittels Selektoren Elemente eines Dokuments auswählen und deren Attribute verändern, indem wir ihnen verschiedene Werte zuweisen.
Selektor {Eigenschaft:Wert;}