Benutzer-Werkzeuge

Webseiten-Werkzeuge


fortbildungen:webdesign-lernen:css-spickzettel

Dies ist eine alte Version des Dokuments!


CSS Einführung und Spickzettel

CSS steht für Cascading Stylesheets.

  • style bedeutet „Stil“, im Kontext der Gestaltung von digitalen Produkten meint man damit meist das Aussehen von Elementen
  • sheet bedeutet „Blatt“ oder „Boden“ – ein Stylesheet ist also eine „Blatt voller Stilanweisungen“
  • cascading bedeutet „Kaskade“, das ist meist ein Wasserfall, der über mehrere Stufen herabfließt. Im übertragenen Sinn ist bei CSS ein Prinzip gemeint, nach dem festgelegt wird, welche CSS-Regeln für welche Elemente gelten. Der CSS-Mitautor Håkon Wium Lie schreibt auf seiner Website
cascading: The process of combining several style sheets and resolving conflicts between them.

Auf deutsch also etwa: Die Methode, wie verschiedene Stylesheets kombiniert werden und wie Konflikte zwischen ihnen aufgelöst werden. Diese Regeln sind durchaus komplex und werden hier näher erklärt.

Prinzip von CSS

Modernem HTML und CSS liegt das Prinzip zugrunde, dass man Inhalt und Gestaltung in zwei verschiedene Bereiche trennt.

  • HTML ist strukturierter Inhalt,
  • CSS liefert die Gestaltungsinformationen für den Inhalt.

Eine CSS-Datei enthält also die Darstellungsinformationen, mit denen eine verknüpfte HTML-Struktur visuell gestaltet werden soll. Anstatt die Informationen über z.B. Schriftgröße, Farben, Layout etc. mit dem HTML-Inhalt zu mischen, werden all diese Informationen in eine oder wenige CSS-Dateien ausgelagert. So sind sie übersichtlicher und leichter zu pflegen.

Jede HTML-Datei enthält nur Inhalte, der mit HTML-Elementen strukturiert ist. Im <head>-Bereich der Datei wird eine Verknüpfung zur CSS-Datei hergestellt, von der die HTML-Datei ihre Darstellungsinformationen „holt“ (siehe unten).

Verschiedene CSS-Dateien für verschiedene Geräte

Durch das Prinzip der Trennung von Inhalt und Gestaltung erlaubt es auch, den gleichen HTML-Inhalt je nach Kontext oder Gerät unterschiedlich zu gestalten. Man kann eine CSS-Datei für die Darstellung der Website auf dem Desktop anbieten, eine weitere für die kleinen Displays von Mobilgeräten und wieder eine andere für die Ausgabe an einen Drucker (wo z.B. Navigationselemente überflüssig sind und daher ausgeblendet werden können).

Aufbau einer CSS-Regel

Eine CSS-Regel besteht aus dem Selektor (selector), einer Liste von Eigenschaften (property) und deren konkreten Werten (value). Wie bei allen „Computer-Sprachen“ muss man die exakte Schreibweise bis ins Detail beachten, damit keine Darstellungsfehler passieren. Achte also auf die Position der geschwungenen Klammern {}, des Doppelpunkts : und des Semikolons ; .

Arten von Selektoren

Häufig benutzte CSS Eigenschaften

Grundlegender Aufbau einer CSS-Datei

Eine CSS-Datei hat einen sehr einfachen Aufbau: Sie enthält meist einfach eine Sammlung von CSS-Regeln. Die Reihenfolge der Regeln ist nur in fortgeschrittenen Spezialfällen von Bedeutung (Stichwort: „CSS-Cascade“).

Hier ein Beispiel:

body {
	background-color: #cce9d0;
}
 
header {
	margin: 2em 0;
	padding: 1em;
	background-color: #fff;
}
 
nav {
	margin: 2px 0px;
	padding: 0.5em;
	border: 1px solid #ccc;
	background-color: #fff;
}
 
article {
	margin: 2em 0;
	padding: 1em;
	background-color:#fff;
}
 
#main {
	background-color:#f7f58c;
}
 
article section {
	margin: 2em 0;
}
 
 
article aside {
	margin:1em 0;
	border:1px solid #ccc;
	background-color:#ffc;
}
 
aside.infobox {
	width: 40%;
	float: right;
	margin-left:2em;
	padding: 1em;
}

Verbindung von HTML- und CSS-Datei

<link rel="stylesheet" href="styles.css">
fortbildungen/webdesign-lernen/css-spickzettel.1447838172.txt.gz · Zuletzt geändert: 06.08.2020 (10:37) (Externe Bearbeitung)

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki