Inline <style> -Tags vs. Inline-CSS-Eigenschaften

Was ist die bevorzugte Methode zum Festlegen von CSS-Eigenschaften?

Inline-Stileigenschaften:

<div style="width:20px;height:20px;background-color:#ffcc00;"></div>

Stileigenschaften in <style>...</style>Tags:

<style>.gold{width:20px;height:20px;background-color:#ffcc00;}</style><div class="gold"></div>

Stilregeln können angehängt werden mit:

• Externe Dateien
• In-Page-Style-Tags
• Inline-Stilattribut

Im Allgemeinen bevorzuge ich verknüpfte Stylesheets, weil sie:

• kann von Browsern für die Leistung zwischengespeichert werden; und
• sind für eine Entwicklungsperspektive viel einfacher zu pflegen.

Ihre Frage bezieht sich jedoch speziell auf das styleTag im Vergleich zu Inline-Stilen. Verwenden Sie stylein diesem Fall lieber das Tag, weil es:

• bietet eine klare Trennung von Markup und Styling;
• erzeugt saubereres HTML-Markup; und
• Mit Selektoren ist es effizienter, Regeln auf mehrere Elemente auf einer Seite anzuwenden, um die Verwaltung zu verbessern und die Seitengröße zu verringern.

Inline-Elemente wirken sich nur auf das jeweilige Element aus.

Ein wichtiger Unterschied zwischen dem styleTag und dem Inline-Attribut ist die Spezifität. Die Spezifität bestimmt, wann ein Stil einen anderen überschreibt. Im Allgemeinen weisen Inline-Stile eine höhere Spezifität auf.

Lesen Sie CSS: Specificity Wars, um einen unterhaltsamen Blick auf dieses Thema zu werfen.

Ich hoffe das hilft!

Hier ist ein Aspekt, der den Unterschied bestimmen könnte:

Wenn Sie den Stil eines Elements in JavaScript ändern, wirkt sich dies auf den Inline-Stil aus. Wenn es dort bereits einen Stil gibt, überschreiben Sie ihn dauerhaft. Wenn der Stil jedoch in einem externen Blatt oder in einem <style>Tag definiert wurde, stellen Sie den Inline- ""Stil so ein, dass der Stil aus dieser Quelle wiederhergestellt wird.

Es hängt davon ab, ob.

Der Hauptpunkt ist, wiederholten Code zu vermeiden.

Wenn derselbe Code zweimal oder öfter wiederverwendet werden muss und beim Ändern synchron sein sollte, verwenden Sie ein externes Stylesheet.

Wenn Sie es nur einmal verwenden, denke ich, dass Inline in Ordnung ist.

Um Ihre direkte Frage zu beantworten: Keine dieser Methoden ist die bevorzugte Methode. Verwenden Sie eine separate Datei.

Inline-Stile sollten nur als letzter Ausweg verwendet oder durch Javascript-Code festgelegt werden. Inline-Stile weisen die höchste Spezifität auf. Überschreiben Sie daher Ihre tatsächlichen Stylesheets. Dies kann dazu führen, dass sie schwer zu kontrollieren sind (aus !importantdem gleichen Grund sollten Sie dies ebenfalls vermeiden ).

Ein eingebetteter <style>Block wird nicht empfohlen, da Sie die Fähigkeit des Browsers verlieren, das Stylesheet auf mehreren Seiten Ihrer Site zwischenzuspeichern.

Kurz gesagt, wo immer möglich, sollten Sie Ihre Stile in einer separaten CSS-Datei ablegen.

Unter dem Gesichtspunkt der Wartbarkeit ist es viel einfacher, ein Element in einer Datei zu verwalten, als mehrere Elemente in möglicherweise mehreren Dateien zu verwalten.

Die Trennung Ihres Stylings erleichtert Ihnen das Leben erheblich, insbesondere wenn die Aufgaben auf verschiedene Personen verteilt sind. Durch Wiederverwendbarkeit und Portabilität sparen Sie viel Zeit.

Wenn Sie einen Inline-Stil verwenden, werden alle festgelegten externen Eigenschaften überschrieben.

Ich stimme der Mehrheitssicht zu, dass externe Stylesheets die bevorzugte Methode sind.

Hier sind jedoch einige praktische Ausnahmen:

• Dynamische Hintergrundbilder. CSS-Stylesheets sind statische Dateien. Sie müssen daher einen Inline-Stil verwenden, um einen dynamischen Stil (aus einer Datenbank, einem CMS usw.) hinzuzufügen background-image.

• Wenn ein Element beim Laden der Seite ausgeblendet werden muss, ist die Verwendung eines externen Stylesheets nicht praktikabel, da es immer einige Verzögerungen gibt, bevor das Stylesheet verarbeitet wird, und das Element bis dahin sichtbar ist. style="display: none;"ist der beste Weg, um dies zu erreichen.

• Wenn eine Anwendung dem Benutzer eine genaue Kontrolle über einen bestimmten CSS-Wert, z. B. eine Textfarbe, geben soll, muss dieser möglicherweise Inline- styleElementen oder In-Page- <style></style>Blöcken hinzugefügt werden. ZB style="color:#{{ page.color }}"oder<style> p.themed { color: #{{ page.color }}; }</style>

Wann immer möglich, ist es vorzuziehen, Klasse .myclass{}und Bezeichner zu verwenden #myclass{}. Verwenden Sie daher eine dedizierte CSS- Datei oder ein Tag <style></style>in einem HTML-Code . Der Inline-Stil ist gut, um die CSS-Option dynamisch mit Javascript zu ändern.

Es kann verschiedene Gründe geben, einen Weg über den anderen zu wählen.

• Wenn Sie CSS für Elemente angeben müssen, die programmgesteuert generiert werden (z. B. Ändern von CSS für Bilder unterschiedlicher Größe), kann die Verwendung von Inline-CSS besser gewartet werden.
• Wenn ein CSS nur für die aktuelle Seite gültig ist, sollten Sie lieber das Skript-Tag als eine separate CSS-Datei verwenden. Es ist gut, wenn der Browser nicht zu viele http-Anfragen ausführen muss.

Andernfalls ist es, wie angegeben, besser, eine separate CSS-Datei zu verwenden.

Sie können CSS auf drei verschiedene Arten einstellen: -

1.External style sheet
2.Internal style sheet
3.Inline style

Die bevorzugte / ideale Methode zum Festlegen des CSS-Stils ist die Verwendung als externe Stylesheets, wenn der Stil auf viele Seiten angewendet wird. Mit einem externen Stylesheet können Sie das Erscheinungsbild einer gesamten Website ändern, indem Sie eine Datei ändern.

Beispielnutzung kann sein: -

<head>
    <link rel="stylesheet" type="text/css" href="your_css_file_name.css">
</head>

Wenn Sie einem einzelnen Dokument einen eindeutigen Stil zuweisen möchten, können Sie das interne Stylesheet verwenden.

Verwenden Sie kein Inline-Stylesheet, da es Inhalt mit Präsentation mischt und viele Vorteile verliert.