Bücher online kostenlos Kostenlos Online Lesen
HTML5-Handbuch - die neuen Features von HTML5

HTML5-Handbuch - die neuen Features von HTML5

Titel: HTML5-Handbuch - die neuen Features von HTML5 Kostenlos Bücher Online Lesen
Autoren: Franzis
Vom Netzwerk:
ist). Im obigen Beispiel ist innerhalb des
div
-Bereichs unter anderem auch eine Tabelle notiert, in der noch mal ein
p
-Element vorkommt. Dort greift die Formatierung der blauen Farbe nicht, weil das
p
-Element mehr als eine Verschachtelungsebene unterhalb des
div
-Elements liegt (die Tabellenelemente sind dazwischen).
    Auch für Elemente, die auf gleicher Ebene hintereinander notiert werden, gibt es Selektoren:
    div + p { margin-top: 40px; }
    Mit dem Zeichen
+
wird in diesem Selektor festgelegt, dass
p
-Elemente, die unmittelbar auf ein
div
-Element folgen, einen Abstand von 40 Pixeln nach oben hin erhalten (
margin-top: 40px;
). Im HTML-Code weiter oben ist das beim vorletzten
p
-Element der Fall. Dieses folgt unmittelbar hinter dem
div
-Bereich auf gleicher Hierarchie-Ebene.
13.2.10      Formate für Elemente mit bestimmten Attributen
    Mit Hilfe attributbedingter Formate können Sie in Selektoren angeben, dass Formatdefinitionen nur für Elemente mit bestimmten Attributen oder sogar nur für Elemente mit bestimmten Wertzuweisungen an Attribute gelten sollen.
Beispiel
    input[src] {
    margin: 5px;
    }
    input[type=password] {
    color: blue;
    }
    td[abbr~=Berlin] {
    background-color:#FFFF00 }
    }
    *[lang|=en] {
    background-color: #FF0000;
    color: #FFFFFF;
    }
Erläuterung
    In dem Beispiel ist zunächst eine Formatdefinition für alle
input
-Elemente notiert, die ein Attribut
src
im einleitenden Tag haben (grafische Submit-Schaltflächen des Typs

). Solche Elemente erhalten einen Randabstand von 5 Pixeln zu allen Seiten hin.
    Mit dem Attribut-Selektor
input[type=password]
werden alle
input
-Elemente erfasst, die ein
type
-Attribut mit dem Wert
password
haben (Passworteingabefelder –

).
    Mit
td[abbr~=Berlin]
werden alle Tabellenzellen des Typs
td
erfasst, die ein Attribut
abbr
besitzen und bei denen in der Wertzuweisung an dieses Attribut das Wort
Berlin
vorkommt. Diese Syntax findet eines von mehreren, durch Leerzeichen getrennten Wörtern in Wertzuweisungen an Attribute.
    Mit
*[lang|=en]
schließlich werden alle Elemente erfasst, die ein globales Attribut
lang
mit einem Wert, der mit
en
beginnt, aufweisen, und danach eventuell einen Bindestrich enthalten (wie
en
oder
en-US
).
13.2.11      Formate für Elemente mit class-Attribut
    Sie können Formate für Klassen definieren. Anwenden können Sie solche Klassen in HTML mit dem globalen Attribut
class
.
Beispiel
    img.left { float: left; margin-right: 25px; margin-bottom: 12px; }
    img.right { float: right; margin-left: 25px; margin-bottom: 12px; }
    .lichtblau { color: rgb(210, 225, 250); }
    .fett { font-weight: bold; }
    Im Beispiel werden zwei Klassen für das
img
-Element von HTML sowie zwei allgemeine Klassen definiert. In allen Fällen müssen die Elemente entsprechende
class
-Attribute haben, damit die Formate angewendet werden. Selektoren für Klassen sind am charakteristischen Punkt erkennbar. Sie können eine Kombination von Elementnamen undKlassennamen erzwingen, wie bei
img.left
oder
img.right
, oder allgemeine, in jedem Element mögliche Klassennamen, wie im Beispiel bei
.lichtblau
und
.fett
. Im letzteren Fall beginnt der Selektor einfach mit einem Punkt (die Schreibweise
*.lichtblau
ist aber auch korrekt).
    Angewendet werden die beiden ersten Beispielformate also auf Elemente mit Tags wie

oder

. Bilder mit
class="left"
erzeugen laut Formatdefinition einen Textumfluss, und zwar so, dass die Bilder links angeordnet werden und rechts von nachfolgendem Inhalt umflossen werden (
float: left;
). Zusätzlich werden Abstände zum umfließenden Text rechts und unten (
margin-right
und
margin-bottom
) definiert. Die Formatdefinitionen für den Selektor
img.right
bewirken den umgekehrten Fall. Das Bild wird rechts ausgerichtet und links vom nachfolgenden Inhalt umflossen. Dafür werden Abstände links und unten definiert.
    Die Beispiel-Selektoren
.lichtblau
und
.fett
treffen auf Tags wie


oder

Weitere Kostenlose Bücher