Test 2 293 Webauftritt

CSS ermöglicht es, HTML-Elemente gezielt zu gestalten und ihnen ein ansprechendes Erscheinungsbild zu verleihen. Zwei wichtige Konzepte hierbei sind Attribute, die HTML-Elemente zusätzliche Informationen geben, und Selektoren, die es uns ermöglichen, diese Elemente im CSS anzusprechen.

Attribute in HTML

Attribute geben HTML-Elementen zusätzliche Informationen. Sie beeinflussen nicht den Inhalt direkt, sondern liefern Metadaten oder steuern das Aussehen des Elements mit CSS. Ein Attribut steht immer im Start-Tag eines Elements, besteht aus einem Namen und einem Wert, getrennt durch ein Gleichheitszeichen, und der Wert steht in Anführungszeichen. Mehrere Attribute werden durch Leerzeichen getrennt.

Beispiel:

<img src="bild.jpg" alt="Beispielbild" width="300">

src: Pfad zur Bilddatei | alt: Alternativtext | width: Breite des Bildes

Attribute für CSS

• id Wird genutzt, um ein einzigartiges Element zu identifizieren.

<div id="header">Kopfzeile</div>

• class Wird genutzt, um mehrere Elemente einer gemeinsamen Kategorie zuzuordnen.

<p class="wichtig">Text mit Klasse</p>

• style Ermöglicht Inline-CSS (direktes Styling im HTML). Inline-CSS sollte jedoch vermieden werden.

