Upload
hoangdung
View
217
Download
2
Embed Size (px)
Citation preview
Seite 2
Themen
Einführung
Syntax
Stylesheets einbinden
Alternative Stylesheets
Texteigenschaften
Positionieren
Farben
Hintergrund
Pseudoklassen
Selektoren (Vererbung)
P. Rücker November 2010
Seite 3
Literatur
CSS Cascading Style Sheet; Level 2
http://de.selfhtml.org
Kursmaterial CSS
November 2010
Seite 4
Einführung
CSS ist eine Formatierungssprache, die es Autoren und
Benutzern gestattet, Formatierungen (zum Beispiel Schriften,
Abstände, Rahmen, Hintergrundfarben, Positionierung) von
strukturierten Dokumenten (z.B. HTML-Dokumenten)
durchzuführen. Mit der Trennung der Präsentation eines
Dokuments vom Inhalt des Dokuments vereinfacht CSS die
Erfassung von Web-Dokumenten und die Verwaltung von
Sites. CSS ist wie HTML selbst ein softwareunabhängiger
Textcode und wird vom W3C normiert.
W3C (World Wide Web Consortium) ist das Gremium zur Standisierung der Vereinbarungen für Web-Seiten
(Technische Spezifikationen und Richtlinien)
November 2010
Seite 5
Cascading Style Sheets
Formatierung und Positionierung von HTML und XHTML-
Elementen.
Durch die Kombination von HTML und Cascading Style
Sheets (CSS / Stilvorlagen) werden die Möglichkeiten der
Seitengestaltung im Internet deutlich erweitert.
XHTML Extensible HyperText Markup Language – erweiterbare HTML (ist genauer, z.B.
Elementnamen nur klein, mit Start- u. End-Tag, Attributwert in Anführungszeichen)
November 2010
Seite 6
November 2010
Vorteile
CSS trennt Struktur von Gestaltung
CSS bringt übersichtlichen HTML-Code
CSS bietet Gestaltung nicht nur für den Bildschirm (sondern
auch zum Drucken)
CSS bietet mehr gestalterische Möglichkeiten
CSS ermöglicht schnelle Designänderungen
CSS ermöglicht barrierefreiere Seiten
CSS verringert die Hosting- und Traffic-Kosten CSS
verringert die Wartungskosten
Seite 7
Nachteile
Stylesheets werden nur von neueren Browsern unterstützt
CSS-Seiten werden manchmal von den Browsern
unterschiedlich dargestellt, wie z.B. Positionierung der
Abschnitte oder Hintergrundgrafiken
November 2010
Seite 8
Version
Version 2 (CSS2) seit 1998
wird vom Internet Explorer 6.x eingebunden,
liefert aber teilweise andere Ergebnisse
Internet Exporer 7.x bindet CSS2 vollständig ein
Firefox 3.x ebenfalls vollständig
Version 3 (CSS3) seit 2001
Umsetzung ist noch nicht vollständig erfolgt
November 2010
Seite 9
Elemente verschachteln
Elemente sind hierarchisch strukturiert. Untergeordnete
Elemente müssen vor dem übergeordneten Elementen
geschlossen werden. Die Elemente dürfen sich nicht
überlappen.
<p><bold>Die Kurse></bold></p> richtig
<p><bold>Die Kurse></p></bold> falsch
November 2010
Seite 10
Elemente schließen
Elemente haben ein End-Tag
<p><strong>Die Kurse</strong></p>
In XHTML müssen End-Tags gesetzt sein
November 2010
Seite 12
CSS im Head-Bereich definiert
<html>
<head>
<title>Titel der Datei</title>
<style type = "text/css">
<!--
/* ... Hier werden die Formate definiert ... */
-->
</style>
</head>
<body>
</body>
</html>
November 2010
Seite 13
Beispiel 1
<html>
<head>
<title>Titel der Datei</title>
<style type = "text/css">
<!–-
h1 { font-family: Verdana, Arial, sans-serif;
font-size: 24pt;
color: green;
background-color: #DDDD00;
text-indent: 1em; }
.
.
.
p { font-family: "Times New Roman";
font-size:12pt;
}
-->
</style>
</head>
<body>
<h1>Stylesheets</h1>
<p>Hier folgt der Text mit der
Absatzformatierung.</p>
</body>
</html>
November 2010
Seite 15
Stylesheets einbinden
Auf fünf verschiedene Arten können Stylesheets eingebunden
werden:
Unterschied: Die Stylesheets, die über <link> übernommen werden, sind optional und können vom Benutzer
überschrieben werden. Die importierten werden grundsätzlich implementiert.
November 2010
Als Definition im Kopf eines HTML-
Dokuments
<style type="text/css">
in einer separaten Datei <link rel="">
als importierte Definition @import "dateiname.css"
als Definition für ein bestimmtes
Element
style=""
als Definition für einen Abschnitt <span style="">
Seite 16
Stylesheets in HTML einbetten
<head>
<style type="text/css">
h1 { font family: Arial, sans-serif;
font-size: 20 px;
color: red;
}
p { font family: Times New Roman, ;
font-size: 18px;
color: #000000;
text-indent: 1em
}
</style>
</head>
November 2010
Seite 17
Stylesheet lokal einbinden
<h2 style="font-family: Arial, Trebuchet, sans-serif;
font-size: 20px;
color: red;">
Der Panther
</h2>
Definition der Formatierungen sind direkt beim Element
November 2010
Seite 18
Formate zentral in separater CSS-Datei definieren
<html>
<head>
<title>Titel der Datei</title>
<link rel="stylesheet" type="text/css" href="formate.css">
<style type = "text/css">
<!--
/* ... hier sind dateispezifische Formate erlaubt ... */
-->
</style>
</head>
<body>
</body>
</html>
November 2010
Seite 19
Verweis auf die externe Datei
<head>
<link type="text/css" rel="stylesheet„ href="styledatei.css">
</head>
link im Kopfbereich einer HTML-Datei weißt auf eine externe Datei hin.
type spezifiziert den Inhalt der Datei als Stylesheet
rel stellt den Bezug zu den Stylesheets her
href Pfad zur Datei
Das Stylesheet kann mit jeder beliebigen Seite verlinkt werden
Zenrale Verwaltung der Formatdefinitionen
keine HTML-Tags
November 2010
Seite 20
Stylesheet-Datei
h1 { font-family: Times, 'Times New Roman', serif;
font-size: 28pt;
color: black;
}
p { font-family: Arial, Trebuchet, sans-serif;
font-size: 14pt;
color: FF0000;
text-indent: 1em
}
Die Textdateien erhalten die Endung ".css"
November 2010
Seite 21
Aufgabe 3
Erstellen Sie eine externe CSS-Datei mit der Endung .css. Folgende Formatanweisungen sollen hier
definiert werden. In der HTML-Datei vorlage-2.html wird dann diese Datei aufgerufen und die
Formatierungen werden entsprechend der CSS-Datei ausgeführt.
Hierzu haben Sie eine Datei mit einer Überschrift h1, h2 und einer Hintergrundfarbe definiert.
body { background-color: gray;/* Hintergrundfarbe: grau */
font-size: 26px;/* Schriftgröße */
}
h1 { font-style: italic;
font-size: 28px;
font-family: Arial, Trebuchet, sans-serif;
color: red;
}
h2 { font-style: italic;
font-size: 1.5em;
}
November 2010
Seite 22
Block-Element <div>
Mehrere Elemente wie Text, Grafiken, Tabellen usw. können in
einem gemeinsamen Bereich, Block-Element, eingeschlossen
werden
mit div (= division = Bereich) wird ein Bereich eingeleitet
November 2010
Seite 23
Beispiel
body { background-color: #EFEFEF;/* Hintergrundfarbe: hellgrau */
font-size: 26px;/* Schriftgröße */
color: blue;/* Schriftfarbe */
font-family: Arial, Trebuchet, sans-serif;/* Schriftart */
}
h1 { font-style: italic;/* Kursivschrift */
font-size: .8em;
}
h2 { font-style: italic;
font-size: .6em;
}
div { color: black;
font-size: .4em;
}
November 2010
div
Seite 24
Alternative Stylesheets
Alternative Stylesheets anbieten. Im Browser unter Ansicht die Stile
ansehen.
<link rel="alternate stylesheet"
type="text/css" href="datei1.css"
title="Auswahl1">
November 2010
Seite 25
Alternativen
<link rel="stylesheet" type="text/css" href="style_A.css"
title="Standard">
<link rel="alternate stylesheet" type="text/css"
href="style_B.css" title="Serifenschrift">
<link rel="alternate stylesheet" type="text/css"
href="style_C.css" title="Serifenlose Schrift">
November 2010
Seite 26
Selektoren
Die nachfolgende Regel setzt sich aus dem Selektor, der
die gewünschten Elemente selektiert (auswählt) und einer
Eigenschaft sowie dem ihr zugewiesenen Wert
zusammen:
Selektor { Eigenschaft: Wert; }
Selektor { Eigenschaft1: Wert; Eigenschaft2: Wert; }
November 2010
Seite 27
Eigenschaften zur Schrift
Bezeichnung Befehl Beispiel
Schriftart Schriftart { font-family: Georgia,
Times, serif; }
Schriftgröße font-size { font-size: 12pt }
Schriftstil Neigung { font-style: italic }
Schriftstärke Dünn bis fett { font-weight: bold }
Kapitälchen Kleine
Großbuchstaben { font-variant: small-caps; }
Angabe in
Kurzform
font { font: 12pt Verdana, sans-
serif; }
November 2010
Seite 28
Schriftart
{ font-family: Times, 'Times New Roman', serif }
serif = eine Schriftart mit Serifen
sans-serif = eine Schriftart ohne Serifen
monospace = eine Schriftart mit gleicher Buchstabenbreite
u.a.
November 2010
Seite 29
Schriftgröße
In HTML waren nur sieben verschiedene Schriftgrößen erlaubt. In CSS geht es
pixelgenau
{ font-size: Wert Maßeinheit }
Absolute Maßeinheiten : px, mm, cm, in, pt, pc
Relative Maßeinheiten: em, ex, %
November 2010
Seite 30
Schriftstil
Zur Schriftneigung zählen:
italic = Schriftstil kursiv
oblique = Schriftstil kursiv
normal = normaler Schriftstil
November 2010
Seite 31
Schriftstärke
HTML-Tags <b> oder <strong> zum hervorheben des Textes, mit CSS sind
mehrere Abstufungen möglich:
normal = normal
bold = fett
100 -900 in 100er Schritten (von dünn bis fett)
bolder
lighter
November 2010
Seite 32
Inline-Element <span>
kann Text und andere Inline-Elemente enthalten aber besitzt
selbst keine Eigenschaften.
November 2010
<h1 style="font-size:200%">
<span style="color:gray">A</span>
<span style="color:yellow">B</span>
<span style="color:lime">C</span>
</h1>
Seite 33
Abschnitte formatieren
<span style="Deklarationen"> … </span>
Nur für diesen Abschnitt gilt diese Deklaration
Beispiel
<body>
<p>Abschnitt mit Formatierungen
<span style="font-size:30pt ; color:blue;">und jetzt
geht’s mit blau weiter </span> und dann wieder wie
gehabt.
</p>
</body>
November 2010
Seite 35
Absolute Werte
Absoluter Wert Einheit Umrechnung
Zoll o. inch in 25,4 mm
Zentimeter cm
Millimeter mm
Punkt pt 1/72 Zoll = 0,353 mm
Pixel px
Pica pc 12 pt = 1/6 Zoll 0 4,23
November 2010
Seite 36
Relative Werte
Relativer Wert Nutzung
em Für x-fache Größe des übergeordneten Elements (1 em =
100%
ex Schriftgrößen in Abhängigkeit der x-Höhe
% Breite eines Elements bestimmen. Proportionalen
Zeilenabstand anpassen
November 2010
Seite 37
Texteigenschaften
Bezeichnung Befehl Wert
Ausrichtung, horizontal align left, right, center, justify
" , vertikal vertical-align top, bottom, text-top, text-bottom,
baseline, middle, sub, super, Prozent-
o. Zahlenangabe
Groß- u. Kleinschreibung text-transform uppercase, lowercase, capitalize, none
Text hervorheben text-decoration underline, overline, line-through,
blink, none
Zeilenabstand line-height normal, Maßeinheit in px, prozentuale
Angabe
Wortzwischenraum word-spacing normal, Maßeinheit in px, keine
prozentuale Angabe
Zeichenabstand letter-spacing normal, Zahlenangaben, …
keine prozentualen Angaben
Text einrücken text-indent Zahlen- u. Prozentangaben
November 2010
Seite 38
Textabstände
Zeichenabstand: letter-spacing: 50px
Wortzwischenraum: word-spacing: 20px
h1 { letter-spacing: 50px; }
p { text-transform: uppercase; word-spacing: 20px;}
November 2010
Seite 39
Block-Element <div>
Mehrere Elemente wie Text, Grafiken, Tabellen usw.
können in einem gemeinsamen Bereich, Block-Element,
eingeschlossen werden
mit div (= division = Bereich) wird ein Bereich
eingeleitet
November 2010
Seite 40
Block-Element
November 2010
<div align="center">
<h1>Block zentriert</h1>
<ul>
<li>alles zentriert</li>
<li>Eintrag A</li>
<li>Eintrag B</li>
</ul>
</div>
<div align="right">
<h1>Textblock rechts</h1>
<ul>
<li>alles rechts am Rand
</li>
<li>Eintrag 1</li>
<li>Eintrag 2</li>
</ul>
</div>
Seite 41
Box-Model
November 2010
Außenabstand
Rahmen
Innenabstand
padding
border
margin
width
Breite
Inhalt
Höh
e
he
igh
t
Jedes Element in einer HTML-Datei erhält eine Begrenzung,
in Form eines Rechtecks.
Das Rechteck enthält den Inhalt mit einem Innenabstand zum Rahmen.
Der Rahmen ist standardmäßig
ausgeblendet (border-style:none)
so breit wie das Browserfenster
Jedes Rechteck kann mit einem Abstand zu einem anderen Rechteck bekommen
Das Rechteck kann eine Hintergrundfarbe erhalten
Seite 42
Beispiel: Rahmen-Beispiel.html
body { font-size: 1em;
font-family: Arial,
Trebuchet, sans-serif;}
div { border: 2px solid #000;
padding: 10px;
margin: 30px; }
span { font-size: 3em;
text-indent:0em;
border: 2px solid green;
padding: 10px;
margin: 30px; }
p { font-size: 1.5em;
border: 2px solid green;
padding: 10px;
margin: .75em 30px; }
</style>
</head>
<body>
<div><img src="Herbstlaub.jpg"
alt="Blätter">
</div>
<div>Im Herbst</div>
<div><p>Der schöne Sommer ging von
hinnen,<br>
Der Herbst, der reiche, zog ins
Land.<br>
Nun weben all die guten Spinnen<br>
So manches feine
Festgewand..</p></div>
November 2010
Seite 44
Positionieren
November 2010
<style type="text/css">
<!--
span { border:1px dashed; padding:10px; }
-->
</style>
</head>
<body>
<h2>Positionieren relativ und absolut</h2>
<p>Positioniert mit Wert:static:
<span style="position: static; top:100px;left:200px;">postition:static; oben:100 Pixel; links: 200 Pixel</span>
</p>
<p>Position mit relativem Wert:
<span style="position: relative; top:100px;left:200px;">postition:relativ; oben:100 Pixel; links: 200 Pixel</span>
</p>
<p>Position mit absolutem Wert:
<span style="position: absolute; top:100px;left:200px;">postition:absolut; oben:100 Pixel; links: 200 Pixel</span>
</p>
<p>Positioniert mit Wert:fixed:
<span style="position: fixed; bottom:100px;left:100px;">postition:absolut; unten:100 Pixel; links: 50 Pixel</span>
</p
Seite 46
Positionieren
position: static keine spezielle Positionierung, normaler Elementfluss
(Normaleinstellung)
position: absolute Abstände werden vom Webseitenrand definiert
position: relative relative Position zum eigentlichen Text
position: fixed Startposition bezieht sich auf den Browserrand,
bleibt beim Scrollen stehen
November 2010
Seite 48
Positionierung von Text und Grafiken
November 2010
<p>Garten und Kräuter</p>
<span style="position: relative; left:20px;">
<p style="border-color:blue; border-width:2px;
border-style: solid;
padding:4px; width:70px;">Steingarten</p>
<img src="steingarten.jpg" width="50%"
style="position: relative; top:30px; left:180px;">
</span>
Seite 49
Textumfluss
November 2010
<style type="text/css">
div {
float:left;
margin-right:20px; margin-bottom:5px;
border:solid 1px gray;}
</style>
<div><img src="steingarten.jpg" width="20%"></div>
<p style="font-size:80%">
Auf diesem Bild sollte ein Ausschnitt eines Steingartens gezeigt werden.
An Steinstufen sind blaue Blumen gepflanzt, ....
Auf diesem Bild sollte ein Ausschnitt eines Steingartens gezeigt werden.
An Steinstufen sind blaue Blumen gepflanzt, ....
Auf diesem Bild sollte ein Ausschnitt eines Steingartens gezeigt werden.
An Steinstufen sind blaue Blumen gepflanzt, ....
</p>
<p style="clear:left">hier ist der Textumfluss ausgeschaltet</p>
Seite 50
Text umfließen mit float
<body>
<div style="float:left; margin-right:20px; margin-bottom:20px;
border:solid 1px red; text-align:center">
Kapitel<br>
<span style="font-family:Algerian,serif; font-size:96px;
color:blue">
1 </span></div>
<p style="font-size:120%">Hier beginnt das erste Kapitel ...</p>
<p style="clear:left">Nun gehts los ......</p>
</body>
November 2010
Seite 51
Text umfließen ohne float
November 2010
<h1><img src="steingarten.jpg" width="50%" align="left" vspace="10"
hspace="20" alt="Pflanzen">Steingärten</h1>
<p>Auf diesem Bild sollte ein Ausschnitt eines Steingartens gezeigt werden.
An Steinstufen sind blaue Blumen gepflanzt, ....
Auf diesem Bild sollte ein Ausschnitt eines Steingartens gezeigt werden.
An Steinstufen sind blaue Blumen gepflanzt, ....
Auf diesem Bild sollte ein Ausschnitt eines Steingartens gezeigt werden.
An Steinstufen sind blaue Blumen gepflanzt, .....<br clear="all"></p>
richtige Darstellung
im Internet Explorer
wie auch im Firefox
Seite 53
Farben
Hexadezimalsystem
0 1 2 3 4 5 6 7 8 9 A B C D E F
16 verschiedene Zustände (0 – 15)
für einen Farbwert stehen jeweils 2 Stellen zur
Verfügung, d.h. 16 x 16 ergibt 256 Möglichkeiten
#
November 2010
A0 C0 3F
Seite 54
Farbwerte durch Angabe von Hexadezimalwerten
Hex RGB
color: #000000 steht für schwarz 0,0,0
color: #FFFFFF steht für weiß 255,255,255
color: #FF0000 steht für rot 255,0,0
color: #00509B LUH-Blau des Logos 0,80,155
November 2010
Seite 55
RGB-Farbmodell
RGB-Farbraum ist ein Maßraum in dem eine Untermenge aller
wahrnehmbaren Farben durch drei Koordinaten definiert werden.
Additives Farbmodell (Lichtmischung)
Monitore
Schwarz: 0,0,0
Weiß: 255,255,255
Rot: 255,0,0
November 2010
Quelle: Wikipedia
Seite 56
Farben
Dezimalwerte
Werte zwischen 0 und 255
rgb( , , )
entspricht dieser Textfarbe
November 2010
255 128 0
Seite 57
Hintergründe entwerfen
Beispiel-hintergrund_in_Richtungen.html
unterschiedliche Aufteilungen des Hintergrunds
hierzu jeweils nur eine Einstellung entkommentieren
November 2010
Seite 58
Tabelle mit Hintergrund
November 2010
table
{
background-image:url("hintergruende/img_1.gif");
background-repeat:repeat;
border:4px black solid;
}
tr,td {border:1px gray solid;}
Seite 59
Pseudoklassen
Pseudoklassen beschreiben einen Zustand oder eine Eigenschaft
eines Elements
sie werden an den Elementnamen bzw. die vorhergende
Klassifizierung angehängt
z.B. Element <a> für Links
Trennzeichen zwischen der Bezeichnung der Pseudoklasse und
dem Elementnamen ist der Doppelpunkt :
z. B. a:hover {
color: black;
text-decoration: underline;
}
November 2010
Seite 60
Reihenfolge der Pseudoklassen
:link Unbesuchte Hyperlinks
:visited Für Verweise zu bereits besuchten Seiten
:hover Für Verweise, die aktivert werden während
die Maus drüber fährt
:active Aktive, gerade angeklickte Links
:focus Wird mit der Tabulator-Taste angesprochen.
November 2010
Seite 65
Selektoren
Beispiel: Container
body Vorfahre von h1 und p
h1 und p sind Kinder von body
h1, p, u, b, i sind Nachkommen
von body
p ist Nachbar von h1
u und b sind Nachfahren von p
u ist direktes Kind von p
b ist Kind von u
November 2010
Seite 66
Selektoren
Die nachfolgende Regel setzt sich aus dem Selektor, der die
gewünschten Elemente selektiert (auswählt) und einer Eigenschaft
sowie dem ihr zugewiesenen Wert zusammen:
Selektor { Eigenschaft: Wert; }
Selektor { Eigenschaft1: Wert; Eigenschaft2: Wert; }
November 2010
Seite 67
Klassenselektoren
Der am häufigsten eingesetzte Selektor. Über einen Klassennamen
können Formatierungen einem einzelnen Element zugewiesen
werden. Die Definition beginnt mit einem . (Punkt)
.class
.Klassenname { Eigenschaft: Wert }
.rot { color: red }
Der Klassenselektor kann auch an einen bestimmten Tag gebunden
werden
Tag.Klassenname { Eigenschaft: Wert }
p.rot { color: red }
November 2010
Seite 68
Beispiel
<p class="back1" style="font-size:30pt; font-weight:
bold;">Hintergrundbilder</p>
Auszug aus der css-Datei:
.back1 { background-image:url(hintergruende/img_1.gif) }
.back2 { background-image:url(hintergruende/img_2.gif) }
.back3 { background-image:url(hintergruende/img_3.gif) }
November 2010
Seite 69
Beispiel: Klassen.html
<!--
body { color:black; }
h1 { font-size: 22pt; background-color: #AFAFAF; }
p.hintergrund { background-color: #DFDFDF; }
p.blau { color: #0000FF; }
.kursiv { font-style:italic; }
-->
</style>
</head>
<body>
<h1>Klassen in Stylesheets</h1>
<p class="hintergrund">Absatz mit Hintergrund durch Klasse</p>
<p class="blau">blaue Schriftfarbe durch Klassendefinition</p>
<p class="kursiv">kursive Schrift im Absatz</p>
<h1 class="kursiv">kursive Schrift in der Überschrift</h1>
November 2010
Seite 70
Selektoren gruppieren
h2, h3 { font-family:"Times New Roman";
font-size:28px;
color:blue;
}
p { color: black }
h2 { color: black }
h1 { color: black } p,h2,h3,h1 { color: black }
h3 { color: black }
November 2010
Seite 71
Universalselektor
November 2010
Selektor Bedeutung Beispiel
. Eine Klasse .myclass {color:blue;}
# ID-Individuelle Definition #myid
{background-color:gray}
* Universalselektor *{ color:black;}
>
Kind-Selektor
Mit dem Zeichen > wird in diesem Selektor
fefstgelegt, dass p-Elemente, sofern sie innerhalb
eines div-Bereichs vorkommen, nur dann die
Textfarbe blau (color:blue) erhalten, wenn das p-
Element in dieser Form vorkommt:
<div><p></p></div>, also eine Ebene unterhalb des div-Elements
div > p { color:blue; }
+
Benachbarte Elemente
Mit diesem Zeichen wird in diesem Selektor
festgelegt, dass p-Elemente, die unmittelbar auf
ein div-Element hin folgen, einen Abstand von
100 Pixeln nach oben hin erhalten (margin-top:100px;).
div + p { margin-top:100px; }
Seite 72
Vererbung
Die Formatierungseigenschaften eines bestimmten HTML-
Elements werden auf die Unterelemente weitergegeben, vererbt. <body>
<h1>(schwarz)</h1>
<p> (schwarz)
<b>(schwarz)</b>
</p>
<ol>(blau)
<li>(blau)>/li>
<li>(blau)>/li>
</ol>
<p>(schwarz)</p>
</body>
November 2010
Seite 75
Nachfahre-Selektor
Ein Nachfahre-Selektor kann angewendet werden, wenn mehrere
Selektoren zur selben Zeit auftreten.
Selektor1 Selektor2 … { Eigenschaft: Wert }
November 2010
Seite 76
Nachfahre
<style type ="text/css">
<!--
body { color: #000000; }
p b { color: #FF0000; }
p i { color: #00FF00; }
-->
</style>
</head>
<body>
<h1>Die Nachfahren</h1>
<p>Dies ist ein Text, der die Formatierungen verdeutlichen
soll.</p>
<p><u><b> Dieser fett formatierte Text wird rot eingefärbt</b></u>
<i>und dieser kursive Text wird automatisch grün dargestellt</i>.
Dieser Text ist wieder schwarz.</p>
November 2010
wenn p und b gleichzeitig auftreten
Seite 77
Kind-Selektor
Ähnlich wie beim Nachfahre-Selektor.
Unterschied: die entsprechenden Tags müssen direkte Nachfolger
des vorherigen Tags sein.
Selektor1>Selektor2 … { Eigenschaft: Wert }
November 2010
Seite 78
Beispiel: Kind-Beispiel.html
<!--
body { color:#4F4F4F;}
p>b { color: #0000FF;}
-->
</style>
</head>
<body>
<h1>Der Kind-Selektor in Stylesheets</h1>
<p>Der Text beginnt in diesem Absatz mit der body-Einstellung,
Farbe: grau.
dann <b>folgt durch b wird der Text fett und da direkt nach p
erhält der Text die Farbe blau </b>
<p><u><b>hier wird nur unterstrichen durch u, es erfolgt aber keine
Einfärbung mehr da b nicht direkt auf p folgt.</b></u></p>
November 2010
Seite 80
Selektoren für benachbarte Elemente
Ein Selektor folgt direkt, unmittelbar einem Selektor (Nachbar)
Selektor1+Selektor2 … { Eigenschaft: Wert }
h1+p { background-color: gray; }
Der Absatz bekommt einen grauen Hintergrund wenn er direkt nach der
Überschrift h1 folgt
November 2010
Seite 81
ID-Selektor
Unterschied zu den Klassenselektoren: kommt nur einmal pro Webseite vor
#ID { Eigenschaft: Wert }
Tag#ID { Eigenschaft: Wert }
<div id="Titeldaten">
<p>
Autor: Rilke
<img src="panther.jpg" alt="Panther-Rilke">
</p>
</div>
<div id="Gedicht">
</div>
November 2010
Seite 82
Beispiel ID
<style type="text/css">
p { font-family: Arial, Trebuchet, sans-serif;
font-size: 16px;
color: #000000;
}
.classTitle { font-weight: bold;}
p#idAbsatz { color: #FF0000;}
</style>
</head>
<body>
<h1>Arbeitsweise von <i>Klassen</i></h1>
<h2 class="classTitle">Diese Überschrift nutzt eine Klasse</h2>
<p id="idAbsatz">Dieser Satz nutzt zum Formatieren IDs.</p>
November 2010