CSS-Praxis-Tutorial (1)

CSS (Cascading Stylesheets) ist eine neue Technologie zum Erstellen von Webseiten. Sie wird mittlerweile von den meisten Browsern unterstützt und ist zu einem der wesentlichen Werkzeuge für das Webdesign geworden. Die Verwendung von CSS kann den Formatcode von Webseiten vereinfachen, die Download- und Anzeigegeschwindigkeit beschleunigen, die Menge des hochzuladenden Codes reduzieren und die Arbeitsbelastung durch wiederholte Arbeiten erheblich reduzieren. Besonders wenn Sie es mit einer Website mit Hunderten von Webseiten zu tun haben, ist CSS für uns wie ein Geschenk Gottes! ^_^

Vorwort

CSS (Cascading Stylesheets) ist eine neue Technologie zur Erstellung von Webseiten. Sie wird mittlerweile von den meisten Browsern unterstützt und ist zu einem unverzichtbaren Bestandteil des Webdesigns geworden wenige Werkzeuge.

W3C (The World Wide Web Consortium) unterteilt dynamisches HTML (Dynamic HTML) in drei zu implementierende Teile: Skriptsprache (einschließlich JavaScript, Vbscript usw.), Browser, die dynamische Effekte unterstützen (einschließlich Internet Explorer, Netscape). Navigator usw.) und CSS-Stylesheets.

1. Merkmale von Cascading Style Sheets

Ganz zu schweigen von der mangelnden Dynamik von Webseiten in der Vergangenheit. Es gibt auch viele Schwierigkeiten beim Layout von Webinhalten Es ist schwierig, die Webseite entsprechend Ihren eigenen Ideen und Ihrer Kreativität zur Anzeige von Informationen zu gestalten. Selbst diejenigen, die das Wesentliche der HTML-Sprache beherrschen, müssen viele Tests bestehen, bevor sie das Layout dieser Informationen beherrschen. Der Prozess ist sehr langwierig und mühsam. Um das Internet weiterzuentwickeln und so schnell wie möglich mehr Menschen den Zugang zu dieser bunten Welt zu ermöglichen, werden neue HTML-Hilfstools auf den Markt kommen.

Stylesheets wurden unter dieser Forderung geboren. Das erste, was sie tun müssen, ist, die Elemente auf der Webseite genau zu positionieren, damit Webdesigner Text und Bilder einfach wie ein Regisseur steuern und eine gute Leistung erbringen können zum Skript auf der Bühne der Website.

Zweitens trennt es die Inhaltsstruktur und die Formatsteuerung auf der Webseite. Was die Betrachter sehen möchten, ist die Inhaltsstruktur auf der Webseite. Damit die Betrachter diese Informationen besser sehen können, muss die Formatkontrolle hilfreich sein. In der Vergangenheit war die Verteilung der beiden auf der Webseite gestaffelt und kombiniert, was beim Anzeigen und Ändern sehr umständlich war. Jetzt wird die Trennung der beiden Webdesignern eine große Erleichterung sein. Die Inhaltsstruktur und die Formatsteuerung sind getrennt, sodass eine Webseite ausschließlich aus Inhalten bestehen kann und die Formatsteuerung aller Webseiten an eine bestimmte CSS-Stylesheet-Datei gerichtet ist. Dies ist in zweierlei Hinsicht von Vorteil:

Erstens vereinfacht es den Formatcode der Webseite, und das externe Stylesheet wird vom Browser im Cache gespeichert, was die Download- und Anzeigegeschwindigkeit beschleunigt Reduziert die Menge an Code, die hochgeladen werden muss (da wiederholte Formatierungen nur einmal gespeichert werden).

Zweitens kann allein das Ändern der CSS-Stylesheet-Datei, die das Website-Format speichert, den Stil und die Eigenschaften der gesamten Website ändern, was besonders nützlich ist, wenn Websites mit einer großen Anzahl von Seiten geändert werden. Dadurch wird vermieden, dass Webseiten einzeln geändert werden müssen, und die Arbeitsbelastung durch wiederholte Arbeiten wird erheblich reduziert. Wenn Sie mit einer Website mit Hunderten von Webseiten konfrontiert sind, ist CSS für uns einfach wie ein Geschenk Gottes! ^_^

2. Methoden zum Hinzufügen von Cascading Style Sheets

Es gibt vier Möglichkeiten, Style Sheets zu Webseiten hinzuzufügen.

1． Der einfachste Weg besteht darin, es direkt zur HTML-Kennung (Tag) hinzuzufügen:

< Tag style=“PROperties“>Webseiteninhalt< /tag>

Zum Beispiel:

< p style=“color: blue; Schriftgröße: 10pt“>CSS-Beispiel< /p>

Codebeschreibung:

wird in Blau angezeigt " mit Schriftgröße 10pt. Obwohl es einfach zu verwenden und intuitiv anzuzeigen ist, wird diese Methode nicht häufig verwendet, da ein solcher Zusatz die Vorteile des Stylesheets „Inhaltsstruktur und Formatsteuerung werden separat gespeichert“ nicht vollständig nutzen kann.

2． Zur HTML-Header-Informationskennung hinzugefügt:

< head>

< -

Der spezifische Inhalt des Stylesheets

-->

< /style>

< /head>

type="text/css" gibt an, dass das Stylesheet den MIME-Typ verwendet. Dies hilft Browsern, die CSS nicht unterstützen, CSS-Code herauszufiltern und zu vermeiden, dass das Stylesheet, das wir im Quellcode festgelegt haben, direkt vor dem Browser angezeigt wird. Um jedoch sicherzustellen, dass die obige Situation nicht eintritt, ist es dennoch erforderlich, dem Stylesheet die Kommentarkennung „< !--Comment content-->“ hinzuzufügen.

3． Das Link-Stylesheet

wird auch im HTML-Header-Informationsbezeichner hinzugefügt:



< link rel=“stylesheet“ href = „*.css“ type=“text/css“ media=“screen“>

< /head>

*.css ist eine separat gespeicherte Stylesheet-Datei, die keine Inhalte enthält die