WikiDer > Cascading Style Sheets

Cascading Style Sheets
Status	Veröffentlicht
Startjahr	1994
Autoren	W3C
Zugehörige Normen	HTML
Abkürzung	C.S.S
Domain	Weltweites Netz
Webseite	Webseite
Portal    Informatik

Cascading Style Sheets (abgekürzt zu C.S.S), Stylesheets, sind eine Gelegenheit, Design von Websitesie von ihrem eigentlichen Inhalt zu entkoppeln und zentral zu erfassen. Das englische „style“ hat die Bedeutung von „Layout“, nicht von Schreibstil. Der Begriff "Kaskadierung" (wie ein Wasserfall) bezieht sich auf die Möglichkeit, Formatierungseigenschaften zu erben.

Die CSS-Informationen für das Styling des Dokuments werden dem HTMLCode davon. Diese Informationen können in der HTML-Datei selbst enthalten sein, aber auch in einer separaten Datei, auf die das HTML-Dokument verweist. Eine solche externe Datei wird auch genannt Stylesheet erwähnt.

Ein wichtiger Grund für die Einführung von Cascading Style Sheets war die einfachere und einheitlichere Gestaltung von Webseiten mit weniger Webbrowser-spezifische Macken. Es World Wide Web Konsortium (W3C) hat hierfür den Standard festgelegt. Der etablierte Standard wurde im Laufe der Jahre erheblich erweitert. Der ursprüngliche Standard ist bekannt als CSS1. Spätere Erweiterungen sind bekannt als CSS2 und CSS3. Diese neueste Erweiterung (CSS3) befindet sich teilweise noch in der Entwicklung und ist daher kein offizieller Standard.

Aspekte des Stils und der Vererbung

Mit Cascading Style Sheets kann das Design jedes Elements einer Webseite bestimmt werden. Ein Element einer Webseite wird mit a . definiert HTML-Tag. Der Begriff kaskadieren zeigt an, dass der Stil der Elemente Erbe Exponate: jedes Element nimmt den Stil seiner Elternteil-Element, es sei denn, für dieses Element ist ein benutzerdefinierter Stil angegeben. Jeder Webbrowser verfügt über ein integriertes Stylesheet die das Design aller Elemente bestimmt, wenn es keine gibt Stylesheets einem Dokument beigefügt werden.

EIN Stil besteht aus einer Reihe von Aspekten wie z Schriftstil und Vordergrund- und Hintergrundfarbe. Auch Randbreite, horizontale und vertikale Position, Sichtbarkeit, Transparenz, ob ein Element über oder unter einem anderen Element liegt und viele andere Aspekte können berücksichtigt werden Stylesheet Sind angegeben.

Jeder Aspekt des Stils wird unabhängig von geerbt KindElemente einer Webseite. Daher müssen nur die abweichenden Aspekte eines Stils angegeben werden. Wenn der Stil eine Schriftart für das gesamte Dokument angibt, wird diese Schriftart im gesamten Dokument verwendet und muss nicht für jedes Element separat angegeben werden.

Nicht alle Aspekte eines Stils werden vererbt. Breite und Höhe eines Elements werden beispielsweise nicht vererbt. Wenn ein Element eine Box mit einer angegebenen Breite bildet, dann bezieht sich ein relativer Bezeichner für die Breite von Kindelementen auf die Breite des Box. Wenn die Breite eines Tisches 100 beträgt Pixel und eine Zelle in dieser Tabelle hat eine Breite von 25 %, das heißt 25 % von 100 Pixeln.

CSS bietet mit Medientypen, die Möglichkeit, für verschiedene Medientypen, auf denen eine Webanwendung ausgeführt werden kann, einen anderen Stil zu definieren. Dadurch kann der Stil einer Webseite für die Anzeige auf einem on angepasst werden Bildschirm, auf Papier (wenn die Seite gedruckt wird), a Handheld oder ein Braillezeile. Im Falle von Sprachsynthese Mittels eines Sprachbrowsers kann sogar per CSS festgestellt werden, ob der Text von einer männlichen oder weiblichen Stimme gesprochen wird und wie die Geschwindigkeit und Tonhöhe sind.

Klassen

ein.extern:schweben{Hintergrundfarbe:Gelb}

Die Klasse von a HTML-Element wird durch den Namen des Etikett. Es ist jedoch möglich, Etikett Klasse hinzufügen (class="erstellter_klassenname"), wodurch das Element zum Stil der entsprechenden Klasse im Stylesheet übernimmt. Die Stilaspekte, die in dieser entsprechenden Klasse nicht angegeben sind, erbt das Element jedoch immer noch davon Elternteil Element oder der Etikett Klasse.

