====== 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 „Bogen“ – Ein Stylesheet ist also eine „Blatt voller Stilanweisungen“. **//cascading//** kommt von „Kaskade“, das ist meist ein Wasserfall, der über mehrere Stufen herabfließt. Im übertragenen Sinn ist bei CSS ein Prinzip gemeint, nach dem //stufenweise// festgelegt wird, welche CSS-Regeln für welche Elemente gelten. Der CSS-Mitautor Håkon Wium Lie schreibt [[http://people.opera.com/howcome/2006/phd/#h-357|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 im Artikel [[http://www.sitepoint.com/web-foundations/cascade/|The Cascade]] näher erklärt. ===== Erklärvideo: Cascading Stylesheets ===== {{youtube>CPKDQIvLrGY?640x360}} ===== 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 [[fortbildungen:webdesign-lernen:html-spickzettel|HTML-Elementen]] strukturiert ist. Im
-Bereich der Datei wird eine Verknüpfung zur CSS-Datei hergestellt, von der die HTML-Datei ihre Darstellungsinformationen „holt“ ([[#verbindung-von-html-und-css-datei|siehe unten]]). {{:fortbildungen:webdesign-lernen:html-css-prinzip.png?nolink|}} ==== 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). {{:fortbildungen:webdesign-lernen:css-geraetespezifisch.png?nolink|}} ===== 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 '';'' {{:fortbildungen:webdesign-lernen:css-regel.png?nolink|}} ===== Arten von Selektoren ===== Es gibt eine ganze Reihe von CSS-Selektoren. Hier sollen nur die wichtigsten erklärt werden. |<100% 15em 10em >| ^Name^Beispiel^Erklärung^ |Element-Selektor |''header''|Wählt das jeweilige HTML-Element aus, hier z.B. \\ \\ ''
article {
border-width:1px;
border-style: solid;
border-color:#ccc;
}
article {
border: 1px solid #ccc;
}
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;
}
/* dient für Randbemerkungen */
article aside {
margin:1em 0;
border:1px solid #ccc;
background-color:#ffc;
}
/* in der Infobox erscheinen weiterführende Links zu einem Artikel */
aside.infobox {
width: 40%;
float: right;
margin-left:2em;
padding: 1em;
}
==== Kommentare ====
In CSS-Dateien kann man Kommentare einbauen, die vom Browser ignoriert werden. Das ist nützlich, um sich später noch erinnern zu können, warum man bestimmte Dinge so und nicht anders gestaltet hat. Auch wenn man mit anderen zusammenarbeitet, ist es sinnvoll, Kommentare zu hinterlassen. Man schreibt den Kommentar zwischen folgende Zeichenkombination ''/* dies ist ein Kommentar */''
===== Verbindung von HTML- und CSS-Datei =====
Die CSS-Datei wird durch ein ''link''-Element im ''''-Bereich einer HTML-Datei mit dieser verbunden. Einzeln sieht dieses Element so aus:
Im Kontext der ganzen HTML-Datei so:
Seitentitel