INT

Internet-Technik

Mehr CSS

CSS

3 Themen

Selektoren Reloaded
Einheiten
Farben
Selektoren Reloaded
Einheiten
Farben

Der Selektor nennt die Bedingungen, die ein Element erfüllen muss, damit der nachfolgende Satz von Eigenschaften darauf angewandt wird.

Wie in der letzten Stunde besprochen ist der einfachste Selektor der Elementname.

In CSS formatiert der Selektor p alle <p> Elemente in HTML.

HTML

				
					<p>Ein kurzer Satz.</p>

					<ul>
						<li><p>Satz 1</p></li>
						<li><p>Satz 2</p></li>
						<li><p>Satz 3</p></li>
					</ul>

CSS

				
					p {
						color: red;
					}

Manchmal möchte man aber nicht alle, sondern ein bestimmtes Element formatieren.

Dafür kann man die Position der Elemente im HTML als Bedingung nutzen. Zum Beispiel alle <p>, die innerhalb einer Liste <ul> vorkommen:

HTML

				
					<p>Ein kurzer Satz.</p>

					<ul>
						<li><p>Satz 1</p></li>
						<li><p>Satz 2</p></li>
						<li><p>Satz 3</p></li>
					</ul>

CSS

				
					ul p {
						color: red;
					}

Ist das trotzdem nicht spezifisch genug, kann man im HTML einzelne Elemente besonders kennzeichnen, damit man sie formatieren kann.

Das geht zum Beispiel mit Klassen. Eine Klasse wird in HTML über das class-Attribut definiert.

		
			<p class="aktiv">Satz 2</p>

Den Namen, also den Wert, der Klasse kann man dabei frei wählen.

		
			<p class="hanswurst">Satz 2</p>

In CSS wird ein class-Selektor mit einem Punkt am Anfang notiert:

		
			.aktiv { … }

HTML

				
					<p>Ein kurzer Satz.</p>

					<ul>
						<li><p>Satz 1</p></li>
						<li><p class="aktiv">Satz 2</p></li>
						<li><p>Satz 3</p></li>
						<li><p class="aktiv">Satz 4</p></li>
					</ul>

CSS

				
					.aktiv {
						color: blue;
					}

Häufig werden Klassen zusammen mit generischen Elementen wie <div> und <span> verwendet.

HTML

				
					<div class="header">
						<p>Ein kurzes Intro.</p>
						<p>Ein anderes Statement</p>
					</div>

					<div class="footer">
						<p>Ein abschliessender Satz.</p>
					</div>

CSS

				
					.header p {
						color: blue;
					}

					.footer p {
						color: gray;
					}

Alternativ zum class-Attribut gibt es auch das id-Attribut.

		
			<div id="inhalt"><p>abc</p></div>

Es funktioniert genau wie class, wird aber in CSS mit einem Hash notiert:

		
			#inhalt { … }

HTML

				
					<div id="header">
						<p>Ein kurzes Intro.</p>
					</div>

					<div class="inhalt">
						<p>Erster Satz.</p>
						<p>Zweiter Satz.</p>
					</div>

CSS

				
					#header {
						font-size: 20px;
					}

Der große Haken am id-Attribut ist, dass man nicht mehreren Elementen die gleiche id zuweisen darf.

Jede id muss im Dokument einzigartig sein.
Darum macht der Einsatz meistens keinen Sinn und man verwendet besser class stattdessen.

HTML

				
					<div id="header">
						<p>Kurzes Intro.</p>
					</div>

A

CSS

				
					#header {
						font-size: 20px;
					}
				
			
				
					<div class="header">
						<p>Kurzes Intro.</p>
					</div>

B

				
					.header {
						font-size: 20px;
					}

id wird oft im Zusammenhang mit Javascript verwendet und hat dort seine Berechtigung. Für reine HTML/CSS-Seiten ist sie unnötig oder gar überflüssig.

Selektoren Reloaded
Einheiten
Farben

In CSS können verschiedene Einheiten verwendet werden, um Größenangaben zu machen.

Größenangaben sind für viele Eigenschaften nötig, zB. width, font-size oder margin.

Die Angabe erfolgt in CSS immer mit Wert und Einheit.

		
			font-size: 16px;

16 ist der Wert px ist die Einheit

Zwischen Wert und Einheit steht nie ein Leerzeichen.

Die Werte können zB. in den Einheiten px, em/rem, %, vw/vh, ch oder mittels calc() angegeben werden.

Bei Pixelgrößen entspricht 1px einem Bildpunkt auf dem Geräte­display.

Bei Retina-Displays ent­sprech­end 4 oder 9 Bildpunkten.

em ist eine flexible Größe, die der für das Element eingestellten Schriftgröße entspricht.

1rem entspricht der Schriftgröße, die für das <html> Element definiert wurde.

Standardmäßig sind das 16px.

1ch entspricht der Breite eines Zeichens der eingestellten Schrift.

Genauer gesagt, der Null: 0

1vw und 1vh entsprechen je 1% der Breite bzw. Höhe des Browser­fensters.

Bei Handys und iPads ist das in der Regel die Display-Breite/Höhe.

Angaben in % definieren einen prozentualen Anteil des verfügbaren Platzes. Bei Schriftgrößen einen Anteil der Ausgangsschriftgröße.

calc() ist ein Funktion, mit der sich Werte aus anderen CSS-Größen berechnen lassen.

Beispiele

		
			width: calc(100% / 3);
			font-size: calc(16px + 0.5vw);
			margin-left: calc(10% - (2% + 1em));

Achte auf die Leerzeichen vor und nach den Rechenzeichen!

Die im Browser als Standard voreingestellte Schriftgröße ist 16px.

Referenz

Selektoren Reloaded
Einheiten
Farben

Farbangaben können in CSS auf verschiedene Weise notiert werden.

Als hexadezimale Angabe, zB.
#d33682

Als hexadezimale Angabe, zB.
#d33682

d3 Rot 36 Grün 82 Blau

Das Hexadezimalsystem basiert auf 16 Ziffern, statt 10.

0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F

Einige Beispiele:

Dezimal Hexadezimal
0 0
10 A
15 F
16 10

Wenn eine einstellige Zahl 16 Werte abbilden kann, kann eine zweistellige Zahl 16×16 Werte abbilden, also 256!

Wait a minute …

In Photoshop werden die Werte für RGB doch auch von 0 bis 255 notiert!

0-255!

So lassen sich also alle Farben im 24-Bit Farbraum in einer sechs­stelligen Zahl notieren!

384
# d3 36 82
Rot Grün Blau

Als RGB-Werte, mit oder ohne Transparenz/Alpha, zB.

rgb(211, 54, 130)
rgba(211, 54, 130, 1.0)

Als HSL-Werte, mit oder ohne Transparenz/Alpha, zB.

hsl(331, 74%, 81%)
hsla(331, 74%, 81%, 1.0)

Hue, Saturation, Lightness, Alpha

 Hue/Farbton 0-360
Saturation/Sättigung 0-100%
Lightness/Helligkeit 0-100%
Alpha/Transparenz 0.0 - 1.0
300 0 60 240 180 120

Werte für HSL entsprechen nicht 1:1 dem HSB-Wert aus Photoshop!

HSL ≠ HSB

Referenz

Github Repo

Experimentiere für dein Design von Aufgabe 4 mit den gezeigten Einheiten und Farben.