CSS
![]() Das offizielle Logo der neuesten Version, CSS 3 | |
Dateiname Erweiterung | .css |
---|---|
Internet -Medientyp | Text/CSS |
Uniform Typ Identifier (UTI) | public.css |
Entwickelt von | World Wide Web Konsortium (W3C) |
Erstveröffentlichung | 17. Dezember 1996 |
Neueste Erscheinung | CSS 2.1: Stufe 2 Revision 1 12. April 2016 |
Art des Formats | Style Sheet Sprache |
Container für | Stilregeln für HTML -Elemente (Stichworte) |
Enthalten von | HTML -Dokumente |
Offenes Format? | Ja |
Webseite | www |
Cascading Style Sheets (CSS) ist ein Style Sheet Sprache verwendet zur Beschreibung der Präsentation eines Dokuments in a Auszeichnungssprache wie zum Beispiel Html oder Xml (einschließlich XML -Dialekte wie SVG, MathML oder XHTML).[1] CSS ist eine Eckpfeilertechnologie der Weltweites Netzneben HTML und JavaScript.[2]
CSS wurde entwickelt, um die Trennung von Präsentation und Inhalten einschließlich der Trennung zu ermöglichen, einschließlich Layout, Farben, und Schriftarten.[3] Diese Trennung kann den Inhalt verbessern Barrierefreiheit; Bereitstellung mehr Flexibilität und Kontrolle in der Spezifikation der Präsentationsmerkmale; Mehrfach aktivieren Webseiten Formatierung durch Angabe der relevanten CSS in einer separaten .css -Datei, die die Komplexität und Wiederholung im Strukturinhalt verringert; und aktivieren Sie die .css -Datei zwischengespeichert Verbesserung der Seitenlastgeschwindigkeit zwischen den Seiten, die die Datei und ihre Formatierung teilen.
Die Trennung von Formatierung und Inhalten macht es auch machbar, dieselbe Markup-Seite in verschiedenen Stilen für verschiedene Rendering-Methoden wie On-Screen-PROTE, PROT (VIC OH Sprachbasierter Browser oder) zu präsentieren Bildschirmleser) und auf Braille-basiert Taktile Geräte. CSS hat auch Regeln für die alternative Formatierung, wenn auf den Inhalt auf a zugegriffen wird Mobilgerät.[4]
Der Name Kaskadierung stammt aus dem angegebenen Prioritätsschema, um festzustellen, welche Stilregel gilt, wenn mehr als eine Regel mit einem bestimmten Element übereinstimmt. Dieses kaskadierende Prioritätsschema ist vorhersehbar.
Die CSS -Spezifikationen werden von der aufrechterhalten World Wide Web Konsortium (W3C). Internetmedientyp (Mime Typ) Text/CSS
ist zur Verwendung mit CSS von RFC 2318 (März 1998) registriert. Der W3C betreibt kostenlos CSS -Validierungsdienst Für CSS -Dokumente.[5]
Zusätzlich zu HTML unterstützen andere Markup -Sprachen die Verwendung von CSS einschließlich Xhtml, einfach xml, SVG, und Xul.
Syntax
CSS hat eine einfache Syntax und verwendet eine Reihe englischer Schlüsselwörter, um die Namen verschiedener Stileigenschaften anzugeben.
Ein Stilblatt besteht aus einer Liste von Regeln. Jede Regel oder Regeleinstellung besteht aus einem oder mehreren Selektoren, und ein Deklarationsblock.
Wähler
In CSS, Selektoren Erklären Sie, auf welchen Teil des Markups ein Stil gilt, indem Sie Tags und Attribute im Markup selbst übereinstimmen.
Die Selektoren können für Folgendes gelten:
- alle Elemente eines bestimmten Typs, z. Die Header der zweiten Ebene H2
- Elemente angegeben durch Attribut, im Speziellen:
- Ich würde: Ein im Dokument eindeutiges Bezeichner, das mit einem Hash -Präfix identifiziert wurde, z.
#id
- Klasse: Eine Kennung, die mehrere Elemente in einem Dokument kommentieren kann, das mit einem Zeitraumsprefix identifiziert wurde, z.
.classname
- Ich würde: Ein im Dokument eindeutiges Bezeichner, das mit einem Hash -Präfix identifiziert wurde, z.
- Elemente, je nachdem, wie sie im Verhältnis zu anderen in der platziert sind Dokumentbaum.
Klassen und IDs sind fallempfindlich, beginnen mit Buchstaben und können alphanumerische Zeichen, Bindestriche und Unterstriche enthalten. Eine Klasse kann für eine beliebige Anzahl von Fällen von Elementen gelten. Eine ID darf nur auf ein einzelnes Element angewendet werden.
Pseudoklassen werden in CSS -Selektoren verwendet, um eine Formatierung basierend auf Informationen zuzulassen, die nicht im Dokumentbaum enthalten sind. Ein Beispiel für eine weit verbreitete Pseudoklasse ist :hover
, was den Inhalt nur identifiziert, wenn der Benutzer auf das sichtbare Element "zeigt" normalerweise durch Halten des Maus -Cursors darüber. Es ist einem Selektor wie in angehängt a:hover
oder #elementid:hover
. Eine Pseudoklasse klassifiziert Dokumentelemente wie z. :link
oder :visited
während a Pseudoelement macht eine Auswahl, die aus Teilelementen bestehen kann, wie z. ::first-line
oder ::first-letter
.[6] Beachten Sie die doppelkolonische Notation für Pseudo-Elemente gegenüber Einzelkolon-Notation für die Pseudoklasse.
Selektoren können in vielerlei Hinsicht kombiniert werden, um eine große Spezifität und Flexibilität zu erzielen.[7] Mehrere Selektoren können in einer Abstandsliste verbunden werden, um Elemente nach Ort, Elementtyp, ID, Klasse oder beliebiger Kombination davon anzugeben. Die Reihenfolge der Selektoren ist wichtig. Zum Beispiel, div .myClass {color: red;}
gilt für alle Elemente der Klassenmyklasse, die sich innerhalb der Divelelemente befinden, während .myClass div {color: red;}
Gilt für alle Divelelemente, die sich in Elementen der Klassenmyclass befinden. Dies ist nicht zu verwechseln mit verketteten Kennungen wie z. div.myClass {color: red;}
die für Divelemente der Klassenmyklasse gilt.
Die folgende Tabelle enthält eine Zusammenfassung der Selektorsyntax, die die Verwendung und die Version von CSS angibt, die sie eingeführt hat.[8]
Muster | Streichhölzer | Zuerst definiert in CSS -Ebene |
---|---|---|
E | ein Element vom Typ e | 1 |
E:link | Ein E -Element ist der Quellanker eines Hyperlinkes, von dem das Ziel noch nicht besucht (: link) oder bereits besucht (: besucht) | 1 |
E:active | Ein E -Element während bestimmter Benutzeraktionen | 1 |
E::first-line | die erste formatierte Linie eines E -Elements | 1 |
E::first-letter | Der erste formatierte Buchstaben eines E -Elements | 1 |
.c | Alle Elemente mit class = "C" | 1 |
#myid | Das Element mit id = "Myid" | 1 |
E.warning | Ein E -Element, dessen Klasse "Warnung" ist (die Dokumentsprache gibt an, wie die Klasse bestimmt wird) | 1 |
E#myid | Ein E -Element mit ID gleich "Myid" | 1 |
.c#myid | Das Element mit Class = "C" und ID entspricht "Myid" | 1 |
E F | ein f -Element nachkommt eines E -Elements | 1 |
* | Jedes Element | 2 |
E[foo] | Ein E -Element mit einem "Foo" -attribut | 2 |
E[foo="bar"] | Ein E -Element, dessen "Foo" -attributwert genau gleich "bar" ist | 2 |
E[foo~="bar"] | Ein E-Element, dessen "Foo" -attributwert eine Liste von durch weißspace getrennten Werten ist, von denen eines genau dem "Balken" entspricht, entspricht genau dem "Balken" | 2 |
E[foo|="en"] | Ein E-Element, dessen "Foo" -attribut eine beilFbrachten getrennte Liste von Werten hat (von links) mit "EN" beginnt (von links) | 2 |
E:first-child | Ein E -Element, erstes Kind seines Elternteils | 2 |
E:lang(fr) | Ein Element vom Typ E in Sprache "FR" (die Dokumentsprache gibt an, wie die Sprache bestimmt wird) | 2 |
E::before | generierte Inhalte vor dem Inhalt eines E -Elements | 2 |
E::after | generierte Inhalte nach dem Inhalt eines E -Elements | 2 |
E > F | ein F -Element -Kind eines E -Elements | 2 |
E + F | Ein F -Element, dem ein E -Element unmittelbar vorausgeht | 2 |
E[foo^="bar"] | Ein E -Element, dessen "Foo" -attributwert genau mit der String "Balkenleiste" beginnt | 3 |
E[foo$="bar"] | Ein E -Element, dessen "Foo" -attributwert genau mit der Zeichenfolge "Balken" endet | 3 |
E[foo*="bar"] | Ein E -Element, dessen "Foo" -attributwert das Substring "Balken" enthält | 3 |
E:root | Ein E -Element, Wurzel des Dokuments | 3 |
E:nth-child(n) | Ein E-Element, das n-te Kind seines Elternteils | 3 |
E:nth-last-child(n) | Ein E-Element, das n-te Kind seines Elternteils, zählt vom letzten | 3 |
E:nth-of-type(n) | ein E-Element, das n-te Geschwister seiner Art | 3 |
E:nth-last-of-type(n) | Ein E-Element, das n-te Geschwister seiner Art, zählt vom letzten | 3 |
E:last-child | Ein E -Element, das letzte Kind seines Elternteils | 3 |
E:first-of-type | Ein E -Element, das erste Geschwister seiner Art | 3 |
E:last-of-type | Ein E -Element, das letzte Geschwister seiner Art | 3 |
E:only-child | Ein E -Element, nur ein Kind seines Elternteils | 3 |
E:only-of-type | ein E -Element, nur Geschwister seiner Art | 3 |
E:empty | Ein E -Element, das keine Kinder hat (einschließlich Textknoten) | 3 |
E:target | Ein E -Element, das das Ziel des überweisenden URI ist | 3 |
E:enabled | Ein Benutzeroberflächenelement E, das aktiviert ist | 3 |
E:disabled | Ein Benutzeroberflächenelement E, das deaktiviert ist | 3 |
E:checked | Ein Benutzeroberflächenelement E, das überprüft wird (z. B. ein Funk-Button oder Kontrollkästchen) | 3 |
E:not(s) | Ein E -Element, das nicht mit einfachem Selektor s übereinstimmt | 3 |
E ~ F | Ein F -Element, dem ein E -Element vorausging | 3 |
Deklarationsblock
Eine Erklärungblock besteht aus einer Liste von Erklärungen in Zahnspangen. Jede Erklärung selbst besteht aus a Eigentum, ein Doppelpunkt (:
), und ein Wert. Wenn es mehrere Deklarationen in einem Block gibt, ein Semikolon (;
) muss eingefügt werden, um jede Deklaration zu trennen. Ein Optional Halbkolon nach der letzten (oder einzelnen) Erklärung kann verwendet werden.[9]
Eigenschaften werden im CSS -Standard angegeben. Jede Eigenschaft hat eine Reihe möglicher Werte. Einige Eigenschaften können jede Art von Elemente beeinflussen, andere gelten nur für bestimmte Gruppen von Elementen.[10][11]
Werte können Schlüsselwörter wie "Zentrum" oder "Erben" oder numerische Werte sein, wie z. 200px
(200 Pixel), 50vw
(50 Prozent der Ansichtsfenster) oder 80% (80 Prozent der Breite des übergeordneten Elements). Farbwerte können mit Schlüsselwörtern angegeben werden (z. B. "red
"), Hexadezimalwerte (z. #FF0000
, auch abgekürzt wie #F00
), RGB -Werte auf einer Skala von 0 bis 255 (z. RGB (255, 0, 0)
), RGBA -Werte, die sowohl Farbe als auch Alpha -Transparenz angeben (z. rgba(255, 0, 0, 0.8)
) oder HSL- oder HSLA -Werte (z. hsl(000, 100%, 50%)
, hsla(000, 100%, 50%, 80%)
).[12]
Länge Einheiten
Numerische ungleiche numerische Werte, die lineare Messungen darstellen 200px
oder 50VW
; oder ein prozentuales Zeichen, wie in 80%
. Einige Einheiten - cm
(Zentimeter); in
(Zoll); mm
(Millimeter); PC
(Pica); und pt
(Punkt) - sind absolut, was bedeutet, dass die gerenderte Dimension nicht von der Struktur der Seite abhängt; Andere - em
(em); ex
(ex) und px
(Pixel)[Klarstellung erforderlich] - sind relativ, was bedeutet, dass Faktoren wie die Schriftgröße eines übergeordneten Elements die gerenderte Messung beeinflussen können. Diese acht Einheiten waren ein Merkmal von CSS 1[13] und in allen nachfolgenden Überarbeitungen erhalten. Die vorgeschlagenen CSS -Werte und Einheiten -Modulstufe 3 enthält, wenn sie als W3C -Empfehlung angewendet werden, sieben weitere Länge eingerichtet: CH
; Q
; Rem
; VH
; vmax
; vmin
; und VW
.[14]
Verwenden
Vor CSS wurden fast alle Präsentationsattribute von HTML -Dokumenten im HTML -Markup enthalten. Alle Schriftfarben, Hintergrundstile, Elementausrichtungen, Grenzen und Größen mussten im HTML häufig wiederholt beschrieben werden. Mit CSS können die Autoren einen Großteil dieser Informationen in eine andere Datei verschieben, das Stylesheet, was zu erheblich einfacherem HTML führt.
Zum Beispiel Überschriften (H1
Elemente), Unterschriften (H2
), Sub-Sub-Headings (H3
) usw. werden strukturell unter Verwendung von HTML definiert. Im Druck und auf dem Bildschirm die Wahl von Schriftart, Größe, Farbe und Hervorhebung Für diese Elemente ist Präsentation.
Vor CSS dokumentieren Autoren, die solche zuweisen wollten typografisch Merkmale beispielsweise alle H2
Die Überschriften mussten das HTML -Präsentationsmarkup für jedes Auftreten dieses Überschriftentyps wiederholen. Dies machte Dokumente komplexer, größerer und fehleranfälligerer und schwierigerer Aufrechterhaltung. CSS ermöglicht die Trennung der Präsentation von der Struktur. CSS kann Farbe, Schriftart, Textausrichtung, Größe, Grenzen, Abstand, Layout und viele andere typografische Merkmale definieren und können dies unabhängig für den Bildschirm und die gedruckten Ansichten tun. CSS definiert auch nicht-visuelle Stile wie Lesegeschwindigkeit und Betonung der sofortigen Textleser. Das W3c hat jetzt veraltet Die Verwendung aller Präsentations -HTML -Markups.[15]
Zum Beispiel würde unter Pre-CSS-HTML ein mit roter Text definierter Überschriftenelement als:
<H1> <Schriftart Farbe="rot">Kapitel 1.Schriftart> </H1>
Mit CSS kann dasselbe Element unter Verwendung von Stileigenschaften anstelle von HTML -Präsentationsattributen codiert werden:
<H1 Stil="Farbe Rot;">Kapitel 1.H1>
Die Vorteile davon sind möglicherweise nicht sofort klar, aber die Leistung von CSS wird deutlicher, wenn die Stileigenschaften in ein internes Stilelement oder noch besser eine externe CSS -Datei platziert werden. Angenommen, das Dokument enthält das Stilelement:
<Stil> H1 { Farbe: rot; } Stil>
Alle H1
Elemente im Dokument werden dann automatisch rot, ohne einen expliziten Code zu verlangen. Wenn der Autor später machen wollte H1
Elemente blau Stattdessen könnte dies erfolgen, indem das Stilelement geändert wird auf:
<Stil> H1 { Farbe: blau; } Stil>
Anstatt mühsam das Dokument durchzugehen und die Farbe für jeden Einzelnen zu ändern H1
Element.
Die Stile können auch in einer externen CSS -Datei platziert und unter Verwendung von Syntax ähnlich wie folgt geladen werden:
<Verknüpfung href="Pfad/to/file.css" rel="Stylesheet" Typ="Text/CSS">
Dies entkoppelt das Styling aus dem HTML -Dokument weiter und ermöglicht es, mehrere Dokumente neu zu steuern, indem sie einfach eine gemeinsame externe CSS -Datei bearbeitet.
Quellen
CSS -Informationen können aus verschiedenen Quellen bereitgestellt werden. Diese Quellen können der Webbrowser, der Benutzer und der Autor sein. Die Informationen des Autors können weiter in Inline, Medientyp, Wichtigkeit, Selektorspezifität, Regelreihenfolge, Vererbung und Eigenschaftsdefinition eingeteilt werden. In einem separaten Dokument können sich Informationen im CSS -Stil befinden oder in ein HTML -Dokument eingebettet werden. Mehrere Stilblätter können importiert werden. Abhängig vom verwendeten Ausgangsgerät können unterschiedliche Stile angewendet werden. Beispielsweise kann die Bildschirmversion stark von der gedruckten Version unterscheiden, sodass die Autoren die Präsentation für jedes Medium angemessen anpassen können.
Das Stylesheet mit der höchsten Priorität steuert die Inhaltsanzeige. Deklarationen, die nicht in der Quelle mit höchster Priorität festgelegt sind, werden an eine Quelle mit niedrigerer Priorität wie dem Benutzeragentenstil weitergegeben. Der Prozess wird genannt Kaskadierung.
Eines der Ziele von CSS ist es, den Benutzern eine größere Kontrolle über die Präsentation zu ermöglichen. Jemand, der rote Kursivschriften schwer zu lesen findet, kann ein anderes Stilblatt auftragen. Abhängig vom Browser und der Website kann ein Benutzer aus verschiedenen Stilblättern wählen, die von den Designern bereitgestellt werden, oder alle hinzugefügten Stile entfernen und die Site mithilfe des Standardstylings des Browsers anzeigen oder nur den roten Italic -Kopf -Stil überschreiben können, ohne andere zu ändern Attribute.
Priorität | CSS -Quellentyp | Beschreibung |
---|---|---|
1 | Bedeutung | Das "!important "Annotation überschreibt die vorherigen Prioritätstypen |
2 | In der Reihe | Ein Stil, der auf ein HTML -Element über HTML "Style" -Matchnit angewendet wird |
3 | Medientyp | Eine Eigenschaftsdefinition gilt für alle Medientypen, es sei denn, ein medienspezifisches CSS ist definiert |
4 | Benutzerdefinierten | Die meisten Browser verfügen über die Zugänglichkeitsfunktion: ein Benutzer definiert CSS |
5 | Auswahlspezifität | Ein spezifischer kontextbezogener Selektor (#heading p ) Überschreiben Sie die generische Definition |
6 | Regelauftrag | Die letzte Regelerklärung hat eine höhere Priorität |
7 | Elternvererbung | Wenn eine Eigenschaft nicht angegeben ist, wird sie von einem übergeordneten Element geerbt |
8 | CSS -Eigenschaftsdefinition im HTML -Dokument | CSS -Regel oder CSS -Inline -Stil überschreibt einen Standard -Browser -Wert |
9 | Browser Standard | Die niedrigste Priorität: Der Browser -Standardwert wird durch W3C -Anfangswertspezifikationen bestimmt |
Spezifität
Spezifität bezieht sich auf die relativen Gewichte verschiedener Regeln.[16] Es bestimmt, welche Stile für ein Element gelten, wenn mehr als eine Regel gelten könnte. Basierend auf der Spezifikation hat ein einfacher Selektor (z. B. H1) eine Spezifität von 1, die Klassenauswahl eine Spezifität von 1,0 und ID -Selektoren eine Spezifität von 1,0,0. Da die Spezifitätswerte nicht wie im Dezimalsystem übertragen werden, werden Kommas verwendet, um die "Ziffern" zu trennen.[17] (Eine CSS -Regel mit 11 Elementen und 11 Klassen hätte eine Spezifität von 11,11, nicht 121).
Somit führen die folgenden Regeln für die angegebene Spezifität:
Selektoren | Spezifität |
---|---|
h1 {color: white;} | 0, 0, 0, 1 |
p em {color: green;} | 0, 0, 0, 2 |
.grape {color: red;} | 0, 0, 1, 0 |
p.bright {color: blue;} | 0, 0, 1, 1 |
p.bright em.dark {color: yellow;} | 0, 0, 2, 2 |
#id218 {color: brown;} | 0, 1, 0, 0 |
style=" " | 1, 0, 0, 0 |
Beispiele
Betrachten Sie dieses HTML -Fragment:
<html> <Kopf> <Meta Charset="UTF-8"> <Stil> #xyz { Farbe: blau; } Stil> Kopf> <Karosserie> <p Ich würde="xyz" Stil="Farbe grün;">Spezifität demonstrierenp> Karosserie> html>
Im obigen Beispiel die Erklärung in der Stil
Attribut überschreibt das in der Element, weil es eine höhere Spezifität hat und damit der Absatz grün erscheint:
Spezifität demonstrieren
Nachlass
Die Vererbung ist ein Schlüsselmerkmal in CSS. Es stützt sich auf die Beziehung zwischen Vorfahren, um zu operieren. Die Vererbung ist der Mechanismus, durch den Eigenschaften nicht nur auf ein bestimmtes Element, sondern auch auf seine Nachkommen angewendet werden.[16] Vererbung stützt sich auf dem Dokumentbaum, der die Hierarchie von ist Xhtml Elemente in einer Seite basierend auf Nesting. Nachkommenselemente können CSS -Eigenschaftswerte von jedem Vorfahren erben, das sie einschließt. Im Allgemeinen erben Nachkommenselemente textbezogene Eigenschaften, ihre Box-bezogenen Eigenschaften werden jedoch nicht vererbt. Eigenschaften, die vererbt werden können, sind Farbe, Schriftart, Buchstabenabstand, Linienhöhe, Listenstil, Textausrichtung, textindent, Texttransform, Sichtbarkeit, weißer Raum und Wortabstand. Eigenschaften, die nicht vererbt werden können, sind Hintergrund, Grenze, Anzeige, Schwimmer und Klar, Höhe und Breite, Rand, Min- und Max-Höhe und -Sweite, Umriss, Überlauf, Polsterung, Position, Textdekoration, vertikaler Align und Z -Index.
Die Vererbung kann verwendet werden, um zu vermeiden, dass bestimmte Eigenschaften immer wieder in einem Stilblatt deklariert werden, was kürzere CSS ermöglicht.
Vererbung in CSS ist nicht dasselbe wie Vererbung in klassenbasierten Programmiersprachen, wo es möglich ist, die Klasse B als "Gefälle A) zu definieren, aber mit Modifikationen".[18] Mit CSS ist es möglich, eine zu stylen Element mit "Klasse A, aber mit Modifikationen". Es ist jedoch nicht möglich, ein CSS zu definieren Klasse B wie das, mit dem dann mehrere Elemente gestaltet werden könnten, ohne die Modifikationen wiederholen zu müssen.
Beispiel
Angesichts des folgenden Stilblatts:
p { Farbe: rosa; }
Angenommen, es gibt ein P -Element mit einem Betonungselement (<em>) im Inneren:
<p> Dies ist zum <em>veranschaulichenem> Nachlassp>
Wenn dem EM -Element keine Farbe zugeordnet ist, erbt das betonte Wort "illustrate" die Farbe des übergeordneten Elements, p. Das Style Sheet P hat die Farbe Pink, daher ist das EM -Element ebenfalls rosa:
Dies ist zum veranschaulichen Nachlass
Whitespace
Die Whitespace zwischen Eigenschaften und Selektoren wird ignoriert. Dieser Code -Snippet:
Karosserie{Überlauf:versteckt;Hintergrund:#000000;Hintergrundbild:URL(Bilder/bg.gif);Hintergrund Wiederholung:No-Repeat;Hintergrundposition:links oben;}
ist funktional äquivalent zu diesem:
Karosserie { Überlauf: versteckt; Hintergrundfarbe: #000000; Hintergrundbild: URL(Bilder/bg.gif); Hintergrund Wiederholung: No-Repeat; Hintergrundposition: links oben; }
Eine häufige Möglichkeit, CSS zur Lesbarkeit zu formatieren, besteht darin, jede Eigenschaft einzuführen und ihm eine eigene Linie zu geben. Zusätzlich zur Formatierung von CSS zur Lesbarkeit können Kurzeigenschaften verwendet werden, um den Code schneller auszuschreiben, was auch bei gerenderter Renderung schneller verarbeitet wird:[19]
Karosserie { Überlauf: versteckt; Hintergrund: #000 URL(Bilder/bg.gif) No-Repeat links oben; }
Manchmal werden mehrere Eigenschaftswerte in ihre eigene Zeile eingerichtet:
@Schriftart { Schriftfamilie: 'Comic sans' Schriftgröße: 20px src: URL('first.example.com'), URL('Second.example.com'), URL('Third.example.com'), URL('Fourth.example.com'), }
Positionierung
CSS 2.1 definiert drei Positionierungsschemata:
- Normaler Fluss
- In der Reihe Elemente werden genauso ausgelegt wie die Buchstaben in Wörtern im Text, eine nach dem anderen über den verfügbaren Raum, bis kein Platz mehr ist, und dann eine neue Zeile unten starten. Block Elemente stapeln vertikal, wie Absätze und die Elemente in einer Kugelliste. Der normale Fluss umfasst auch die relative Positionierung von Block- oder Inline-Elementen sowie Einlaufboxen.
- Schwimmt
- Ein schwebendes Gegenstand wird aus dem normalen Fluss herausgenommen und so weit wie möglich nach links oder rechts im verfügbaren Raum verschoben. Andere Inhalte fließen dann neben dem schwebenden Element.
- Absolute Positionierung
- Ein absolut positionierter Gegenstand hat keinen Platz und keinen Einfluss auf den normalen Fluss anderer Gegenstände. Es nimmt seine zugewiesene Position in seinem Container unabhängig von anderen Gegenständen ein.[20]
Positionseigenschaft
Es gibt fünf mögliche Werte der position
Eigentum. Wenn ein Gegenstand auf andere Weise als auf andere Weise positioniert ist static
dann die weiteren Eigenschaften top
, bottom
, left
, und right
werden verwendet, um Offsets und Positionen anzugeben. Das Element mit Position statisch wird von der nicht beeinflusst top
, bottom
, left
oder right
Eigenschaften.
- Statisch
- Der Standardwert platziert das Element in die Normaler Fluss
- Relativ
- Der Artikel ist in die platziert Normaler Flussund dann von dieser Position verschoben oder ausgefallen. Nachfolgende Strömungselemente werden so ausgelegt, als ob der Gegenstand nicht bewegt worden wäre.
- Absolut
- An absolute Positionierung. Das Element ist in Bezug auf seinen nächsten nicht statischen Vorfahren positioniert.
- Fest
- Der Artikel ist absolut positioniert in einer festen Position auf dem Bildschirm, auch wenn der Rest des Dokuments gescrollt ist[20]
Schweben und klar
Das float
Eigenschaft kann einen von drei Werten haben. Unbedingt positioniert oder Fest Gegenstände können nicht schweben. Andere Elemente fließen normalerweise um schwebende Gegenstände, es sei denn, sie werden davon verhindert clear
Eigentum.
- links
- Der Artikel schwimmt links von der Linie, in der es erschienen wäre; Andere Gegenstände können um die rechte Seite fließen.
- Rechts
- Der Artikel schwimmt rechts von der Linie, in der es erschienen wäre; Andere Gegenstände können um die linke Seite fließen.
- klar
- Erzwingt das Element, unter („klare“) schwimmende Elemente nach links zu erscheinen (
clear:left
), Rechts (clear:right
) oder beide Seiten (clear:both
).[20][21]
Geschichte

CSS wurde zuerst von vorgeschlagen von Håkon Wium Lüge am 10. Oktober 1994.[22] Zu dieser Zeit arbeitete Lüge mit Tim Berners-Lee bei Cern.[23] Etwa zur gleichen Zeit wurden mehrere andere Stylesblattsprachen für das Web vorgeschlagen, und Diskussionen über öffentliche Mailinglisten und darin World Wide Web Konsortium führte zur ersten W3C CSS -Empfehlung (CSS1)[24] 1996 veröffentlicht. Insbesondere ein Vorschlag von Bert Bos war einflussreich; Er wurde Co-Autor von CSS1 und gilt als Mitschöpfer von CSS.[25]
Seit der Anfänge der Standardverallgemeinerungssprache bestanden in der einen oder anderen Form in der einen oder anderen Form (Style Sheets "(SGML) In den 1980er Jahren wurde CSS entwickelt, um Stilblätter für das Web bereitzustellen.[26] Eine Voraussetzung für eine Webstilblattsprache bestand darin, dass Stilblätter aus verschiedenen Quellen im Web stammen. Daher wie vorhandene Styleslaiensprachen mögen DSSSL und Fosi waren nicht geeignet. CSS hingegen lassen Sie den Stil eines Dokuments durch mehrere Stilblätter durch "Kaskadierung" -Stile beeinflusst werden.[26]
Als HTML wuchs, umfasste es eine breitere Vielfalt an stilistischen Fähigkeiten, um die Anforderungen von zu erfüllen Web-Entwickler. Diese Evolution gab dem Designer mehr Kontrolle über das Erscheinungsbild von Standort auf Kosten eines komplexeren HTML. Variationen in Webbrowser Implementierungen wie z. Violawww und Weltweites Netz,[27] Es wurde ein konsequentes Erscheinungsbild der Website schwierig, und die Benutzer hatten weniger Kontrolle darüber, wie Webinhalte angezeigt wurden. Der von Tim Berners-Lee entwickelte Browser/Redakteur hatte Style-Laken, die in das Programm fest codiert waren. Die Stilblätter könnten daher nicht mit Dokumenten im Web verknüpft werden.[23] Robert CailliauAuch von CERN wollte die Struktur von der Präsentation trennen, damit verschiedene Stilblätter eine unterschiedliche Präsentation für Druck, Bildschirmbasis und Redakteure beschreiben können.[27]
Die Verbesserung der Webpräsentationsfunktionen war ein Thema, das für viele in der Web-Community von Interesse ist und auf der Mailingliste im WWW-Stil neun verschiedene Stilblattsprachen vorgeschlagen wurden.[26] Von diesen neun Vorschlägen waren zwei besonders einflussreich auf das, was zu CSS wurde: Cascading HTML -Stilblätter[22] und Stream-basierter Styles Blattvorschlag (SSP).[25][28] Zwei Browser dienten als Testbett für die ersten Vorschläge; Lüge arbeitete mit Yves Lafon zusammen, um CSS in der Umsetzung Dave Raggett's Arena Browser.[29][30][31] Bert Bos hat seinen eigenen SSP -Vorschlag in der implementierten Argo Browser.[25] Danach arbeiteten Lügen und Bos zusammen, um den CSS -Standard zu entwickeln (das 'H' wurde aus dem Namen entfernt, da diese Stilblätter neben HTML auch auf andere Markupsprachen angewendet werden konnten).[23]
Der Vorschlag von Lüge wurde 1994 auf der Konferenz "Mosaic and the Web" (später WWW2) in Chicago, Illinois, und 1995 erneut mit Bert Bos vorgestellt.[23] Um diese Zeit wurde der W3C bereits eingerichtet und interessierte sich für die Entwicklung von CSS. Es organisierte einen Workshop gegenüber diesem Ende unter dem Vorsitz von Steven Pemberton. Dies führte dazu, dass W3C die Ergebnisse des HTML Editorial Review Board (ERB) zu CSS auf CSS hinzufügte. Lüge und BOS waren das primäre technische Personal in diesem Aspekt des Projekts mit zusätzlichen Mitgliedern, einschließlich Thomas Reardon von Microsoft auch teilnehmend. Im August 1996, Netscape Communication Corporation präsentierte eine alternative Stilblattsprache namens JavaScript -Stilblätter (JSSS).[23] Die Spezifikation war nie fertig und ist veraltet.[32] Bis Ende 1996 war CSS bereit, offiziell zu werden, und die Empfehlung der CSS Level 1 wurde im Dezember veröffentlicht.
Entwicklung von HTML, CSS und der Dom hatte alle in einer Gruppe, dem HTML Editorial Review Board (ERB), stattgefunden. Anfang 1997 wurde die ERB in drei Arbeitsgruppen aufgeteilt: HTML -Arbeitsgruppeuntersitz von Dan Connolly von w3c; DOM -Arbeitsgruppe unter dem Vorsitz von Lauren Wood von Softquad; und CSS -Arbeitsgruppeuntersitz von Chris Lilley von w3c.
Die CSS -Arbeitsgruppe begann Probleme mit der CSS -Stufe 1, was zur Schaffung von CSS Level 2 am 4. November 1997 führte. Sie wurde am 12. Mai 1998 als W3C -Empfehlung veröffentlicht. Im Jahr 1998 begonnen und ist ab 2014 noch in der Entwicklung.
Im Jahr 2005 beschlossen die CSS -Arbeitsgruppen, die Anforderungen für Standards strenger durchzusetzen. Dies bedeutete, dass bereits Standards wie CSS 2.1, CSS 3 -Selektoren und CSS 3 -Text von der Empfehlung von Kandidaten zum Arbeitsentwurf zurückgezogen wurden.
Schwierigkeiten mit der Adoption
Die CSS 1 -Spezifikation wurde 1996 abgeschlossen. Microsoft's Internet Explorer 3[23] wurde in diesem Jahr mit einer begrenzten Unterstützung für CSS veröffentlicht. Dh 4 und Netscape 4.x Es fügte mehr Unterstützung hinzu, aber es war in der Regel unvollständig und hatte viele Käfer Das verhinderte, dass CSS sinnvoll angenommen wurde. Es dauerte mehr als drei Jahre, bis ein Webbrowser nahezu voller Implementierung der Spezifikation erreichte. Internet Explorer 5.0 für die Macintosh, versand im März 2000, war der erste Browser, der volle (besser als 99 Prozent) CSS 1 unterstützte.[33] übertreffen Oper, was seit seiner Einführung der CSS -Unterstützung fünfzehn Monate zuvor der Führer gewesen war. Andere Browser folgten kurz darauf und viele von ihnen implementierten zusätzlich Teile von CSS 2.
Aber selbst als später "Version 5" Webbrowser eine ziemlich vollständige Implementierung von CSS anbieten, waren sie in bestimmten Bereichen immer noch falsch und waren mit Inkonsistenzen, Bugs und anderen behaftet Macken. Microsoft Internet Explorer 5.x für Windowsim Gegensatz zu den sehr anderen Dh für Macintosh, hatte eine fehlerhafte Umsetzung der CSS -Boxmodell, im Vergleich zu den CSS -Standards. Solche Inkonsistenzen und Variationen in der Funktionsunterstützung machten es den Designern schwierig, ein konsistentes Erscheinungsbild zwischen Browsern zu erzielen und Plattformen ohne die Verwendung von workarounds bezeichnet CSS -Hacks und Filter. Die IE Windows -Box -Modellfehler waren so ernst, wann Internet Explorer 6 Microsoft wurde veröffentlicht und führte einen rückwärtskompatiblen Modus der CSS-Interpretation vor ("Mackenmodus") Neben einem alternativen, korrigierten" Standardmodus ". Andere Nicht-Mikrosoft-Browser lieferten auch die Funktionen des Modus-Schalters. Es wurde daher für Autoren von notwendig Html Dateien, um sicherzustellen, dass sie besondere Unterscheidungsmerkmale enthielten "Standards-konforme CSS beabsichtigt" Marker um zu zeigen, dass die Autoren beabsichtigten, CSS in Einklang mit Standards korrekt zu interpretieren, anstatt für das inzwischen lange Obsolete bestimmt zu werden IE5/Windows -Browser. Ohne diesen Marker werden Webbrowser mit dem "Quirks-Modus" -Anschalter die Objekte auf Webseiten wie IE 5 unter Windows besitzen, anstatt CSS-Standards zu folgen.
Probleme mit der fleckigen Übernahme von CSS sowie Errata in der ursprünglichen Spezifikation führten die W3C dazu, den CSS 2 -Standard in CSS 2.1 zu überarbeiten, das sich näher an einen funktionierenden Schnappschuss der aktuellen CSS -Unterstützung in HTML -Browsern bewegte. Einige CSS 2 -Eigenschaften, dass kein Browser erfolgreich implementiert wurde, wurden fallen gelassen, und in einigen Fällen wurden definierte Verhaltensweisen geändert, um den Standard mit den vorherrschenden Implementierungen in Einklang zu bringen. CSS 2.1 wurde am 25. Februar 2004 zu einer Empfehlung von Kandidaten, aber CSS 2.1 wurde am 13. Juni 2005 wieder in den Arbeitsentwurf zurückgezogen.[34] und kehrte erst am 19. Juli 2007 zum Status der Kandidatenempfehlung zurück.[35]
Zusätzlich zu diesen Problemen die .css
Die Erweiterung wurde von einem Softwareprodukt verwendet, das zum Konvertieren verwendet wurde Power Point Dateien in kompakte Diashow -Dateien, Dateien,[36] Einige Webserver servierten also alle .css
[37] wie Mime Typ Anwendung/X-Punkte
[38] statt Text/CSS
.
Verkäuferpräfixe
Individuelle Browser -Anbieter führten gelegentlich neue Parameter vor Standardisierung und Universalisierung ein. Um die Eingriffe zu künftigen Implementierungen zu verhindern, haben Anbieter eindeutige Namen für die Parameter vorbereitet, wie z. -moz-
zum Mozilla Firefox, -Webkit-
benannt nach der Browsermotor von Apfelsafari, -Ö-
zum Opernbrowser und -Frau-
zum Microsoft Internet Explorer und frühe Versionen von Microsoft Edge das verwenden EdgeHtml.
Gelegentlich die Parameter mit dem Präfix des Anbieters wie z. -moz-radial-Gradient
und -Webkit-linear Gradient
haben eine leicht unterschiedliche Syntax im Vergleich zu ihren Nicht-Anbieter-Prefix-Gegenstücken.[39]
Vorfixierte Eigenschaften werden zum Zeitpunkt der Standardisierung veraltet. Programme sind verfügbar, um automatisch Präfixe für ältere Browser hinzuzufügen und auf standardisierte Versionen von vorangestellten Parametern hinzuweisen. Da Präfixe auf eine kleine Teilmenge von Browsern beschränkt sind, können andere Browser die Funktionalität sehen. Eine Ausnahme ist sicher veraltet -Webkit-
Präfixierte Eigenschaften, die im Internet so häufig und beständig sind, dass andere Browserfamilien beschlossen haben, sie für die Kompatibilität zu unterstützen.[40]
Variationen

CSS hat verschiedene Ebenen und Profile. Jede CSS -Ebene baut auf dem letzten auf, wobei normalerweise neue Funktionen hinzugefügt und in der Regel als CSS 1, CSS 2, CSS 3 und CSS ausgezeichnet werden. . Derzeit gibt es Profile für mobile Geräte, Drucker und Fernseher. Profile sollten nicht mit Medientypen verwechselt werden, die in CSS 2 hinzugefügt wurden.
CSS 1
Die erste CSS -Spezifikation zur offiziellen W3C -Empfehlung ist CSS Level 1, die am 17. Dezember 1996 veröffentlicht wurde. Håkon Wium Lüge und Bert Bos werden als ursprüngliche Entwickler gutgeschrieben.[41][42] Zu seinen Fähigkeiten gehören Unterstützung für
- Schriftart Eigenschaften wie Schrift und Betonung
- Farbe von Text, Hintergründen und anderen Elementen
- Textattribute wie Abstand zwischen Wörtern, Buchstaben und Textzeilen
- Ausrichtung von Text, Bilder, Tische und andere Elemente
- Rand, Grenze, Polsterung und Positionierung für die meisten Elemente
- Eindeutige Identifizierung und generische Klassifizierung von Gruppen von Attributen
Der W3C unterhält die CSS 1 -Empfehlung nicht mehr.[43]
CSS 2
Die CSS -Spezifikation der Stufe 2 wurde vom W3C entwickelt und im Mai 1998 als Empfehlung veröffentlicht. Eine Superset von CSS 1, CSS 2 enthält eine Reihe neuer Funktionen wie Absolute, Relativ und feste Positionierung von Elementen und feste Positionierung von Elementen und Z-Index, Das Konzept der Medientypen, Unterstützung für akustische Stilblätter (die später durch die CSS 3 -Sprachmodule ersetzt wurden)[44] und bidirektionaler Text und neue Schrifteigenschaften wie Schatten.
Der W3C unterhält die CSS 2 -Empfehlung nicht mehr.[45]
CSS 2.1
CSS Level 2 Revision 1, häufig als "CSS 2.1" bezeichnet, fixiert Fehler in CSS 2, beseitigt schlecht unterstützte oder nicht vollständig interoperable Funktionen und fügt bereits implementierte Browser -Erweiterungen in die Spezifikation hinzu. Um den W3C -Prozess für die Standardisierung technischer Spezifikationen einzuhalten, ging CSS 2.1 für viele Jahre zwischen dem Arbeitsstatus und dem Empfehlungsstatus des Kandidatenempfehlungen hin und her. CSS 2.1 wurde zuerst ein Empfehlung von Kandidaten Am 25. Februar 2004, aber es wurde am 13. Juni 2005 zu einem funktionierenden Entwurf zur weiteren Überprüfung zurückgeführt. Es kehrte am 19. Juli 2007 an die Empfehlung von Kandidaten zurück und wurde 2009 zweimal aktualisiert. Da Änderungen und Klarstellungen jedoch vorgenommen wurden, ging es jedoch erneut auf den letzten Anruf am 7. Dezember 2010 zurück.
CSS 2.1 ging am 12. April 2011 an die vorgeschlagene Empfehlung.[46] Nach der Überprüfung des W3C -Beratungsausschusses wurde es schließlich als W3C -Empfehlung am 7. Juni 2011 veröffentlicht.[47]
CSS 2.1 wurde als erste und endgültige Überarbeitung von Level 2 geplant - aber die Arbeit mit niedriger Priorität an CSS 2.2 begann 2015.
CSS 3
Im Gegensatz zu CSS 2, dem eine große Einzelspezifikation, die verschiedene Merkmale definiert, ist CSS 3 in mehrere separate Dokumente unterteilt, die als "Module" bezeichnet werden. Jedes Modul fügt neue Funktionen oder erweiterte Funktionen, die in CSS 2 definiert sind, wodurch die Kompatibilität nach hinten beibehalten wird. Die Arbeiten an der CSS -Stufe 3 begannen zum Zeitpunkt der Veröffentlichung der ursprünglichen CSS 2 -Empfehlung. Die frühesten CSS 3 -Entwürfe wurden im Juni 1999 veröffentlicht.[48]
Aufgrund der Modularisation haben unterschiedliche Module unterschiedliche Stabilität und Status.[49]
Einige Module haben Empfehlung von Kandidaten (Cr) Status und werden als mäßig stabil angesehen. Bei Cr In der Bühne wird implementiert, dass die Präfixe von Anbietern fallen ließen.[50]
Modul | Spezifikationstitel | Status | Datum |
---|---|---|---|
CSS3-Background | CSS -Hintergründe und Grenzen Modul Level 3 | Kandidat Rec. | Dezember 2020 |
CSS3-Box | CSS CSS Box Modul Modul Level 3 | Kandidat Rec. | Dezember 2020 |
CSS-Cascade-3 | CSS -Kaskadierung und Vererbungsstufe 3 | Empfehlung | Februar 2021 |
CSS3-Farben | CSS Farbmodul Level 3 | Empfehlung | Jun 2018 |
CSS3-Content | CSS generierte Inhaltsmodulstufe 3 | Arbeiten Entwurf 2 | August 2019 |
CSS-FONT-3 | CSS -Schriftarten Modul Level 3 | Empfehlung | September 2018 |
CSS3-GCPM | CSS erzeugte Inhalte für das PAGED -Medienmodul | Arbeiten Entwurf | Mai 2014 |
CSS3-Layout | CSS -Vorlagenlayoutmodul | Notiz | März 2015 |
CSS3-Mediaquerien | Medien-Anfragen | Empfehlung | Jun 2012 |
Medien-4 | Medienabfragen Level 4 | Kandidat Rec. | Jul 2020 |
CSS3-Multicol | Multi-Säulen-Layout-Modul Level 1 | Arbeiten Entwurf | Februar 2021 |
CSS3-PAGE | CSS PAGED Media Modul Level 3 | Arbeiten Entwurfund ein Teil auf CSS3-Break migriert | Okt. 2018 |
CSS3-Break | CSS -Fragmentierungsmodul Level 3 | Kandidat Rec. | Dezember 2018 |
Selektoren-3 | Selektoren Level 3 | Empfehlung | November 2018 |
Selektoren-4 | Selektoren Level 4 | Arbeiten Entwurf | November 2018 |
CSS3-UI | CSS Basic User Interface Modul Level 3 (CSS3 UI) | Empfehlung | Jun 2018 |
CSS 4
Es gibt keine einzige integrierte CSS4 -Spezifikation.[52] Weil die Spezifikation in viele separate Module aufgeteilt wurde, die unabhängig voneinander ausgeführt werden.
Module, die auf Dingen aus CSS -Stufe 2 aufbauen, begannen auf Stufe 3. Einige von ihnen haben bereits Stufe 4 erreicht oder nähern sich bereits Stufe 5. Andere Module, die völlig neue Funktionen definieren, wie z. Flexbox,[53] wurden als Stufe 1 bezeichnet und einige von ihnen nähern sich Level 2.
Die CSS -Arbeitsgruppe veröffentlicht manchmal "Snapshots", eine Sammlung ganzer Module und Teile anderer Entwürfe, die als stabil genug angesehen werden, um von Browser -Entwicklern implementiert zu werden. Bisher wurden im Jahr 2007 fünf Dokumente für "beste aktuelle Praktiken" veröffentlicht.[54] 2010,[55] 2015,[56] 2017,[57] und 2018.[58]
Da diese Spezifikations -Schnappschüsse hauptsächlich für Entwickler bestimmt sind, wurde die Nachfrage nach einem ähnlichen versionierten Referenzdokument, das auf Autoren angestrebt wird, gestiegen, was den Stand der interoperablen Implementierungen vorliegt, wie sie von Websites wie Can I verwenden können ...[59] und die MDN Web Docs.[60] Anfang 2020 wurde eine W3C -Community -Gruppe eingerichtet, um eine solche Ressource zu diskutieren und zu definieren.[61] Die tatsächliche Art von Versioning ist auch zu debattiert, was bedeutet, dass das einst produzierte Dokument möglicherweise nicht als "CSS4" bezeichnet wird.
Browserunterstützung
Jeder Webbrowser verwendet a Layout -Motor Um Webseiten zu rendern und die CSS -Funktionalität zu unterstützen, ist zwischen ihnen nicht konsistent. Da Browser CSS nicht perfekt analysieren, wurden mehrere Codierungstechniken entwickelt, um bestimmte Browser mit Workarounds zu zielen (allgemein bekannt als CSS -Hacks oder CSS -Filter). Die Einführung neuer Funktionen in CSS kann durch mangelnde Unterstützung in wichtigen Browsern behindert werden. Zum Beispiel hat Internet Explorer nur langsam die Unterstützung für viele CSS 3 -Funktionen erweitert, die die Übernahme dieser Funktionen verlangsamten und den Ruf des Browsers unter den Entwicklern beschädigten. Zusätzlich eine proprietäre Syntax für den nicht-vendler-vorgefertigten Filter
Eigenschaft wurde in einigen Versionen verwendet.[62] Um für ihre Benutzer ein konsistentes Erlebnis zu gewährleisten, testen Webentwickler ihre Websites häufig über mehrere Betriebssysteme, Browser und Browserversionen hinweg, wobei die Entwicklungszeit und -komplexität zunimmt. Werkzeuge wie Sträuber wurden gebaut, um die Komplexität der Aufrechterhaltung dieser Umgebungen zu verringern.
Zusätzlich zu diesen Testwerkzeugen führen viele Websites Listen der Browser -Unterstützung für bestimmte CSS -Eigenschaften, einschließlich Kann ich benutzen und die MDN Web Docs. Darüber hinaus definiert das CSS 3 Feature -Abfragen, die eine liefern @Supports
Richtlinie, die es Entwicklern ermöglicht, Browser mit Unterstützung bestimmter Funktionen direkt innerhalb ihres CSS zu zielen.[63] CSS, das nicht von älteren Browsern unterstützt wird Polyfills, die JavaScript -Code sind, die dazu gedacht sind, Browser konsequent zu verhalten. Diese Problemumgehungen - und die Notwendigkeit, Fallback -Funktionen zu unterstützen - können Entwicklungsprojekte Komplexität hinzufügen, und folglich definieren Unternehmen häufig eine Liste von Browserversionen, die sie nicht unterstützen werden und nicht.
Da Websites neuere Code -Standards anwenden, die mit älteren Browsern nicht kompatibel sind, können diese Browser vom Zugriff auf viele der Ressourcen im Web (manchmal absichtlich) abgeschnitten werden.[64] Viele der beliebtesten Websites im Internet sind aufgrund der schlechten CSS -Unterstützung nicht nur auf älteren Browsern visuell verschlechtert, sondern funktionieren zum großen Teil aufgrund der Entwicklung von JavaScript und anderen Webtechnologien überhaupt nicht.
Einschränkungen
Einige bekannte Einschränkungen der aktuellen Fähigkeiten von CSS sind:
- Selektoren können nicht aufsteigen
- CSS bietet derzeit keine Möglichkeit, a auszuwählen Elternteil oder Vorfahr eines Elements, das bestimmte Kriterien erfüllt.[65] CSS -Selektoren Level 4, der sich noch im Arbeitsstatus befindet, schlägt einen solchen Selektor vor.[66] Aber nur als Teil des vollständigen "Snapshot" -Selector -Profils, nicht als das schnelle "Live" -Profil, das im dynamischen CSS -Styling verwendet wird.[67] Ein fortschrittlicheres Selektorschema (wie z. XPath) würde ausgefeiltere Stilblätter ermöglichen. Die Hauptgründe für die CSS -Arbeitsgruppe, die zuvor die Vorschläge für Elternauswahlleiter abgelehnt hat, beziehen sich auf die Browserleistung und inkrementelles Rendering Ausgaben.[68]
- Kann nicht ausdrücklich den neuen Umfang unabhängig von der Position erklären
- Scoping-Regeln für Eigenschaften wie Z-Index suchen nach dem nächstgelegenen übergeordneten Element mit einer Position: Absolut oder Position: Relatives Attribut. Diese seltsame Kupplung hat unerwünschte Auswirkungen. Beispielsweise ist es unmöglich, einen neuen Bereich zu vermeiden, wenn man gezwungen ist, die Position eines Elements anzupassen, und verhindert, dass ein übergeordnetes Element ein übergeordnetes Element verwendet.
- Dynamisches Verhalten der Pseudoklasse nicht kontrollierbar
- CSS implementiert Pseudoklassen, die ein gewisses Maß an Benutzerfeedback durch bedingte Anwendung alternativer Stile ermöglichen. Eine CSS-Pseudo-Klasse, "
:hover
", ist dynamisch (Äquivalent von JavaScript" Onmouseover ") und hat ein Missbrauchspotential (z. B. Popups von Cursor-Proximität).[69] CSS hat jedoch keine Fähigkeit, dass ein Client es deaktiviert (keine "deaktivierte" Eigenschaft) oder seine Auswirkungen (keine "Nochange" -ähnliche Werte für jede Eigenschaft). - Regeln nicht benennen
- Es gibt keine Möglichkeit, eine CSS-Regel zu benennen, die es (z. B.) clientseitigen Skripten ermöglichen würden, sich auch dann auf die Regel zu beziehen, auch wenn sich der Selektor ändert.
- Kann Styles aus einer Regel nicht in eine andere Regel einbeziehen
- CSS -Stile müssen häufig in mehreren Regeln dupliziert werden, um einen gewünschten Effekt zu erzielen, was zu zusätzlichen Wartungen führt und eine gründlichere Prüfung erfordern. Einige neue CSS -Merkmale wurden vorgeschlagen, um dies zu lösen, wurden jedoch danach aufgegeben.[70][71] Stattdessen können Autoren diese Fähigkeit erhalten, indem sie anspruchsvollere Stylesheet -Sprachen verwenden, die zu CSS kompilieren, wie z. Sass, Weniger, oder Stift.
- Kann keinen bestimmten Text ansprechen, ohne das Markup zu ändern
- neben dem
:first-letter
Pseudo-Element kann nicht bestimmte Textbereiche ansprechen, ohne dass die Elemente von Platzhalter verwendet werden müssen.
Ehemalige Ausgaben
Darüber hinaus wurden in früheren Versionen des CSS -Standards mehrere weitere Probleme vorhanden, wurden jedoch gelindert:
- Vertikale Kontrollbeschränkungen
- Obwohl die horizontale Platzierung von Elementen immer im Allgemeinen leicht zu kontrollieren war, war die vertikale Platzierung häufig unintuitiv, verworren oder völlig unmöglich. Einfache Aufgaben, wie z. B. zentriert ein Element vertikal oder eine Fußzeile, die nicht höher ist als unter dem Ansichtsfenster, erforderte entweder komplizierte und unintuziative Regeln für Stile oder einfache, aber weit verbreitete Regeln.[65] Das flexible Box -Modul verbesserte die Situation erheblich und die vertikale Kontrolle ist viel einfacher und wird in allen modernen Browsern unterstützt.[72] Ältere Browser haben immer noch diese Probleme, aber die meisten (hauptsächlich Internet Explorer 9 und unten) werden von ihren Anbietern nicht mehr unterstützt.[73]
- Fehlen von Ausdrücken
- Es gab keine Standardfähigkeit, Eigenschaftswerte als einfache Ausdrücke anzugeben (wie z.
margin-left: 10% – 3em + 4px;
). Dies wäre in verschiedenen Fällen nützlich, z. B. die Berechnung der Größe der Spalten, die einer Einschränkung der Summe aller Spalten unterliegen. Internet Explorer -Versionen 5 bis 7 unterstützen eine proprietäre Expression () -serklärung,[74] mit ähnlichen Funktionen. Diese proprietäre Expression () -Anweisung wird ab dem Internet Explorer 8, außer in Kompatibilitätsmodi, nicht mehr unterstützt. Diese Entscheidung wurde für "Standards Compliance, Browserleistung und Sicherheitsgründe" getroffen.[74] Allerdings a Empfehlung von Kandidaten Mit einem Calc () -Werwert, um diese Einschränkung anzugehen, wurde vom CSS WG veröffentlicht[75] und wurde seitdem in allen modernen Browsern unterstützt.[76] - Mangel an Säulenerklärung
- Obwohl in aktuellem CSS 3 möglich (mit der
Säulenzählung
Modul),[77] Layouts mit mehreren Spalten können komplex sein, um in CSS 2.1 zu implementieren. Mit CSS 2.1 wird der Prozess häufig unter Verwendung von schwimmenden Elementen durchgeführt, die häufig durch verschiedene Browser, verschiedene Computerbildschirmformen und verschiedene Bildschirmverhältnisse auf Standardmonitoren unterschiedlich gemacht werden. Alle modernen Browser unterstützen diese CSS 3 -Funktion in der einen oder anderen Form.[78]
Vorteile
- Trennung von Inhalten von der Präsentation
- CSS erleichtert die Veröffentlichung von Inhalten in mehreren Präsentationsformaten basierend auf nominalen Parametern. Zu den nominalen Parametern zählen explizite Benutzerpräferenzen, verschiedene Webbrowser, der Typ des Geräts, der zum Anzeigen des Inhalts (eines Desktop -Computers oder eines mobilen Geräts), des geografischen Standorts des Benutzer und vieler anderer Variablen verwendet wird.
- Standortweite Konsistenz
- Wenn CSS effektiv verwendet wird, kann in Bezug auf Vererbung und "Kaskadierung" ein globales Stilblatt verwendet werden, um die Elemente auf ortsweit zu beeinflussen und zu stylen. Wenn sich die Situation ergibt, dass das Styling der Elemente geändert oder angepasst werden sollte, können diese Änderungen durch Bearbeiten von Regeln im globalen Stilblatt vorgenommen werden. Vor CSS war diese Art von Wartung schwieriger, teurer und zeitaufwändiger.
- Bandbreite
- Ein Stylesheet, intern oder extern, gibt den Stil einmal für eine Reihe von HTML -Elementen an, die von ausgewählt wurden
Klasse
, Typ oder Beziehung zu anderen. Dies ist viel effizienter als das Wiederholen von Stilinformationen für jedes Auftreten des Elements. Ein externes Stylesheet wird normalerweise in der gespeichert Browser-Cacheund kann daher auf mehreren Seiten verwendet werden, ohne neu zu laden, wodurch die Datenübertragung über ein Netzwerk weiter reduziert werden kann. - Seitenformatierung
- Mit einer einfachen Änderung einer Zeile kann für dieselbe Seite ein anderes Stilblatt verwendet werden. Dies hat Vorteile für die Barrierefreiheit sowie die Möglichkeit, eine Seite oder Website an verschiedene Zielgeräte anzupassen. Darüber hinaus können Geräte, die das Styling nicht verstehen können, immer noch den Inhalt anzeigen.
- Barrierefreiheit
- Ohne CSS müssen Webdesigner ihre Seiten in der Regel mit Techniken wie HTML-Tabellen festlegen, die die Zugänglichkeit für sehbehinderte Benutzer behindern (siehe Tabless Web Design#Barrierefreiheit).
Standardisierung
Frameworks
CSS -Frameworks sind vorbereitet Bibliotheken das soll einfacher und standardisch konforme Styling von ermöglichen Webseiten Verwenden der Sprache der Kaskadierstilblätter. CSS -Frameworks umfassen Entwurf, Bootstrap, Stiftung und materialisieren. Wie Programmier- und Skriptsprachbibliotheken werden CSS -Frameworks normalerweise als externe .CSS -Blätter aufgenommen, auf die in der HTML verwiesen wird . Sie bieten eine Reihe von fertigen Optionen zum Entwerfen und Festlegen der Webseite. Obwohl viele dieser Frameworks veröffentlicht wurden, verwenden einige Autoren sie hauptsächlich zum schnellen Prototyping oder zum Lernen von und bevorzugen es, CSS zu handeln, die für jede veröffentlichte Website ohne Entwurf, Wartung und Download viele unbenutzte Funktionen angemessen sind im Styling der Website.[79]
Entwurfsmethoden
Mit der Größe der in einem Projekt verwendeten CSS -Ressourcen muss ein Entwicklungsteam häufig über eine gemeinsame Entwurfsmethode entscheiden, um sie organisiert zu halten. Die Ziele sind eine einfache Entwicklung, einfache Zusammenarbeit während der Entwicklung und Leistung der eingesetzten Stylesheets im Browser. Zu den beliebten Methoden gehören OOCSS (objektorientiertes CSS), ACSS (Atomic CSS), OCSS (organisches Kaskadenstilblatt), SMACSS (skalierbare und modulare Architektur für CSS) und BEM (Block, Element, Modifier).[80]
Siehe auch
Verweise
- ^ "CSS Developer Guide". MDN Web Docs. Archiviert vom Original am 2015-09-25. Abgerufen 2015-09-24.
- ^ Flanagan, David (18. April 2011). JavaScript: Der endgültige Handbuch. Peking; Farnham: O'Reilly. p. 1. ISBN 978-1-4493-9385-4. OCLC 686709345.
JavaScript ist Teil der Triade von Technologien, die alle Webentwickler lernen müssen: HTML, um den Inhalt von Webseiten, CSS zu spezifizieren, um die Präsentation von Webseiten anzugeben, und JavaScript, um das Verhalten von Webseiten anzugeben.
- ^ "Was ist CSS?". World Wide Web Konsortium. Archiviert vom Original am 2010-11-29. Abgerufen 2010-12-01.
- ^ "Webbasierte mobile Apps der Zukunft mit HTML 5, CSS und JavaScript". Htmlgoodies. 23. Juli 2010. Archiviert vom Original am 2014-10-20. Abgerufen 2014-10-16.
- ^ "W3C CSS -Validierungsdienst". Archiviert Aus dem Original am 2011-02-14. Abgerufen 2012-06-30.
- ^ "W3C CSS2.1 Spezifikation für Pseudoelemente und Pseudoklasse". World Wide Web Konsortium. 7. Juni 2011. Archiviert vom Original am 30. April 2012. Abgerufen 30. April 2012.
- ^ sehen Die vollständige Definition von Selektoren auf der W3C -Website Archiviert 2006-04-23 bei der Wayback -Maschine.
- ^ "Selektoren Level 3". W3.org. Archiviert vom Original am 2014-06-03. Abgerufen 2014-05-30.
- ^ "W3C CSS2.1 Spezifikation für Regelsätze, Deklarationsblöcke und Selektoren". World Wide Web Konsortium. 7. Juni 2011. Archiviert Aus dem Original am 28. März 2008. Abgerufen 2009-06-20.
- ^ "Vollständige Eigenschaftstabelle". W3.org. Archiviert vom Original am 2014-05-30. Abgerufen 2014-05-30.
- ^ "Index der CSS -Eigenschaften". www.w3.org. Abgerufen 2020-08-09.
- ^ "CSS -Farbe". MDN Web Docs. 2016-06-28. Archiviert vom Original am 2016-09-21. Abgerufen 2016-08-23.
- ^ "6.1 Länge Einheiten". Cascading -Stilblätter, Stufe 1. 17. Dezember 1996. Archiviert Aus dem Original am 14. Juni 2019. Abgerufen 20. Juni 2019.
- ^ "5. Entfernungseinheiten: Die <Länge> Typ". CSS -Werte und Einheiten Modulstufe 3. 6. Juni 2019. Archiviert Aus dem Original am 7. Juni 2019. Abgerufen 20. Juni 2019.
- ^ W3C HTML Arbeitsgruppe. "HTML 5. Ein Wortschatz und zugehörige APIs für HTML und XHTML". World Wide Web Konsortium. Archiviert Aus dem Original am 15. Juli 2014. Abgerufen 28. Juni 2014.
- ^ a b Meyer, Eric A. (2006). Cascading -Stilblätter: Der endgültige Leitfaden (3. Aufl.). O'Reilly Media, Inc. ISBN 0-596-52733-0. Archiviert vom Original am 2014-02-15. Abgerufen 2014-02-16.
- ^ "Zuweisen von Eigenschaftswerten, Kaskadierung und Vererbung". Archiviert vom Original am 2014-06-11. Abgerufen 2014-06-10.
- ^ "Kann eine CSS -Klasse einen oder mehrere andere Klassen erben?". Paketüberfluss. Archiviert vom Original am 2017-10-14. Abgerufen 2017-09-10.
- ^ "Kurzeigenschaften". Lernprogramm. Mozilla -Entwickler. 2017-12-07. Archiviert von das Original Am 2018-01-30. Abgerufen 2018-01-30.
- ^ a b c Bos, Bert; et al. (7. Dezember 2010). "9.3 Positionierungsschemata". Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Spezifikation. W3c. Archiviert Aus dem Original am 18. Februar 2011. Abgerufen 16. Februar 2011.
- ^ Holzschlag, Molly e (2005). Spring in HTML und CSS. Pearson Education, Inc. ISBN 0-13-185586-7.
- ^ a b Lüge, Hakon W (10. Oktober 1994). "Cascading HTML -Stilblätter - ein Vorschlag" (Vorschlag) (92). Cern. Archiviert Aus dem Original am 4. Juni 2014. Abgerufen 25. Mai 2014.
{{}}
: Journal zitieren erfordert|journal=
(Hilfe) - ^ a b c d e f Lüge, Håkon Wium; Bos, Bert (1999). Cascading -Stilblätter, Design für das Web. Addison Wesley. ISBN 0-201-59625-3. Abgerufen 23. Juni 2010.
- ^ "Cascading -Stilblätter, Stufe 1". World Wide Web Konsortium. Archiviert vom Original am 2014-04-09. Abgerufen 2014-03-07.
- ^ a b c Bos, Bert (14. April 1995). "Einfache Stilblätter für SGML & HTML im Web". World Wide Web Konsortium. Archiviert Aus dem Original am 23. September 2009. Abgerufen 20. Juni 2010.
- ^ a b c "Cascading Style Sheets". Universität von Oslo. Archiviert von das Original Am 2006-09-06. Abgerufen 3. September 2014.
- ^ a b Petrie, Charles; Cailliau, Robert (November 1997). "Interview Robert Cailliau über den WWW -Vorschlag:" Wie es wirklich passiert ist. "". Institut für Elektro- und Elektronikingenieure. Archiviert von das Original am 6. Januar 2011. Abgerufen 18. August 2010.
- ^ Bos, Bert (31. März 1995). "Stream-basierter Stylesheet-Vorschlag". Archiviert Aus dem Original am 12. Oktober 2014. Abgerufen 3. September 2014.
- ^ Nielsen, Henrik Frystyk (7. Juni 2002). "Libwww Hacker". World Wide Web Konsortium. Archiviert Aus dem Original am 2. Dezember 2009. Abgerufen 6. Juni 2010.
- ^ "Yves Lafon". World Wide Web Konsortium. Archiviert Aus dem Original am 24. Juni 2010. Abgerufen 17. Juni 2010.
- ^ "Das W3C -Team: Technologie und Gesellschaft". World Wide Web Konsortium. 18. Juli 2008. Archiviert vom Original am 28. Mai 2010. Abgerufen 22. Januar 2011.
- ^ Lou Montulli; Brendan Eich; Scott Furman; Donna Converse; Troy Chevalier (22. August 1996). "JavaScript-basierte Stilblätter". W3c. Archiviert Aus dem Original am 27. Mai 2010. Abgerufen 23. Juni 2010.
- ^ "CSS -Software". W3.org. Archiviert vom Original am 2010-11-25. Abgerufen 2011-01-15.
- ^ Anne van Kesteren. "CSS 2.1 - Annes Weblog". Archiviert vom Original am 2005-12-10. Abgerufen 2011-02-16.
- ^ "Archiv von W3C News im Jahr 2007". World Wide Web Konsortium. Archiviert vom Original am 2011-06-28. Abgerufen 2011-02-16.
- ^ Nitot, Tristan (18. März 2002). "Falschem MIME -Typ für CSS -Dateien". Mozilla Developer Center. Mozilla. Archiviert von das Original Am 2011-05-20. Abgerufen 20. Juni 2010.
- ^ McBride, Don (27. November 2009). "Datentypen". Archiviert Aus dem Original am 29. Oktober 2010. Abgerufen 20. Juni 2010.
- ^ "CSS -Dateierweiterungsdetails". Dateierweiterungsdatenbank. 12. März 2010. archiviert von das Original am 18. Juli 2011. Abgerufen 20. Juni 2010.
- ^ "Wie und warum Sie CSS -Anbieter -Präfixe in Ihrer Website verwenden möchten". Lebenswire. 2019-11-12.
- ^ "Kompatibilitätsstandard". Waswg.
- ^ Bos, / Håkon Wium Lie, Bert (1997). Cascading -Stilblätter: Entwerfen für das Web (1. Druck. Ed.). Harlow, England; Reading, Ma.: Addison Wesley Longman. ISBN 0-201-41998-x.
- ^ W3c: Cascading -Stilblätter, Stufe 1 Archiviert 2011-02-09 im Wayback -Maschine CSS 1 Spezifikation
- ^ W3c: Cascading -Stilblätter Stufe 1 Spezifikation Archiviert 2011-02-11 bei der Wayback -Maschine CSS -Stufe 1 Spezifikation
- ^ "Aural Style Sheets". W3c. Archiviert vom Original am 2014-10-26. Abgerufen 2014-10-26.
- ^ W3c: Cascading -Stilblätter, Stufe 2 Archiviert 2011-01-16 bei der Wayback -Maschine CSS 2 Spezifikation (Empfehlung 1998)
- ^ W3c:Cascading -Stilblätter, Stufe 2 Revision 1 Archiviert 2011-11-09 bei der Wayback -Maschine CSS 2.1 -Spezifikation (W3C vorgeschlagene Empfehlung)
- ^ W3c: Die Standardstil -Laken im Kaskadierungsstil haben eine beispiellose Interoperabilität Archiviert 2011-06-10 im Wayback -Maschine
- ^ Bos, Bert (18. Februar 2011). "Beschreibungen aller CSS -Spezifikationen". World Wide Web Konsortium. Archiviert Aus dem Original am 31. März 2011. Abgerufen 3. März 2011.
- ^ Bos, Bert (26. Februar 2011). "CSS aktuelle Arbeit". World Wide Web Konsortium. Archiviert Aus dem Original am 3. März 2011. Abgerufen 3. März 2011.
- ^ Etemad, Elika J. (12. Dezember 2010). "Cascading Style Sheets (CSS) Snapshot 2010". World Wide Web Konsortium. Archiviert Aus dem Original am 16. März 2011. Abgerufen 3. März 2011.
- ^ "Alle CSS -Spezifikationen". W3.org. 2014-05-22. Archiviert vom Original am 2014-05-30. Abgerufen 2014-05-30.
- ^ Atkins JR, Tab. "Ein Wort über CSS4". Archiviert Aus dem Original am 31. Oktober 2012. Abgerufen 18. Oktober 2012.
- ^ "CSS Flexible Box Layout -Modul Level 1". W3c. 19. November 2018. Archiviert Aus dem Original am 19. Oktober 2012. Abgerufen 18. Oktober 2012.
- ^ "Cascading Style Sheets (CSS) Snapshot 2007". 12. Mai 2011. Archiviert Aus dem Original am 8. August 2016. Abgerufen 18. Juli 2016.
- ^ "Cascading Style Sheets (CSS) Snapshot 2010". 12. Mai 2011. Archiviert Aus dem Original am 16. März 2011. Abgerufen 3. März 2011.
- ^ "CSS Snapshot 2015". W3c. 13. Oktober 2015. Archiviert Aus dem Original am 27. Januar 2017. Abgerufen 13. Februar 2017.
- ^ "CSS Snapshot 2017". 31. Januar 2017. Archiviert Aus dem Original am 13. Februar 2017. Abgerufen 13. Februar 2017.
- ^ "CSS Snapshot 2018". 15. November 2018. Archiviert Aus dem Original am 1. Februar 2019. Abgerufen 2. Januar 2019.
- ^ "Kann ich ... Supporttabellen für HTML5, CSS3 usw. verwenden". Archiviert vom Original am 2018-02-19. Abgerufen 2019-01-26.
- ^ "MDN Web Docs: CSS".
- ^ "CSS4 Community Group". Archiviert vom Original am 2020-02-27. Abgerufen 2020-02-27.
- ^ "CSS3 -Lösungen für Internet Explorer - Smashing Magazine". Smashing Magazine. 2010-04-28. Archiviert vom Original am 2016-10-12. Abgerufen 2016-10-12.
- ^ "Verwenden von Feature -Abfragen in CSS ★ Mozilla Hacks - The Web Developer Blog". hacks.mozilla.org. Archiviert vom Original am 2016-10-11. Abgerufen 2016-10-12.
- ^ "Betrachten Sie das Web mit Internet Explorer 6, ein letztes Mal". ARS Technica. Archiviert vom Original am 2016-10-12. Abgerufen 2016-10-12.
- ^ a b Molly Holzschlag (Januar 2012). "Sieben Dinge fehlen immer noch bei CSS". .NET Magazine. Archiviert von das Original Am 2017-03-05. Abgerufen 2017-03-04.
- ^ "Selektoren Stufe 4 - Ermittlung des Subjekts eines Selektors". W3.org. Archiviert vom Original am 2013-08-17. Abgerufen 2013-08-13.
- ^ "Selektoren Level 4 - Fast vs Complete Selektorprofile". W3.org. Archiviert vom Original am 2013-08-17. Abgerufen 2013-08-13.
- ^ Snook, Jonathan (Oktober 2010). "Warum wir keinen übergeordneten Selektor haben". snook.ca. Archiviert von das Original Am 2012-01-18. Abgerufen 2012-01-26.
- ^ "Pure CSS Popups". meyerweb.com. Archiviert von das Original am 2009-12-09. Abgerufen 2009-11-19.
- ^ Tab Atkins Jr. "CSS anwenden Regel". Github. Archiviert von das Original am 2016-02-22. Abgerufen 2016-02-27.
- ^ "Warum ich @Apply aufgegeben habe - Registerkartenabschluss".
- ^ "CSS Flexible Box -Layout -Modul". Kann ich ... Supporttabellen für HTML5, CSS3 usw. verwenden. Caniuse.com. Archiviert von das Original am 2016-02-23.
- ^ "Internet Explorer Ende der Unterstützung". Microsoft. Archiviert vom Original am 2019-06-02. Abgerufen 2016-02-27.
- ^ a b "Über dynamische Eigenschaften". Msdn.microsoft.com. Archiviert von das Original Am 2017-10-14. Abgerufen 2009-06-20.
- ^ "CSS -Werte und Einheiten Modul Level 3". W3.org. 6. Juni 2019. Archiviert Aus dem Original am 23. April 2008.
- ^ "Calc () als CSS -Einheitswert". Kann ich ... Supporttabellen für HTML5, CSS3 usw. verwenden. Caniuse.com. Archiviert von das Original am 2016-03-04.
- ^ "CSS Multi-Säulen-Layout-Modul". World Wide Web Konsortium. Archiviert vom Original am 2011-04-29. Abgerufen 2011-05-01.
- ^ "Kann ich ... Supporttabellen für HTML5, CSS3 usw. verwenden". Caniuse.com. Archiviert von das Original Am 2010-08-21. Abgerufen 2016-02-27.
- ^ Cederholm, Dan; Ethan Marcotte (2009). Handgefertigter CSS: mehr kugelsicheres Webdesign. Neue Fahrer. p. 114. ISBN 978-0-321-64338-4. Archiviert Aus dem Original am 20. Dezember 2012. Abgerufen 19. Juni 2010.
- ^ Antti, Hiljá. "OOCSS, ACSS, BEM, SMACSS: Was sind sie? Was soll ich verwenden?". Clubkamerad.Fi. Hiljá. Archiviert von das Original am 2. Juni 2015. Abgerufen 2. Juni 2015.
Weitere Lektüre
- Jeffrey Zeldman (2009): Entwerfen mit Webstandards, Neue Fahrer, ISBN978-0321616951 (Taschenbuch) (Taschenbuch) (Taschenbuch) (Taschenbuch) (Book's Companion Site)
- Dan Cederholm (2009): Webstandards Solutions, das Markup- und Stilhandbuch, Freunde von Ed, ISBN978-1430219200 (Taschenbuch) (Taschenbuch) (Website des Autors)
- Meyer, Eric A. (2006). Cascading -Stilblätter: The Definitive Guide, dritte Ausgabe. O'Reilly Media, Inc. ISBN 0-596-52733-0.
- Mehr Eric Meyer auf CSS (2004) ISBN0-7357-1425-8
- Eric Meyer auf CSS (2002), ISBN0-7357-1245-x
- Meyer, Eric A. (2001) Cascading Style Sheets 2.0 Programmer Referenz, McGraw-Hill Osborne Media, ISBN0-07-213178-0
- Das Zen von CSS -Design (2005) (Mitautorisiert von CSS Zen Garden Besitzer, Dave Shea, und Molly E. Holzschlag), ISBN0-321-30347-4
- Kynn Bartlett: Bringen Sie sich CSS in 24 Stunden bei, 2. Ausgabe (2006), Sams Publishing, ISBN978-0672329067
- Cascading -Stilblätter: Entwerfen für das Web (2005) von Håkon Wium Lüge und Bert Bos,, ISBN0-321-19312-1
- Cascading Style Sheets Cascading Style Sheets, PhD -These, von Håkon Wium Lie - liefert eine maßgebliche historische Referenz von CSS
- Keith Schengili-Roberts (2003): Core CSS, 2. Auflage, Prentice Hall, ISBN0-13-009278-9
- Bei der Analyse von Kaskadenstilblättern, Pierre Geneves, Nabil Layaida und Vincent Quint, Proceedings der 21. Internationalen Konferenz über World Wide Web (www'12), S. 809–818, 2012.