Auszeichnungssprache – Webanwendung CSS Style_HTML/Xhtml_Webseitenproduktion

Klicken Sie hier, um zur HTML-Tutorial-Spalte des Web Teaching Network zurückzukehren. Um CSS-Tutorials anzuzeigen, klicken Sie bitte hier. Oben: Auszeichnungssprache – optimierte Tags. Kapitel 10 Anwenden von CSS Im ersten Teil liegt der Schwerpunkt auf Beispielen für die Markup-Syntax. Außerdem wird untersucht, wie man CSS für das Design auf Tags anwendet und Stildetails angibt. In Kapitel 2 besprechen wir verschiedene Möglichkeiten, CSS auf Tags anzuwenden. Klicken Sie hier, um zur Spalte „Script House HTML Tutorial“ zurückzukehren. Um CSS-Tutorials anzuzeigen, klicken Sie bitte hier.
Oben: Auszeichnungssprache – optimierte Tags. Kapitel 10 Anwenden von CSS
Im ersten Teil liegt der Schwerpunkt auf Beispielen für die Markup-Syntax. Außerdem wird untersucht, wie man CSS für das Design auf Tags anwendet und Stildetails angibt. In Kapitel 2 werden wir verschiedene Möglichkeiten zur Anwendung von CSS besprechen Ein Dokument, eine Website oder sogar ein einzelnes Tag. Darüber hinaus besprechen wir, wie man CSS-Inhalte aus früheren Browserversionen ausblendet, sodass wir erweiterte Techniken verwenden können, ohne dass sich dies auf die vom Gerät gelesene Markup-Struktur auswirkt.
In der Einheit „Technische Erweiterung“ am Ende des Kapitels stellen wir vor, wie Sie Schriftarten und Farben wechseln und mehrere Designs erstellen können, ohne Skripte schreiben zu müssen – und dabei Stylesheets zu ersetzen. Wie wende ich CSS auf Dokumente an? Lassen Sie uns nun vier verschiedene Methoden zur Anwendung von CSS auf Dokumente untersuchen. Je nach Situation sind alle vier Methoden die beste Wahl Hier werden die legale XHTML 1.0-Übergangssyntaxstruktur, das -Tag und die -Konfiguration verwendet. Methode A:

This The Der Ansatz ist auch zu einem eingebetteten Stylesheet geworden, mit dem Sie alle CSS-Deklarationen direkt in die (X)HTML-Datei schreiben können. Der
mit Methoden Ähnlich wie bei B können Sie mit @import CSS-Definitionen aus externen Dateien mit relativen Pfaden (wie im Beispiel oben) oder absoluten Pfaden importieren.
Methode C hat die gleichen Vorteile wie die Verwendung des -Tags Das Ändern und Aktualisieren eines einzelnen Dokuments kann die gesamte Website ändern und kann schnell und einfach durchgeführt werden. Externe Stylesheets werden vom Browser zwischengespeichert, wodurch Downloadzeit für alle Seiten gespart wird, die dasselbe Stylesheet importieren . Verstecken und suchen
Der Hauptvorteil der Verwendung von Methode C besteht darin, dass Netscape-Versionen unter 4. Die CSS-Syntax verarbeitet Designdetails wie das Layout, sodass die neuesten Browser, die damit umgehen können, diese anzeigen können, während ältere Browser diese Syntax auch ignorieren können.
Das Problem Bei Netscape 4.x gilt: Es wird angenommen, dass es CSS unterstützen kann. Es ist nur so gut wie der Browser, der es tatsächlich unterstützt. Daher ist der Markup-Code von der Anzeige getrennt und stellt Layoutdetails und andere Stile bereit Unterstützte Browser können die angezeigte Struktur des Inhalts problemlos lesen, verarbeiten jedoch nicht die für sie ausgeblendete erweiterte CSS-Regel. Stile öffnen, Stile schließen
Schauen Sie sich die Abbildungen 10-1 und 10-2 an und vergleichen Sie dies. Dies ist meine persönliche Website, die vollständiges CSS verwendet und dann den CSS-Anzeigeeffekt deaktiviert (er sollte dem Anzeigeeffekt von sehr nahe kommen). (der alte Browser) Effekt), die Struktur ohne die Verwendung von CSS ist immer noch sehr offensichtlich und für jeden immer noch leicht zu lesen und zu verwenden. Wenn wir das zum Anzeigen des Layouts erforderliche CSS nicht ausblenden, erhalten Benutzer älterer Browser möglicherweise eine Durcheinander, das schwer zu lesen ist.

