Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Es gibt verschiedene Arten von CSS-Stylesheets und deren jeweilige Verwendung

下次还敢
Freigeben: 2024-04-06 02:30:20
Original
579 Leute haben es durchsucht

Es gibt drei Arten von CSS-Stylesheets: Inline, intern und extern. Inline-Stile gelten für bestimmte Elemente, interne Stile gelten für das gesamte Dokument und externe Stile können in mehreren Dokumenten verwendet werden. Bei CSS besteht eine Stilregel aus einem Selektor, der das Element angibt, auf das der Stil angewendet werden soll, und einem Deklarationsblock, der die Stileigenschaften und -werte enthält. Verschiedene Arten von Stylesheets haben ihre eigenen Vor- und Nachteile: Inline-Stile sind spezifischer, sorgen aber für Unordnung im Dokument; interne Stile sind weniger spezifisch, aber sauberere externe Stile sind am allgemeinsten und eignen sich für große Projekte.

Es gibt verschiedene Arten von CSS-Stylesheets und deren jeweilige Verwendung

Arten von CSS-Stylesheets und wie man sie verwendet

Arten von CSS-Stylesheets

Es gibt drei Haupttypen von CSS-Stylesheets:

  • Inline-Stile: Direkt darin geschrieben HTML-Elemente Für Stile verwenden Sie das Attribut style. style 属性。
  • 内部样式:写在 <style> 元素内的样式,放置在 HTML 文档的 <head> 部分。
  • 外部样式:写在独立文件(通常带有 .css 扩展名)中的样式,通过 <link>
Interne Stile:

Stile, die im Element <style> geschrieben und im Abschnitt <head> des HTML-Dokuments platziert werden.

Externe Stile:

Stile, die in separaten Dateien geschrieben sind (normalerweise mit der Erweiterung .css) und über das Element <link> in HTML-Dokumente eingeführt werden.

So verwenden Sie

Inline-Stile

<code class="html"><p style="color: red;">这是一个红色的段落。</p></code>
Nach dem Login kopieren

Interne Stile

<code class="html"><head>
  <style>
    p {
      color: blue;
    }
  </style>
</head></code>
Nach dem Login kopieren
Externe Stile

<code class="html"><head>
  <link rel="stylesheet" href="style.css">
</head></code>
Nach dem Login kopieren
In Dateien bestehen Stilregeln aus Selektoren und Deklarationsblöcken: CSS

Wählen Sie Spezifiziert das Element, auf das der Stil angewendet werden soll:

<code class="css">p { /* 针对段落元素的样式 */ }</code>
Nach dem Login kopieren
    Deklarationsblock
  • Enthält Stilattribute und -werte:
    <code class="css">p {
      color: blue; /* 设置段落元素的文本颜色 */
      font-size: 20px; /* 设置段落元素的字体大小 */
    }</code>
    Nach dem Login kopieren
  • Vor- und Nachteile verschiedener Arten von Stylesheets
  • Inline-Stile: Spezifisch, aber macht HTML-Dokumente unorganisiert.
Interne Stile: 🎜Weniger spezifisch, aber übersichtlicher als Inline-Stile. 🎜🎜🎜Äußerer Stil: 🎜Der vielseitigste und wiederverwendbarste, empfohlen für große Projekte. 🎜🎜

Das obige ist der detaillierte Inhalt vonEs gibt verschiedene Arten von CSS-Stylesheets und deren jeweilige Verwendung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
css
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage