Style Sheets in HTML-Dokumenten
Stylesheets stellt einen wichtigen Durchbruch für Webseiten-Designer, erweiterte ihre Fähigkeit, das Aussehen ihrer Seiten zu verbessern. In den wissenschaftlichen Umgebungen, in denen das Web konzipiert, sind die Menschen mehr mit dem Inhalt ihrer Dokumente als die Präsentation. Da die Menschen aus weiteren Bereichen des Lebens die Web entdeckt, wurden die Beschränkungen von HTML eine Quelle anhaltender Frustration und Autoren wurden HTML stilistische Einschränkungen zu umgehen gezwungen. Während die Absichten gut gewesen sein - die Darstellung von Webseiten zu verbessern - so hatten unglückliche Nebenwirkungen der Techniken zu tun. Diese Techniken arbeiten für einige der Menschen, einen Teil der Zeit, aber nicht für alle Menschen, die ganze Zeit. Sie beinhalten:
- Mit proprietären HTML-Erweiterungen
- Umwandlung von Text in Bilder
- Unter Verwendung von Bildern für Leerraum Steuer
- Verwendung von Tabellen für das Seitenlayout
- Schreiben eines Programms anstelle von HTML
Diese Techniken erhöhen die Komplexität von Web-Seiten bieten eine begrenzte Flexibilität, leiden unter Interoperabilitätsprobleme und schaffen Härten für Menschen mit Behinderungen.
Stylesheets löst diese Probleme zur gleichen Zeit sie das begrenzte Angebot an Präsentationsmechanismen in HTML ersetzen. Stylesheets macht es einfach, die Menge des Leerraumes zwischen Textzeilen angeben, die Menge Linien eingekerbt sind, die Farben für den Text und die Hintergründe, die Schriftgröße und Stil, und mit vielen anderen Details.
Zum Beispiel kann die folgende kurze CSS-Stylesheet (gespeichert in der Datei „special.css“), setzt die Textfarbe eines Absatzes zu grün und umgibt sie mit einem festen roten Rand:
HTML 4 sieht folgende Stylesheet-Funktionen zu unterstützen:
Der vorliegende Vorschlag geht diese Probleme, indem es Autoren Aufbereitungs-Befehle innerhalb jedes HTML-Element aufzunehmen. Die Rendering-Informationen werden dann durch die Zeit, immer zur Verfügung der User-Agent will jedes Element machen.
In vielen Fällen nehmen Autoren Vorteil eines gemeinsamen Stylesheet für eine Gruppe von Dokumenten. In diesem Fall wird die Verteilung Stilregeln im gesamten Dokument tatsächlich zu schlechter Leistung führt als ein verknüpftes Stylesheet verwenden, da für die meisten Dokumente wird das Stylesheet bereits im lokalen Cache sein. Die öffentliche Verfügbarkeit von guten Stylesheets diesen Effekt fördern.
14.2 Hinzufügen von Stil zu HTML
Hinweis. Die Probe Standard-Stylesheet für HTML 4, die in [CSS2] enthalten ist, zum Ausdruck bringt im Allgemeinen Standardstilinformation für jedes Element akzeptiert. Autoren und Implementierer gleichermaßen könnte dies eine nützliche Ressource finden.
Die Syntax von Style-Daten sind abhängig von der Stylesheet-Sprache.
Die Autoren müssen die Stylesheet-Sprache von Stilinformationen angeben, mit einem HTML-Dokument zugeordnet ist.
Benutzerprogramme sollten die Standard-Stylesheet-Sprache für ein Dokument nach den folgenden Schritten (der höchsten zur niedrigsten Priorität) bestimmen:
style = style [CN] Dieses Attribut gibt Stilinformationen für das aktuelle Element.
Dieses CSS-Beispiel setzt Farb- und Schriftgrößeninformationen für den Text in einem bestimmten Absatz.
Um festzulegen, Stilinformationen für mehr als ein Element, sollen Autoren das STYLE-Element verwenden. Für eine optimale Flexibilität, sollten Autoren Stile in externen Stylesheets definieren.
14.2.3 Header-Stilinformationen. das Element STYLE
Anderer Stelle definierte Attribute
Das STYLE-Element erlaubt es Autoren Stylesheet-Regeln im Kopf des Dokuments zu setzen. HTML ermöglicht eine beliebige Anzahl von STYLE Elemente im HEAD-Bereich eines Dokuments.
Benutzerprogramme, die Stylesheets nicht unterstützt oder unterstützen nicht die spezifische Stylesheet-Sprache von einem STYLE-Element verwendet wird, muss den Inhalt des STYLE-Element verbergen. Es ist ein Fehler, den Inhalt als Teil des Textes des Dokuments zu machen. Einige Stylesheet-Sprachen unterstützen Syntax für das Verstecken der Inhalt von nicht-konformen Benutzer.
Die Syntax von Style-Daten sind abhängig von der Stylesheet-Sprache.
- Alle Instanzen einer bestimmten HTML-Element (zum Beispiel alle Elemente P, alle Elemente H1, etc.)
- Alle Instanzen eines HTML-Element zu einer bestimmten Klasse gehört (das heißt, dessen Klassenattribut wird auf einen Wert gesetzt).
- Einzelne Instanzen eines HTML-Elements (das heißt, dessen ID-Attribut wird auf einen Wert gesetzt).
Regeln für die Stilregel Präzedenzfall und Vererbung ist abhängig von der Stylesheet-Sprache.
Um festzulegen, dass diese Art Informationen nur auf H1-Elementen einer bestimmten Klasse gelten soll, ändern wir es wie folgt:
Schließlich den Umfang der Stilinformationen zu einer einzigen Instanz von H1 zu begrenzen. setzt das id-Attribut:
Im folgenden Beispiel verwenden wir das Element SPAN den Schriftstil der ersten Wörter eines Absatzes Kapitälchen zu setzen.
HTML erlaubt es Autoren, Dokumente zu entwerfen, die die Vorteile der Eigenschaften der Medien nehmen, wo das Dokument (zum Beispiel grafischer Anzeigen, Fernsehbildschirm, Handheld-Geräte, sprachbasierte Browser, Braille-basierten taktilen Geräte, etc.) zu erbringen ist. Durch die Angabe des Medienattribut, erlauben Autoren Benutzeragenten Stylesheets selektiv zu laden und anwenden. Bitte konsultieren Sie die Liste der anerkannten Medien-Deskriptoren.
In diesem Beispiel wird Toneffekte Dübel zur Verwendung in Sprachausgabe:
Mediensteuerung ist besonders interessant, wenn auf externe Stylesheets, da User-Agents angewandt kann Zeit sparen, indem aus dem Netzwerk abrufen nur die Stylesheets, die auf das aktuelle Gerät anwenden. Zum Beispiel sprachbasierte Browser kann Blätter Download Stil für visuelle Darstellung vermeiden. Siehe den Abschnitt über medienabhängigen Kaskaden für weitere Informationen.
14.3.1 bevorzugt und alternative Stylesheets
HTML erlaubt es Autoren mit einem Dokument einer beliebigen Anzahl von externen Stylesheets zu verknüpfen. Die Stylesheet-Sprache definiert, wie mehrere externen Stylesheets interagieren (zum Beispiel der CSS „Kaskade“ Regeln).
Benutzerprogramme müssen Medien-Deskriptoren respektieren, wenn alle Stylesheet anwenden.
Benutzerprogramme sollten auch Benutzern erlauben, die vollständig Blätter des Autors zu deaktivieren Stil, in welchem Fall der Agent Benutzer muss keine dauerhafte oder alternative Stylesheets anwenden.
Autoren angeben externe Stylesheets mit den folgenden Attributen des LINK-Elements:
- Setzen Sie den Wert von href auf die Position der Stylesheet-Datei. Der Wert von href ist eine URI.
- Legen Sie den Wert des type-Attributs, um die Sprache der verknüpften (Stylesheet) Ressource anzuzeigen. Dies ermöglicht es dem User-Agent zu vermeiden, dass ein Stylesheet für eine nicht unterstützte Stylesheet-Sprache herunterzuladen.
- Angeben, dass das Stylesheet ist persistent, bevorzugten oder alternativen:
- Um ein Stylesheet persistent zu machen, setzen Sie das rel-Attribut auf „Stylesheet“ und stelle nicht den Titel-Attribut.
- Um ein Stylesheet bevorzugt, setzen Sie das rel-Attribut auf „Stylesheet“ und das Stylesheet mit dem Titel Attribute nennen.
- Um einen alternativen Stylesheet angeben, setzen Sie das rel-Attribut auf „alternate stylesheet“ und nennen Sie das Stylesheet mit dem Titel-Attribute.
Benutzerprogramme sollten ein Mittel für Benutzer zur Verfügung stellen können und aus der Liste der alternativen Designs auswählen. Der Wert des Titel-Attribut wird als Name für jede Wahl empfohlen.
In diesem Beispiel geben wir zunächst eine persistente Stylesheet in der Datei mystyle.css befindet:
die Titel Attribut Einstellung macht die bevorzugte Stylesheet des dieses Autors:
Hinzufügen das Stichwort „alternate“ auf das Attribut rel macht es einen alternativen Stylesheet:
Weitere Informationen zu externen Stylesheets, den Abschnitt über Links und externe Stylesheets bitte konsultieren.
Wenn zwei oder mehr LINK Elemente eine bevorzugte Stylesheet angeben, hat die erste Priorität.
Bevorzugte Stylesheets angegeben mit META oder HTTP-Header hat Vorrang vor denen mit dem LINK-Elemente angegeben.
Cascading Stylesheet-Sprachen wie CSS erlauben Stilinformationen aus verschiedenen Quellen zusammengemischt werden. Allerdings sind nicht alle Stylesheet-Sprachen unterstützen Kaskadierung. Um eine Kaskade zu definieren, geben Autoren eine Folge von LINK und / oder -art Elementen. Die Stilinformationen werden in der Reihenfolge kaskadiert die Elemente im HEAD erscheinen.
Hinweis. Diese Angabe ist nicht festgelegt, wie Stylesheets aus verschiedenen Stil Sprachen Kaskade. Autoren sollten Mischstylesheet-Sprachen vermeiden.
Im folgenden Beispiel geben wir zwei alternative Stylesheets namens „compact“. Wenn der Benutzer den „kompakt“ Stil wählt, muss der Benutzer-Agent beide externe Stylesheets gilt, sowie die persistent „common.css“ Stylesheet. Wenn der Benutzer den „großen Druck“ Stil wählt, wird nur die alternativen Stylesheet „bigprint.css“ und die persistent „common.css“ wird angewendet.
Hier ist ein Beispiel, das sowohl cascade den Link und STYLE Elemente beinhaltet.
Im folgende Beispiel definieren wir eine Kaskade, wo das „corporate“ Stylesheet wird in mehreren Versionen zur Verfügung gestellt: ein geeignet zum Druck, einen für Bildschirm Gebrauch und einen für sprachbasierte Browser (nützlich, sagt sie, wenn E-Mail im Auto lesen) . Das „techreport“ Sheet gilt für alle Medien. Die Farbe der Regel durch das STYLE-Element definiert ist für Bildschirm und Druck verwendet, aber nicht für die akustische Darstellung.
14.4.2 Vererbung und Kaskadierung
Wenn die User-Agent, ein Dokument machen will, muss es Werte für Eigenschaften Stil finden, zum Beispiel die Schriftfamilie, Schriftstil, Größe, Zeilenhöhe, Textfarbe und so weiter. Der genaue Mechanismus ist abhängig von der Stylesheet-Sprache, aber die folgende Beschreibung ist allgemein anwendbar:
Die Kaskadierung Mechanismus wird verwendet, wenn eine Reihe von Stil alle Regeln gelten direkt auf ein Element. Der Mechanismus ermöglicht es dem User-Agent die Regeln, nach Spezifität zu sortieren, zu bestimmen, welche anzuwenden regieren. Wenn keine Regel gefunden werden kann, hängt der nächste Schritt ab, ob der Stil Eigenschaft geerbt oder nicht. Nicht alle Eigenschaften vererbt werden. Für diese Eigenschaften stellt die Stylesheet-Sprache Standardwert für die Verwendung, wenn es keine expliziten Regeln für ein bestimmtes Element sind.
Einige Stylesheet-Sprachen unterstützen Syntax soll Autoren ermöglichen, den Inhalt von STYLE Elemente aus nicht-konforme Benutzer zu verbergen.
Dieser Abschnitt gilt nur für Agenten Benutzer Versionen von HTTP-konform, die einen Link Header-Feld definieren. Beachten Sie, dass HTTP 1.1, wie durch [RFC2616] definiert keinen Link-Header-Feld enthalten (siehe Abschnitt 19.6.3).
Es ist möglich, mehrere alternative Arten mit mehreren Link-Header angeben, und dann das rel-Attribut verwenden den Standardstil zu bestimmen.
In dem folgenden Beispiel „compact“ ist standardmäßig angewendet, da es das „alternative“ Schlüsselwort für die rel Attribut weglässt.
LINK und META-Elemente impliziert durch HTTP-Header sind als auftritt, bevor eine explizite LINK und META-Elemente im Dokument des HEAD definiert.