CSS weiß es auch Pseudoklassen. Dies zeigt an, dass der Stil eines Elements von einem Status abhängt. Eine bekannte Pseudoklasse ist der Zustand von a Verknüpfung, kann der Text eines Links eine andere Farbe haben, wenn das entsprechende Dokument kürzlich angezeigt wurde. Eine weitere Pseudoklasse ist die schweben was den Stil eines Elements ändert, wenn sich die Maus im Element befindet.

Priorität

Da es verschiedene Möglichkeiten gibt, einen Stil anzugeben, ist seine Priorität explizit geregelt. Die Priorität ist unten angegeben (eine höhere Priorität hat Vorrang vor einer niedrigeren). Jeder Aspekt des Stils wird separat betrachtet.

1. Stil mit !wichtigZeile in der Stildefinition.
2. Stil angegeben in der Etikett des Elements.
3. Stil nach dem Namen der Ich würde in dem Etikett.
4. Stil nach dem Namen der Klasse in dem Etikett.
5. Stil davon Elternteil-Element.
6. Stil nach dem Namen der Etikett (nicht explizit genannte Stilaspekte werden durch die eingebauten Stylesheet im Browser).

Neben dieser Priorität hat CSS eine weitere Priorität bezüglich Ich würde und Klasse. Es kommt darauf an, wohin sie geschrieben werden.

1. beschrieben zwischen den KörperStichworte
2. beschrieben zwischen KopfTagstag
3. in einem extern verlinkten Stylesheet beschrieben
4. in einem importierten Stylesheet in einem extern verlinkten Stylesheet beschrieben.

Geschichte

Von Anfang an weltweites Netz Jeder Browser verfügte über ein eigenes internes Stylesheet, das dafür sorgte, dass die Tags in einem Dokument interpretiert wurden. Das Konzept der Cascading Style Sheets wurde 1994 von der norwegischen Håkon Wium Lie. Er beschloss, mit dem Holländer zusammenzuarbeiten Bert Bos der zu dieser Zeit an seinem eigenen Browser arbeitete (argo), die Stylesheets verwendet.

Der Vorschlag wurde von Håkon Wium Lie auf der Konferenz "Mosaic and the Web" in . vorgestellt Chicago, und 1995 wieder zusammen mit Bert Bos. Damals war W3C in Gründung und organisierte ein Projekt zur Entwicklung eines Standards für CSS. Im Dezember 1996 wurde die CSS1-Empfehlung veröffentlicht. 1997 begann eine W3C-Arbeitsgruppe mit der Erweiterung der Spezifikation. Dies führte zu der CSS2-Empfehlung, die im Mai 1998 veröffentlicht wurde. Eine Änderung an CSS2 (genannt CSS2 Revision 1, CSS2.1) änderte Teile des CSS2-Standards; unter anderem wurden einige neue Werte hinzugefügt und nicht implementierte Teile aus der Norm entfernt. Eine weitere Erweiterung von CSS zu CSS3 ist beim W3C in Entwicklung.

Unterstützung

Obwohl die CSS1-Empfehlung 1996 veröffentlicht wurde, wurde erst im Jahr 2000 ein Browser verfügbar, der diese Spezifikation vollständig unterstützte. Der erste Browser, der diese Unterstützung anbietet, war Internet Explorer 5.0 für die Mac. Bald folgten jedoch andere Browser.

Zum Zeitpunkt des Schreibens (2018) unterstützen fast alle Browser CSS3.

Standardisierung

Frameworks

CSS-Frameworks sind vorgefertigte Bibliotheken, die das Formatieren von Webseiten mit der Cascading Style Sheets-Sprache einfacher und konformer machen sollen. CSS-Frameworks umfassen Blueprint, Bootstrap, Cascade Framework, Foundation und Materialise. Wie Programmier- und Skriptsprachenbibliotheken sind CSS-Frameworks normalerweise als externe .css-Blätter enthalten, auf die im HTML-Tag verwiesen wird <head>. Sie bieten einige vorgefertigte Optionen zum Gestalten und Formatieren der Webseite. Obwohl viele dieser Frameworks veröffentlicht wurden, verwenden einige Autoren sie hauptsächlich für das Rapid Prototyping oder zum Lernen von und bevorzugen "handgefertigtes" CSS, das für jede veröffentlichte Site geeignet ist, ohne den Design-, Wartungs- und Download-Overhead vieler ungenutzter Funktionen.^[1]

Designmethoden

Wenn die Größe der in einem Projekt verwendeten CSS-Ressourcen wächst, muss sich ein Entwicklungsteam oft für eine gemeinsame Designmethodik entscheiden, um sie organisiert zu halten. Die Ziele sind einfache Entwicklung, einfache Zusammenarbeit während der Entwicklung und Leistung der im Browser implementierten Stylesheets. Beliebte Methoden sind OOCSS (Object Oriented CSS), ACSS (Atomic CSS), oCSS (Organic Cascade Style Sheet), SMACSS (Scalable and Modular Architecture for CSS) und BEM (Block, Element, Modifier).

Siehe auch

• Liste der Programmiersprachen