IT-Kurs CSS-Grundlagen 021_Werttypen, Einheiten, Größen, Farben

Numerische Typen

In CSS werden verschiedene numerische Werte in unterschiedlichen Eigenschaften verwendet. Die häufig verwendeten numerischen Typen sind:

• Zeichenketten: Text in einfachen oder doppelten Anführungszeichen, wobei die Konsistenz der Anführungszeichen sichergestellt werden muss.
• Zahlen: Ganzzahlen oder Gleitkommazahlen. Wie 1024, -100, 0.255. Vermeiden Sie einheitenlose Zahlen, es sei denn, sie stellen reine Zahlenwerte dar.
• Einheiten: Numerischer Typ mit Einheit, z.B. 45deg, 5s oder 10px.
• Prozentsätze: Prozentualer numerischer Typ, z.B. 50%. Prozentwerte werden häufig für Breite, Höhe usw. verwendet.
• Farbwerte: Hexadezimal, RGB, RGBA, HSL, HSLA usw. Verwenden Sie geeignete Farbdarstellungen, berücksichtigen Sie Farbkontrast und Barrierefreiheit, vermeiden Sie zu helle oder zu ähnliche Farben.
• Schlüsselwörter: Wörter mit spezifischer Bedeutung wie auto, initial, inherit usw. Verstehen Sie die Bedeutung und Funktion der Schlüsselwörter und stellen Sie die korrekte Verwendung sicher.

Einheiten

Einheiten in CSS werden verwendet, um Werte von Eigenschaften wie Länge, Winkel, Zeit, Frequenz usw. darzustellen.

Längeneinheiten:

In CSS werden Längeneinheiten zur Darstellung von Abmessungen und Abständen verwendet und können auf verschiedene Eigenschaften wie Breite, Höhe, Rand, Polsterung usw. angewendet werden.

Relative Längeneinheiten:

• em: Relativ zur Schriftgröße des Elternelements. 1.5em bedeutet, dass die Schriftgröße des Elements das 1,5-fache der Schriftgröße des Elternelements beträgt.
• rem: Relativ zur Schriftgröße des Wurzelelements (html-Element). 1rem entspricht der Schriftgröße des Wurzelelements.
• ex: Wird häufig für vertikale Abmessungen verwendet, relativ zur Höhe des Kleinbuchstabens “x”. (In den meisten Schriftarten ist der Kleinbuchstabe x normalerweise die Hälfte der maximalen Zeichenhöhe)

Beispiel:

1
.example {
2
  font-size: 16px;
3
  padding: 1.5em; /* 1em entspricht 24px */
4
  margin: 2rem; /* 2rem entspricht 32px */
5
  height: 2ex; /* Höhe ist die Hälfte der Schriftgröße, also 8px, entspricht 16px */
6
}

Absolute Längeneinheiten:

• px: Pixel ist die grundlegendste Einheit auf dem Bildschirm und die am häufigsten verwendete Einheit in CSS. Die Pixelgröße hängt von der Bildschirmauflösung ab.
• in: Zoll ist eine Längeneinheit, die häufig für die Größe von Monitoren oder anderen elektronischen Geräten verwendet wird. 1 Zoll entspricht 96 Pixeln.
• cm: Zentimeter ist eine Längeneinheit, die häufig für die Größe physischer Objekte verwendet wird.
• mm: Millimeter ist eine Längeneinheit, die häufig für Papier oder andere Druckmaterialien verwendet wird.
• pt: Abkürzung für Point, eine im traditionellen Druckwesen verwendete Einheit. 1pt entspricht 1/72 Zoll, etwa 0,352778 Millimeter.
• pc: Abkürzung für Pica, ebenfalls eine im traditionellen Druckwesen verwendete Einheit. 1pc entspricht 12pt, etwa 4,21752 Millimeter, 1pc entspricht 16 Pixeln. Empfohlen für Druck-Stylesheets.

Beispiel:

1
.example {
2
  width: 200px;
3
  height: 2in; /* 2 Zoll, entspricht 192px */
4
  margin: 1cm; /* 1 Zentimeter */
5
  font-size: 12pt; /* 12 Punkt */
6
}

Relative Prozenteinheiten:

• %: Prozentsatz stellt die relative Größe zum Elternelement dar. Zum Beispiel bedeutet width: 50%, dass die Breite des Elements 50% der Breite des Elternelements beträgt.

Beispiel:

1
.example {
2
  width: 50%; /* Breite ist 50% der Elternelementbreite */
3
  padding: 10%; /* Innenabstand ist 10% der Elementbreite */
4
}

Viewport-Einheiten:

• vw: Prozentsatz der Viewport-Breite, 1vw entspricht 1% der Viewport-Breite.
• vh: Prozentsatz der Viewport-Höhe, 1vh entspricht 1% der Viewport-Höhe.
• vmin: Der kleinere Wert von vw und vh.
• vmax: Der größere Wert von vw und vh.

Beispiel:

1
.example {
2
  width: 50vw; /* Breite ist 50% der Viewport-Breite */
3
  height: 30vh; /* Höhe ist 30% der Viewport-Höhe */
4
}

Winkeleinheiten:

In CSS werden Winkeleinheiten zur Darstellung von Winkelwerten in Rotations-, Transformationseigenschaften usw. verwendet.

deg (Grad):

• deg Grad ist die gebräuchlichste Winkeleinheit, ein voller Kreis hat 360 Grad.
• Wird für Rotation, Verlaufswinkel usw. verwendet.

Beispiel:

1
.example {
2
  transform: rotate(45deg); /* Element um 45 Grad drehen */
3
  background: linear-gradient(45deg, red, yellow); /* 45-Grad-Verlaufshintergrund */
4
}

rad (Bogenmaß):

• rad Bogenmaß ist das Verhältnis von Umfang zum Radius, ein voller Kreis hat 2π Bogenmaß.
• Wird für einige mathematische Funktionen, Transformationen usw. verwendet.

Beispiel:

1
.example {
2
  transform: rotate(1rad); /* Element um 1 Bogenmaß drehen */
3
}

grad (Neugrad):

• grad ist die Einheit für Neugrad, ein voller Kreis hat 400 Neugrad.
• Ähnlich wie Grad, für Rotation, Verlaufswinkel usw.

1
.example {
2
  transform: rotate(50grad); /* Element um 50 Neugrad drehen */
3
}

turn (Umdrehung):

• turn stellt eine vollständige Umdrehung dar, gleich 360 Grad.
• Wird zur Darstellung der Anzahl von Umdrehungen verwendet.

1
.example {
2
  transform: rotate(0.5turn); /* Halbe Umdrehung, 180 Grad */
3
}

Zeiteinheiten:

In CSS werden Zeiteinheiten zur Darstellung von Zeitwerten in Animations-, Übergangs-, Animationsverzögerungseigenschaften usw. verwendet.

s (Sekunden)

• s ist die Einheit für Sekunden.
• Wird für Animationsdauer, Übergangszeit usw. verwendet.

Beispiel:

1
.base{
2
    width: 200px;
3
    height: 200px;
4
    background-color: #3498db;
5
}
6
.base:hover{
7
    background-color: #e74c3c;
8
}
9
.example{
10
    transition: background-color 1s ease; /* Übergangseigenschaft und -zeit definieren */
11
}

ms (Millisekunden)

• ms ist die Einheit für Millisekunden, 1 Sekunde entspricht 1000 Millisekunden.
• Wird für feinere Zeitkontrolle verwendet.

Beispiel:

1
.base{
2
    width: 200px;
3
    height: 200px;
4
    background-color: #3498db;
5
}
6
.base:hover{
7
    background-color: #e74c3c;
8
}
9

10
.example{
11
    transition: background-color 2000ms ease; /* Übergangseigenschaft und -zeit definieren */
12
}

Frequenzeinheiten:

In CSS werden Frequenzeinheiten zur Darstellung der Frequenz periodischer Ereignisse verwendet. Die gebräuchlichste Frequenzeinheit ist Hz (Hertz), die die Anzahl der Zyklen pro Sekunde darstellt.

Hz (Hertz)

• Hertz ist die gebräuchlichste Frequenzeinheit, die die Anzahl der Zyklen pro Sekunde darstellt.
• Wird für die Frequenz von Vibrations-, Rotationseffekten usw. in Animationen verwendet.

Beispiel:

1
.example {
2
  animation: shake 1s infinite; /* Vibrationsfrequenz 1 Hertz, endlose Schleife */
3
}

kHz (Kilohertz)

• Kilohertz ist eine Frequenzeinheit, die tausend Zyklen pro Sekunde darstellt, d.h. 1 kHz entspricht 1000 Hz.
• Wird in Hochfrequenzszenarien wie Tonfrequenzen verwendet.

Beispiel:

1
.example {
2
  audio {
3
    frequency: 5kHz; /* Tonfrequenz 5 Kilohertz */
4
  }
5
}

Auflösungseinheiten:

In CSS werden Auflösungseinheiten zur Darstellung der Pixeldichte von Bildern oder beim Drucken verwendet.

dpi (Punkte pro Zoll)