<h1 style="color: blue;">Blauer Text</h1>`

CSS-Selektoren

Mit Selektoren wählen wir HTML-Elemente aus, um sie mit CSS zu gestalten.

Einfachste Selektoren

Typselektor: Wählt alle Elemente eines bestimmten Typs aus. Beispiel: Alle Überschriften vom Typ <h1> werden blau.

h1 {
  color: blue;
}

Klassenselektor: Wählt Elemente mit einer bestimmten Klasse aus (Punkt vor dem Klassennamen). Beispiel: Elemente mit der Klasse wichtig haben einen gelben Hintergrund.

.wichtig {
  background-color: yellow;
}

ID-Selektor: Wählt ein Element mit einer eindeutigen ID aus (Raute vor der ID). Beispiel: Das Element mit der ID header wird zentriert.

#header {
  text-align: center;
}

Universalselektor: Wählt alle Elemente aus (*). Beispiel: Setzt alle Abstände und Innenabstände auf 0.

* {
  margin: 0;
  padding: 0;
}

Fortgeschrittene Selektoren

Attributselektor: Wählt Elemente anhand ihrer Attribute aus. Beispiel: Alle Texteingabefelder werden mit einem grauen Rahmen versehen.

input[type="text"] {
  border: 1px solid gray;
}

Pseudoklassen: Wählen Elemente basierend auf ihrem Zustand aus.

• :hover: Wenn die Maus über das Element fährt. Beispiel: Links werden rot, wenn die Maus darüber schwebt.

a:hover {   
    color: red; 
}

• :first-child: Wählt das erste Kind eines Elements aus. Beispiel: Der erste Absatz in einem Container wird fett dargestellt.

p:first-child {   
    font-weight: bold; 
}

Beispiele für die Anwendung von CSS

HTML-Struktur

<div id="container">
  <h1 class="title">Willkommen!</h1>
  <p class="highlight">Das ist ein wichtiger Text.</p>
  <p>Das ist ein normaler Text.</p>
  <a href="#">Ein Link</a>
</div>

CSS-Regeln

/* ID-Selektor */
#container {
  border: 2px solid black;
  padding: 10px;
}

/* Klassen-Selektor */
.title {
  font-size: 24px;
  color: blue;
}

/* Typselektor */
p {
  font-family: Arial, sans-serif;
  line-height: 1.5;
}

/* Pseudoklasse */
a:hover {
  text-decoration: underline;
}

so sieht es dann aus:

Formulare

Formulare sind ein zentrales Element in Webseiten, um Benutzereingaben zu erfassen und an einen Server zu senden. Sie werden häufig für Anmeldungen, Suchfunktionen oder Kontaktformulare verwendet.

Ein HTML-Formular wird mit dem <form>-Tag definiert. Es enthält verschiedene Eingabefelder, Schaltflächen und Labels.

Ein typisches Formularfeld besteht aus einem <label>-Element und einem <input>-Feld. Das for-Attribut im <label> zeigt auf die id des zugehörigen Eingabefelds, damit es korrekt verknüpft ist. Das name-Attribut im <input> bestimmt, unter welchem Namen die Eingabe an den Server gesendet wird. Das required-Attribut sorgt dafür, dass das Feld nicht leer bleiben darf.

<form action="zielseite.php" method="post">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name" required>

        <label for="email">E-Mail:</label>
        <input type="email" id="email" name="email" required>

        <label>Bevorzugte Kontaktmethode:</label>
        <label for="kontakt-email">
            <input type="radio" id="kontakt-email" name="kontaktmethode" value="email" required>
            E-Mail
        </label>
        <label for="kontakt-telefon">
            <input type="radio" id="kontakt-telefon" name="kontaktmethode" value="telefon">
            Telefon
        </label>

        <label for="zeit">Bevorzugte Kontaktzeit:</label>
        <input type="time" id="zeit" name="zeit">

        <input type="submit" value="Absenden">
    </form>

Element	Erklärung	Beispiel
<input type='text'>	Einzeiliges Texteingabefeld	<input type='text' name='name'>
<input type='email'>	Spezielles Feld für E-Mail-Adressen	<input type='email' name='email'>
<input type='password'>	Verdeckte Passworteingabe	<input type='password' name='passwort'>
<input type='radio'>	Auswahlknöpfe (nur eine Option möglich)	<input type='radio' name='geschlecht' value='m'>
<input type='checkbox'>	Kontrollkästchen (mehrere Optionen möglich)	<input type='checkbox' name='interesse' value='sport'>
<input type='submit'>	Abschicken des Formulars	<input type='submit' value='Absenden'>
<label>	Beschriftet ein Eingabefeld	<label for='name'>Name:</label>
<textarea>	Mehrzeiliges Texteingabefeld	<textarea name='nachricht'></textarea>
<select> und <option>	Erzeugt Dropdown-Menüs	<select name='farbe'><option value='rot'>Rot</option><option value='blau'>Blau</option></select>
Zeit und Datum	Eingabe von Datum und Uhrzeit	<input type='datetime-local' name='zeit'>

<form>-Attribute

• action: Bestimmt, wohin die Formulardaten gesendet werden, z. B. an eine PHP-Datei.

<form action="verarbeitung.php" method="post">

• method: Legt fest, wie die Daten übertragen werden:

• get: Daten werden an die URL angehängt (geeignet für Suchanfragen).

<form action="suche.php" method="get">

• post: Daten werden unsichtbar im HTTP-Body übertragen (sicherer für Passwörter).

<form action="login.php" method="post">

Weitere Attribute

Attribut	Funktion
target="_blank"	Öffnet das Formular in einem neuen Fenster.
autocomplete="off"	Deaktiviert die automatische Vervollständigung.
novalidate	Deaktiviert die integrierte Browser-Validierung.
enctype="multipart/form-data"	Notwendig für Datei-Uploads.

Eingabevalidierung

HTML bietet bereits einige Validierungsmechanismen, um falsche Eingaben zu verhindern.

Attribut	Funktion
required	Zwingt Nutzer dazu, ein Feld auszufüllen.
maxlength="20"	Begrenzung der Zeichenanzahl.
pattern="[A-Za-z]+"	Erlaubt nur bestimmte Zeichen (z. B. Buchstaben).
min="1" max="100"	Zahlenbereich festlegen.
step="5"	Schrittweite für Zahlenfelder definieren.

Box Modell

Das Box-Modell in CSS ist ein fundamentales Konzept, das beschreibt, wie Elemente auf einer Webseite in Bezug auf Platzierung und Grösse behandelt werden. Jedes Element wird als eine rechteckige Box betrachtet, die aus mehreren Teilen besteht:

• Content – Der Inhalt der Box, wo Text, Bilder oder andere Inhalte angezeigt werden.

• Padding – Der Innenabstand zwischen dem Inhalt und dem Rand der Box. Das Padding erhöht den Abstand innerhalb der Box. .

• Border – Die Grenze, die um Padding und Inhalt verläuft. Die Dicke, der Stil und die Farbe der Border können angepasst werden.

• Margin – Der Aussenabstand, der die Box von anderen Elementen trennt. Margin fügt Abstand ausserhalb der Box hinzu.

• Width – Die Breite des Elements. Standardmässig bezieht sich width nur auf den Inhalt, kann aber je nach Box-Modell padding und border mit einbeziehen.

Content-Box

Hier beziehen sich die angegebenen Breite und Höhe nur auf den Inhalt. Padding und Border werden zusätzlich dazu addiert.

.element {
  width: 200px;
  padding: 20px;
  border: 10px solid black;
  box-sizing: content-box; /* Standard */
}
/* Tatsächliche Breite: 200px (Inhalt) + 40px (Padding) + 20px (Border) = 260px */

Border-Box

Hier werden Padding und Border in die angegebene Breite und Höhe des Elements eingerechnet. Dadurch bleibt das Layout übersichtlicher und einfacher zu gestalten.

.element {
  width: 200px;
  padding: 20px;
  border: 10px solid black;
  box-sizing: border-box; /* Neues Modell */
}
/* Tatsächliche Breite: 200px (Gesamt) inkl. Padding und Border */

Kurzbefehle

Anzahl der Werte	Syntax	Bedeutung
1 Wert	padding: 2rem;	Gilt für alle Seiten: oben, rechts, unten, links.
2 Werte	padding: 1rem 2rem;	1. Wert: oben und unten 2. Wert: rechts und links.
3 Werte	padding: 1rem 2rem 3rem;	1. Wert: oben 2. Wert: rechts und links 3. Wert: unten.
4 Werte	padding: 1rem 2rem 3rem 4rem;	1. Wert: oben 2. Wert: rechts 3. Wert: unten 4. Wert: links.

Einheiten

Einheit	Typ	Beschreibung	Beispiel
rem	Relativ	Relativ zur Schriftgröße des Root-Elements (<html>).	padding: 1rem;
em	Relativ	Relativ zur Schriftgrösse des aktuellen Elements.	padding: 1.5em;
%	Relativ	Relativ zur Breite des Elternelements.	padding: 10%;
px	Absolut	Feste Einheit, definiert Pixelgenaue Abstände.	padding: 20px;
pt	Absolut	Wird hauptsächlich für Print-Medien verwendet (1pt ≈ 1/72 Zoll).	padding: 12pt;
vw	Relativ (flexibel)	1% der Breite des Viewports (sichtbarer Bereich des Bildschirms).	padding: 5vw;
vh	Relativ (flexibel)	1% der Höhe des Viewports.	padding: 10vh;
vmin	Relativ (flexibel)	1% der kleineren Dimension des Viewports (Breite oder Höhe).	padding: 2vmin;
vmax	Relativ (flexibel)	1% der grösseren Dimension des Viewports (Breite oder Höhe).	padding: 3vmax;
auto	Automatisch	CSS berechnet den Abstand automatisch (bei padding selten verwendet).	padding: auto;

Empfohlener CSS Reset für Einsteiger

Eine Mischung aus Reset und Box-Modell-Anpassung ist oft ideal:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

Inline und Block Elemente

Jedes HTML-Element belegt eine rechteckige Fläche, auch als Container oder Box bezeichnet. Es gibt zwei Haupttypen: Inline-Elemente und Block-Elemente. Diese Elemente folgen dem sogenannten Box-Modell, das für das Design von Webseiten (z. B. Farben, Abstände) entscheidend ist.

Unterschiede zwischen Block- und Inline-Elementen¶

Block-Elemente starten immer auf einer neuen Zeile und nehmen die gesamte Breite ein, während Inline-Elemente nur so viel Platz beanspruchen, wie ihr Inhalt benötigt. Zudem können Block-Elemente sowohl andere Block- als auch Inline-Elemente enthalten, während Inline-Elemente keine Block-Elemente aufnehmen dürfen. Ein weiterer Unterschied ist, dass margin-left und margin-right für beide funktionieren, während margin-top und margin-bottom bei Inline-Elementen keine Wirkung zeigen.

Beispiele für Block-Elemente: <div>, <p>, <h1>-<h6>, <section> und <article>.

Beispiele für Inline-Elemente: <span>, <a>, <img>, <b>, <i> und <strong>. Auf dem Bild sehen Sie zwei "Div"-Block-Elemente und zwei "Span"-Inline-Elemente.

display: block;¶

Ein Block-Element startet immer auf einer neuen Zeile und nimmt standardmässig die gesamte Breite des Elterncontainers ein. Falls eine feste Breite oder Höhe definiert wird, nimmt das Element genau diese Größe an.

Typische Block-Elemente Beispiele für Block-Elemente sind <div>, <p>, <h1>-<h6>, <section>, <article>, <footer> und <nav>.

<div class="example">Block-Element</div>

.example {
  display: block;
  background: black;
  color: white;
  padding: 20px;
}

display: inline;

Ein Inline-Element startet nicht auf einer neuen Zeile und nimmt nur so viel Platz ein, wie sein Inhalt benötigt. Zudem können Breite und Höhe nicht festgelegt werden. Die Eigenschaften margin-top und margin-bottom wirken nicht.

Typische Inline-Elemente: Häufig verwendete Inline-Elemente sind <span>, <a>, <b>, <i>, <strong>, <em> und <img>.

<span class="example">Inline-Element</span>

.example {
  display: inline;
  background: black;
  color: white;
  padding: 10px;
}

display: inline-block;

Ein Inline-Block-Element verhält sich wie ein Inline-Element, akzeptiert aber Breiten- und Höhenangaben. Zusätzlich haben margin und padding vollen Einfluss auf den Abstand zu anderen Elementen.

<div class="example">Inline-Block-Element</div>

.example {
  display: inline-block;
  width: 100px;
  height: 50px;
  background: black;
  color: white;
  padding: 10px;
}

display: table;

Die display: table;-Eigenschaft verwandelt ein Element in eine Tabelle. Die enthaltenen Kindelemente werden automatisch wie Tabellenzellen behandelt. Dies kann hilfreich sein, wenn eine Struktur mit gleichen Zellhöhen benötigt wird.

<div class="table">
   <div>Zeile 1</div>
   <div>Zeile 2</div>
</div>

.table { 
   display: table;
   margin: auto;
}

display: none;¶

Wenn ein Element mit display: none; versehen wird, wird es unsichtbar und nimmt keinen Platz mehr im Layout ein. Auch alle untergeordneten Elemente werden ausgeblendet.

<div class="hidden">Ich bin unsichtbar</div>

.hidden {
  display: none;
}

So sieht es aus:

Navigation

HTML-Struktur einer Navigation

<nav>
    <ul>
        <li><a href="index.html">Startseite</a></li>
        <li><a href="ueberuns.html">Über Uns</a></li>
        <li><a href="kontakt.html">Kontakt</a></li>
    </ul>
</nav>

nav ul {
    list-style: none; /* Entfernt Bullet Points */
    padding: 0;
}

nav li {
    margin-right: 20px; 
    display: inline-block; /* Setzt die Elemente nebeneinander */
}

nav a {
    text-decoration: none; /* Entfernt Unterstreichung */
    color: black;
    font-size: 18px;
}

nav a:hover {
    color: blue; /* Farbe beim drüber fahren mit der Maus */
}

nav a.active {
    color: red; /* Aktive Seite farblich hervorheben */
}

result:

Position und Float

CSS Position

Die position-Eigenschaft legt die Art der Positionierung eines Elements fest. Es gibt fünf Werte:

• static (Standard) – Elemente bleiben im normalen Dokumentfluss.
• relative – Das Element bleibt im Flus, kann aber mit top, left, right, bottom verschoben werden.
• absolute – Das Element wird aus dem Flus entfernt und relativ zum nächstgelegenen positionierten Element (nicht static) positioniert.
• fixed – Das Element bleibt an einer festen Position im Viewport, unabhängig vom Scrolen.
• sticky – Kombination aus relative und fixed: Das Element scrollt mit, bleibt aber an einer bestimmten Position haften.