Und so gehts:
Den Selektor benennen (ohne spitze Klammern) z.B.: „p“,
Es folgt in geschweiften Klammern der Bezeichner sowie der Wert: { font-family:Verdana,sans-serif; }
Mit dem Selektor „line-height“ kann man die Höhe von Zeilen bestimmen.
Erlaubt: numerische Angabe sowie Prozentangaben. Prozentwerte beziehen sich dabei
auf die Schriftgröße des Elements, für das die Höhe der Zeilen bestimmt wird.
Zu beachten:
Unter Umständen räumt für die Höhe der Zeilen ein Browser dieser erzwungenen Angabe den Vorrang
ein. Elemente die höher sind, beispielsweise ein im Text dargestelltes Symbol (Grafik) wird ggf. abgeschnitten.
Über den Universalselektor * können Eigenschaften für alle Elemente zugewiesen werden. Dem jeweiligen Element
werden nur die jeweils zulässigen Eigenschaften zugeordnet
Bei der Benennung von Formaten für mehrere HTML-Elementtypen werden alle gewünschten
Elementtypen angegeben und durch Kommata getrennt z.B. h2,h3 .
Für die Zuweisung mehrerer Elementeigenschaften stehen also zwei Möglichkeiten zur Verfügung:
h2 { font-family:Verdana,sans-serif; }
h3 { font-family:Verdana,sans-serif; }
oder:
h2,h3 { font-family:Verdana,sans-serif; }
Das Hintergrund-Image einer Tabelle wird als zentrales Format über die URL aufgerufen:
table { background-image:url(../image/bg_img/wasser11.gif);
border-spacing:10px; }
--> eine Besonderheit stellt hier dar, dass der name „cellspacing (html)“ durch den namen „border-spacing (css)“
ersetzt wird
--> „cellpadding (html)“ wird durch „padding (css)“ ersetzt. Hierbei wird ggf. unterschieden, ob von einer
bestimmten Elementgrenze ein entsprechender Innen-Abstand bestimmt werden soll: » padding-top, -right, -left, -bottom «
Bei dieser Seite werden folgende Werte im header den entsprechenden Elementen zugewiesen: Dem body-Element eine hellgraue
Hintergrundfarbe (background-color:#CCCCCC;) und ein linker Randabstand von 80 Pixeln (margin-left:80px;) -
Mit dem Universalselektor wird für alle Elemente zunächst graue Schriftfarbe (color:grey;) zugewiesen.
Überschriften 1. Ordnung (h1) erhalten eine Schriftgröße von 300 Prozent (font-size:300%;), die abweichende
Schriftfarbe rot (color:#FF0000;) und den Schriftstil kursiv (font-style:italic;). Textabsätze (p) und
Listenpunkte (li) erhalten eine Schriftgöße von 110 Prozent (font-size:110%;) mit einer Zeilenhöhe von
140 Prozent (line-height:140%;) in Schriftart Verdana, oder wenn nicht verfügbar, dann in Arial, und wenn
ebenfalls nicht verfügbar, in irgendeiner Sans-Serif-Schrift dargestellt werden (font-family:Helvetica,Arial,sans-serif;).
Außerdem werden auch noch Angaben zum Zeichenabstand (letter-spacing), Wortabstand (word-spacing) und zur Textfarbe gemacht.
Zweckmäßiger ist es den css-text nicht im header zu notieren, sondern ihn aus einer separaten Datei zu importieren:
Beispiel:
<head>
<title>Überschrift</title>
<link rel="stylesheet" type="text/css" href="/intranet/intranet.css">
</head>
Dieser kleine Textbeitrag erhebt keinen Anspruch auf Vollständigkeit. Umfangreichere Informationen zu CSS kann man unter folgender
Adresse erfahren: SELFHTML: Stylesheets (CSS)
|
