Wie schreibe ich einen CSS-Stil in ein Tag?
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 id="行内元素-h-nbsp-标题元素">行内元素，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>Nach dem Login kopierenDer 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="max-width:90%">行内元素，div 块级元素 </div>
Nach dem Login kopieren 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 ! !
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!
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>行内样式</title>
</head>
<body>
<p style="background-color: #999900">行内元素，控制段落-1</p>
<h2 id="行内元素-h-nbsp-标题元素">行内元素，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>
<div style="max-width:90%">行内元素，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!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1382
52
Tabellenrahmen in HTML
Sep 04, 2024 pm 04:49 PM
Anleitung zum Tabellenrahmen in HTML. Hier besprechen wir verschiedene Möglichkeiten zum Definieren von Tabellenrändern anhand von Beispielen für den Tabellenrand in HTML.
HTML-Rand links
Sep 04, 2024 pm 04:48 PM
Anleitung zum HTML-Rand links. Hier besprechen wir einen kurzen Überblick über HTML margin-left und seine Beispiele sowie seine Code-Implementierung.
Verschachtelte Tabelle in HTML
Sep 04, 2024 pm 04:49 PM
Dies ist eine Anleitung für verschachtelte Tabellen in HTML. Hier diskutieren wir anhand der entsprechenden Beispiele, wie man eine Tabelle innerhalb der Tabelle erstellt.
HTML-Tabellenlayout
Sep 04, 2024 pm 04:54 PM
Leitfaden zum HTML-Tabellenlayout. Hier besprechen wir die Werte des HTML-Tabellenlayouts zusammen mit den Beispielen und Ausgaben im Detail.
HTML-Eingabeplatzhalter
Sep 04, 2024 pm 04:54 PM
Leitfaden für HTML-Eingabeplatzhalter. Hier besprechen wir die Beispiele für HTML-Eingabeplatzhalter zusammen mit den Codes und Ausgaben.
HTML-geordnete Liste
Sep 04, 2024 pm 04:43 PM
Leitfaden zur HTML-geordneten Liste. Hier besprechen wir auch die Einführung von HTML-geordneten Listen und Typen sowie deren Beispiele
Text in HTML verschieben
Sep 04, 2024 pm 04:45 PM
Anleitung zum Verschieben von Text in HTML. Hier besprechen wir eine Einführung, wie Marquee-Tags funktionieren, mit Syntax und Beispielen für die Implementierung.
HTML-Onclick-Button
Sep 04, 2024 pm 04:49 PM
Anleitung zum HTML-OnClick-Button. Hier diskutieren wir deren Einführung, Funktionsweise, Beispiele und Onclick-Events in verschiedenen Veranstaltungen.
