 2) Deklaration CSS-Anweisungen notieren
CSS-Anweisungen müssen in einer festgelegten Art und Weise notiert werden. Diese Notierung nennt man 'Deklaration'. Hier beschreibe ich die grundsätzliche Syntax.
|
|
CSS-Anweisungsblock und der Selektor
Ich erkläre eine Deklaration zunächst an der simpelsten und für Anfänger verständlichsten Form: CSS-Anweisungen sollen für bestimmte HTML-Tags gültig sein. Mein Beispiel bezieht sich auf das <h1>-Tag.
CSS-Anweisungen für ein bestimmtes HTML-Tag (einen bestimmten Selektor) werden in Anweisungsblöcken zusammengefasst. In diesem Block stehen dann die Anweisungen, die für dieses HTML-Tag gelten.
Diese Grafik mit dem Anweisungsblock für Überschriften erster Ordnung (<h1>) kennen Sie bereits. Die Regeln dazu möchte ich nun erklären.
Regeln
- sämtliche Anweisungen eines Blocks stehen innerhalb geschweifter Klammern
- mehrere Anweisungen sind durch ein Semikolon getrennt
- vor den geschweiften Klammern steht der Selektor
Nach diesen Regeln erstelle ich nun ein Style:
Für <h1> wird für die Eigenschaft 'Schriftfamilie' (font-family) der Wert 'Arial' festgelegt.
Für <h1> wird für die Eigenschaft 'Farbe' (color) der Wert '#8080FF' festgelegt.
Für <h1> wird für die Eigenschaft 'Gewichtung' (font-weight) der Wert 'bold' festgelegt.
Für <h1> wird für die Eigenschaft 'Farbe' (color) der Wert '#8080FF' festgelegt.
Die Anweisungsregel (Syntax) ist immer gleich:
Eigenschaft - Doppelpunkt - Wert(e) - Strichpunkt color: #8080FF;
Der hier verwendete Selektor gilt für das HTML-Tag <h1>. Die Formatierung gilt demnach für alle Elemente mit dem Elementnamen "h1" (Überschriften 1. Ordnung)
Der Selektor bezeichnet, auf welche HTML-Formatierung sich die Anweisungen beziehen. In diesem Beispiel auf Überschriften der Kategorie 1.
Anweisungsblock für <h1>
|
CSS-Deklaration im Head
|
Die Regel zur Formatierung von <h1>-Elementen ist nun im Kopf der Seite seitenintern festgelegt. Diese Regel gilt nun für bestimmte Inhalte (h1-Überschriften) dieser HTML-Seite. Wie Sie weitere Regeln festlegen und wie Regeln und Inhalte verknüpft werden können, habe ich auf einer separaten Seite zusammengefasst:
Weiter zur Seite:  Selektoren - Formatierungen verknüpfen
Wo stehen die CSS-Anweisungen?
ausführlichere Antworten zu dieser Frage Seite 3) CSS Einbinden
Die erste Möglichkeit CSS-Anweisungen einzubinden ist die seiteninterne Notierung im Head-Bereich.
Üblicherweise definiert man im Kopf der HTML-Datei (im Head) einen Bereich , in dem die CSS-Anweisungen stehen. Dort sind sämtliche Anweisungsblöcke notiert (andere Möglichkeiten der Einbindung später).
Style-Angaben werden zwischen den Tags <style> und </style> im Kopf der Seite innerhalb der Tags <head> und </head> notiert.
<head>
<style type="text/css">
<!--
-->
</style>
</head>
Die CSS-Anweisungsblöcke stehen hier innerhalb einer CSS-Deklaration im Head der HTML-Datei. Weitere Möglichkeiten beschreibe ich auf den Seiten:
CSS-Einbindung
externe CSS-Dateien
|
|
mehrere Anweisungsblöcke
Die Anweisungen eines Blocks stehen innerhalb von geschweiften Klammern. Natürlich kann es sich bei den Anweisungen auch um eine einzelne Regel handeln. In diesem Beispiel werden lediglich die Farben festgelegt.
Wollen Sie das einmal austesten?
Jetzt wo Sie wissen wo die CSS-Anweisungen notiert werden müssen könnten Sie ja einmal testen, wie sich das auf eine HTML-Seite auswirkt. Dazu kopieren Sie diesen Code und fügen die Codezeilen im Head-Bereich Ihrer Testseite ein. Diese Anweisungen verändern die Hintergrundfarbe, Innenabstände sowie die Textformatierung für gewöhnlichen Text und Überschriften der Kategorie <h1> und <h2>.
CSS-Anweisungen mit 3 Anweisungsblöcken:
<style type="text/css">
<!--
body {
margin: 40px;
padding: 0px;
background-color: #0090E0;
font-family: Verdana,Arial,Helvetica,sans-serif;
color: #0050A0;
}
h1 {
font-size: 18px;
font-weight: normal;
color: #DF0000;
}
h2 {
font-size: 14px;
font-weight: bold;
color: #9000E0;
}
-->
</style>
Ein komplexeres Beispiel für Ihre ersten Versuche mit CSS finden Sie als Textdatei aber auch als Download oben im Kopfbereich dieser Seite.
Wenn Ihnen das als Einstieg ausreicht öffnen Sie die CSS-Quellcodeseite, kopieren die Anweisungen und experimentieren weiter.
im Beispiel verwendete Anweisungen
Für unser erstes Beispiel (ganz oben)
würde die CSS-Notierung, die aus nur
einem Anweisungsblock für den
Selektor 'h1' besteht, so aussehen
(siehe rechts).
Was die Anweisungen bedeuten, lesen Sie unten.
|
|
font-family: Arial,sans-serif; Schriftfamilie: Arial (oder serifenlose Schrift)
font-size: 18px; Schrifthöhe: 18 Pixel
font-weight: bold; Gewichtung: Fettschrift
color: #8080FF; Schriftfarbe: ein Blauton
Fettschrift ist für Überschriften allerdings bereits eine Vorgabe des Browsers und müsste nicht explizit eingetragen werden. 'font-weight' macht bei h1 - h5 eigentlich nur dann Sinn, wenn Sie etwas anderes als 'bold' eintragen z.B. 'normal' .
Eine Übersicht / Zusammenfassung häufig verwendeter CSS-Anweisungen für Eigenschaften + Werte (auch als PDF-Datei für den Drucker) finden Sie auf der Seite
Kurzreferenz CSS
Kommentare
Sie können Kommentare (die vom Browser ignoriert werden) eintragen! Diese Kommentare stehen zwischen /* und */ .
/* Überschrift für Unterthemen */
h3 {
font-family: Arial;
font-size: 14px;
font-weight: bold;
color: #0070C0; /* gleiche Farbe wie Rahmen */
}
Lesbarkeit
Es macht lediglich einen Unterschied in der besseren Lesbarkeit, wenn Sie die Anweisungen innerhalb eines Blocks untereinander statt hintereinander anordnen.
/* Absätze */
p {
text-align: center;
color: black;
font-family: Verdana,sans-serif;
}
/* Absätze */
p {text-align: center; color: black;font-family: Verdana,sans-serif;}
Gruppierung
Selektoren können gruppiert werden. Selektoren sind dann durch ein Komma getrennt. In diesem Beispiel sind die Überschriften h1 bis h5 zusammengefasst und werden in Verdana, Schriftfarbe Orange dargestellt.
/* Überschriften, alle gleiche Farbe und Schrift*/
h1, h2, h3, h4, h5
{
color: #FFBF00;
font-family: Verdana,sans-serif;
}
Lesen Sie (später) zum Thema 'Gruppierung' auch die separate Seite
CSS-Anweisungen gruppieren
mehrere Werte
Es können mehrere Werte eingetragen werden. Die Werte sind dann durch ein Komma getrennt. In diesem Beispiel wird kursiver Text vorrangig in Verdana, dargestellt. Ist die Schriftart Verdana nicht vorhanden, wird Arial gewählt usw. Ist keine der festgelegten Schriften verfügbar, wird eine serifenlose Schrift verwendet (sans-serif).
/* kursive Texte */
i
{
color: #FFBF00;
font-style: italic;
font-family: Verdana,Arial,Helvetica,sans-serif;
}
weitere Vorgehensweise
Nun werden Sie weitere Anweisungsblöcke für andere HTML-Selektoren ihrer Seite eintragen wollen.
Eingeleitet durch die entsprechenden Selektoren der HTML-Formatierung (td, h2, p, a, b, i, u, pre, ...), werden diese Anweisungsblöcke ebenfalls im CSS-Bereich der HTML-Datei notiert.
body
a
ul, ol, li
h1, h2, h3, h4, h5
img
b, i, u, pre
p
table, td
|
gesamte Seite
Links
Listen und Listelemente
Überschriften
Bilder
Textformatierungen
Absätze
Tabellen, Tabelleninhalte
|
Dass Sie Formatierungen nicht nur für HTML-Elemente (z.B. <p>) festlegen, sondern auch eigene Selektoren festlegen können (z,B. .text12rot), lassen wir erst einmal unberücksichtigt. Dazu lesen Sie später mehr im Beitrag 'eigene Klassen'.
Sie finden hier auf dieser Seite ein Beispiel für CSS-Anweisungen als Textdatei, die Sie in ihre HTML-Datei kopieren können.   CSS-Code
Erstellen Sie zunächst einmal eine Musterseite und passen die Textformatierungen ihrem Layout an. Sobald Sie die passenden Deklarationen festgelegt haben, können Sie daran gehen die CSS-Anweisungen in alle vorhandenen HTML-Dateien zu kopieren, oder besser noch, eine zentrale, externe CSS-Datei anzulegen. Dort stehen dann die CSS-Anweisungen für ihr gesamtes WEB-Projekt.
Weiter gehts auf der Seite 2a ...
Bindeglieder
Wie stellt man die Zusammenhänge zwischen CSS-Formatvorlagen und Seitenelementen her? Ausführliche Infos über die Bindeglieder (Selektoren) zwischen CSS-Anweisungen und HTML-Elementen lesen Sie hier:
Weiter zur Seite: CSS-Selektoren
3 CSS-Anweisungen in die Seite einbinden
Die CSS-Formatierung soll für genau den Text / die Seitenelemente gelten, für die Sie eine Formatierung wünschen. Die Formatangaben können in mit unterschiedlichen Verfahren eingebunden werden. Erklärungen zu den Verfahrensweisen der Einbindung von Style Sheets lesen Sie hier:
Weiter zur Seite: 3) CSS Einbinden
4 CSS-Anweisungen auslagern
Die CSS-Anweisungen in eine externe Datei auszulagern, bringt ihnen erhebliche Vorteile. Neben den weiter unten aufgeführten Gründen ist nicht unerheblich, dass die HTML-Seiten kleiner werden, und die externe CSS-Datei nur einmal vom Server geladen werden muss. Erklärungen zu ausgelagerten Style Sheets finden Sie hier:
Weiter zur Seite: 4) externe CSS-Datei
|
Home • CSS • Deklaration
Download