Abbildung 10-1 Meine persönliche Website, mit CSS

Abbildung 10-2 Dieselbe Seite, CSS entfernen, alt Browser können es ändern. Wird wie folgt angezeigt Kombination von Methode B und Methode C zum Anwenden mehrerer Stylesheets
Manchmal kann es nützlich sein, viele Stylesheets in ein Dokument einzuführen. Beispielsweise können Sie alle Layoutregeln in einem Dokument zusammenfassen und dort die Schriftarteinstellungen festlegen Ein anderes Dokument kann die Pflege einer großen Anzahl von Regeln für große, komplexe Designs erleichtern. Chamäleoneffekt
Bei der Erstellung der Website des Fast Company-Magazins möchte ich die Farbe der Website jeden Monat ändern, um sie an das Titelbild des aktuellen Magazins anzupassen. Um die regelmäßige Änderungsarbeit zu vereinfachen, habe ich alle Farb- und Farbänderungen zentralisiert. Fügen Sie verwandte CSS-Regeln in ein Dokument ein und fügen Sie andere Regeln, die nicht jeden Monat geändert werden, in ein anderes Dokument ein.
Es wird einfacher und schneller sein, jeden Monat alle Farben abzudecken, ohne Hunderte anderer Regeln hinzufügen zu müssen Suchen Sie im Design langsam nach Inhalten, die geändert werden müssen. Solange dieses Dokument geändert wird, ändert sich sofort die Farbe der gesamten Website. Vorgehensweise
Um Methode B und Methode C zu kombinieren, um mehrere Stylesheets einzuführen, verwenden Sie das -Tag im , um auf das Haupt-CSS-Dokument zu verweisen Demonstration der Methode B, Link zu „styles.css“.
Der Inhalt von „styles.css“ enthält lediglich ein paar @import-Regeln, um andere erforderliche CSS-Dateien einzuführen.
Wenn Sie beispielsweise drei Stylesheets einführen möchten, eins für Layout und eines für Layout Definieren Sie die Schriftart und definieren Sie die Farbe, dann könnte der Inhalt von style.css so aussehen:

/*Alte Browser interpretieren diese Importregeln nicht*/
@import url ("layout .css");
@import url("fonts.css");
@import url("colors.css");

Auf diese Weise kann die gleiche URL auf der gesamten Website verwendet werden. Das -Tag verweist nur auf die Datei „styles.css“. Dieses Dokument kann weiterhin andere Stylesheets mithilfe der @import-Regel importieren Eine Auswirkung auf die gesamte Website.
Dadurch ist das Aktualisieren und Ersetzen von CSS sehr einfach geworden. Wenn Sie beispielsweise unterwegs plötzlich CSS in 4 Dateien aufteilen möchten, müssen Sie nur die @import-Regel dieses Dokuments ändern ohne dass der gesamte XHTML-Markup-Quellcode geändert werden muss. Lo-Fi- und Hi-Fi-Stile
Wenn Sie die @import-Regel der Methode C verwenden, um CSS vor alten Browsern zu verbergen, gibt es einen weiteren Trick, der darin besteht, den Kaskadeneffekt von CSS zu nutzen, um alten Browsern Methode A oder bereitzustellen Methode B. Lo-Fi-Effekte werden sowohl von alten als auch von neuesten Browsern unterstützt. Verwenden Sie dann @import, um erweiterte Effekte für andere unterstützte Browser bereitzustellen.
Alte Browser erhalten nur die Inhalte, die sie unterstützen können, während neuere nur die Inhalte erhalten der Inhalt, den sie unterstützen können. Der Browser erhält alle Stile, die Sie verwenden möchten.
Dann sehen wir uns an, wie der Code für diese Technik aussieht:

