Prometheus 
Administrator
Dabei seit: 09.05.2003
Beiträge: 2.950
 |
|
 Schriftformatierungen mit CSS |
     |
Um auf einer Webseite ein einheitliches Layout zu haben benutzt man normalerweise  CSS elemente welche ganz einfach in einer Daten definiert werden und dann auf jeder Seite der Webseite integriert werden. Hier nun mal eine Anleitung wie man Schriftformatierungen in einer CSS Datei vornimmt.
Einbinden einer CSS Datei in eine HTML Seite:
Damit die Formatierungen auf jeder Seite aktiv sind ist es nötig die CSS Datei auf jeder Seite zu integrieren. Dies geht mit folgendem Code.
| code: |
1:
|
<link rel="stylesheet" type="text/ CSS" href="formate. CSS"> |
|
Natürlich kann man auf einen Unterordner erstellen und dort mit mehreren Dateien arbeiten. Die "href" angabe muß dann dementsprechend angepasst werden.
Mögliche Formatierungen:
font-size: - Schriftgröße festlegen (meist in Punkten definiert. Z.B. font-size:12pt für eine Schriftgröße von 12 Punkten)
color: - Farbe der Schrift festlegen (Angabe in Hex. Beispiel: color:#ff0000 ergibt schriftwarbe rot)
font-style: - Schriftstiel festlegen (Mögliche Angaben sind italic = Schriftstil kursiv, oblique = Schriftstil kursiv, normal = normaler Schriftstil)
font-family: - Schriftart festlegen (Die festgelegte Schriftart muß auf dem Rechner der die Seite ausgibt vorhanden sein. Damit möglichst eine Schrift vorhanden ist sollten mehrere angegeben werden. Beispiel font-family:'Times New Roman',Times,serif)
font-variant: - Variante festlegen (Mögliche Angaben sind small-caps = Kapitälchen, normal = normale Schriftvariante)
font-weight: - Schriftgewicht festlegen (Mögliche Angaben sind bold = fett, bolder = extra-fett, lighter = dünner, 100,200,300,400,500,600,700,800,900 = extra-dünn (100) bis extra-fett (900). normal = normales Schriftgewicht)
font-stretch: - Schriftabstand festlegen (Mögliche Angaben sind wider = weiter als normal, narrower = enger als normal, condensed = gedrängt, semi-condensed = halb gedrängt, extra-condensed = stark gedrängt, ultra-condensed = extrastark gedrängt, expanded = geweitet, semi-expanded = halb geweitet, extra-expanded = stark geweitet, ultra-expanded = extrastark geweitet, normal = normale Laufweite)
word-spacing: - Abstand zwischen den Worten festlegen (Angabe normal in pt. Beispiel word-spacing:6pt)
letter-spacing: - Zeichenabstand festlegen (Angabe in pt. Beispiel letter-spacing:8pt)
text-decoration: - Zusätzliche Textformatierungen festlegen (Mögliche Angaben sind underline = unterstrichen, overline = überstrichen, line-through = durchgestrichen, blink = blinkend, none = normal)
text-transform: - Erzwungene Buchstabenformatierung (Mögliche Angaben sind capitalize = Wortanfänge als Großbuchstaben, uppercase = Nur Großbuchstaben, lowercase = Nur Kleinbuchstaben, none = normal)
text-shadow: - Schattenwurf im Text (Angegeben werden muß die Schattenfarbe. Beispiel text-shadow:#000000 für schwarz)
Wichtig: Die oben genannten Angaben werden teilweise von einigen Browsern nicht interpretiert und sind deshalb nicht zu sehen!
Beispiel für eine Format Datei:
| code: |
1:
2:
3:
|
.test1 { font-family:Tahoma, Arial; font-size:12pt }
.test2 { font-family:Tahoma, Arial; font-size:24pt }
.test3 { font-family:Tahoma, Arial; font-size:12pt; color:#ff0000 } |
|
Im Beispiel wird nun test1 in der Schrift Tahoma oder Arial und Schriftgröße 12 Punkte dargestellt. Test 2 wird doppelt so groß dargestellt und test3 wird rot geschrieben.
Einsatz in einer HTML Seite:
| code: |
1:
2:
3:
4:
5:
6:
7:
|
< HTML><head><link rel="stylesheet" type="text/ CSS" href="formate. CSS"></head>
<body>
<p id="test1">Text in Schriftgröße 12 Punkte</p><br>
<p id="test2">Text in Schriftgröße 24 Punkte</p><br>
<p id="test3">Test in rot und Schriftgröße 12 Punkte</p><br>
unformatierter Text
</body></ HTML> |
|
Im Beispiel wird die CSS Datei eingelesen und die einzelnen Formatierungen angesprochen.
Die Formatierungen können auch alle entweder direkt in kopf der HTML-Datei definiert werden oder für jedes Ausgabeelement separat. Dies ist jedoch umständlich und deshalb sollte man global gültige Angaben in einer Daten machen.
Bei Fragen bitte einfach hier Posten.
__________________
mfg
Prometheus
|
|
|
Ich gebe keinen Support per PN, Email oder sonstiges!
Alle Fragen können offen hier im Forum behandelt werden.
|
|
|
