| Links zu Kurs | ||
| Web-Design mit Cascading Stylesheets CSS - meine Homepage - |
||
Übersicht
CSS oder Cascading Style Sheets
ist eine Sprache zum Formatieren von HTML/XHTML-Elementen.
Verglichen
mit den reinen HTML-Formatierungen bietet CSS erheblich mehr
Möglichkeiten
CSS: Syntax und Vokabular
dazu z.B.
mit CCS lassen sich genauer formatieren
einzelne
HTML-Tags
dazu
ein Beispiel 1
montiert mit folgendem Deklarationsblock einer CSS-Regel
innerhalb
des
HTML-Steuerzeichen <P> in Kombination
der HTML-Eigenschaft style
<P style = " font-family:'Times New Roman'; font-style:italic; font-weight:bold; font-size:14px; word-spacing:20px letter-spacing:5px; line-height:30px;">
. . . . . . hier endet der vorherige Absatz noch ohne CSS-Formatierung ¶
Dies ist ein Absatz hat folgende Schrift-Eigenschaften
- fetter,
- kursiver
- Times New Roman
- in Schrift-größe 14 pixel
und folgende Text-Eigenschaften
- Wort-abstand 20 pixel
- Zeilen-höhe 30 pixel
- Zeichen-abstand 5 pixel
Ein Teil des Deklarationsblocks oben
läßt sich auch in Kompakt-Darstellung darstellen.
Aber nur die Werte
der verschiedenen font-Eigenschaften
<P style = " font: 'Times New Roman' italic bold 14px; word-spacing:20px letter-spacing:5px; line-height:30px;">
ein Beispiel 2
montiert mit folgendem Deklarationsblock einer CSS-Regel
innerhalb
des
HTML-Steuerzeichen <BODY> für diese HTML-Seite
<body style="font-family:'Arial'; font-style:normal; font-size:10pt; font-weight:normal; text-align:justify; line-height:20px; background-color:#F7F7F7;">
Die einzelnen CSS-Deklaration müssen mit Hilfe von Semikolon von einander getrennt werden.
mit CCS lassen sich genauer formatieren
einzelne Text-
Abschnitte
dazu ein Beispiel montiert mit folgendem Deklarationsblock einer CSS-Regel
über das HTML-Steuerzeichen <SPAN>
in Kombination der HTML-Eigenschaft style
. . . . . . hier endet der vorherige Absatz noch ohne CSS-Formatierung¶
<SPAN style = " font-family:'Times New Roman'; font-style:italic; font-weight:bold; font-size:14px; word-spacing:20px letter-spacing:5px; line-height:30px;">
Hier beginnt ein weiterer Absatz. Innerhalb dieses neuen laufenden Absatzes beginnt auf einmal hier der Text-Abschnitt mit folgenden Schrift-Eigenschaften: fetter, kursiver, Schrift in Times New Roman, in Schrift-größe 14 pixel und folgenden Text-Eigenschaften: Wort-abstand 20, pixel Zeilen-höhe 30 pixel, Zeichen-abstand 5 pixel und hier endet wieder der formatierte Text-Abschnitt und zugleich auch der gesamte Absatz jetzt!
entweder
zentral
im Bereich
<head> - also im Dokumentenkopf einer HTML-Seite - per Einbindung
durch das style-Element
lassen sich mehere
Der Aufbau einer CSS-Regel ist immer der gleiche:
dazu ein Beispiel mit 2 CSS-Regeln innerhalb des style-Element und zwar gültig
für alle
- HTML-Tags <P> dieser HTML-Seite
- dessen
Unter-Klasse von <P
class=gross>
<head>
<style type="text/css">
<!--
/* Anfangs-Kommentar: gerade hat die style-sheet-Definition begonnen */
P
{
font-family:'Times New Roman';
font-style:italic;
font-weight:bold;
font-size:14px;
word-spacing:20px letter-spacing:5px; line-height:30px;
}
/* Kommentar: das war eben die Formatierung fette und kursive Formatierung
aller Absätze mit <P> der HTML-Seite */
/* Kommentar: nun folgt eine Erweiterung = Unterklasse dieser Formatierung
in großer und gedehnter Schrift
Der Klassenselektor P.gross spricht
alle Absätze der HTML-Seite an, die gekennzeichnet sind mit <P class=gross> */
P.gross
{
font-family:'Times New Roman';
font-style:italic;
font-weight:bold;
font-size:14px;
word-spacing:20px letter-spacing:5px; line-height:30px;
}
/* Schluss-Kommentar: gleich endet die style-sheet-Definition */
<!--
</style>
</head>
oder
innerhalb 1 separaten Datei alle CSS-Deklarationen zentral auslagern
und diese Datei in jede HTML-Seite
nur über einen Link einbinden
Vorteil: wenn die CSS-Formate aus diese Weise ausgelagert festliegen,
sind diese über
alle HTML-Seiten einer web-site zur Steuerung eines einheitlichen Erscheinungsbild gültig
<head>
<link rel="stylesheet" type="text/css" href="dateiname.css">
</head>
und so schaut der Inhalt der ausgelagerten CSS-Datei dateiname.css aus
CSS-Boxmodell am Beispiel zweier <div>-Container
Tabellen-Layout mit Hilfe von <div>-Containern
Beispiel: Zweispaltige Seite
Positionierung und Anzeige von Elementen
Stylesheet-Angaben lassen sich gruppieren, so dass man nicht jedes Tag und jeden Selektor einzeln auflisten musst.
Selektoren verknüpfen Formatierungen
Was passiert eigentlich, wenn mehrere Stylesheet-Anweisungen aufeinander treffen?
3 Kaskaden-Regel besagen in Stylesheet-Angaben
Jedes Element hat Vor- und evtl. Nachfahren, die man als Eltern- und Kind-Elemente bezeichnet. Formatierst man ein Element mit Stylesheets, so übernehmen nachfolgende Kindelemente einige dieser Formatierungen. Diesen Vorgang bezeichnet man als Vererbung.
Erstellt und Copyright
von Jörg
Bucher Arbeitskreis Internetschule
am 21.04.2005