1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
|
---
language: css
contributors:
- ["Mohammad Valipour", "https://github.com/mvalipour"]
translators:
- ["Kyr", "http://github.com/kyrami"]
lang: de-de
filename: learncss-de.css
---
In den frühen Tagen des Internets gab es keine visuellen Elemente, alles war nur reiner Text. Aber mit der Weiterentwicklung von Browsern wurden auch vollständig visuelle Webseiten zu einem Standard.
Durch Verwendung von CSS lässt sich eine strikte Trennung zwischen HTML-Code und Designelementen erreichen.
Kurzgefasst, CSS ermöglicht es, verschiedene HTML-Elemente innerhalb eines Dokuments auszuwählen und ihnen visuelle Eigenschaften zu geben.
CSS hat wie jede andere Sprache viele Versionen. Hier fokussieren wir uns auf CSS2.0, welche nicht die neueste, aber die am weitesten verbreitete und unterstützte Version ist.
**HINWEIS:** Weil die Ausgabe von CSS visuelle Eigenschaften sind, wirst du wahrscheinlich eine CSS-Sandbox wie [dabblet](http://dabblet.com/) benutzen müssen, um die Sprache richtig zu lernen.
In diesem Artikel wird am meisten auf generelle Hinweise und die Syntax geachtet.
```css
/* Kommentare werden in Sternchen-Schrägstrichkombinationen gepackt (genauso wie hier!) */
/* ####################
## SELEKTOREN
####################*/
/* Eigentlich ist das grundlegende CSS-Statement sehr simpel */
selektor { eigenschaft: wert; /* mehr eigenschaften...*/ }
/* Der Selektor wird dazu benutzt, ein Element auf der Seite auszuwählen.
Man kann aber auch alle Elemente auf einer Seite auswählen! */
* { color:red; } /* farbe:rot */
/*
Angenommen wir haben folgendes Element auf einer Seite:
<div class='eine-klasse klasse2' id='eineId' attr='wert' />
*/
/* kann man es so über seine Klasse auswählen */
.eine-klasse { }
/* oder über beide Klassen! */
.eine-klasse.klasse2 { }
/* oder über den Namen des Tags */
div { }
/* oder über seine Id */
#eineId { }
/* oder darüber, dass es ein Attribut hat! */
[attr] { font-size:smaller; }
/* oder auch darüber, dass das Attribut einen bestimmten Wert hat */
[attr='wert'] { font-size:smaller; }
/* beginnt mit dem übergebenen Wert */
[attr^='we'] { font-size:smaller; }
/* endet damit */
[attr$='rt'] { font-size:smaller; }
/* oder beinhaltet einen Teil davon */
[attr~='er'] { font-size:smaller; }
/* Noch wichtiger ist aber die Möglichkeit, all das miteinander kombinieren
zu können - man sollte hierbei nur mit der Leerzeichensetzung vorsichtig sein,
ein Leerzeichen macht es zu zwei verschiedenen Selektoren */
div.eine-klasse[attr$='rt'] { } /* so ist es richtig */
/* Man kann auch ein Element über seine Elternelemente auswählen */
/* > wählt ein direktes Kind aus */
div.ein-elternteil > .klassen-name {}
/* Mit einem Leerzeichen getrennt kann man alle Elternelemente ansprechen */
/* Das folgende heißt also, dass jedes Element mit der Klasse 'klassen-name'
und dem Elternteil IN JEDER TIEFE ausgewählt wird */
div.ein-elternteil .klassen-name {}
/* Achtung: das selbe ohne das Leerzeichen hat eine andere Bedeutung,
kannst du mir sagen, was? */
div.ein-elternteil.klassen-name {}
/* Man kann ein Element auch nach seinem direkten Nachbarelement
auswählen */
.ich-bin-vorher + .dieses-element { }
/* Oder über jedes Geschwisterelement davor */
.ich-kann-jeder-davor-sein ~ .dieses-element {}
/* Mit Pseudoklassen lassen sich Elemente anhand ihres momentanen Zustands
auf der Seite auswählen (anstatt über die Seitenstruktur) */
/* Zum Beispiel, wenn über ein Element mit dem Mauszeiger gefahren wird */
:hover {}
/* Oder einen bereits besuchten Link*/
:visited {}
/* Oder einen noch nicht besuchten Link*/
:link {}
/* Oder ein Eingabeelement, das zurzeit im Fokus steht */
:focus {}
/* ####################
## EIGENSCHAFTEN
####################*/
selector {
/* Einheiten */
width: 50%; /* in Prozent */
font-size: 2em; /* mal der derzeitigen Schriftgröße */
width: 200px; /* in Pixeln */
font-size: 20pt; /* in Punkten */
width: 5cm; /* in Zentimetern */
width: 50mm; /* in Millimetern */
width: 5in; /* in Zoll */
/* Farben */
background-color: #F6E /* in kurzem Hex */
background-color: #F262E2 /* in langem Hex */
background-color: tomato /* kann auch eine benannte Farbe sein */
background-color: rgb(255, 255, 255) /* in RGB */
background-color: rgb(10%, 20%, 50%) /* in RGB Prozent */
background-color: rgba(255, 0, 0, 0.3); /* in semi-transparentem RGB */
/* Bilder */
background-image: url(/pfad-zum-bild/image.jpg);
/* Schriften */
font-family: Arial;
font-family: "Courier New"; /* wenn der Name ein Leerzeichen beinhält, kommt er in
Anführungszeichen */
font-family: "Courier New", Trebuchet, Arial; /* wird die erste Schriftart
nicht gefunden, wird die zweite benutzt, usw. */
}
```
## Benutzung
Speichere das CSS, das du benutzen willst mit der endung '.css'.
```xml
<!-- du musst die CSS-Datei im <head>-bereich der seite einbinden -->
<link rel='stylesheet' type='text/css' href='filepath/filename.css' />
<!-- Einbindung funktioniert auch inline, wobei diese Methode nicht
empfohlen ist -->
<style>
selector { property:value; }
</style>
<!-- Oder direkt auf einem Element (sollte aber vermieden werden) -->
<div style='property:value;'>
</div>
```
## Spezifität
Ein Element kann natürlich auch von mehr als einer Regel in einem Stylesheet
angesprochen werdenm und kann eine Eigenschaft auch öfters als einmal zugewiesen
bekommen. In diesen Fällen gibt es Regeln, die die Spezifität von Selektoren regeln.
Wir haben dieses CSS:
```css
/*A*/
p.klasse1[attr='wert']
/*B*/
p.klasse1 {}
/*C*/
p.klasse2 {}
/*D*/
p {}
/*E*/
p { property: wert !important; }
```
und das folgende Markup:
```xml
<p style='/*F*/ property:value;' class='class1 class2' attr='value'>
</p>
```
Die Spezifität der Stile ist wie folgt:
(die Spezifität gilt nur für **einzelne Eigenschaften**, nicht für ganze Blöcke)
* `E` hat die größte Spezifität wegen dem Schlüsselwort `!important`.
man sollte diese Form aber vermeiden.
* `F` ist als nächstes dran, da es direkt an dem element definiert ist.
* Dann folgt `A`, da es "spezifischer" als alle anderen ist.
spezifischer = mehr Zuweisungen: 1 Tagname `p` +
Klassenname `klasse1` + 1 Attribut `attr='value'`
* `C` kommt als nächstes, obwohl es genau so ist wie `B`,
es erscheint aber später im Stylesheet.
* dann kommt `B`
* und als letztes `D`.
## Kompatibilität
Die meisten Features von CSS sind in allen Browsern verfügbar. Man sollte
jedoch immer darauf achten die benutzten Features auf Verfügbarkeit in den
vom Projekt unterstützten Browser zu überprüfen.
[QuirksMode CSS](http://www.quirksmode.org/css/) oder [Can I Use](http://caniuse.com/) sind zwei der besten Quellen dafür.
## Weiterlesen
* [Understanding Style Precedence in CSS: Specificity, Inheritance, and the Cascade](http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/)
* [QuirksMode CSS](http://www.quirksmode.org/css/)
* [Z-Index - The stacking context](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context)
|
