M-XPro: Mai 2014

Verzeichnisse und Dateien für dieses Tutorial:
style\default.css
home.html

Es gibt verschiedene Selektoren in CSS. Für die Selektornamen dürfen keine Umlaute (ä,ö,ü) und Sonderzeichen benutzt werden, die Groß- und Kleinschreibung wird dabei berücksichtigt und der Selektornamen darf nicht mit einer Zahl beginnen.

Der Typselektor
Der Typselektor zeigt auf ein Typ (Element). Hier ein Beispiel:

home.html

<html>
<head>
<title> Selektoren in CSS </title>
<link rel="stylesheet" type="text/css"
href="style/default.css" />
</head
<body >
<h1>Schaue dich um, Schönheit ist überall zu finden!</h1>
<h2>Wer denkt perfekt sein ist, alles richtig zu machen,
der liegt falsch!</h2>
<h3>Fehler sind dazu da, um daraus zu lernen!</h3>
</body>
</html>

default.css

h1 {color: red;}

Für den Typselektor können HTML-Tags verwendet werden, die Tags werden aber ohne < und > angegeben. In den { und } stehen die Eigenschaften und die dazugehörigen Werte. Eigenschaft und Wert werden von einem : getrennt, nach dem Wert steht ein Semikolon (;). Es können natürlich mehrere Eigenschaften mit Werten angegeben werden, sie werden immer durch ein Semikolon getrennt. Mit der Eigenschaft color und dem Wert red wird der Text des Überschriften-Tags <h1> rot dargestellt. Dies bezieht sich auf alle <h1>-Tags die im Dokument vorkommen.

Der Universalselektor
Universalselektoren der mit * dargestellt wird, spricht alle Elemente (z.B. HTML-Tags) in einem Dokument an. Hier ein Beispiel:

* {color: red;}

Durch den Universalselektor wird den Tags in den Dokument die Eigenschaft color zugewiesen, dadurch werden alle Texte in roter Schrift dargestellt.

Der Universalselektor spricht auch die Tags <head> und <style> an, diese werden aber durch ihre speziellen Eigenschaft nicht angezeigt.

Der ID-Selektor
Ein ID-Selektor ist eine einfache ID, der ID-Syntax besteht aus dem #-Zeichen und einen Namen, dies wurde im Tutorial Links in HTML besprochen. Hier ein Beispiel:

home.html

<html>
<head>
<title> Selektoren in CSS </title>
<link rel="stylesheet" type="text/css"
href="style/default.css" />
</head
<body >
<h1>Schaue dich um, Schönheit ist überall zu finden!</h1>
<h2 id="roter_text">Wer denkt perfekt sein ist, alles
richtig zu machen, der liegt falsch!</h2>
<h3>Fehler sind dazu da, um daraus zu lernen!</h3>
</body>
</html>

default.css

#roter_text {color: red;}

Die ID sollte nur einmal im HTML-Dokument vorkommen.

Der Klassenselektor
Klassenselektoren sind ähnlich wie ID-Selektoren. Klassenselektoren werden mit dem .-Zeichen dargestellt. Hier ein Beispiel:

home.html

<html>
<head>
<title> Selektoren in CSS </title>
<link rel="stylesheet" type="text/css" href="style/default.css" />
</head
<body >
<h1 class="elternklasse">Schaue dich um, Schönheit ist
überall zu finden!</h1>
<h2 class="elternklasse kindklasse">Wer denkt perfekt sein
ist, alles richtig zu machen, der liegt falsch!</h2>
<h3>Fehler sind dazu da, um daraus zu lernen!</h3>
</body>
</html>

In HTML kann auf Klassen mit den Attribut class zugegriffen werden. in Zeile 7 wird mit dem Wert Elternklasse auf die Klasse mit diesen Namen zugegriffen. In Zeile 9 wird auf eine Kindklasse der Elternklasse zugegriffen. Dabei muss immer erst die Elternklasse und dann die Kindklasse angegeben werden.

default.css

