Einbinden von CSS
Werbung
Einbinden von CSS-Dateien
Die folgenden Beispiele sollen verdeutlichen, wie eine
CSS-Datei mit einem HTML-Dokument verbunden wird.
Im grauen Kasten ist der Quelltext zu sehen, und mit
einem Klick auf den Link unterhalb des Kastens öffnet
sich das Beispiel dazu in einem neuen Fenster, in
welchem die Ausgabe des entsprechendes Beispiels
stattfindet.
Beispiel 1: Eine HTML-Datei ohne CSS
Die Überschrift <h1> und der Absatz <p> werden mit
den Standarteinstellungen angezeigt.
1 <html>
2 <head>
3 <title>CSS Einbinden</title>
4 </head>
5 <body>
6
7 <h1>Überschrift</h1>
8
9
<p>Hier steht der eigentlich Text.</p>
10
11 </body>
12 </html>
Beispiel 2: Eine HTML-Datei mit Formatierungen
Bei diesem Beispiel wird mit
<span style="font-size:3.3em;
color:#990033">Überschrift</span>
der Überschrift ein Layout gegeben. Es wird angegeben,
wie gross sie sein soll, und in welcher Farbe der Text
dargestellt werden soll.
1 <html>
2 <head>
3 <title>CSS Einbinden</title>
4 </head>
5 <body>
6
7 <span style="fontsize:3.3em; color:#990033">Überschrift
</span>
8
9
<p>Hier steht der eigentliche Text.</p
>
10
11 </body>
12 </html>
Beispiel 3: Eine HTML-Datei mit integriertem CSS
Mit dem Tag <style type="text/css"></style> werden die
Formatierunge der Überschriften im HTML-Dokument
beschrieben. Alle Überschriften haben dieselbe Farbe
(color:#990033), aber unterschiedliche Grössen (fontsize). Der Vorteil dieser Art der Einbindung ist, dass es es
relativ einfach geht, und man CSS-Eigenschaften in der
HTML-Seite selber aufgelistet hat. Das geht aber nicht,
wenn eine Homepage aus mehreren Seiten besteht, da in
diesem Fall in jeder Datei die Eigenschaften angepasst
werden müssten.
1 <html>
2 <head>
3 <title>CSS-Einbinden</title>
4
5 <style type="text/css">
6 h1,h2,h3{color:#990033;}
7 h1{font-size:3.3em;}
8 h2{font-size:2em;}
9 </style>
10
11 </head>
12 <body>
13
14 <h1>Überschrift</h1>
15 <h2>zweite Überschrift</h2>
16
<p>Hier steht der eigentliche Text.</p
>
17
18 </body>
19 </html>
Beispiel 4: Eine HTML-Datei mit CSS-Verknüfpung
1 <html>
2 <head>
3 <title>Grundgerüst einer HTMLDatei</title>
4
<link rel="stylesheet" type="text/css"
href="css/bsp/style_einb04.css">
5 </head>
6 <body>
7
8 <h1>Überschrift 1</h1>
9 <h2>Überschrift 2</h2>
10 <h3>Überschrift 3</h3>
11
12
<p>Hier steht der eigentliche Text.</p
>
13
14 </body>
15 </html>
Im Beispiel 4 wird mit
<link rel="stylesheet" type="text/css"
href="css/bsp/style.css">
eine CSS-Datei aufgerufen, in welcher Informationen,
wie Schriftart, -höhe, -farbe, und weitere Informationen
gespeichert sind. Dies ist eine ganz normale Textdatei,
welche mit jedem Texteditor erstellt werden kann.
Die Datei style_einb04.css enthält folgende Zeilen:
body{ font: normal 12px
Arial,Helfetica,sans-serif;
background-color:#FFFF00; }
h1,h2,h3{color:#990033;}
h1{font-size:3.3em;}
h2{font-size:2em;}
h3{font-size:1em;}
Der erste Teil definiert allgemeingültige Formatierungen.
Der zweite Teil definiet die Farben für die Links auf der
Homepage und der dritte Teil die Farbe, wie auch die
Grösse für die verschiedenen Überschriften h1, h2 und
h3. Wobei die Farbe für alle Überschriften gleich ist.
Um eine Homepage zu gestalten, welche ein
einheitliches Layout aufweist, ist es von Vorteil diese
vierte Variante zu verwenden, da wir die
Eigenschaften nur an einem Ort abspeichern müssen.
Für die Erklärungen und Beispiele auf dieser
Homepage wird jedoch vorwiegend die zweite
Variante verwendet, da die Beispiele nur eine Seite
gross sind. Die
Formate in der CSS-Datei definieren
Diese Seite sollte kurz erklären, wie die gewünschten
Formatierungen in der zentralen CSS-Datei aufgelistet
werden müssen.
allgemeine Formatzuweisung
Beispiel aus einer CSS-Datei:
h1 { color:#0000FF; font-size:24pt;}
Die eigentliche Definition zum entsprechenden Selektor
ist zwischen den geschweiften Klammern. Wobei man
eine oder mehrere Definitionen so zuordnen kann. "color"
und "font-size" sind zwei Eigenschaften von unsern
Selektor, denen wir in unserer Definition Werte
zuordnen. Mit unserer Definition werden alle
Überschriften dunkelrot. Die Zahlen 3.3 und 2 auf den
Zeilen 7 und 8 geben die Schriftgrösse an gegenuger der
Standardschriftgrösse.
1 <html>
2 <head>
3
<title>Schriftformat definieren</title
>
4
5 <style type="text/css">
6 h1,h2,h3{color:#990033;}
7 h1{font-size:3.3em;}
8 h2{font-size:2em;}
9 h3{font-size:1em;}
10
11 a:link{color:#009999;
12
text-decoration: none;}
13 a:visited{color:#009999;
14
text-decoration: none;}
15 a:hover{color:#990033;
16
text-decoration: underline;}
17 a:active{color:#990033;
18
text-decoration: underline}
19
20 </style>
21
22 </head>
23 <body>
24
25 <h1>Überschrift</h1>
26 <h2>zweite Überschrift</h2>
27 <h3>dritte Überschrift</h3>
28
29
<p>Hier steht der eigentliche Text.</p
>
30 <p></p>
31
<p><a href="http://www.phbern.ch">Link
zu PHBern</a></p>
32
33
34 </body>
35 </html>
Border Gestaltung von Rahmen
text
1 <html>
2 <head>
3
4 <style type="text/css">
5
6 #feld{
7 border-width: 1px;
8 border-style: dashed;
9 border-color: #000000;
10
11 background-color:#DDDDDD;
12 width: 200px;
13 height: 100px;
14 }
15
16 </style>
17
18 </head>
19 <body>
20
21
<div id="feld">Inhalt des Feldes</div>
22
23 </body>
24 </html>
Beispiel zeigen
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<html>
<head>
<style type="text/css">
h1{
border-width: 1px;
border-style: solid;
border-color: blue;
text-align: center;
}
</style>
</head>
<body>
<h1>Titel</h1>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<html>
<head>
<style type="text/css">
h1{
border-top: 10px solid blue;
border-bottom: 2px solid red;
border-left: 5px solid black;
border-right: 5px solid black;
text-align: center;
}
</style>
</head>
<body>
<h1>Titel</h1>
</body>
</html>
Aufgabe 3
Positionierung – tabellen und frameloses Layout
Elemente auf einer Webseiten können ohne Frames und
Tabellen nur mittels CSS positioniert werden. Die
Positionierung wird so flexibler, der Programmcode stark
vereinfacht und Inhalt und Layout können völlig getrennt
werden. Webseiten, die das Design nur mittels CSS
festlegen, können ohne grossen Aufwand völlig neu
gestaltet werden, ohne dass alle Inhalt-Seiten angepasst
werden müssen.
Ein Beispiel hierfür ist die Seite www.csszengarden.com.
Im Menü "select a design" kann ein CSS für die
Darstellung der Seite ausgewählt werden. Diese CSSDateien wurden von Grafikern erstellt. Die Beispiele
zeigen sehr eindrücklich wie eine Seite nur mittels CSS
anpepasst und völlig neu gestaltet werden kann.
Position und Grösse eines Bereiches definieren
Die Position eines
Bildschirmbereiches
wird in der Regel
durch den Abstand
von Oben (top) und
den Abstand von
links (left) definiert.
Die Grösse wird
durch die Breite und
Höhe definiert.
Alle Masse können
absolut (in px) oder
in % angegeben
werden. Bei der
Angabe in % werden
die Masse der
Browserfenstergrösse
angepasst. Die height
wir häufig auf auto
gesetzt, dabei passt
sich die Höhe eines
Boxes dem Inhalt
(z.B. Anzahl der
Zeilen) an. Wenn die
Höhe grösser als das
Browserfenster ist,
wird automatisch
eine vertikale
Scrolleiste agezeigt.
Mit Padding wird der
Abstand des
Boxinhalts zum Rand
definiert.
Im Beispiel 1 werden zwei Bildschirmbereiche definiert:
1 <html>
2 <head>
3
4 <style type="text/css">
5 body {
6
font : normal 11px Verdana,Arial,Helfe
tica,sans-serif;
7 height: 80%;
8 margin: 0px 0px;
9 }
10
11 h1 {
12 font-size : 1.6em;
13 font-weight: bold;
14 letter-spacing:3px;
15 color: #FF0000;
16 }
17
18 #box1{
19 background-color:#E0E0E0;
20 height: auto;
21 width: 20%;
22 top: 90px;
23 left: 5%;
24 padding: 10px 15px 10px 15px;
25 position: absolute;
26 }
27
28 #box2{
29 background-color:#CCCCCC;
30 height: auto;
31 width: 50%;
32 top: 90px;
33 left: 30%;
34 padding: 10px 15px 10px 15px;
35 position: absolute;
36 }
37 </style>
38
39 </head>
40 <body>
41 <div id="box1">
42
<h1>Box 1</h1>
43
<p>normaler Text</p>
44
<p>normaler Text</p>
45
</div>
46
47 <div id="box2">
48
<h1>Box2 </h1>
49
<p>normaler Text</p>
50
<p>normaler Text</p>
51
<p>normaler Text</p>
52
<p>normaler Text</p>
53
<p>&nbsp;</p>
54
<p>&nbsp;</p>
55
<p>&nbsp;</p>
56
<p>&nbsp;</p>
57
<p>&nbsp;</p>
58
59 </div>
60 </body>
61 </html>
29 </body>
30 </html>
Eingemittete Box
1 /*positionierung3.css*/
2 body {
3
font : normal 11px Verdana,Arial,Helfe
tica,sans-serif;
4 min-width: 780px;
5 height: 80%;
6 margin: 0px 0px;
7 }
8
9 #kopf {
10 background-color:#CCCCCC;
11 padding: 5px 5px 5px 15px;
12 font-size : 1.1em;
13 height: 85px
14 position: absolute;
15 width: 100%;
16 }
17
18 #inhalt_links{
19 background-color:#E0E0E0;
20 height: auto;
21 width: 18%;
22 top: 90px;
23 left: 10px;
24 padding: 10px 15px 10px 15px;
25 position: absolute;
26 }
27
28 #inhalt_mitte {
29
height: 85%;
30
width: 75%;
31
padding: 10px 15px 10px 15px;
32
position: absolute;
33
bottom: 145px;
34
top:89px;
35
left: 22%;
36
right: 10px;
37
border: 1px dotted #90909B;
38
overflow: auto;
39
overflow-x: hidden;
40 }
41
42 h1 {
43 font-size : 1.6em;
44 font-weight: bold;
45 letter-spacing:3px;
46 color: #FF0000;
47 line-height: 1.5;
48 margin: 3px 2px 5px 0px;
49 }
50
Im Beispiel 2 wird ein Bereich mit einer festen Breite von
400 Pixeln und einer Höhe von 300 Pixeln definiert. Vom
Seitenrand hat der Bereich einen relativen Abstand,
welcher der Browser selbst festlegt (auto). Der Bereich
ändert nun also je nach Browserfenstergrösse die Höhe,
hat aber eine feste Breite und ist in der horizontalen
Achse zentriert. Die horizontale Zentrierung ist aber nicht
ganz einfach. Normal kann man das mit der Angabe
margin:auto; machen, indem man diese Angabe dem zu
zentrierenden <div> Bereich zuweist, das Problem, der
Internet Explorer versteht das nicht und setzt den Bereich
nach links.
Um das Problem zu lösen, bringt man den IE (gilt nur für
6er Version) in den "standards-compliant mode" indem
man den entsprechenden Doctype angibt:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.0 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
Beispiel 2 :
1 <!DOCTYPE HTML PUBLIC "//W3C//DTD HTML 4.0 Transitional//EN"
2
"http://www.w3.org/TR/html4/loose.dtd"
>
3 <html>
4
5 <head>
6
7 <style type="text/css">
8 #box1{
9 position: relative;
10 margin: auto;
11
12 width: 400px;
13 height: 300px;
14
15 background-color:#fe9;
16 border: 4px solid #fe4;
17
18 color:#111;
19 }
20 </style>
21
22 </head>
23 <body>
24
25 <div id="box1">
26
<p>Dies ist eine eingemittete Box...
</p>
27 </div>
28
Eine komplette Webseite
Beispiel 3: Positionierung der Webseite-Elemente "kopf",
"inhalt_links" und "inhalt_mitte"
Programmcode der CSS-Datei:
Programmcode der HTML-Datei:
1 <html>
2 <head>
3
<link rel="stylesheet" type="text/css"
href="css/bsp/positionierung3.css">
4 </head>
5 <body>
6 <div id="kopf">
7
<h1>Kopf</h1>
8 </div>
9 <div id="inhalt_links">
10
<p>Inhalt links</p>
11 </div>
12 <div id="inhalt_mitte">
13
<p>Inhalt mitte. </p>
14 </div>
15 </body>
16 </html>
Beispiel 4: Eine Komplette Webseite mit weiteren CSSFormatierungen:
1 <!DOCTYPE HTML PUBLIC "//W3C//DTD HTML 4.0 Transitional//EN"
2
"http://www.w3.org/TR/html4/loose.dtd"
>
3 <html>
4
5 <head>
6
7 <style type="text/css">
8 /* CSS Document */
9
html, body, div, p, h1, h2, h3, li, ul
,
10 span, a, table, td, form, img {
11
margin: 0px;
12
padding: 0px;
13 }
14
15 body {
16
font-size: 12px;
17
fontfamily: Verdana, Arial, SunSansRegular, Sans-Serif;
18
color:#000000;
19
text-align:center;
20 }
21
22
/*************************************
*************/
23 /* accessiblity */
24 #accessibility {
25
margin: 0;
26
position: fixed;
27
top: 5px;
28
left: -1000px;
29
}
30
31
#accessibility a:focus, #accessibility
a:hover, #accessibility a:active {
32
margin: 0;
33
padding: 0 10px;
34
position: absolute;
35
top: 0;
36
left: 1020px;
37
width: 15em;
38
display: block;
39
40
41
color: #000;
background: #fff;
font: 85%/1.5em verdana,arial,helv
etica,sans-serif;
42
border: 1px solid #fff;
43
z-index: 3;
44
}
45
46 #accessibility a:hover {
47
text-decoration: none;
48
}
49
50
51
/*************************************
*************/
52
/* Positionierung der verschiedenen D
iv-Elementen*/
53
/*************************************
*************/
54
55 #box {
56 width:780px;
57 margin: 0px auto;
58 padding:0px;
59 text-align:left;
60 }
61
62
/*************************************
*************/
63 /* Kopf */
64 #kopf {
65 background-color:#FF0000;
66 padding:5px;
67 }
68
69
/*************************************
*************/
70 /* 1. Spalte */
71 /*allgemeine CSSDefinitionen für die ganze erste Spalt
e*/
72 #spalte1 {
73 width:auto;
74 float: left;
75 }
76
77
78
/*Definitionen für die einzelnen Modul
e der Spalte*/
79 #spalte1_1,#spalte1_2,#spalte1_3 {
80 width:175px;
81 padding:10px 5px;
82 background-color:#FFFF00;
83 border-top:1px solid white;
84 }
85
86
87
/*************************************
*************/
88 /* 2. Spalte */
89 #spalte2 {
90 width:400px;
91 padding:10px 5px;
92 float:left;
93 background-color:#0000FF;
94 border-top:1px solid white;
95 }
96
97
98
/*************************************
*************/
99 /* 3. Spalte */
100 #spalte3 {
101 width:175px;
102 padding:10px 5px;
103 float:left;
104 overflow:hidden;
105 background-color:#00FFFF;
106 border-top:1px solid white;
107 }
108 </style>
109
110 </head>
111
112 <body>
113 <p id="accessibility">
114
<a tabindex="1" href="#spalte2">Direkt
zum Inhalt</a> |
115
<a tabindex="2" href="#spalte1_1">Dire
kt zur Navigation</a> |
116 </p>
117
118 <div id="box">
119
120
<div id="kopf">
121
<h1>Kopf</h1>
122
</div>
123
124
<div id=spalte1>
125
<div id="spalte1_1">
126
<h1>Spalte 1, Modul 1</h1>
127
<p>
128
<a target="_blank" href="h
ttp://www.google.ch">www.google.ch</a>
129
<a target="_blank" href="h
ttp://www.phbern.ch">www.phbern.ch</a>
130
</p>
131
</div>
132
<div id="spalte1_2" >
133
<h1>Spalte 1, Modul 2</h1>
134
</div>
135
<div id="spalte1_3" >
136
<h1>Spalte 1, Modul 2</h1>
137
138
139
140
141
142
143
144
</div>
</div>
<div id="spalte2" tabindex="5">
<h2>Spalte2</h2>
<p>Dies ist der Inhalt.</p>
</div>
145
146
<div id="spalte3" tabindex="6">
147
<h2>Spalte3</h2>
148
</div>
149
150 </div>
151
152 </body>
153 </html>
Verwandeln Sie die angezeigte Box in eine Box, welche
rechtsbündig (verwenden Sie den Befehl position:
absolute), 200px breit und 600px hoch ist. Der
Hintergrund der Seite neben der Box soll grau sein. Die
Box selbst soll einen roten Rahmen erhalten.
Entscheiden Sie sich für eine Textfarbe und zwei
verschiedene Farben für die Webseite. Färben Sie die
Webseite ein. Die Linke und die rechte Spalte der
Webseite sollen nur noch 150px breit sein. Passen Sie
hierzu die gesamte Webseite an.
Gestalten von Formularfelder
Folgende Beispiele funktionieren leider nur
unbefriedigend im Internet Explorer:-( Sie
entsprechen aber alle dem Cascading Style Sheets, level 2
Standard! Browser der Mozilla Familie (Mozilla,
Netscape, Camino, ect.) unterstützen alle diesen
Standard.
1
2
3
4
5
6
7
8
<html>
<head>
<style type="text/css">
input {
font: normal 16px Comic Sans MS,Ar
ial,Helfetica,sans-serif;
9
color: black;
10
border: 1px solid blue;
11
background-color: #CCC;
12 }
13
14 input:focus {
15
background-color: #99CCCC;
16
color: red;
17 }
18 </style>
19
20 </head>
21
22 <body>
23
<form name="form1" method="post" actio
n="">
24 <table>
25 <tr>
26
<td>Name:</td><td><input type="tex
t" name="textfield"></td>
27 </tr>
28 <tr>
29
<td>Vorname:</td><td><input type="
text" name="textfield"></td>
30 </tr>
31 <tr>
32
<td>email:</td><td><input type="te
xt" name="textfield"></td>
33 </tr>
34 </table>
35 </form>
36 </body>
37 </html>
1
2
3
4
5
6
7
<html>
<head>
<style type="text/css">
textarea, input {
font: normal 16px Comic Sans MS,Ar
ial,Helfetica,sans-serif;
8
color: #000;
9
border: 1px solid #FF6600;
10
background-color: #FFF;
11 }
12
13 textarea:focus, input:focus {
14
background-color: FF9900;
15
color: #FFF;
16 }
17
18 input.button {
19 color: #000;
20 background-color: FF6600;
21 border-color: FF6600;
22 border-style: outset;
23 margin: 2em 0em 0em 0em;
24 padding: 0em 0.5em 0em 0.5em;
25 border-width: 2;
26 }
27
28 input.button:hover {
29
background-color: FF9900;
30 }
31
32 input.button:active {
33 border-style: inset;
34 }
35 </style>
36
37 </head>
38
39 <body>
40
<form name="form1" method="post" actio
n="">
41 <table>
42 <tr>
43
<td>Name:</td><td><input type="tex
t" name="name"></td>
44 </tr>
45 <tr>
46
<td>Vorname:</td><td><input type="
text" name="vorname"></td>
47 </tr>
48 <tr>
49
<td>email:</td><td><input type="te
xt" name="email"></td>
50 </tr>
51 <tr>
52
<td>Kommentar:</td><td><textarea n
ame="Kommentar"></textarea></td>
53 </tr>
54 <tr>
55
<td>&nbsp;</td><td><input class="b
utton" type="submit" name="Submit" val
ue="Abschicken"></td>
56 </tr>
57 </table>
58 </form>
59 </body>
60 </html>
Aufzählungslisten
Auch für Listen gibt es CSS-Definitionen. Eine
unformartierte Liste sieht folgendermassen aus:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<html>
<head>
</head>
<body>
<ul>
<li>Text
<li>Text
<li>Text
<li>Text
<li>Text
</ul>
1</li>
2</li>
3</li>
4</li>
5</li>
</body>
</html>
Aufzählungsliste mit kleinen Quadraten
Mittels CSS können die Listenelemente angepasst
werden. Beispielsweise kann man die Listen mit kleinen
Quadraten statt mir runden Kreisen beginnen lassen.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<html>
<head>
<style type="text/css">
ul { list-style-type: square; }
</style>
</head>
<body>
<ul>
<li>Text
<li>Text
<li>Text
<li>Text
<li>Text
</ul>
</body>
1</li>
2</li>
3</li>
4</li>
5</li>
18
19 </html>
20
21
H8 {font-size : 1em;}
CSS richtig schreiben
P {font-family :
So manche Style-Definition will auf Anhieb nicht
funktionieren, Schuld sind nicht selten versteckte
Syntaxprobleme. Vor Überraschungen gefeit ist man
nur, wenn man mit den Zeichen und Bezeichnungen
richtig umgehen kann.
und ähnliche Konstruktionen.
Diese Definitionen wird ein Browser ignorieren. Das gilt
auch für:
garamond;}
Wie strukturiere ich eine CSS Datei?
1. Der Anfang der CSS Datei
CSS ist "case insensitiv", das heisst Gross- und
Kleinschreibung werden nicht unterschieden.
b {font-size : 1em;} und
B {font-size : 1em;}
können geschrieben werden. Ähnliches gilt für eigene
Klassen:
.oben {font-size : 1em;} und
.Oben {font-size : 1em;} und
.OBEN {font-size : 1em;}
sind das selbe.
Zahlen und Sonderzeichen sind hier jedoch nicht
erlaubt. Mancher Browser mag sich vielleicht nicht daran
stören, ein anderer aber wohl. Vermeiden Sie
Definitionen wie:
.1 {font-size : 1em;}
._ {font-size : 1em;}
.überschrift {font-size : 1em;}
Die Grundlage dafür ist etwas komplizierter. Erlaubt nach
CSS2 sind A-Za-z0-9 und die ISO 10646 Zeichen 161
und höher sowie das Zeichen "-" mit dem eine Klasse
jedoch nicht beginnen darf. Besser also man beschränkt
sich auf das Alphabet.
Mancher ist von HTML noch den Gebrauch des
Anführungszeichen gewohnt, dies ist hier nicht zulässig.
Mit zwei Kommentarzeilen beginnen, die globale
Informationen enthalten.
/* Standard-CSS für www.meinProjekt.ch
*/
/* Wichtige Farben
Dunkelgrün = #007A00
Grün =
#009400
*/
In der 1. Kommentarzeile notiert man die Funktion der
CSS Datei (Standard-CSS, Druck-CSS,...) + die jeweilige
Projektadresse. In der Zeile zwei notiert man sich
wichtige Farben, die ich auf diese Weise schnell und
leicht wieder finde.
2. Abstände aller Elemente werden auf Null gesetzt +
weitere Formatierungen
html, body, div, p, h1, h2, h3, ul,
ol,
span, a, table, td, form, img, li {
margin: 0;
padding: 0;
font-family: Verdana, Geneva,
Arial, Helvetica, sans-serif;
}
Alle Innen- und Aussenabstände werden auf null gesetzt.
Damit ist die Arbeit übersichtlicher und man hat mehr
Kontrolle die Abstände, da diese jetzt einzeln gesetzt
werden müssen.
B {font-size : "1em";}
Klammern müssen immer Paarweise erscheinen. Das
gilt für ( und { und [ sowie für " und '.
Weiters gibt man auch hier meist eine Schrift für alle
Elemente an und spart sich Zeit und Code.
3. HTML und Body werden mit CSS versorgt
Leerzeichen produzieren keine Fehler. Dieses Beispiel
funktioniert:
B {font-size :
1em ;}
Falschschreibungen sollten dazu führen, dass nichts
ausgeführt wird. Beispielsweise:
K {font-size : 1em;}
oder
html, body {
background: #fff url(body_bg.gif)
no-repeat;
font-size: 101%;
}
Ein Tipp: Verwenden Sie bei Grafiken immer ein
gewissen Schema. CSS Hintergrundbilder enden meist
bei mir mit "_bg" + Dateiendung. Wird es im Body
eingebaut "body_bg", wird es zum Beispiel in der
Navigation eingebaut "navi_bg". "font-size: 101%;" hilft
bei relativen Schriftgrößenproblemen.
4. Allgemein gültige Formatierungen werden gesetzt
Erklärung:
a:link {
color: #666;
text-decoration: underline;
}
Hier finden sich Formatierungen, die keinem speziellen
Bereich oder einer Sektion zugeteilt sind. Das sind
Klassen, die man sicher zu einem späteren Zeitpunkt
benötigt (zum Beispiel".center"). Auch dies spart Zeit.
a:visited {
color: #333;
text-decoration: underline;
}
a:hover {
color: #f60;
text-decoration: underline;
}
a:active {
color: #f60;
text-decoration: underline;
}
strong {
font-weight: bold;
}
.c {
clear: both;
}
.center {
text-align: center;
}
img {
border: 0;
}
.klein {
font-size: 0.7em;
}
5. Sektionsweite Formatieren kommen zum Schluss
/* Header */
#header {
border: 1px solid #fff;
}
#header p {
font-size: 0.8em;
}
/* ENDE Header */
/* Navi */
#navi {
border: 1px solid #fff;
}
#navi a {
text-decoration: none;
}
/* ENDE Navi */
Sortiert sind alle Sektionen nach Ihrem visuellen
Auftreten auf der Seite (zum Beispiel Kopf > Navi > Text
> Fusszeile). Jede Sektion beginnt und endet mit einer
Kommentarzeile - auch das schafft Übersicht. Hacks und
besondere Codeschnipselwerden kommentiert. Das spart
Zeit und Nerven, man vergisst Gründe für diesen oder
jene Vorgehensweise. Ein wichtiger weiterer Grund, man
hat das Problem schon bewältigt und kann es schnell
nachschlagen.
.right {
text-align: right;
}
Behalten Sie Ihr einmal gewähltes Schema bei jedem
neuen Projekt. CSS Dateien ändern sich auch strukturell
immer wieder in kleinen Schritten, das grobe Schema
jedoch bleibt meistens erhalten..
.top {
vertical-align: top;
}
Wie strukturiere ich eine CSS Datei?
h1 {
font-size: 1.0em;
color: #f60;
margin: 20px 60px 10px 240px;
border-bottom: 1px solid #fff;
}
h2 {
font-size: 0.8em;
color: #f60;
margin: 15px 60px -5px 240px;
}
p, ul {
font-size: 0.75em;
line-height: 1.5em;
color: #666;
margin: 10px 60px 10px 240px;
}
1. Der Anfang der CSS Datei
Mit zwei Kommentarzeilen beginnen, die globale
Informationen enthalten.
/* Standard-CSS für www.meinProjekt.ch
*/
/* Wichtige Farben
Dunkelgrün = #007A00
Grün =
#009400
*/
In der 1. Kommentarzeile notiert man die Funktion der
CSS Datei (Standard-CSS, Druck-CSS,...) + die jeweilige
Projektadresse. In der Zeile zwei notiert man sich
wichtige Farben, die ich auf diese Weise schnell und
leicht wieder finde.
2. Abstände aller Elemente werden auf Null gesetzt +
weitere Formatierungen
html, body, div, p, h1, h2, h3, ul,
ol,
span, a, table, td, form, img, li {
margin: 0;
padding: 0;
font-family: Verdana, Geneva,
Arial, Helvetica, sans-serif;
}
Alle Innen- und Aussenabstände werden auf null gesetzt.
Damit ist die Arbeit übersichtlicher und man hat mehr
Kontrolle die Abstände, da diese jetzt einzeln gesetzt
werden müssen.
Weiters gibt man auch hier meist eine Schrift für alle
Elemente an und spart sich Zeit und Code.
3. HTML und Body werden mit CSS versorgt
html, body {
background: #fff url(body_bg.gif)
no-repeat;
font-size: 101%;
}
Ein Tipp: Verwenden Sie bei Grafiken immer ein
gewissen Schema. CSS Hintergrundbilder enden meist
bei mir mit "_bg" + Dateiendung. Wird es im Body
eingebaut "body_bg", wird es zum Beispiel in der
Navigation eingebaut "navi_bg". "font-size: 101%;" hilft
bei relativen Schriftgrößenproblemen.
text-align: center;
}
img {
border: 0;
}
.klein {
font-size: 0.7em;
}
.right {
text-align: right;
}
.top {
vertical-align: top;
}
h1 {
font-size: 1.0em;
color: #f60;
margin: 20px 60px 10px 240px;
border-bottom: 1px solid #fff;
}
h2 {
font-size: 0.8em;
color: #f60;
margin: 15px 60px -5px 240px;
}
p, ul {
font-size: 0.75em;
line-height: 1.5em;
color: #666;
margin: 10px 60px 10px 240px;
}
4. Allgemein gültige Formatierungen werden gesetzt
a:link {
color: #666;
text-decoration: underline;
}
a:visited {
color: #333;
text-decoration: underline;
}
a:hover {
color: #f60;
text-decoration: underline;
}
a:active {
color: #f60;
text-decoration: underline;
}
strong {
font-weight: bold;
}
.c {
clear: both;
}
.center {
Erklärung:
Hier finden sich Formatierungen, die keinem speziellen
Bereich oder einer Sektion zugeteilt sind. Das sind
Klassen, die man sicher zu einem späteren Zeitpunkt
benötigt (zum Beispiel".center"). Auch dies spart Zeit.
5. Sektionsweite Formatieren kommen zum Schluss
/* Header */
#header {
border: 1px solid #fff;
}
#header p {
font-size: 0.8em;
}
/* ENDE Header */
/* Navi */
#navi {
border: 1px solid #fff;
}
#navi a {
text-decoration: none;
}
/* ENDE Navi */
Sortiert sind alle Sektionen nach Ihrem visuellen
Auftreten auf der Seite (zum Beispiel Kopf > Navi > Text
> Fusszeile). Jede Sektion beginnt und endet mit einer
Kommentarzeile - auch das schafft Übersicht. Hacks und
besondere Codeschnipselwerden kommentiert. Das spart
Zeit und Nerven, man vergisst Gründe für diesen oder
jene Vorgehensweise. Ein wichtiger weiterer Grund, man
hat das Problem schon bewältigt und kann es schnell
nachschlagen.
Behalten Sie Ihr einmal gewähltes Schema bei jedem
neuen Projekt. CSS Dateien ändern sich auch strukturell
immer wieder in kleinen Schritten, das grobe Schema
jedoch bleibt meistens erhalten..
Übersicht CSS-Befehle
margin-right
margin-top
padding
padding-bottom
padding-left
padding-right
padding-top
Schriftfonts
font
font-family
font-size
font-size-adjust
font-stretch
Hintergrund und Farbe
background
backgroundattachment
background-color
background-image
background-position
background-repeat
color
Rahmen
border
border-bottom
border-bottom-color
border-bottom-style
border-bottom-width
border-color
border-left
border-left-color
border-left-style
border-left-width
border-right
border-right-color
border-right-style
border-right-width
border-style
border-top
border-top-color
border-top-style
border-top-width
border-width
Abstände
margin
margin-bottom
margin-left
font-style
Hintergrund
font-variant
Hintergrundgrafik feststellen oder rollbar
font-weight
machen
Hintergrundfarbe
Hintergrundbild
Listen
Position eines Hintergrundbildes
list-style
Wiederholung eines Hintergrundbildes
list-style-image
Farbe
list-style-position
list-style-type
marker-offset
Rahmen
Rahmen unten
Rahmenfarbe unten
Art des Rahmens
Rahmenbreite unten
Rahmenfarbe
Rahmen links
Rahmenfarbe links
Rahmenart links
Rahmenbreite links
Rahmen rechts
Rahmenfarbe rechts
Rahmenart rechts
Rahmenbreite rechts
Rahmenart
Rahmen oben
Rahmenfarbe oben
Rahmenart oben
Rahmenbreite oben
Rahmenbreite
Abstand
Abstand nach unten
Abstand nach links
Druckausgabe
marks
orphans
page
page-break-after, pagebreak-before
page-break-inside
size
widows
Abstand nach rechts
Abstand nach oben
Randabstand
Abstand nach unten
Abstand nach links
Abstand nach rechts
Abstand nach oben
Schrift
Schriftart
Schriftgröße
Schriftgröße anpassen
noch nicht Verwendbar
Schriftbreite
noch nicht Verwendbar
Schriftstil
Buchstabenart
Schriftdicke
Listenart
Bild als Listenzeichen
Position des Listenzeichens
Listentyp
Abstand zum Listensymbol
Schnittmarkierungen
verhindert Seitenumbrüche im Fließtext
Seite einrichten
Seitenumbruch vor, nach Elementen
Seitenumbruch innerhalb von Elementen
legt Seitengröße fest
verhindert Seitenumbrüche im Fließtext
Eingebettete Inhalte und
automatische
Nummerierung
content
counter-increment
counter-reset
marker-offset
quotes
Inhalte erzeugen
Zähler inkrementieren
Zähler reset
Abstand zum Listensymbol
Anführungszeichen
Positionierung
bottom
left
right
Abstand nach unten
Abstand nach links
Abstand nach rechts
top
direction
display
float
position
unicode-bidi
clear
height, width
max-height, max-width
min-height, min-width
clip
overflow
visibility
z-index
Pseudoformate
:active, :link , :visited
,:hover; :focus
:first-line
:first-letter
:first-child
:before
:after
:lang
Abstand nach oben
Textrichtung
Anzeige
Text umfließen
Art der Positionierung
Textrichtung
Text umfließen beenden
Höhe, Breite
Max. Höhe, Breite
Min. Höhe, Breite
Ausschnitt
Überlauf
Unsichtbar
Überlappung
column-span, row-span
table-layout
Spalten, Zeilen
Tabellenstruktur
Textformation
text-shadow
text-transform
text-decoration
text-align
vertical-align
white-space
word-spacing
letter-spacing
line-height
text-indent
Schatten
Art der Buchstaben
Textverzierung
Textausrichtung
Vertikale Ausrichtung
Leerzeichen
Wortabstand
Abstand zwischen Buchstaben
Zeilenhöhe
Einrückung
Benutzeroberflächen
cursor
Die erste Zeile in einem Absatz,
outline
Eigenschaften
outline-color
Das erste Zeichen einer Zeile, Eigenschaften
outline-style
Das erste "Kind", Eigenschaften
outline-width
Inhalt einfügen
Inhalt einfügen
(css.talky.de, 8.9.04)
Sprache, Eigenschaften
Erscheinen von Links
Mauszeiger
outline
Outlinefarbe
Outlineart
Outlinedicke
Übungen
Sprachausgabe
azimuth
cue
cue-after, cue-before
elevation
pause
pause-after, pause-before
pitch
pitch-range
play-during
richness
speak
speak-header
speak-numeral
speak-punctuation
speech-rate
stress
voice-family
volume
Tabellen
border-collapse
border-spacing
caption-side
empty-cells
Folgende Übungen sollen mit einem Browser der Mozilla
Familie (mozilla, firefox, camino,...) gelöst werden.
Räumlicher Effekt horizontal
Klang vor und nach einem Element
Aufgabe 1 - Textfarbe
Klang vor, nach einem Element
Auf folgender Webseite steht im rechten Frame
Räumlicher Effekt vertikal
der Text "Versuche doch einmal diesen Text
Pause vor und nach einem Element
grün einzufärben" Schaue dir den Quelltext des
Frames an. Du wirst sehen, dass dieser Text
Pause vor, nach einem Element
innerhalb eines Absatzes steht - also
Stimmenlage
<p>Versuche doch einmal diesen Text grün
Stimmenumfang
einzufärben</p>. Färbe den Text mit Hilfe von
Hintergrundsound
CSS ein.
zur Aufgabe 1
Stimmengewalt
Aussprache
Aussprache von Tabellenköpfen
Aussprache von Zahlen
Aufgabe 2 - Linkfarbe
code , none
Bei dieser Aufgabe sollst du den Link
Sprechgeschwindigkeit
"Universität Bern" einfärben.
zur Aufgabe 2
Sprechhast
Aufgabe 3 - Rahmen / Box
Stimmentyp
Die folgende Box soll 400px breit und 200px
Lautstärke
hoch sein, Abstand vom linken rand 50px.
Rand massiv, Farbe rot. Hintergrundfarbe gelb.
Der Text im Rahmen soll zentriert sein.
zur Aufgabe 3
Aufgabe 4 - Formularfelder
Rahmenmodell
Die Formularfelder sollen alle einen hellgrauen
Rahmenabstand
Hintergrund und einen schwarzen gestrichelten
Position der Überschrift
Rand haben. Die Schriftart beim Ausfüllen der
Formularfelder soll Helfetica sein. Ebenfalls
Behandlung von leeren Zellen
der Submit-Button sollt dem Layout der
Formularfelder angepasst werden.
zur Aufgabe 4
Aufgabe 5 - Listen
Folgendes Beispiel zeigt eine Liste. Die
Listenelemente sollen in weisse Scheiben mit
schwarzer Umrandung umgewandelt werden.
zur Aufgabe 5
Aufgabe 6 - Positionierung
Verwandeln Sie die angezeigte Box in eine
Box, welche rechtsbündig (verwenden Sie den
Befehl position: absolute), 200px breit und
600px hoch ist. Der Hintergrund der Seite
neben der Box soll grau sein. Die Box selbst
soll einen roten Rahmen erhalten.
zur Aufgabe 6
Aufgabe 7 - Positionierung
Entscheiden Sie sich für eine Textfarbe und
zwei verschiedene Farben für die Webseite.
Färben Sie die Webseite ein. Die Linke und die
rechte Spalte der Webseite sollen nur noch
150px breit sein. Passen Sie hierzu die gesamte
Webseite an.
