| Textgestaltung mit CSS |  |      |
|
|
 HOME |
 DOWNLOAD  BEISPIEL CSS-Code  ZURÜCK SITEMAP |
CSS-Anweisungen müssen in einer festgelegten Art und Weise notiertwerden. Diese Notierung nennt man 'Deklaration'. Hier erfahren sie wie das geht.
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.
Der Selektor bezeichnet, auf welche HTML-Formatierung sich die Anweisungen beziehen. In diesem Beispiel auf Überschriften der Kategorie 1. 
Das Anweisungformat ist immer gleich: Eigenschaft - Doppelpunkt - Wert(e) - Strichpunkt color: #8080FF; Hier wird für die Eigenschaft 'color' (Farbe) der Wert '#8080FF' (blau) festgelegt. Wo stehen die CSS-Anweisungen? Üblicherweise definiert man im Kopfbereich 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 im Kopf der Seite innerhalb der Tags <head> und </head> zwischen den Tags <style> und </style> notiert.
<html>
<head>
<style type="text/css">
<!--
hier stehen die Anweisungsblöcke
-->
</style>
</head>
<body>
...
</body>
</html>
Für unser erstes Beispiel würde die CSS-Notierung, die aus nur einem Anweisungsblock besteht, nun so aussehen: 
font-family: Arial; für die Schriftfamilie: Font Arial font-size: 18px; für die Schrifthöhe: 18 Pixel font-weight: bold; für Gewichtung: Fettschrift color: #8080FF; für die 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' . 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
}
/* Absätze */
p {text-align: center; color: black;font-family: Verdana}
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 */
h1,h2,h3,h4,h5
{
color: #FFBF00;
font-family: Verdana
}
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 weiteren Anweisungsblöcke ebenfalls im CSS-Bereich der HTML-Datei notiert.
Dass sie Formatierungen nicht nur für HTML-Tags (z.B. <p>) festlegen, sondern auch weitere, 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. Erklärungen zu den 3 Verfahrensweisen der Einbindung von Style Sheets lesen sie auf der Seite 3) CSS Einbinden
Erklärungen zu ausgelagerten Style Sheets finden sie auf der Seite 4) externe CSS-Datei
| ||||||
|
2) Deklaration