|
Lesen Sie Grundsätzliches zur Verwendung von Cascading Stylesheets.
Allgemeines
Mit Cascading Stylesheets hat man ein mächtiges Werkzeug für die Gestaltung von Websites. Tolle Effekte, Positionierungen aber auch grundsätzliche Formatierungen sind machbar.
Intern oder extern einbinden
Sie können Ihren CSS-Code direkt in das entsprechende Dokument einfügen oder auch auf eine externe CSS-Datei zugreifen.
Bei Einbindung im Dokument
Fügen Sie die Definitionen in den Header-Bereich der Seite.
Code
<html>
<head>
<title>Titel der Seite</title>
<style type="text/css">
Style-Definitionen
</style>
</head>
<body>
...
Verwendung einer externen CSS-Datei
Bei Verwendung einer einzelnen Datei können Sie mit dem LINK-Tag darauf zugreifen.
Code
<html>
<head>
<title>Titel der Seite</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
...
Erste Style-Zuweisungen
Zwischen <style> und </style> sowie in einer externen CSS-Datei können die CSS-Angaben eingefügt werden.
Sie können nun zum Beispiel verschiedene HTML-Tags formatieren. Beginnen wir einfach mit einem Beispiel:
Code
a { color:#000000; font-size:12px; text-align:center; }
Hiermit weisen wir dem <a>-Tag (also einer Verknüpfung) die Farbe schwarz, 12 Pixel-Grösse und zentrierte Ausrichtung zu.
Möchten wir nun, dass <a>- und <i>-Tags gleich aussehen, können wir einfach noch den <i>-Tag hinzufügen und die Definition auf beide Tags anwenden.
Code
a, i { color:#000000; font-size:12px; text-align:center; }
Zu beachten ist hierbei, dass je nach Browser Links unterstrichen angezeigt werden. Dies lässt sich mit dem Befehl text-decoration:none; abschalten.
Klassen
Beispiel: Sie haben verschiedene fette Textpassagen in einem Text, möchten die eine aber rot und die andere grün anzeigen. Eine Zuweisung auf das ganze Tag ist nicht die Lösung. Doch in HTML können Sie mit dem Attribut "Class" zuweisen, welche CSS-Definition auf das Tag zutreffen soll.
Code
<b class="rot">Dies ist roter Text</b><br>
<b class="gruen">Dies ist grüner Text</b>
In der CSS-Definition steht dann etwa folgendes:
Code
b { font-size:12px; }
.rot { color:red; }
.gruen { color:green; }
Man kann die Klassen nun auch auf weitere Tags anwenden. Soll dies unterbunden werden, können Sie die Klasse auch einem Tag fest zuweisen.
Code
b.rot { font-size:12px; color:red; }
b.gruen { font-size:12px; color:gruen; }
ID-Zuweisungen
Sie können auch Tags mit einer ID bestimmte Slyle-Zuweisungen geben. IDs werden mit "#" bestimmt.
Code
#ueberschrift { font-size:20px; text-align:center; }
im HTML-Code dann:
Code
<h1 id="ueberschrift">Überschrift</h1>
Und damit alles schön flexibel ist, können Sie Zuweisungen für Klassen, IDs und Tags zusammenfassen.
Code
a, .rot, #ueberschrift { text-align:center; color:red; font-size:20px; }
Zuweisung direkt im Tag
Style-Definitionen können auch im HTML-Tag direkt zugewiesen werden. Hierbei fallen logischerweise die Klammern "{" und "}" weg.
Code
<a href="http://www.y0y.de" style="color:#000000; font-size:20px; text-align:center;">y0y.de</a>
Die häufigsten Anweisungen
Zuweisung - Werte - Beispiel
color - hexadezimalcode, farbnamen (englisch) - color:red;
font-size - Centimeter (cm), Pixel (px), Punkt (pt) etc... - font-size:12px;
font-family - Name einer oder mehrerer Schriftart (getrennt durch Komma) - font-family:courier, arial;
font-weight - bold, normal, etc... - font-weight:bold;
text-align - right, center, right, ... - text-align:center;
|
|
