ifwp.net-schulbuch.de

CSS-Dateien
Aufgaben

Gestalten mit CSS

CSS-Klassen und CSS-Dateien spielen eine zentrale Rolle in der Darstellung von HTML-Seiten. Sie ermöglichen es, das Aussehen von Webseiten effektiv, einheitlich und übersichtlich zu gestalten. Hier ist eine Erklärung ihrer Bedeutung:

Eine CSS-Klasse ist ein Name, den man einem oder mehreren HTML-Elementen zuordnen kann, um ein bestimmtes Aussehen zuzuweisen.

Bei der Erstellung von Web-Seiten kann man die Inhalte (HTML-Datei) und die optische Gestaltung (CSS-Datei) trennen und in zwei unterschiedlichen Dateien speichern.

HTML-Datei: Festlegung der Inhalte (Elemente: Überschriften, Absätze, Listen, Links, Bilder, Tabellen)

CSS-Datei: Optische Gestaltung (Eigenschaften: Schriftart, Farben, Rahmen, Linienbreite, Bildgrößen)

Jedem HTML-Element können beliebig viele Eigenschaften zugeordnet werden.

Die Abkürzung CSS steht für Cascading Style Sheets

CSS-Klassen

CSS-Klassen sind benutzerdefinierte Namen, die in HTML-Elementen verwendet werden, um ihnen spezifische Darstellungsrichtlinien zuzuweisen. Sie dienen dazu, die Darstellung mehrerer Elemente flexibel und wiederverwendbar zu gestalten.

Vorteile von CSS-Klassen:

Wiederverwendbarkeit: Eine CSS-Klasse kann auf mehrere Elemente angewendet werden, wodurch man das gleiche Styling an verschiedenen Stellen verwenden kann.
Trennung von Struktur und Stil: HTML definiert die Struktur der Seite, CSS-Klassen steuern das Erscheinungsbild. Das verbessert die Übersichtlichkeit des Codes.
Flexibilität: Ein HTML-Element kann mehrere CSS-Klassen haben, um verschiedene Stile zu kombinieren.
Einfachere Wartung: Änderungen an einer Klasse in der CSS-Datei wirken sich automatisch auf alle Elemente dieser Klasse aus.

Beispiel mit Definitionen von CSS-Klassen

Es werden die Einladungen aus Kapitel 2 weiterentwickelt.

Die optische Gestaltung der Einladung 1 wird schrittweise verbessert.

Dazu wird die CSS-Datei aufgebaut und die HTML-Datei angepasst.

Auftrag 1:

Entwickele zur HTML-Datei von Einladung1 schrittweise eine CSS-Datei. Benutze dazu den HTML-Editor. Speicher die überarbeitete Einladung in einem lokalen Ordner.

HTML-Editor mit Einladung1 starten

Schrittweiser Aufbau der CSS-Datei und Anpassung der HTML-Datei. Selektoren bestimmen, welche HTML-Elemente von den Regeln betroffen sind.

Einfügen in die CSS-Datei (Element-Selektor h1, die Eigenschafen beziehen sich auf alle h1-Elemente der HTML-Seite):

Einfügen in die CSS-Datei (Klassen-Selektor .image. Die Klasse image wird in der HTML-Datei festgelegt.):

Änderung der HTML-Datei

Einfügen in die CSS-Datei (weiterer Klassen-Selektor .rand. Die Klasse rand wird in der HTML-Datei festgelegt.):

Änderung ger HTML-Datei:

Einfügen in die CSS-Datei (weiterer Klassen-Selektor .mitte. Die Klasse mitte wird in der HTML-Datei festgelegt.):

Änderung der HTML-Datei:

Selektoren

(Bestimmen, worauf sich die Angaben beziehen.)

