Übersicht | wichtige Begriffe | ||||||
Lektion 1: Herangehen |
Lektion 2: HTML |
Lektion 3: Helfer |
Lektion 4: so gehts |
Lektion 5: einfache Gestaltung |
Lektion 6: Frames |
Lektion 7: CSS |
Lektion 8: Dateitypen |
Begriffserklärung |
kommentiertes Beispiel |
HTML und CSS |
Phase 5 und CSS |
Seitenende |
Beispiel für eine CSS-Datei
|
Erläuterung |
---|---|
body {
font-family: Arial;
font-size:9pt;
} h1 { font-size:18pt; font-weight: bold; } h2 { font-size: 14pt; font-weight: bold; } h3 { font-size:12pt; } h4 { font-weight: bold; font-size:10pt; } h5 { font-family: Arial; font-size: 9pt; font-weight: normal; } a:link { color: #1F00FF; } a:visited { color: #00009F; } code { font-family: Courier; font-size: larger; font-weight: bold; font-style: none; color: #804000; } hr {color: #0000DF} kbd { font-family: Courier; font-weight: bold; color: #008000; } samp { font-family: Arial; font-style: italic; color: #353535; } .merksatz { font-family: Arial; background: #00007F; font-weight: bold; color: #FFFF00; } |
Dieser Text beschreibt das Aussehen dieser HTML-Seite zum Zeitpunkt ihrer Entstehung. Wie man sieht, beginnt ein Abschnitt mit dem Inhalt eines Tags, wie etwa h1 für die Überschriften erster Ordnung oder hr für eine horizontale Linie.Danach werden in geschweiften Klammern die geänderten Attribute und ihre Attributwerte genannt. Die Reihenfolge ist egal, Elemente können sich sogar wiederholen. Man kann auch mehrere Elemente gleich(zeitig) festlegen, indem man die Taginhalte vor der geschweiften Klammer durch Komma getrennt auflistet. Die Attribute werden jeweils mit einem Komma abgeschlossen, nach den Attributwerten folgt ein Semikolon. Die letzte Deklaration beschreibt eine eigene Formatvorlage mit dem Namen merksatz. Nicht definierte Elemente oder Attribute behalten das Aussehen, was im Browser eingestellt ist. |
<head>
-Abschnitt findet sich beispielsweise die Zeile<link rel="stylesheet" href="Format.css" type="text/css">
class
.
Der Code | sieht dann so aus |
kein Merksatz <p class="merksatz" >Aber jetzt!</p> Neuer Absatz... |
kein Merksatz Aber jetzt! Neuer Absatz... |
Das geht auch <span class="merksatz" >mit einzelnen Abschnitten</span> mit Hilfe des Tags <code><span></code>. | Das geht auch mit einzelnen Abschnitten mit Hilfe des Tags <span> . |
vorherige Lektion: Frames | Das war Lektion 7: Gestaltung mit CSS | nächste Lektion: Dateitypen im www |