Was sind HTML-Stylesheets?

HTML Cascading Style Sheet ist ein Blatt mit einer Reihe von Regeln und Eigenschaften, die dem Browser mitteilen, wie HTML mit allen angegebenen Stilen gerendert wird.

CSS ist die Art und Weise, wie wir Webseiten gestalten. CSS hat alle Eigenschaften wie Hintergrund, Farben, Schriften, Abstände, Rahmen usw., die wir für jedes Element auf den Seiten definieren können.

HTML-Stylesheets werden auch verwendet, um das Layout der Seite so festzulegen, dass die Kopf- und Fußzeilen oder andere Elemente auf der Seite platziert werden. CSS wird immer zusammen mit HTML gesprochen, da Seiten ohne Stil sehr blass sind, ohne Hervorhebung von Überschriften usw. und mit der gleichen Schriftgröße auf der ganzen Seite, was den Benutzern keinen guten Eindruck verschafft.

Wie verwende ich HTML-Stylesheets?

In der Vergangenheit, Stile, Skripte, HTML wurde alles auf derselben Seite geschrieben. Dies machte die Seiten extrem lang und extrem schwer zu lesen und zu bearbeiten. Dann kam der Weg, HTML, Stile und Javascript zu trennen.

So fügen Sie HTML-Stylesheets in eine Webseite ein:

Es gibt drei Möglichkeiten, wie wir die Stile einschließen können:

  1. Inline-Styling

Auf diese Weise können Stile für jedes Element in HTML selbst in einem Attribut namens style geschrieben werden.

Diese Art des Stils wird überhaupt nicht empfohlen, da der HTML-Code unübersichtlich aussieht und wir dem Ansatz "Einmal schreiben, an vielen Stellen verwenden" nicht folgen können.

Eg: Hello World!

Eg: Hello World!

  1. Internes Styling

Dabei werden Stile in ein Stil-Tag aufgenommen und auf einer Webseite über HTML platziert. Diese Art des Stylings ist immer noch besser als das Inline-Styling, da gemeinsame Styles zusammengelegt werden können, falls sie für mehrere Elemente gleichzeitig verwendet werden müssen.

In der Entwicklungsphase ist es einfacher, die HTML-Datei zu bearbeiten, und wir müssen nicht jedes Mal die entsprechende CSS-Datei öffnen und bearbeiten.

Eg:

container-block(
font-size: 10px;
margin-top: 10px;
)

Hello World!

  1. Externes Styling

Dies ist die gebräuchlichste und beste Art, Stile für eine Webseite zu erstellen. Dies ähnelt dem internen Stil, der Unterschied besteht jedoch darin, dass die Stile in einer separaten Datei mit der Erweiterung .css geschrieben werden und der Verweis darauf im Head-Tag der Webseite platziert wird.

Die Syntax zum Verknüpfen der CSS-Datei auf der Webseite lautet:

Stile sollten im Head-Tag enthalten sein, das über dem Body-Tag (dh dem tatsächlichen Inhalt) von HTML liegt

Was ist die Priorität zwischen Inline-, internem und externem Styling?

Inline-Stile haben eine höhere Priorität als interne Stile. Die letzte Priorität hat das externe Styling.

Inline> Intern> Extern

Best Practices bei der Verwendung von CSS:

  • CSS kann nicht nur in eine, sondern in mehrere Dateien unterteilt werden.
  • Getrennte CSS-Dateien können mithilfe von Link-Tags einzeln in ein Head-Tag eingefügt werden.
  • Oder eine CSS-Datei kann mehrere Importanweisungen haben, um den Rest der CSS-Dateien zu importieren. Dadurch wird das CSS logisch getrennt, aber letztendlich werden alle Stile aus derselben Datei gerendert.

Verwendung: @import './process.css';

  • Stile können für beliebige Elemente der Webseite mit Selektoren wie HTML-Tag selbst, Klassennamen, IDs und beliebigen Attributnamen definiert werden.
  • Es gibt einige Pseudo-Selektoren wie:
    • Vor
    • nach
    • n-tes Kind
    • erstes Kind
    • letztes Kind
    • schweben
    • hat besucht

Dies sind im Grunde genommen Zustände der ausgewählten Elemente und nicht wirklich die genauen Elemente.

  • Wenn mehrere CSS-Dateien auf der Seite enthalten sind, hat die letzte die höchste Priorität und überschreibt die vorhandenen Stile vorheriger Dateien mit demselben Selektor.
  • Stylesheets sollten vor HTML selbst verwendet werden, damit Stile angewendet werden, während die Seite geladen wird. Wenn HTML am Ende eingefügt wird, wird es zuerst geladen und dann werden langsam Stile angewendet, was für den Benutzer eine sehr schlechte Erfahrung darstellt.

Verschiedene Funktionen von HTML Cascading Style Sheets:

  • CSS bietet Animationen : Bisher wurde Javascript nur für Animationen verwendet. Das neueste CSS, dh CSS3, bietet Animationen unter Verwendung der Eigenschaften.
  • Herstellerpräfixe: Bevor Browser den Standardversions- / Eigenschaftsnamen für neue Funktionen freigeben, stellen uns Browser einige Herstellerpräfixe für einige Zeit für einen bestimmten Zeitraum als Experiment zur Verfügung. Entwickler müssen warten, bis der Browser seine Standardversionen veröffentlicht. In der Zwischenzeit können experimentelle Funktionen mit Herstellerpräfixen verwendet werden.
  • CSS-Transformationen: Übergang wird verwendet, um innerhalb einer bestimmten Dauer schrittweise zu einem Wert einer anderen Eigenschaft zu wechseln.

Eg: -webkit-transition: width 2s, height 4s;

  • CSS-Transformationen: Mit Transformationen in CSS können Sie Elemente übersetzen, drehen, skalieren und neigen.

Medien-Anfragen:

Mobilgeräte, Desktops und iPads verhalten sich unterschiedlich. Wir können die Seiten jedoch nicht auf die gleiche Weise formatieren. Frühere Webstandards haben so gestaltet, dass wir für jeden Gerätetyp ein anderes CSS hatten.

Mit dem Fortschritt der Webstandards und der Art und Weise, wie das Web aufgebaut ist, werden Browser so entwickelt, dass sie über ein einziges CSS verfügen, das für jeden Gerätetyp verwendet werden kann. Um die Stile für Geräte basierend auf Breite und Höhe zu ändern, werden Medienabfragen verwendet, mit denen wir die minimale oder maximale Breite des Geräts angeben und Stile darin schreiben können.

Eg: @media screen and (max-width: 767px)(
container(
width: 60%;
padding: 20px;
)
)

Styles sind definitiv ein Segen für das Web. Und da die Webentwicklung in der letzten Zeit exponentiell zugenommen hat, hat CSS3 definitiv eine große Nachfrage nach extrem interaktiven und intuitiven Seiten aufkommen lassen.

Empfohlene Artikel

Dies war ein Leitfaden für HTML-Stylesheets. Hier wird erläutert, wie HTML-Stylesheets, verschiedene Funktionen und die Möglichkeiten zum Einfügen von CSS in eine Webseite verwendet werden. Sie können sich auch die folgenden Artikel ansehen, um mehr zu erfahren -

  1. Einführung in CSS
  2. Vorteile von CSS im Webdesign
  3. Was ist CSS? | Wie benutzt man?
  4. Ist CSS case sensitive?
  5. Verschiedene HTML-Listenstile

Kategorie:

Web-Entwicklungstools