Heim > Artikel > Web-Frontend > Wie schreibe ich einen CSS-Stil in ein Tag?
Wie schreibe ich einen CSS-Stil in ein Tag?
- 青灯夜游Original
- 2020-12-16 17:02:258374Durchsuche
Methode: Schreiben Sie den CSS-Stil einfach direkt in das Stilattribut des Tags. Das Stilattribut kann den Inline-Stil des Elements angeben. Die Syntax lautet „
> ;".
Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3 + HTML5-Version. Diese Methode ist für alle Computermarken geeignet.
(Empfohlene Tutorials: HTML-Tutorial, CSS-Video-Tutorial)
CSS-Stilcode muss in einer Textdatei vom Typ .css gespeichert oder im
Inline-Stil bedeutet, den CSS-Stil direkt in das Tag innerhalb der Codezeile einzufügen. Da der Inline-Stil direkt in das Tag eingefügt wird, ist dies der direkteste Weg das am wenigsten veränderte Design.
【Beispiel 1】Wenden Sie CSS-Inline-Stile auf Absätze,
-Tags, -Tags an. <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>行内样式</title>
</head>
<body>
<p style="background-color: #999900">行内元素，控制段落-1</p>
<h2 style="background-color: #FF6633">行内元素，h2 标题元素</h2>
<p style="background-color: #999900">行内元素，控制段落-2</p>
<strong style="font-size:30px;">行内元素，strong 比 em 效果要强</strong>
<div style="background-color:#66CC99; color:#993300; height:30px; line-height:30px;">行内元素，div 块级元素</div>
<em style="font-size:2em;">行内元素，em 强调</em>
</body>
</html>Der Seitendemonstrationseffekt ist wie folgt:
Im obigen Beispiel wird der Inline-Stil durch das Stilattribut des HTML-Elements bestimmt, d. h. der CSS-Code kann innerhalb von platziert werden. Anführungszeichen und mehrere CSS-Attributwerte werden durch Semikolons getrennt, wie z. B. das Schreiben des
-Tags auf Blockebene <div style="background-color:#66CC99; color:#993300; height:30px; line-height:30px;">行内元素，div 块级元素 </div>
im Beispiel, wir geben die bisherige Art auf, HTML-Struktur und -Stil zusammen zu schreiben , also
. Das Absatz-Tag
setzt die Hintergrundfarbe auf Braun (Hintergrundfarbe: #999900) und das Titel-Tag
setzt die Hintergrundfarbe auf Rot (Hintergrundfarbe: #FF6633).
Stellen Sie die Schriftart des Etiketts auf 30 Pixel ein (font-size:30px;), stellen Sie die Höhe und Zeilenhöhe des ein und legen Sie die Hintergrundfarbe und -farbe fest (background-size:30px;). Farbe: #66CC99; Höhe: 30px; Zeilenhöhe: 30px;, setzt die Schriftgröße auf relative Einheiten (Schriftgröße: 2em;). Zwei Absatz-
-Tags verwenden, obwohl der Inhalt unterschiedlich ist, die gleiche Einstellung für die Hintergrundfarbe, fügen jedoch das doppelte CSS-Inline-Attribut hinzu, um die Hintergrundfarbe festzulegen: #999900.
-Tag, -Tag sind Elemente auf Blockebene, und der Browser unterstützt sie; -Tag , legen fest, dass ihre CSS-Eigenschaften von Browsern unterstützt werden; daher sind CSS-Inline-Stile unabhängig von Inline-Elementen oder Elementen auf Blockebene gültig. Kurz gesagt: Obwohl Inline-Elemente einfach zu schreiben sind, können anhand von Beispielen die folgenden Mängel festgestellt werden:
Jedes Tag muss gestylt werden, um das Stilattribut hinzuzufügen.
Der Unterschied besteht darin, dass Webseitenersteller in der Vergangenheit HTML-Tags und -Stile miteinander vermischt haben. In der Vergangenheit wurden HTML-Tag-Attribute verwendet, um Stileffekte zu erzielen , Die Ergebnisse sind konsistent: Die späteren Wartungskosten sind hoch, das heißt, wenn Sie die Seite ändern, müssen Sie jede Seite der Website einzeln öffnen und einzeln ändern, und Sie können die Rolle von CSS überhaupt nicht erkennen .
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 Quelldatei erkennen. Obwohl nur ein Teil einer Webseite auf diese Weise erstellt wird, muss je nach Situation unterschieden werden:
Wenn Wenn der Ersteller einer Webseite solche Inline-Stile schreibt, können Sie den aktuellen Stil schnell ändern, ohne den Konflikt mit zuvor geschriebenen Stilen zu berücksichtigen. oder der Hintergrund ist nicht vollständig entwickelt und muss für Editoren entwickelt werden. Wählen Sie Stiloptionen, anstatt Farbe, Stärke, Hintergrundfarbe, Neigung und andere Effekte direkt über den Editor zu ändern.
-
Weitere Kenntnisse zum Thema Programmierung finden Sie unter:
Programmieren lernen ! !
<div style="background-color:#66CC99; color:#993300; height:30px; line-height:30px;">行内元素，div 块级元素 </div>
im Beispiel, wir geben die bisherige Art auf, HTML-Struktur und -Stil zusammen zu schreiben , also
.Das Absatz-Tag
setzt die Hintergrundfarbe auf Braun (Hintergrundfarbe: #999900) und das Titel-Tag
setzt die Hintergrundfarbe auf Rot (Hintergrundfarbe: #FF6633).
Stellen Sie die Schriftart des Etiketts auf 30 Pixel ein (font-size:30px;), stellen Sie die Höhe und Zeilenhöhe des Zwei Absatz- -Tags verwenden, obwohl der Inhalt unterschiedlich ist, die gleiche Einstellung für die Hintergrundfarbe, fügen jedoch das doppelte CSS-Inline-Attribut hinzu, um die Hintergrundfarbe festzulegen: #999900. Kurz gesagt: Obwohl Inline-Elemente einfach zu schreiben sind, können anhand von Beispielen die folgenden Mängel festgestellt werden: Jedes Tag muss gestylt werden, um das Stilattribut hinzuzufügen. Der Unterschied besteht darin, dass Webseitenersteller in der Vergangenheit HTML-Tags und -Stile miteinander vermischt haben. In der Vergangenheit wurden HTML-Tag-Attribute verwendet, um Stileffekte zu erzielen , Die Ergebnisse sind konsistent: Die späteren Wartungskosten sind hoch, das heißt, wenn Sie die Seite ändern, müssen Sie jede Seite der Website einzeln öffnen und einzeln ändern, und Sie können die Rolle von CSS überhaupt nicht erkennen . 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 Quelldatei erkennen. Obwohl nur ein Teil einer Webseite auf diese Weise erstellt wird, muss je nach Situation unterschieden werden: Wenn Wenn der Ersteller einer Webseite solche Inline-Stile schreibt, können Sie den aktuellen Stil schnell ändern, ohne den Konflikt mit zuvor geschriebenen Stilen zu berücksichtigen. oder der Hintergrund ist nicht vollständig entwickelt und muss für Editoren entwickelt werden. Wählen Sie Stiloptionen, anstatt Farbe, Stärke, Hintergrundfarbe, Neigung und andere Effekte direkt über den Editor zu ändern. Weitere Kenntnisse zum Thema Programmierung finden Sie unter: -Tag,
Das obige ist der detaillierte Inhalt vonWie schreibe ich einen CSS-Stil in ein Tag?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!