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

80

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>
html css Paul
quelle
5
Ein weiterer Vorteil eines Style-Tags, insbesondere bei einem externen Stylesheet, ist die Wiederverwendbarkeit. Jetzt, da es eine Klasse ist, können Sie sie auf mehr als nur ein Element anwenden!
TheZ

Antworten:

94

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!

jmbertucci
quelle
1
Diese Linie, einen Inline-Stil nicht kaskadieren zu können, ließ mich denken, ist das nicht technisch kaskadierend? <div style="border:1px solid #707070; border-left:0">
TheZ
@TheZ In der Tat könnte es eine schlechte Verwendung des Begriffs "Kaskade" durch mich sein. Ich habe es immer als eine Regel gesehen, die in eine andere fließt, normalerweise von anderen Elementen. Grundsätzlich Vererbung. Ich muss die Definition erneut lesen, um sicherzustellen, dass ich den Begriff richtig verwende. Was ich in meiner Antwort meine, ist, dass Inline-Stile nur das Element beeinflussen, auf dem sie vorhanden sind, sonst nichts.
jmbertucci
Ein Plus für einen Seitenstilblock ist auch, dass er die Verschiebung des Stils auf eine externe CSS-Seite vereinfacht.
Pool
@jmbertucci: Ich hätte das Thema der Frage nicht geändert. Wie können Sie Regeln wie @importoder @font-faceaus einem Stilattribut anwenden ? Ich sage das auch, weil ich in einem Fall ein HTML-Attribut, style=""aber kein <style></style>Tag darf .
user2284570
Als Nachtrag (da ich dies gerade bei einer Google-Suche gefunden habe) - mit HTML5 gibt es jetzt ein scopedAttribut (obwohl es noch nicht allgemein unterstützt wird), mit dem Sie <style> ... </style>Blöcke inline verwenden können - z. B. developer.mozilla.org/en-US/docs/ Web / HTML / Element / Stil
CD001
20

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.

Niet the Dark Absol
quelle
10

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.

Lawrence Mok
quelle
8

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.

Spudley
quelle
4

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.

RobB
quelle
3

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>

Henry
quelle
0

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.

Federico
quelle
0

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.

Robin Manoli
quelle
0

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.

Sukane
quelle