Hier sollte lofi.css grundlegende CSS-Regeln wie Linkfarbe und Schriftgröße enthalten, während hifi.css erweiterte Regeln wie Layout, Positionierung, Hintergrundbilder usw. enthält.
Wir können Lo- gleichzeitig senden und Hi-Fi-Versionen des Stils, ohne dass auf der Serverseite ein Skript geschrieben oder die Browserversion in irgendeiner Weise identifiziert werden muss. Die Reihenfolge ist wichtig
Die Reihenfolge, in der die Tags im Markup-Quellcode angegeben werden, ist sehr wichtig
Da beispielsweise die meisten aktuellen Browser beide Ansätze unterstützen, werden alle Stylesheets heruntergeladen und alle darin enthaltenen Stile werden zu diesem Zeitpunkt durch die Stilregeln in hifi.css überschrieben .css Was ist der Grund für die Angabe von Stilen für dasselbe Tag? Weil im Tag-Quellcode hifi.css nach lofi.css erscheint.
Alte Browser ignorieren hifi.css, da die @import-Regel nicht unterstützt wird Sie verwenden nur durch lofi.css definierte Stile. Nutzen Sie die Kaskadenfunktion
Nutzen Sie die CSS-Kaskadenfunktion auf verschiedene Weise. Wenn Sie beispielsweise davon ausgehen, dass Ihre gesamte Website ein externes CSS für Layout, Positionierung, Einstellung von Schriftarten, Farben usw. verwendet, sollten Sie dies auf jeder Seite tun die @import-Methode, um diese Regeln für ältere Browser auszublenden.
Wenn es eine Seite auf der Website gibt, deren Layout- und Positionierungseinstellungen Sie teilen möchten, aber die Schriftart oder Farbe anpassen müssen (mit anderen Seiten auf der Website). (verschiedene Seiten) Auf dieser Seite kann noch das Haupt-CSS-Dokument eingeführt werden. Nach Abschluss der Referenz wird dann auf das zweite CSS-Dokument verwiesen, das einen speziellen Stil für diese Seite definiert zum Überschreiben der Stilregeln, die in der ersten CSS-Datei für dasselbe Tag angegeben sind. Schauen wir uns ein Beispiel an, in dem „master.css“ die gesamte Website-Struktur, Schriftarten und andere CSS-Regeln enthält spezifische Seite, wobei die Stileinstellungen mehrerer spezieller Tags überschrieben werden.

"http:// www.w3 .org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">

Aufgrund von benutzerdefiniertem CSS an zweiter Stelle im Markup-Quellcode, sodass die für dasselbe Tag angegebenen Stile den in master.css angegebenen Inhalt überschreiben. Angenommen, wir benötigen in main.css eine rote Serifenschrift , während

eine blaue Serifenschrift verwendet.

h1 {

Schriftfamilie: Georgia, Serif;
Farbe: Rot;
}
h2 {
Schriftfamilie: Georgia, Serif;
Farbe: Blau;
}

Auf einer bestimmten Seite möchten wir nur den Stil der

-Tag-Einstellung ändern und den Stil erben von

. Dann müssen wir in custom.css nur einen neuen Stil für

deklarieren.

h1 {

Schriftfamilie: Verdana, serifenlos;
Farbe: orange;
}

Diese Anweisung überschreibt die Anweisung in „master.css“ (da „custom.css“ danach eingeführt wird, wenn die Seite „master.css“ zuerst importiert). , das

-Tag verwendet die orangefarbene Verdana-Schriftart, während das

weiterhin die blaue Serifenschrift verwendet, da die letztere Anweisung in master.css nicht überschrieben wurde.

Die Kaskadierung Die Funktion von CSS ist ein großartiges Tool zum Teilen gängiger Stile, mit dem Sie nur die Regeln überschreiben können, die geändert werden müssen.

Methode D: Inline-Stile

Dies ist ein Titel

Dies ist die vierte CSS-Anwendungsmethode, auf die wir gestoßen sind - Inline-Stil, fast jede Beschriftung kann mit Eigenschaften versehen werden, Damit können Sie CSS-Stilregeln direkt auf Tags anwenden, wie im obigen Beispiel.

Da Inline-Stile die unterste Ebene des Stapels sind, überschreiben sie alle externen Stildeklarationen sowie Regeln innerhalb des Style>-Tags.
Dies ist eine einfache Möglichkeit, überall auf der Seite Stile hinzuzufügen, die jedoch mit einem Preis verbunden ist. Stile sind an Tags gebunden
Wenn Sie sich beim Formulieren von Stilen für die Seite zu sehr auf Methode D verlassen, können Sie den Inhalt und die Präsentation nicht trennen. Wenn Sie ihn erneut ändern, müssen Sie den Quellcode tief markieren und einfügen Das CSS in der Datei ist viel einfacher zu pflegen.
Der Missbrauch von Methode D unterscheidet sich nicht von der Verwendung von Anzeigeeffekt-Tags wie , um den Markenquellcode zu verunreinigen. Mit Vorsicht verwenden
In realen Situationen gibt es natürlich die Möglichkeit, Inline-Stile zu verwenden, wenn Sie der Seite Stile hinzufügen müssen, aber nicht auf externe Dateien zugreifen oder den nicht ändern können, kann dies Ihr Leben retten , oder den Stil vorübergehend anwenden, wird er auch verwendet, wenn er nicht mit anderen Tags geteilt werden soll.
Wenn es beispielsweise eine Seite auf der Website gibt, die einen Wohltätigkeitsverkauf ankündigt, wird sie später entfernt , und Sie möchten einen einzigartigen Satz von Tags für diese Seite entwerfen, dann betten Sie diese Stilregeln vielleicht in den Tag ein, anstatt sie dem permanenten Stylesheet hinzuzufügen.
Tun Sie es jetzt, aber beachten Sie, dass diese Stile dies nicht können einfach geändert werden oder sich über die Seite erstrecken, um die gesamte Website zu nutzen.
                                                                        #P# Zusammenfassung
