Im Einklang Tags vs. Inline-CSS-Eigenschaften

Lesezeit: 5 Minuten

Im Einklang Tags vs Inline CSS Eigenschaften
Paul

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

Eigenschaften des Inline-Stils:

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

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

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

  • Ein weiterer Vorteil eines Style-Tags, umso mehr bei einem externen Stylesheet, ist die Wiederverwendbarkeit. Jetzt, da es sich um eine Klasse handelt, können Sie sie auf mehr als nur ein Element anwenden!

    – Das Z

    17. August 12 um 21:46 Uhr

Im Einklang Tags vs Inline CSS Eigenschaften
jmbertucci

Stilregeln können angehängt werden mit:

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

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

  • kann von Browsern aus Leistungsgründen zwischengespeichert werden; und
  • sind für eine Entwicklungsperspektive viel einfacher zu pflegen.

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

  • bietet eine klare Trennung von Markup und Styling;
  • erzeugt saubereres HTML-Markup; und
  • ist mit Selektoren effizienter, um Regeln auf mehrere Elemente auf einer Seite anzuwenden, was die Verwaltung verbessert und die Seitengröße verkleinert.

Inline-Elemente wirken sich nur auf ihr jeweiliges Element aus.

Ein wichtiger Unterschied zw style -Tag und das Inline-Attribut ist Spezifität. Die Spezifität bestimmt, wann ein Stil einen anderen überschreibt. Im Allgemeinen haben Inline-Stile eine höhere Spezifität.

Lesen CSS: Spezifitätskriege für einen unterhaltsamen Blick auf dieses Thema.

Ich hoffe das hilft!

  • Der Satz, dass es nicht möglich ist, einen Inline-Stil zu kaskadieren, hat mich zum Nachdenken gebracht, ist das nicht technisch gesehen eine Kaskadierung? <div style="border:1px solid #707070; border-left:0">

    – Das Z

    17. August 12 um 22:04 Uhr

  • @TheZ In der Tat könnte es eine schlechte Verwendung des Begriffs “Kaskade” von mir sein. Ich habe es immer als eine Regel gesehen, die in eine andere übergeht, normalerweise von anderen Elementen. Grundsätzlich Erbschaft. Ich muss die Definition noch einmal lesen, um sicherzustellen, dass ich den Begriff richtig verwende. Was ich mit meiner Antwort meine, ist, dass Inline-Stile nur das Element betreffen, auf dem sie vorhanden sind, sonst nichts.

    – jmbertucci

    17. August 2012 um 22:15 Uhr


  • Ein weiteres Plus für einen Seitenstilblock ist, dass er das Verschieben des Stils auf eine externe CSS-Seite vereinfacht.

    – Schwimmbad

    28. Oktober 13 um 11:11 Uhr

  • @jmbertucci: Ich hätte das Thema der Frage nicht geändert. Wie Sie Regeln anwenden können, z@import oder@font-face von einem Stilattribut? Ich sage das auch, weil ich in einem Fall bin, in dem mir ein HTML-Attribut erlaubt iststyle="" aber nicht ein<style></style> Schild.

    – Benutzer2284570

    31. Oktober 14 um 20:06 Uhr

  • Als Nachtrag (da ich das gerade über eine Google-Suche gefunden habe) – mit HTML5 gibt es jetzt eine scoped -Attribut (obwohl es noch nicht allgemein unterstützt wird), mit dem Sie verwenden können <style> ... </style> Blöcke inline – zB developer.mozilla.org/en-US/docs/Web/HTML/Element/style

    – CD001

    27. Mai ’15 um 8:50 Uhr


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

Wenn Sie den Stil eines Elements in JavaScript ändern, wirkt sich dies auf den Inline-Stil aus. Wenn dort bereits ein Stil vorhanden ist, überschreiben Sie ihn dauerhaft. Wenn der Stil jedoch in einem externen Blatt oder in einem <style> -Tag und setzen Sie dann das Inline-Tag auf "" stellt den Stil aus dieser Quelle wieder her.

Es hängt davon ab, ob.

Der Hauptpunkt ist, wiederholten Code zu vermeiden.

Wenn derselbe Code zweimal oder öfter wiederverwendet werden muss und bei Änderungen synchron sein soll, verwenden Sie ein externes Stylesheet.

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

Um Ihre direkte Frage zu beantworten: Keines davon ist die bevorzugte Methode. Verwenden Sie eine separate Datei.

Inline-Stile sollten nur als letztes Mittel verwendet oder per Javascript-Code festgelegt werden. Inline-Stile haben den höchsten Grad an Spezifität, überschreiben Sie also Ihre tatsächlichen Stylesheets. Dadurch können sie schwer zu kontrollieren sein (das sollten Sie vermeiden !important auch aus dem gleichen Grund).

Ein eingebettet <style> block wird nicht empfohlen, da Sie die Fähigkeit des Browsers verlieren, das Stylesheet über mehrere Seiten Ihrer Website hinweg zwischenzuspeichern.

Kurz gesagt, Sie sollten Ihre Stile nach Möglichkeit 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.

Das Trennen Ihres Stylings wird Ihr Leben viel einfacher machen, insbesondere wenn die Arbeitsaufgaben auf verschiedene Personen verteilt sind. Wiederverwendbarkeit und Portabilität werden Ihnen viel Zeit sparen.

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

Im Einklang Tags vs Inline CSS Eigenschaften
Henry

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

Hier sind jedoch einige praktische Ausnahmen:

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

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

  • Wenn eine Anwendung dem Benutzer eine genaue Kontrolle über einen bestimmten CSS-Wert geben soll, z. B. Textfarbe, dann kann es notwendig sein, dies inline hinzuzufügen style Elemente oder In-Page <style></style> Blöcke. Z.B style="color:#{{ page.color }}"oder <style> p.themed { color: #{{ page.color }}; }</style>

1644072186 47 Im Einklang Tags vs Inline CSS Eigenschaften
Federico

Wann immer es möglich ist, ist es vorzuziehen, Klasse zu verwenden .myclass{} und Kennung #myclass{}verwenden Sie also eine dedizierte css Datei oder Tag <style></style> innerhalb eines html. Der Inline-Stil ist gut, um die CSS-Option dynamisch mit Javascript zu ändern.

.

784360cookie-checkIm Einklang Tags vs. Inline-CSS-Eigenschaften

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy