CSS - Schnell Leitfaden
Willkommen, ambitionierte Web-Entwickler! Heute tauchen wir ein in die bunte Welt von CSS. Setzen Sie sich an den Computer, denn wir machen uns auf die Reise, die für immer die Art und Weise verändern wird, wie Sie Websites betrachten!
Was ist CSS?
CSS, oder Cascading Style Sheets, ist wie der Modedesigner der Webwelt. Wenn HTML das Skelett einer Website ist, dann ist CSS die Haut, Kleidung und Schminke. Es ist das, was Websites hübsch und einzigartig aussehen lässt.
Stellen Sie sich vor, Sie bauen ein Haus. HTML wäre der Ziegelstein und der Mörtel, während CSS die Farbe, Tapete und Möbel ist. Es ist das, was ein einfaches Gebäude in ein Zuhause verwandelt.
Lassen Sie mit einem einfachen Beispiel beginnen:
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}Dieser kleine CSS-Code instructiert den Browser, die gesamte Seite in einem hellen Grauton (#f0f0f0) zu gestalten und Arial als Standard Schriftart zu verwenden. Wenn Arial nicht verfügbar ist, wird jede sans-serif Schriftart verwendet.
CSS - Syntax
CSS-Syntax ist wie ein Rezept. Sie hat zwei Hauptteile: denSelektor und den Deklarationsblock.
auswahl {
eigenschaft: wert;
}DerSelektor zeigt auf das HTML-Element, das Sie stylen möchten. Der Deklarationsblock enthält eine oder mehrere Deklarationen, die durch Semikolons getrennt sind. Jede Deklaration umfasst einen CSS-Eigenschaftsnamen und einen Wert, getrennt durch ein Kolon.
Schauen wir uns ein komplexeres Beispiel an:
h1 {
color: blau;
font-size: 24px;
text-align: zentriert;
}Hier richten wir alle <h1>-Elemente aus. Wir machen den Text blau, stellen seine Größe auf 24 Pixel ein und zentrieren ihn auf der Seite.
CSS - Einbindung
Es gibt drei Möglichkeiten, CSS in Ihre HTML zu integrieren:
- Inline CSS
- Internes CSS
- Externes CSS
Inline CSS
Inline CSS wird direkt auf ein HTML-Element mit dem style-Attribut angewendet. Es ist wie fashion advice für nur eine Person zu geben.
<p style="color: rot; font-size: 16px;">Dies ist ein roter Absatz.</p>Internes CSS
Internes CSS wird im <head>-Bereich einer HTML-Seite platziert, innerhalb von <style>-Tags. Es ist wie Dresscode-Regeln für alle auf einer Party festzulegen.
<head>
<style>
body {
background-color: hellblau;
}
h1 {
color: marineblau;
margin-left: 20px;
}
</style>
</head>Externes CSS
Externes CSS wird in einer separaten Datei mit der Erweiterung .css gespeichert. Es wird über den <link>-Tag mit der HTML-Datei verknüpft. Das ist wie ein Modemagazin zu erstellen, das jeder konsultieren kann.
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>CSS - Maßeinheiten
CSS verfügt über mehrere Einheiten zur Angabe von Längen. Sehen wir uns die häufigsten an:
| Einheit | Beschreibung |
|---|---|
| px | Pixel (1px = 1/96 des 1in) |
| % | Prozentsatz |
| em | Relativ zur Schriftgröße des Elements (2em bedeutet 2 Mal die Größe der aktuellen Schrift) |
| rem | Relativ zur Schriftgröße des Wurzelelements |
| vw | Relativ zu 1% der Breite der Ansicht |
| vh | Relativ zu 1% der Höhe der Ansicht |
Hier ist ein Beispiel mit verschiedenen Einheiten:
div {
breite: 300px;
höhe: 50%;
schriftgröße: 1.5em;
innenabstand: 2rem;
außenecken: 10vh;
}CSS - Farben
Farben in CSS können auf verschiedene Weise angegeben werden:
- Durch Namen:
rot,blau,grün, etc. - Durch RGB-Werte:
rgb(255, 0, 0)für rot - Durch Hex-Codes:
#FF0000für rot
Sehen wir uns diese in Aktion an:
h1 {
color: blau;
}
p {
color: rgb(255, 0, 0);
}
div {
background-color: #00FF00;
}CSS - Hintergründe
Hintergründe können Ihre Website richtig zum Leuchten bringen. Sie können eine Hintergrundfarbe, ein Bild oder beides einstellen!
body {
background-color: #f0f0f0;
background-image: url('background.jpg');
background-repeat: no-repeat;
background-position: zentriert;
background-size: abdecken;
}Dieser CSS-Code setzt eine hellegraue Hintergrundfarbe, fügt ein Bild in der Mitte der Seite hinzu, stellt sicher, dass das Bild nicht wiederholt wird, und lässt es den gesamten Sichtbereich abdecken.
CSS - Schriften
Schriften sind entscheidend für Lesbarkeit und Stil. So können Sie Schriften einstellen:
body {
font-family: 'Helvetica', Arial, sans-serif;
font-size: 16px;
font-weight: normal;
font-style: kursiv;
}Dies setzt Helvetica als bevorzugte Schriftart, mit Arial und jeder sans-serif Schriftart als Ersatz. Es stellt auch die Größe auf 16 Pixel, das Gewicht auf normal und den Stil auf kursiv ein.
CSS - Text
Texteigenschaften steuern, wie Text dargestellt wird:
p {
color: #333;
text-align: ausrichten;
text-decoration: unterstrichen;
text-transform: großgeschrieben;
line-height: 1.5;
}Dieser CSS-Code macht den Text dunkelgrau, justiert, unterstrichen, alles großgeschrieben und mit einer 1,5-fachen Zeilenhöhe.
CSS - Verwendung von Bildern
Bilder können wie jedes andere Element gestylt werden:
img {
breite: 100%;
max-breite: 500px;
höhe: auto;
rand-rundung: 50%;
}Dies macht das Bild responsive (100% Breite bis zu 500px), erhält sein Seitenverhältnis und gibt ihm eine runde Form.
CSS - Links
Links können je nach Zustand unterschiedlich gestylt werden:
a {
color: blau;
text-decoration: none;
}
a:hover {
color: rot;
text-decoration: unterstrichen;
}
a:besucht {
color: lila;
}Dies ändert die Linkfarbe zu blau, entfernt die Unterstreichung, macht sie rot und unterstrichen bei hover, und macht besuchte Links lila.
Erinnern Sie sich daran, CSS ist alles über Kreativität und Experiment. Haben Sie keine Angst, mit verschiedenen Eigenschaften und Werten herumzuspielen. Je mehr Sie üben, desto besser werden Sie darin, schöne, responsive Webdesigns zu erstellen. Viel Spaß beim Coden!
Credits: Image by storyset