HTML | 6

HTML | 6
CSS | Schrifteigenschaften
2
CSS | Schrifteigenschaften
font-family
font-size
font-weight
font-style
font-variant
font
3
Schrifteigenschaften
CSS-Eigenschaft
Werte: mögliche Werte
Standard: Default-Wert
Gilt für: HTML-Elemente
Vererbung: ja / nein
4
Schrifteigenschaften | Schriftart
font-family
Werte:
eine oder mehrere Schriften oder generische Schriftfamilien | inherit
Standard:
hängt von den Browservoreinstellungen ab
Gilt für:
Textelemente
Vererbung: ja
5
Schrifteigenschaften | Schriftart
body { font-family: Arial; }
p { font-family: Courier, monospace; }
p { font-family: „Trebuchet MS“, Verdana, sans-serif; }
Es können nur Schriften angezeigt werden, die auf dem Rechner des
Benutzers installiert sind!
Ausnahme: Eingebettete Schriftarten: Webfonts ! Später mehr!
6
Schriftart | Generische Schriftfamilien
serif | Times, Times New Roman, Georgia, ...
sans-serif | Arial, Verdana, Trebuchet MS, Helvetica, Geneva, ...
monospace | Courier, Courier New, Andala Mono, ...
cursive | Comic Sans MS, Monotype Corsiva, ...
fantasy | Impact, Haettenschweiler, ...
7
Übung 01 | Schriftart
1. CSS-Datei erstellen
2. CSS-Regel für den body:
font-family:
Verdana, sans-serif
8
Schrifteigenschaften | Schriftgröße
font-size
Werte:
Längeneinheit, Prozentwert | xx-small | x-small | small | medium | large |
x-large | xx-large | smaller | larger | inherit
Standard: medium
Gilt für:
Textelemente
Vererbung: ja
9
Schrifteigenschaften | Schriftgröße
h1 { font-size: 24px; }
h1 { font-size: 1.5em; }
h1 { font-size: 150%; }
h1 { font-size: x-large; }
strong { font-size: larger; }
10
Schriftgröße | Masseinheiten
Print
Screen
px = Pixel
Absolute Maßangabe
pt = Punkt
in = inch
em
%
cm
Relative Maßangaben
mm
pc = picas
11
Schrifteigenschaften | Schriftgröße
Pixel
Prozent
em
h1
32px
h1
?
h1
?
h2
24px
h2
?
h2
?
h3
18px
h3
?
h3
?
body
16px
body
100 %
body
1em
12
Schrifteigenschaften | Schriftgröße
Pixel
Prozent
em
h1
32px
h1
200 %
h1
?
h2
24px
h2
150 %
h2
?
h3
18px
h3
112.5 %
h3
?
body
16px
body
100 %
body
1em
13
Schrifteigenschaften | Schriftgröße
Pixel
Prozent
em
h1
32px
h1
200 %
h1
2em
h2
24px
h2
150 %
h2
1.5em
h3
18px
h3
112.5 %
h3
1.125em
body
16px
body
100 %
body
1em
14
Schrifteigenschaften | Schriftgröße
1. CSS-Regel für den body:
font-size: small
2. CSS-Regel für h1:
font-size: 1.5em
15
Schrifteigenschaften | Fettschrift
font-weight
Werte:
normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 |
700 | 800 | 900 | inherit
Standard:
normal
Gilt für:
Textelemente
Vererbung: ja
16
Schrifteigenschaften | Fettschrift
CSS-Regel für dt-Elemente:
font-weight: bold;
17
Schrifteigenschaften | Kursive
font-style
Werte:
normal | italic | oblique | inherit
Standard:
normal
Gilt für:
Textelemente
Vererbung: ja
18
Schrifteigenschaften | Kursive
CSS-Regel für strong-Elemente:
font-style: italic
19
Schrifteigenschaften | Kapitälchen
font-variant
Werte:
normal | small-caps | inherit Standard:
normal
Gilt für:
Textelemente
Vererbung: ja
20
Schrifteigenschaften | Kapitälchen
CSS-Regel für h1-Elemente:
font-variant: small-caps
21
Schrifteigenschaften | Kurzschreibweise
font
Werte:
font-style font-weight font-variant font-size/line-height font-family
Standard:
hängt vom Standardwert der einzelnen Eigenschaften ab
Gilt für:
Textelemente
Vererbung: ja
=> Kurzschreibweise für alle bisher bekannten Schrifteigenschaften!
22
Schrifteigenschaften | Kurzschreibweise
p { font: style weight variant size/line-height font-family }
=> min. font-size & font-family in dieser Reihenfolge
p { font: 1em sans-serif;}
23
Schrifteigenschaften | Kurzschreibweise
p { font: style weight variant size/line-height font-family; }
=> min. font-size & font-family in dieser Reihenfolge
p { font: 1em sans-serif;}
h3 { font: oblique bold small-caps 1.5em/1.8em Verdana, Arial,
sans-serif; }
24
Schrifteigenschaften | Kurzschreibweise
CSS-Regel für h2-Elemente:
font: bold 1.2em Georgia, serif
25