.elternklasse {font-family: "Segoe Script", cursive;}
.elternklasse.kindklasse {color: green;}

In der elternklasse wird die Schriftart geändert. In Zeile 2 wird in der kindklasse die Textfarbe geändert. Eine Kindklasse hat immer die Eigenschaften und Werte einer Elternklasse, dies nennt man Vererbung.

Wie man im Browser sehen kann wurde ohne unser Zutun die Schriftart durch die Vererbung geändert.

Die Eigenschaft der Elternklasse kann aber auch durch die Kindklasse überschrieben werden. Hier noch ein Beispiel:

home.html

<html>
<head>
<title> Selektoren in CSS </title>
<link rel="stylesheet" type="text/css"
href="style/default.css" />
</head
<body >
<h1 class="elternklasse">Schaue dich um,
Schönheit ist überall zu finden!</h1>
<h2 class="elternklasse kindklasse">Wer denkt perfekt
sein ist, alles richtig zu machen, der liegt falsch!</h2>
<h3 class="elternklasse kindklasse kindklasse2">Fehler
sind dazu da, um daraus zu lernen!</h3>
</body>
</html>

Wie man in Zeile 12 sehen kann, können Kindklassen wieder Kindklassen haben, dadurch werden die Eigenschaften der Vorherigen Klassen (hier im Beispiel elternklasse und kindklasse) vererbt.

default.css

.elternklasse {font-family: Segoe Script, cursive;}
.elternklasse.kindklasse {color: green;}
.elternklasse.kindklasse.kindklasse2 {color: blue;}

Wie wir in Zeile 3 sehen, erbt die Klasse kindklasse2 von der kindklasse. Dadurch dass in der kindklasse aber die Textfarbe nochmal geändert wird, wird ein blauer text angezeigt, weil die Eigenschaft aus der kindklasse von kindklasse2 überschrieben wird. Natürlich ist dieses Beispiel nicht sinnvoll, es soll nur zeigen dass man Klassen immer weiter vererben kann und die Eigenschaften auch überschreiben kann. Sinnvoller wäre für dieses Beispiel, dass die kindklasse2 nur von der elternklasse erbt. Dadurch ergibt sich das gleiche Ergebnis und der Klassennamen wird nicht unnötig lang.

Der Attributselektor
Bei dem Attributselektor wird der gewünschte Name des Attribut im CSS-Code zwischen [ und ] geschrieben. Hier ein Beispiel:

home.html

<html>
<head>
<title> Selektoren in CSS </title>
<link rel="stylesheet" type="text/css"
href="style/default.css" />
</head
<body >
<h1>Schaue dich um, Schönheit ist überall zu finden!</h1>
<h2>Wer denkt perfekt sein ist, alles richtig zu machen,
der liegt falsch!</h2>
<h3 test>Fehler sind dazu da, um daraus zu lernen!</h3>
</body>
</html>

