SCHRIFT
Eine Kurzform der Schriftformatierung. Fasst die sechs einzelnen Eigenschaften zusammen. Weiterhin können einige Schriftarten des Betriebssystems verwendet werden.
Code:
| <style type=\"text/css\"><!--
body{font: Arial, Verdana, sans-serif bold 14px/12px;}
p{font:14px/12px;}
--></style>
</head>
<body>
<p>Franz jagt im komplett verwahrlosten Taxi
quer durch Bayern</p>
|
Legt die Schriftart wie Arial, Comic Sans und die Schriftfamilie wie serif oder sans-serif fest. Angegeben werden eine oder mehrere Schriftarten oder/und Schriftfamilien. Der Browser probiert alle durch und wählt die Erste, die auf dem Anwendersystem installiert ist.
Code:
| <p style=\"font-family:Arial, Helvetica, sans-serif;\">
Arial
</p>
<p style=\"font-family:\'Times New Roman\', serif;\">
Times New Roman
</p>
|
Die Größe einer Schrift.
Code:
| <p style=\"font-family:Arial;font-size:12pt\">
Arial in 12pt
</p> |
font-size-adjust soll die Größe unterschiedlicher Schriftarten anpassen und somit dafür sorgen, dass die Schriften annähernd gleich groß dargestellt werden.
Code:
| h1 {font-family:Arial; font-size-adjust:none;}
h1
{
font-family:Verdana, \'Times New Roman\', \'Courier New\';
font-size-adjust:0.56;
}
|
font-stretch beschreibt, wie weit eine Schrift gestreckt oder verdichtet wird. Dies funktioniert aber nur, wenn die gewählte Schrift dies unterstützt und das ist bei Arial, Verdana und Times zum Beispiel nicht der Fall.
Code:
| p{font-stretch:wider;}
h1{font-stretch:ultra-condensed;}
|
Kursive und schräggestellte Schriften.
Code:
| <p style=\"font-family:Arial;font-style:italic\">
Arial kursiv
</p>
|
Kapitälchen sind \"kleine\" Großbuchstaben.
Code:
| <p style=\"font-variant:small-caps\">
Ein Text mit \"kleinen\" Großbuchstaben
</p>
|
Legt fest, wie fett eine Schrift dargestellt wird. Dies muss von der gewählten Schrift auch unterstützt werden.
Code:
| <p style=\"font-family:Arial;font-weight:bold\">
Arial bold
</p>
|
HINTERGRUND
Eine Kurzform der Hintergrundformatierung. Fasst die einzelnen Angaben zusammen.
Code:
| <body style=\"background: url(images/bg.gif) repeat-x;\">
Seiteninhalt ...
</body>
|
Bestimmt, ob ein Hintergrundbild beim Scrollen mit wandert oder seinen festen Ort auf der Seite behält. Wird deshalb in Zusammenhang mit background-image verwendet.
Code:
| <body style=\"background-image: url(images/bild.gif);
background-attachment:fixed;\">
Seiteninhalt ...
</body>
|
Legt für Elemente die Hintergrundfarbe fest.
Code:
| <table width=\"500\">
<tr>
<td style=\"background-color:#efefef;\">
Eine Zelle mit grauer Hintergrunsfarbe
</td>
</tr>
</table>
|
Legt für ein Element ein Hintergrundbild fest. Da der Browser Hintergrundbilder immer über die Hintergrundfarbe legt, solltest du gleichzeitig eine Hintergrundfarbe angeben, die zu sehen ist, wenn der User das Anzeigen von Bildern ausgeschaltet hat oder das Bild einfach nicht zur Verfügung steht. So verhinderst du zu geringen Kontrast zwischen Schrift- und Hintergrundfarbe oder sogar Probleme wie weiße Schrift auf weißen Grund. Soweit du mit background-repeat nichts Anderes festgelegt hast, werden Hintergrundbilder immer über den gesamten Bereich des Inhalts und des Innenabstands angezeigt
Code:
1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. | <style type=\"text/css\">
div.bg {
background-image: url(../images/bg.gif);
background-color:orange;
width:500px;height:200px;
border:1px solid red;
padding:20px;
}
</style>
...
<body>
<div class=\"bg\">
div-Container mit Hintergrundbild
</div>
|
background-position legt abhängig von background-repeat Position eines Hintergrundbildes fest:
background-repeat:no-repeat: Das Hintergrundbild wird nur einmal and der angegebenen Position angezeigt.
background-repeat:repeat-x: Das Hintergrundbild wird horizontal wiederholt angezeigt und nur der zweite Wert wird verwendet, um die Hintergrundbilder vertikal zu verschieben.
background-repeat:repeat-y: Das Hintergrundbild wird vertikal wiederholt angezeigt und nur der erste Wert wird verwendet, um die Hintergrundbilder horizontal zu verschieben.
Code:
1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. | <style type=\"text/css\"><!--
body
{
background-image:url(images/bg.gif);
background-repeat:no-repeat;
background-position:100px 50%;
}
--></style>
<body>
Seiteninhalt ...
</body>
|
Legt fest, ob ein Hintergrund über die gesamte Breite oder/und Höhe eines Elements wiederholt wird.
Code:
| <div style=\"background-image: url(../images/op5x.gif);
background-repeat:repeat-x;float:left;\">
Hintergrundbild nur waagerecht wiederholen
</div>
|
viel spaß dabei
es werden mehrere Teile kommen gez. F4n