ID-Selektor (HTML id="idname" CSS #idname): eindeutig, sollte nur einmal pro Seite vorkommen.
Klassenselektor (HTML class="klasse" CSS .klasse) kann beliebig oft wiederverwendet werden.
Elementselektor (HTML p, h1, ... CSS p, h1, ...) wählt alle Elemente dieses Typs.

Selektoren, die sich auf HTML-Elemente beziehen, haben die Klassenbezeichnung des HTML-Elements. Selektoren, die sich auf Klassendefinitionen beziehen, beginnen mit einem Punkt und haben die im HTML-Text festgelegte Klassenbezeichnung.

Verwende class-Attribute, wenn die gleiche Stildefinition mehrere Male in einem Dokument benutzt werden soll. Ein id-Attribute kommen zum Einsatz, wenn ein Stil nur auf ein einziges Element in einem Dokument angewandt werden soll. Die Klassendefinition des id-Attributs in der CSS-Datei beginnt mit #.

Auftrag 2:

Speicher die Dateien, die im HTML-Editor entwickelt worden sind, auf dem lokalen Rechner ab.

Info:CSS-Klassen und CSS-Eigenschaften

Mit einem HTML-Tag style definiert man das Aussehen einzelner Elemente auf einer Webseite. Es gibt verschiedene Möglichkeiten style-Elemente zu platzieren.

direkt bei einem HTML-Tag im body
im head des Quelltextes (s. Beispiel oben)
in einer CSS-Datei

Hier wird vorrangig die dritte Möglichkeit beschrieben.

CSS-Klassen

.details {
margin: 20px;
height: 60%;
}

CSS-Klassen dienen der einheitlichen Formatierung von HTML-Seiten und erleichtern die Trennung von Inhalt und äußere Gestaltung.

Die Definition einer CSS-Klasse beginnt mit einem Punkt, gefolgt von einem Namen, den man frei wählen kann. Dann kommen geschweifte Klammern.

Um die vereinbarten Formatierungen den Tags im body zuzuordnen, wird der Name der CSS-Klasse als class-Attribut in dem Tag angegeben: class="details"

In den geschweiften Klammern stehen die CSS-Eigenschaften, die das HTML-Element haben soll.

Beispiel: text-align: center; also CSS-Eigenschaft, Doppelpunkt, Wert und Semikolon

CSS-Eigenschaften (Übersicht am Seitenende)

background-color Hintergrundfarbe (red, black, white, yellow ..)

color Textfarbe (red, black, white, yellow ..)

text-align Textausrichtung (left, right, center)

font-size Textgröße (12px, 10pt)

float Positioniert ein Element (left, right, none)

height Höhe eines Elements (100px, 80%)

width Breite eines Elements (100px, 80%)

border Rahmen ums Element (1px solid black, dotted, dashed, double)

margin Außenabstand um das Element (10px)

padding Innenabstand im Element zwischen Rahmen und Text (10px)

display: flex; macht die Navigation horizontal

Einheiten: px (Pixel) pt (Punkt) % (Prozent) em (1 em entspricht der Schriftgröße)

Info: CLASS-Attribute

div-Tag

Mit einem div-Element leitet man einen Bereich ein, in den man mehrere Elemente einschließen kann.

Alles, was zwischen dem Tag und dem abschließenden Tag steht, wird als Teil des Bereichs interpretiert.

class-Attribut

Mit einem class-Attribut kann man jedem HTML-Element (z. B. einem Bereich) eine CSS-Klasse zuweisen. Man fügt nur den Namen der CSS-Klasse in das HTML-Start-Tag für das Element ein. Den Punkt vor dem Klassennamen muss man weglassen. Ein Klassenname kann von mehreren HTML-Elementen benutzt werden.

Beispiel class="container"

Zur Einladung 2 (Kapitel 2) hat ChatGPT auch eine CSS-Datei generiert. Die soll nun analysiert werden.

Auftrag 3:

Erläutere die CSS-Klassen in der CSS-Datei zur Einladung 2.

HTML-Editor mit Einladung2 (HTML-Datei und CSS-Datei) starten

Auftrag 4 (Einladung 4):

Überarbeite eine HTML-Seite für eine neue Version der Einladung. Die Einladung soll ein Bild und einen Link enthalten. Die Oberfläche soll durch Definition von CSS-Klassen in der CSS-Datei gestaltet werden.

Du kannst die HTML-Seiten direkt mit dem HTML-Editor bearbeiten. Wähle eine Einladungsversion, die du überarbeiten möchtest. Speichere die überarbeitete Einladung als Einladung3 in dem lokalen Ordner.

Optische Gestaltung von Tabellen

Im vorhergehenden Kapitel wurde eine Auswertungstabelle erstellt; hier soll nun die optische Gestaltung verbessert werden.

Auftrag 5:

Starte den HTML-Editor mit der Auswertungstabelle aus Kapitel 3 und ergänze schrittweise die CSS-Befehle. Notiere stichpunktartig die Änderungen in der optischen Darstellung.

HTML-Editor mit Auswertungstabelle starten

CSS-Datei zur Auswertungstabelle:

Bei der Zeile mit den meisten Stimmen soll die Hintergrundfarbe geändert werden. Das muss in der HTML-Datei angegeben werden.

Speichere die HTML-Datei und die CSS-Datei in einem lokalen Ordner ab.

Auftrag 6:

In Kapitel 3 hast du deinen eigenen Stundenplan als HTML-Datei eingegeben und in einem lokalen Ordner gespeichert. Jetzt soll mit einer CSS-Datei die optische Gestaltung verbessert werden.

Lade die HTML-Datei, die deinen Stundenplan enthält, in den HTML-Editor.

Interaktiver HTML, CSS & JS EDITOR

Folgende Eigenschaften soll der Stundenplan haben.

Die Tabellenelemente soll einen Rand haben.
Höhe und Breite der Datenzellen sollen festgelegt werden.
Schriftliche Fächer sollen eine gelbe Hintergrundfarbe bekommen.

HTML- und CSS-Dateien mit dem Text-Editor erstellen

In den letzten Kapiteln sind die HTML- und CSS-Dateien mit Hilfe des HTML-Editors entwickelt worden. Es besteht aber auch weiterhin die Möglichkeit, wie im ersten Kapitel beschrieben, das Erstellen der HTML- und CSS-Datein mit einem einfachen Text-Editor und die Darstellung der Seite mit dem Standardbrowser vorzunehmen. Dazu muss in der HTML-Datei ein LINK eingefügt werden, der die HTML-Datei mit der CSS-Datei verbindet.