In Zeile 11 wird auf das Attribut test zugegriffen (hier wird der Namen des Attributs ohne [ und ] geschrieben, das <h3>-Tag nimmt die Eigenschaften das Attributs an.

default.css

[test] {font-family: "Segoe Script", cursive;}

Beim definieren des Attributs wird der Name in [ und ] geschrieben.

Es ist auch möglich den Typselektor, Universalselektor, ID-Selektor und Klassenselektor mit dem Attributsselektor zu verbinden. Hier ein Code-Beispiel:

h3[test] {font-family: "Segoe Script", cursive;}

Vor dem Attribut haben wir jetzt ein Typselektor geschrieben, dadurch wird der Attributselektor nur im <h3>-Tags verwendet. Es gibt noch weitere Möglichkeiten den Attributsselektor zu verwenden, wie z.B. Vergleiche ausführen. Dafür wird es noch ein eigenes Tutorial dazu geben.

Für eine Aufzälhungsliste gibt es verschiedene Tags es kommt immer auf die Listenart an, die verwendet werden soll. Für die einzelnen Listeneinträge gibt es das Tag <li> (list item = Listeneintrag). Der Listeneintrag steht zwischen dem Start-Tag <li> und dem End-Tag </li> Nach dem End-Tag </li> wird automatisch eine neue Zeile angefangen.

Die unsortierte Liste
Bei einer unsortierten Liste, steht das Tag <li> und </li> zwischen Start-Tag <ul> (unordered list = unsortierte Liste) und End-Tag </ul>. Hier ein Beispiel:

<html>
<head>
<title> Listen in HTML </title>
</head
<body>
<ul>
<li>Erster Listeneintrag</li>
<li>Zweiter Listeneintrag</li>
<li>Dritter Listeneintrag</li>
</ul>
</body>
</html>

Bei einer unsortierten Liste wird automatisch ein Aufzählungszeichen den einzelnen Listeneinträgen hinzugefügt.

Die nummerierte Liste
Bei einer nummerierte Liste, steht das Tag <li> und </li> zwischen Start-Tag <ol> (ordered list = nummerierte Liste) und End-Tag </ol>. Hier ein Beispiel:

<html>
<head>
<title> Listen in HTML </title>
</head
<body>
<ol>
<li>Erster Listeneintrag</li>
<li>Zweiter Listeneintrag</li>
<li>Dritter Listeneintrag</li>
</ol>
</body>
</html>

Bei einer nummerischen Liste werden die Listeneinträge automatisch durchnummeriert.

Die Definitionsliste
Die Definitionsliste ist für Glossare gedacht. Das Start-Tag <dl> (defination list = Definitionsliste) und End-Tag </dl> steht für die Definitionsliste. Zwischen diesen Tags können das Start-Tag <dt> (defination term = Ausdruck der Liste) und End-Tag </dt> und das Start-Tag <dd> (defination defination = Defination der Liste) und End-Tag </dd> stehen. Hier ein Beispiel:

<html>
<head>
<title> Listen in HTML </title>
</head
<body>
<dl>
<dt>Eigenschaften von Mineralien</dt>
<dd>Durchsichtigkeit</dd>
<dd>Farbe</dd>
<dd>Dichte</dd>
<dd>Spaltbarkeit und Bruch</dd>
<dd>Härte</dd>
<dt>Entstehung und Vorkommen der Mineralien</dd>
<dd>Eruptivgesteine</dd>
<dd>Sedimentgesteine</dd>
<dd>Metamorphe Gesteine</dd>
</dl>
</body>
</html>

Der Ausdruck der Definitionsliste ist ein Begriff der z.B. die Attribute der Liste beschreibt, wie hier im Beispiel in Zeile 7 und 13. Die Definition sind die aufzählbaren Attribute des Ausdrucks.

Verschachtelte Listen
Die drei Listenarten können auch beliebig verschachtelt werden. Hier ein Beispiel:

<html>
<head>
<title> Listen in HTML </title>
</head
<body>
<dl>
<dt>Eigenschaften von Mineralien</dt>
<ul>
<li>Durchsichtigkeit</li>
<li>Farbe</li>
<li>Dichte</li>
<li>Spaltbarkeit und Bruch</li>
<li>Härte</li>
</ul>
<dt>Entstehung und Vorkommen der Mineralien</dt>
<ol>
<li>Eruptivgesteine</li>
<li>Sedimentgesteine</li>
<li>Metamorphe Gesteine</li>
</ol>
</dl>
</body>
</html>

Es ist auch möglich das Aussehen der Listen zu verändern, z.B ein anderes Aufzählungszeichen verwenden oder die Nummerierung ändern. Dafür sollte aber CSS verwendet werden und nicht mehr HTML, dies ist zwar auch noch möglich, aber CSS ist dafür um einiges besser geeignet.

M-XPro

Seiten

Freitag, 30. Mai 2014

Selektoren in CSS

Donnerstag, 29. Mai 2014

Crystallize - Lindsey Stirling (Dubstep Violin Original Song)

Mittwoch, 28. Mai 2014

Aufzählungslisten in HTML