• dpi stellt die Anzahl der Punkte pro Zoll dar, d.h. die Pixeldichte beim Drucken.
• Wird häufig in Druck-Stylesheets verwendet, um die Bildschärfe beim Drucken zu bestimmen.

Beispiel:

1
.example {
2
  background-image: url('image.png');
3
  background-size: 300px 200px;
4
  background-resolution: 300dpi; /* Pixeldichte beim Drucken 300dpi */
5
}

dppx (Punkte pro Pixel)

• dppx stellt die Anzahl der Punkte pro Pixel dar, d.h. die Pixeldichte auf dem Bildschirm.
• Wird normalerweise im responsiven Design verwendet, um sich an verschiedene Bildschirm-Pixeldichten anzupassen.

Beispiel:

1
.example {
2
  background-image: url('image.png');
3
  background-size: 300px 200px;
4
  background-resolution: 2dppx; /* Bild auf Bildschirm mit 2-facher Pixeldichte anzeigen */
5
}

dpcm (Punkte pro Zentimeter)

• dpcm ist eine Auflösungseinheit, die die Anzahl der Punkte pro Zentimeter darstellt.
• Wird in Druck-Stylesheets oder Medienabfragen verwendet, um Stile und Bilder an verschiedene Auflösungen anzupassen.

Beispiel:

1
.example {
2
  background-image: url('image.png');
3
  background-size: 2dpcm 3dpcm; /* Bild mit 2 Punkten/cm horizontal und 3 Punkten/cm vertikal anzeigen */
4
}

Größen

Größen in CSS können zur Steuerung der Abmessungen von Elementen verwendet werden.

Eigenschaften width und height

Werden jeweils zur Festlegung der Breite und Höhe von Elementen verwendet, normalerweise mit Längeneinheiten wie Pixel (px), Prozent (%), em, rem usw.

Beispiel:

1
.example {
2
  width: 300px;
3
  height: 200px;
4
}

Eigenschaften max-width und max-height

Werden jeweils zur Festlegung der maximalen Breite und maximalen Höhe von Elementen verwendet.

Beispiel:

1
.example {
2
  max-width: 100%;
3
  max-height: 500px;
4
}

Eigenschaften min-width und min-height:

Beispiel:

1
.example {
2
  min-width: 200px;
3
  min-height: 100px;
4
}

Farben

Schlüsselwort-Farben

Farben, die durch vordefinierte Schlüsselwörter dargestellt werden, z.B.: red: Rot, blue: Blau, green: Grün usw.

Beispiel:

1
.example {
2
  color: red; /* Rot */
3
  background-color: blue; /* Blau */
4
}

Hexadezimale Farben

RGB-Farben werden durch sechs- oder dreistellige Hexadezimalzahlen dargestellt. Die sechsstellige Form ist #RRGGBB, wobei RR, GG, BB die Farbwerte für Rot, Grün und Blau darstellen. Die dreistellige Form ist #RGB, wobei jedes Zeichen einen Farbkanal darstellt.

Beispiel:

1
.example {
2
  color: #ff0000; /* Rot */
3
  background-color: #00f; /* Blau */
4
}

RGB-, RGBA-Farben

Die rgb()-Funktion stellt Farben dar und akzeptiert drei Parameter für Rot, Grün und Blau mit einem Wertebereich von 0-255. rgba() ist ähnlich wie rgb(), hat aber einen zusätzlichen Parameter für die Transparenz mit einem Wertebereich von 0-1.

Beispiel:

1
.example1 {
2
  color: rgb(255, 0, 0); /* Rot */
3
  background-color: rgb(0, 0, 255); /* Blau */
4
}
5

6
.example2 {
7
  color: rgba(255, 0, 0, 0.5); /* Halbtransparentes Rot */
8
  background-color: rgba(0, 0, 255, 0.7); /* Halbtransparentes Blau */
9
}

HSL-, HSLA-Farben

Die hsl()-Funktion stellt Farben dar und akzeptiert drei Parameter für Farbton, Sättigung und Helligkeit. Der Farbton-Wertebereich ist 0-360, Sättigung und Helligkeit haben einen Wertebereich von 0%-100%. hsla() ist ähnlich wie hsl(), hat aber einen zusätzlichen Parameter für die Transparenz mit einem Wertebereich von 0-1.

Beispiel:

1
.example1 {
2
  color: hsl(0, 100%, 50%); /* Rot */
3
  background-color: hsl(240, 100%, 50%); /* Blau */
4
}
5

6
.example2 {
7
  color: hsla(0, 100%, 50%, 0.5); /* Halbtransparentes Rot */
8
  background-color: hsla(240, 100%, 50%, 0.7); /* Halbtransparentes Blau */
9
}

RGB-Farbtabelle (oschina.net)