html tutorial - html css - html5 tutorial

html css - Cascading Style Sheets

Legt fest, wie ein besonders ausgezeichneter Inhalt oder Bereich einer Webseite dargestellt werden soll.

• Trennung von Inhalt (HTML, XML) und Darstellung
• CSS als eigene Ressource ladbar (z.B. stylesmobile.css)
• Ermöglicht unterschiedliche Ausgabe der gleichen Seite für verschiedene Medien (Browser, Tablet, Mobiltelefon, …)

css Beispiel

css Ausgabe

css Grundlagen

Im Laufe der Jahre ist HTML um Elemente erweitert worden, die der visuellen Gestaltung der Dokumente dienen. Das lief der ursprünglichen Idee einer Systemunabhängigkeit entgegen.

Eine Rückbesinnung auf die Trennung von Struktur und Layout (besser: Präsentation) wurde durch die Definition von Cascading Style Sheets (CSS) vorgenommen. So soll das Aussehen bzw.

die Darstellung des Dokuments in einer separaten Datei, dem sogenannten Stylesheet, festgelegt werden. Dies verbessert die Anpassungsfähigkeit des Layouts an das jeweilige Ausgabegerät und an spezielle Bedürfnisse der Benutzer, beispielsweise eine spezielle Darstellung für Sehbehinderte.

Heutzutage ist die CSS-Unterstützung der Browser ausreichend, um damit eine anspruchsvolle Gestaltung zu realisieren.

In den Anfangsjahren von HTML bis in die 2000er Jahre hinein wurde noch nicht streng zwischen Layout und Seitenphysik unterschieden.

So wurde Design mit Hilfe von Layout-Attributen wie color="Farbe" oder Layout-Tags wie <font> umgesetzt oder das Aussehen von Tabellen direkt im table-Bereich grob vorgegeben. Dies gilt heute als veraltet und unprofessionell.

Außerdem lässt sich der CSS-Code auch in einer Seite ohne ausgelagerte Datei einbinden.

Eine CSS-Datei kann im HTML-Kopf über das link-Element eingebunden werden:

css syntax

Der Aufbau von CSS-Anweisungen

Eine CSS-Anweisung gibt an, dass für festgelegte Teile eines Dokuments eine Kombination von bestimmten Eigenschaften gelten soll.

Geschrieben wird sie als eine durch Kommata getrennte Aufzählung von Selektoren („Für diese Typen von Teilen …“), gefolgt in geschweiften Klammern von einer semikolongetrennten Liste von Eigenschafts-Deklarationen („… nimm die folgenden Eigenschaften!“).

Jede Eigenschaftsdeklaration besteht aus der Bezeichnung der Eigenschaft, einem Doppelpunkt, und dem Wert, den sie annehmen soll.

Nach der letzten Eigenschaftsdeklaration ist vor der schließenden, geschweiften Klammer ein abschließendes Semikolon erlaubt, aber nicht notwendig.

Um diese Teile einer Anweisungen herum ist Leerraum frei verwendbar. Häufig schreibt man den Doppelpunkt ohne Zwischenraum hinter den Eigenschaftsnamen, jede Eigenschaftsdeklaration in eine eigene Zeile, und schließt auch die letzte Eigenschaft mit einem Semikolon.

So kommt es bei späteren Änderungen weniger leicht zu Syntaxfehlern.

Ein Stylesheet darf beliebig viele solcher Anweisungen enthalten. Die folgende Tabelle enthält eine vollständige Übersicht aller Selektoren, mit denen Elemente (meist HTML-Elemente) ausgewählt werden können.

Selectors

A selector identifies the conditions that must be applied to an element so that the subsequent set of CSS declarations with its representation presets is applied to the element.

Such conditions clearly describe which properties (type, class, ID, attribute, or attribute value) must have elements or in which context they must be in the document (existence of a particular parent or predecessor element of a particular type) so that the representations apply to them , Multiple selection criteria can be linked in a selector.

css Beispiel

CSS Code :

HTML Code

Kombination mit HTML oder XHTML

Am häufigsten wird CSS mit HTML oder XHTML kombiniert. Dies kann an mehreren Orten geschehen, hier einige Beispiele:

Als externes Stylesheet für eine (X)HTML-Datei (link-Element)

Als externes Stylesheet für eine XHTML-Datei (xml-stylesheet-Verarbeitungsanweisung)

Als internes Stylesheet in einer (X)HTML-Datei (style-Element)

Innerhalb von (X)HTML-Tags (style-Attribut)

Die Einbindung als externes Stylesheet ist dabei die am häufigsten verwendete Methode. Sie bietet den Vorteil, dass für mehrere Dokumente, die denselben Regelsatz benutzen, das Stylesheet nur einmal heruntergeladen werden muss. Auch vermeidet man so sich wiederholenden Code.

CSS selbst ermöglicht durch den @import-Befehl das Einbinden von weiteren externen Stylesheets.

Es gibt drei Varianten, Stylesheets mit einem link-Element einzubinden. Sie unterscheiden sich darin, wie zwingend die Stylesheets berücksichtigt werden:

Dauerhafte Stylesheets (persistent)

Wenn man ein Stylesheet so einbindet, wird es auf jeden Fall verwendet.

Bevorzugte Stylesheets (preferred)

Sollte man diese Einbindung verwenden, wird das Stylesheet verwendet, bis der Benutzer ein anderes auswählt.

Alternative Stylesheets (alternate)

Wird das Stylesheet so mit dem HTML-Dokument verknüpft, muss der Benutzer ausdrücklich wählen, es zu verwenden. Das wirkt sich in den meisten Browsern aus (z. B. Internet Explorer, Firefox, Opera und Konqueror).

Somit wird diese Funktion von den meist benutzten Browsern implementiert. Außerdem sollte ein „alternate stylesheet“ nur in Verbindung mit einem anderen fest eingebundenen verwendet werden, damit es auch nur eine echte Alternative ist.