Wir haben uns vier verschiedene Möglichkeiten angesehen, CSS auf Markup-Inhalte anzuwenden, und festgestellt, dass jede Methode ihre eigenen Vorteile für den Umgang mit besonderen Situationen hat. Sehen wir uns jede Methode sowie ihre Vor- und Nachteile an.
Methode A: Stile müssen im platzierte Stile können vor älteren Browsern nicht vollständig ausgeblendet werden. Geeignet für die Verwendung in der Test- und Entwicklungsphase. Markup-Inhalt und -Stil können gemeinsam im selben Dokument geändert werden.
Methode B: Erstellen Sie eine Reihe gemeinsamer Stile für viele Seiten oder sogar für die gesamte Website. Das externe Stylesheet wird nur einmal heruntergeladen und vom Browser zwischengespeichert, um bei wiederholten Besuchen Downloadzeit zu sparen. Durch das Zusammenfassen gemeinsamer Stile in einem Dokument können Designänderungen leichter verwaltet werden. Mit dem -Tag referenzierte Stylesheets können in älteren Browsern nicht ausgeblendet werden.
Methode C: Erstellen Sie eine Reihe gemeinsamer Stile für viele Seiten oder sogar für die gesamte Website. Das externe Stylesheet wird nur einmal heruntergeladen und vom Browser zwischengespeichert, um bei wiederholten Besuchen Downloadzeit zu sparen. Durch das Zusammenfassen gemeinsamer Stile in einem Dokument können Designänderungen leichter verwaltet werden. @import kann Stilinhalte vor Netscape 4.x-Browsern verbergen.
Methode D: Der Stil wird inline definiert, sodass der Anzeigeeffekt zu nah am markierten Inhalt liegt. Stildefinitionen können nicht mit anderen Tags, dem gesamten Dokument oder sogar der gesamten Site geteilt werden. Die Wartung ist sehr mühsam und nicht effizient. Geeignet für vorübergehende Probleme, wenn auf externe Dateien nicht zugegriffen werden kann oder wenn der Seitenkopf> geändert wird.
Da wir nun alle Möglichkeiten gesehen haben, Stile mit der Tag-Syntax zu verknüpfen, gehen wir noch einen Schritt weiter und schauen uns das Ersetzen von Stylesheets in „Erweiterungen“ an.
                                                                        #P# Kompetenzerweiterung
In dieser Einheit tauchen wir etwas tiefer in die Welt der Stylesheets ein und schauen uns Ersatz-Stylesheets (ein Markup-Quellcode mit vielen Stylesheets) an und wie wir Benutzern mehr Kontrolle und Auswahl geben können, was sie möchten Verwenden Sie ein Stylesheet. Stylesheets ersetzen
Zu Beginn dieses Kapitels haben wir vier verschiedene Möglichkeiten zur Anwendung von CSS auf eine Seite besprochen und auch die Vorteile der Verknüpfung und des Imports externer Stylesheets aufgezeigt. Wir können noch einen Schritt weiter gehen und Stylesheets referenzieren Benutzer haben die Möglichkeit, eine größere Schriftart, ein anderes Farbthema oder sogar ein anderes Seitenlayout auszuwählen.
Wir können das -Tag verwenden, um auf viele Stile zu verweisen, um diese Funktion auszudrücken (sehr ähnlich der ursprünglichen Methode B). Kapitel), aber geben Sie „alternatives Stylesheet“ für das rel-Attribut an.
Wenn Sie beispielsweise möchten, dass Benutzer zwei zusätzliche Schriftgrößen auswählen können, können Sie wie gewohnt auf das Theme-Stylesheet verlinken und dann auf den Ersatz verlinken Stylesheet.