CSS-Stile können als separate Dateien (Dateien vom Typ .css ) in HTML-Dokumente eingeführt oder direkt in HTML-Dokumente geschrieben werden. Sie können grob in die folgenden vier Methoden unterteilt werden:
Die erste und zweite Methode schreiben beide CSS-Stile in das aktuelle HTML-Dokument. Die dritte und vierte Methode platzieren beide die CSS-Stile in externen Dateien und importieren sie dann in das aktuelle HTML-Dokument.
Beim Inline-Stil wird der CSS-Stil direkt in das Tag innerhalb der Codezeile eingefügt, normalerweise im style des Tags. Da der Inline-Stil direkt in das Tag eingefügt wird, ist dies der direkteste Weg und auch der am umständlichsten, den Stil zu ändern.
[Beispiel 1] Wenden Sie CSS-Inline-Stile auf Absätze, <h2>-Tags, <em>-Tags, <strong>-Tags bzw. <div>-Tags an.
<!doctype html>
<html>
<Kopf>
<meta charset="UTF-8">
<title>Inline-Stile</title>
</head>
<Körper>
<p style="background-color: #999900">Inline-Element, Absatz 1 steuern</p>
<h2 style="background-color: #FF6633">Inline-Element, h2-Titelelement</h2>
<p style="background-color: #999900">Inline-Elemente, Absatz 2 steuern</p>
<strong style="font-size:30px;">Inline-Elemente, stark ist effektiver als sie</strong>
<div style="background-color:#66CC99; color:#993300; height:30px; line-height:30px;">Inline-Elemente, div-Elemente auf Blockebene</div>
<em style="font-size:2em;">Inline-Elemente, Geviert-Hervorhebung</em>
</body>
</html>Der Seitendemonstrationseffekt ist wie folgt:
Im obigen Beispiel wird der Inline-Stil durch das Style-Attribut des HTML-Elements eingebettet, d. h. der CSS-Code kann in Anführungszeichen style="" eingefügt werden, und mehrere CSS-Attributwerte werden durch Semikolons getrennt ; Zum Beispiel das <div>-Tag im Beispiel:
<div style="background-color:#66CC99; color:#993300; height:30px; line-height:30px;">Inline-Elemente, div-Elemente auf Blockebene</div>
Das Tag <p> des Absatzes setzt die Hintergrundfarbe auf Braun (Hintergrundfarbe: #999900) und das Tag <h2> des Titels legt die Hintergrundfarbe auf Rot fest (Hintergrundfarbe: #FF6633).
Das <strong>-Tag legt die Schriftart auf 30 Pixel fest (font-size:30px;), das <div>-Tag legt die Höhe und Zeilenhöhe auf 30 Pixel fest und legt die Hintergrundfarbe und -farbe fest (background-color: #66CC99; color : #993300 ; height:30px; line-height:30px;), das <em>-Tag legt die Schriftgröße auf relative Einheiten fest (font-size: 2em;).
Obwohl der Inhalt der beiden Absatz-<p>-Tags unterschiedlich ist, verwenden sie dieselbe Einstellung für die Hintergrundfarbe, fügen jedoch das CSS-Inline-Attribut zweimal hinzu, um die Hintergrundfarbe festzulegen: Hintergrundfarbe: #999900.
Obwohl Inline-Elemente einfach zu schreiben sind, können anhand von Beispielen die folgenden Mängel festgestellt werden:
Jedes Tag muss durch Hinzufügen des Stilattributs gestylt werden. Anders als in der Vergangenheit, als Webseitenersteller HTML-Tags und -Stile miteinander vermischten, werden Inline-Stile jetzt über CSS geschrieben, und in der Vergangenheit wurden HTML-Tag-Attribute verwendet, um Stileffekte zu erzielen. Obwohl die Methoden unterschiedlich sind, sind die Konsequenzen dieselben: Hohe Wartungskosten in der Zukunft, das heißt, wenn Sie die Seite ändern, müssen Sie jede Seite der Website einzeln öffnen und einzeln ändern, und Sie können sie nicht sehen die Rolle von CSS überhaupt. Durch das Hinzufügen so vieler Inline-Stile wird die Seite größer. Wenn das Portal auf diese Weise geschrieben ist, werden Serverbandbreite und Datenverkehr verschwendet.Einige Webseiten im Internet können diese Schreibweise anhand der Quelldateien erkennen. Obwohl nur ein Teil einer Webseite auf diese Weise erstellt wird, muss je nach Situation unterschieden werden:
Wenn ein Webseitenersteller einen solchen Inline-Stil schreibt, kann der aktuelle Stil schnell geändert werden, ohne dass der Konflikt mit zuvor geschriebenen Stilen berücksichtigt werden muss. Wenn diese Situation auf der Webseite besteht, liegt das daran, dass der Stil vom Editor im Hintergrund generiert wird Bearbeiten oder der Hintergrund nicht vollständig entwickelt ist, müssen Optionen für Redakteure entwickelt werden, um Stile auszuwählen, anstatt Farbe, Dicke, Hintergrundfarbe, Neigung und andere Effekte direkt über den Editor zu ändern.Inline-Stile schreiben CSS am Kopf der Webseiten-Quelldatei, also zwischen <head> und <head>, und umgeben es mit dem <style>-Tag im HTML-Tag. Sein Merkmal ist, dass der Stil nur sein kann Wird hier verwendet, um den Nachteil des mehrfachen Schreibens von Inline-Stilen zu beheben.
[Beispiel 2] Legen Sie eine Schreibmethode im Inline-Stil für Absätze fest, um die Codemenge zu reduzieren.
<!doctype html>
<html>
<Kopf>
<meta charset="utf-8">
<title>Eingebettet</title>
<style type="text/css">
P{
text-align: left; /*text linksbündig*/
Schriftgröße: 18 Pixel; /*Schriftgröße 18 Pixel*/
Zeilenhöhe: 25 Pixel; /*Zeilenhöhe 25 Pixel*/
text-indent: 2em; /*Die erste Zeile um 2 Leerzeichen in Textgröße einrücken*/
Breite: 500 Pixel; /*Absatzbreite 500 Pixel*/
margin: 0 auto; /*Zentriert unter dem Browser*/
margin-bottom: 20px; /*Absatzunterer Rand 20 Pixel*/
}
</style>
</head>
<Körper>
<p>Der Name des Unternehmens „Baidu“ stammt aus dem Gedicht „Auf der Suche nach ihm in Tausenden von Baidu“ aus der Song-Dynastie. (Der Konferenzraum der Baidu Company heißt Qingyu Case, was die Wortkarte dieses Gedichts ist). Die Idee des „Bärentatzen“-Symbols entstand aus der Anregung von „Jägern, die mit Bärentatzen patrouillieren“, was der „analytischen Suchtechnologie“ von Dr. Li sehr ähnlich ist und so Baidus Suchkonzept bildete und schließlich zum Baidu-Symbolbild wurde. Da die meisten Suchmaschinen danach Tierbilder wie den Fuchs von SOHU oder den Hund von GOOGLE darstellten, nannte Baidu ihn natürlich einen Bären. Baidu Bear ist zum Image der Baidu Company geworden. </p>
<p>Bei Baidus Plan, sein Logo zu ändern, wurden die drei von Baidu vorgeschlagenen neuen Logo-Designs alle durch die Stimmen der Internetnutzer abgelehnt. Mehr Internetnutzer stimmten für das ursprüngliche Bärentatzen-Logo. </p>
<p>Insgesamt wurden drei Abstimmungsrunden durchgeführt, um das Logo zu ändern. Bis zum Ende der zweiten Abstimmungsrunde hatte das neue lächelnde Logo einen absoluten Vorteil. Doch in der letzten Abstimmungsrunde gewann das ursprüngliche Bärentatzen-Logo dramatisch die meisten Stimmen der Internetnutzer und lehnte damit die drei neuen LOGO-Pläne vollständig ab. </p>
</body>
</html>Der Seitendemonstrationseffekt ist wie folgt:
Im obigen Beispiel sind die Absätze wie folgt eingestellt: Der Text ist linksbündig, die Schriftart hat die Größe 14, die Zeilenhöhe beträgt 25 Pixel, die Breite beträgt 500 Pixel, der untere Rand beträgt 20 Pixel, der Browser ist zentriert darunter Browser, und die erste Zeile ist um zwei Leerzeichen in Textgröße eingerückt. Beim Einrücken der ersten Zeile werden relative Einheiten verwendet. Der Zweck dieser Einstellung besteht darin, dass bei einer Änderung der Schriftgröße (z. B. font-size: 18px; ) die Schrift immer noch um zwei Leerzeichen in der Textgröße eingerückt werden kann.
Inline-Stile bringen Unannehmlichkeiten bei der Stiländerung mit sich. Im vorherigen Beispiel verwenden beide Absätze denselben Stil, müssen jedoch zweimal geschrieben werden. Mit Inline-Stilen können alle Absatzstile zusammengestellt werden.
Style kann nicht nur CSS-Stile, sondern auch JavaScript-Skripte definieren, daher müssen Sie bei der Verwendung von Style vorsichtig sein. Wenn der Typwert von style text/css ist, wird der CSS-Stil intern geschrieben; wenn der Typwert von style text/javascript ist, wird das JavaScript-Skript intern geschrieben.
Das Titelattribut des Style-Tags
Es gibt ein spezielles Attribut title im Stil. Sie können den Titel verwenden, um einen Titel für verschiedene Stile festzulegen, um den Effekt des Umschaltens im Browser zu erzielen. und der Firefox-Browser unterstützt diesen Effekt.
[Beispiel 3] Legen Sie jeweils zwei Schriftgrößenstile für den Firefox-Browser fest und ändern Sie diese über das Firefox-Menü „Ansicht“.
<!doctype html>
<html>
<Kopf>
<meta charset="utf-8">
<style type="text/css" title="Schriftgröße 14">
P{
text-align: left; /*text linksbündig*/
Schriftgröße: 14 Pixel; /*Schriftgröße 14 Pixel*/
Zeilenhöhe: 25 Pixel; /*Zeilenhöhe 25 Pixel*/
text-indent: 2em; /*Die erste Zeile um zwei Leerzeichen in Textgröße einrücken*/
Breite: 500 Pixel; /*Absatzbreite 500 Pixel*/
margin: 0 auto; /*Zentriert unter dem Browser*/
}
</style>
<style type="text/css" title="Schriftgröße 18">
P{
text-align: left; /*text linksbündig*/
Schriftgröße: 18 Pixel; /*Schriftgröße 18 Pixel*/
Zeilenhöhe: 25 Pixel; /*Zeilenhöhe 25 Pixel*/
text-indent: 2em; /*Die erste Zeile um zwei Leerzeichen in Textgröße einrücken*/
Breite: 500 Pixel; /*Absatzbreite 500 Pixel*/
margin: 0 auto; /*Zentriert unter dem Browser*/
Farbe: #6699FF; /*Schriftfarbe ändern*/
}
</style>
</head>
<Körper>
<p>Der Name des Unternehmens „Baidu“ stammt aus dem Gedicht „Auf der Suche nach ihm in Tausenden von Baidu“ aus der Song-Dynastie. (Der Konferenzraum der Baidu Company heißt Qingyu Case, was die Wortkarte dieses Gedichts ist). Die Idee des „Bärentatzen“-Symbols entstand aus der Anregung von „Jägern, die mit Bärentatzen patrouillieren“, was der „analytischen Suchtechnologie“ von Dr. Li sehr ähnlich ist und so Baidus Suchkonzept bildete und schließlich zum Baidu-Symbolbild wurde. </p>
</body>
</html>Der Seitendemonstrationseffekt ist in der folgenden Abbildung dargestellt.
Im obigen Beispiel werden zwei Schriftgrößen durch <style type="text/css" title="名称"> definiert und es gibt zwei Optionen im Untermenü „Seitenstil“ im Menü „Ansicht“ in Firefox: Schriftart Größe 14, Schriftgröße 18. Standardmäßig wird der erste geschriebene <style type="text/css" title="名称"> angezeigt. Der Seitenstil kann über das Menü geändert werden.
Die Link-Methode verknüpft externe Stylesheet-Dateien über das <link>-Tag von HTML. Dies ist die am häufigsten verwendete Methode auf Websites im Internet und auch die praktischste Methode. Diese Methode trennt HTML-Dokumente und CSS-Dateien vollständig, erreicht eine vollständige Trennung der Strukturschicht und der Präsentationsschicht und verbessert die Skalierbarkeit der Webseitenstruktur und die Wartbarkeit von CSS-Stilen.
[Beispiel 4] Verwenden Sie den Linkstil, um Stile auf HTML-Code anzuwenden, der einfach zu schreiben und zu ändern ist.
<!doctype html>
<html>
<Kopf>
<meta charset="utf-8">
<title></title>
<link href="lianjie.css" type="text/css" rel="stylesheet" />
<link href="lianjie-2.css" type="text/css" rel="stylesheet" />
</head>
<Körper>
<p>Ich werde von der Datei lianjie-2.css gesteuert. Wie wäre es mit Ihnen unten? ? </p>
<h3>Oben gab mir die Datei <span>lianjie.css</span> ein farbenfrohes Kleid. </h3>
</body>
</html>Der Seitendemonstrationseffekt ist wie folgt:
Im obigen Beispiel sind zwei CSS-Dateien durch einen Link verknüpft und beide sind gültig. Aus diesem Grund fügt der Website-Ersteller den gemeinsamen Teil in eine CSS-Datei ein und schreibt eine neue Stildatei für den aktuellen Seitenstil.
lianjie.css-Dateicode:
h3{
Schriftstärke: normal; /*Standardmäßigen Fettdruck des Titels aufheben*/
Hintergrundfarbe: #66CC99; /* Hintergrundfarbe festlegen*/
height: 50px; /*Legen Sie die Höhe des Etiketts fest*/
line-height:50px; /* Zeilenhöhe des Etiketts festlegen*/
}
Spanne{
Farbe: #FFOOOO; /* Schriftfarbe*/
Schriftstärke:bold; /*fette Schriftart*/
}lianjie-2.css-Dateicode:
P{
Farbe: #FF3333; /*Einstellung der Schriftfarbe*/
Schriftstärke: fett; /* fette Schriftart*/
border-bottom: 3px gestrichelt #009933; /* Setze die untere Randlinie*/
Zeilenhöhe: 30px; /* Zeilenhöhe festlegen*/
}Verknüpfte Stile trennen CSS-Code und HTML-Code vollständig, wodurch die Trennung von Struktur und Stil erreicht wird, sodass HTML-Code die Seitenstruktur gezielt aufbauen kann, während die Verschönerungsarbeit durch CSS abgeschlossen wird.
Die Vorteile der Verknüpfung importierter CSS-Stile:
CSS-Dateien können in verschiedenen HTML-Dateien platziert werden, um die Stile aller Seiten der Website zu vereinheitlichen. Darüber hinaus erleichtert das Einfügen des CSS-Codes in eine CSS-Datei die Verwaltung und reduziert die Code- und Wartungszeit, wenn die CSS-Datei geändert wird Mit dieser CSS-Datei werden alle HTML-Dateien aktualisiert, ohne dass alle Seiten vom Server abgerufen und nach der Änderung hochgeladen werden müssen.Stile importieren Verwenden Sie den Befehl @import, um externe Stylesheets zu importieren. Es gibt 6 Schreibmethoden für importierte Stile:
@import daoru.css;
@import 'daomxss';
@import "daoru.css";
@import-URL(daoru.css);
@import url('daoru.css');
@import url("daoru.css");[Beispiel 5] Importieren Sie die Stylesheets lianjie.css und daoru.css und schreiben Sie die Hintergrundfarbe des <body>-Tags. Beachten Sie, dass die Stile des importierten Stylesheets und des <body>-Tags nicht umgekehrt werden können.
<html>
<Kopf>
<meta charset="utf-8">
<title></title>
<style type="text/css">
@import-URL(lianjie.css);
@import-URL(daoru.css);
body {Hintergrundfarbe: #e4e929;
</style>
</head>
<Körper>
<div>
<p>Ich werde von der Datei lianjie-2.css gesteuert. Wie wäre es mit Ihnen unten? ? </p>
<h3>Auf der Jacke hat mir die Datei <span>lianjie.css</span> ein Blumenkleid gegeben. </h3>
</div>
</body>
</html>Der Seitendemonstrationseffekt ist in der folgenden Abbildung dargestellt.
Im obigen Beispiel muss es @import url("lianjie-2.css"); p{text-indent: 3em;} sein, aber nicht p{text-indent:3em;} @import url("lianjie-2.css"); andernfalls ist der Importeffekt ungültig. In der CSS-Datei muss @import außerdem vorne platziert und der CSS-Stil am Ende hinzugefügt werden, sonst ist er ungültig.
Der Dateicode von lianjie.css ist derselbe wie im vorherigen Beispiel, dh der Linktyp.
daoru.css-Dateicode:
@import url("lianjie-2.css");
p { text-indent: 3em }Damit ist dieser Artikel über die vier Implementierungsmethoden von eingebetteten HTML-CSS-Stilen abgeschlossen. Weitere verwandte HTML-eingebettete CSS-Stile finden Sie in den vorherigen Artikeln von downcodes.com. Ich hoffe, Sie werden in Zukunft mehr lesen . Unterstützen Sie downcodes.com!