So speichern Sie CSS

王林
Freigeben: 2023-05-29 15:11:07
Original
609 Leute haben es durchsucht

CSS (Cascading Style Sheets) ist eine Stilauszeichnungssprache für Webdesign, die normalerweise in externen Stylesheets gespeichert und in HTML-Dokumenten verlinkt wird. Im Folgenden stellen wir vor, wie CSS-Stylesheets gespeichert werden.

  1. Inline-Stile

Inline-Stile beziehen sich auf das direkte Schreiben von CSS-Code in HTML-Tags, wie unten gezeigt:

<div style="color: red; font-size: 16px;">Hello World!</div>
Nach dem Login kopieren

Obwohl Inline-Stile sehr einfach sind, weisen sie große Einschränkungen auf. Da CSS-Code oft komplex ist, wäre die Verwendung von Inline-Stilen zur Beschreibung des Stils einer gesamten Website sehr mühsam. Wenn Sie außerdem den Stil ändern müssen, müssen Sie normalerweise den Code jedes Inline-Stil-Tags ändern, was ebenfalls sehr zeitaufwändig und arbeitsintensiv ist.

  1. Eingebetteter Stil

Eingebetteter Stil bezieht sich auf das direkte Schreiben von CSS-Code in das <head>-Tag des HTML-Dokuments unter Verwendung des <style>-Elements. Wickeln Sie es so ein: <head>标签中,使用<style>元素进行包裹,如下所示:

<head>
  <style>
    body { 
      background-color: #f0f0f0; 
      font-family: Arial, sans-serif; 
      font-size: 16px; 
      color: #333; 
    }
    
    h1 { 
      color: #ff0000; 
      font-size: 24px; 
      font-weight: bold; 
    }
  </style>
</head>
Nach dem Login kopieren

使用嵌入式样式,可以在同一个HTML文档中引用CSS代码。这样做的好处是,如果需要更改样式,只需要修改一个样式表即可,而不必修改每个HTML文档中的代码。

  1. 外部样式表

外部样式表是指将CSS代码存储在一个单独的CSS文件中,并在HTML文档中引用。这样做的好处是,可以让多个HTML文件共用一个CSS文件,从而使网站的维护和管理更加方便。外部样式表通常使用.css文件扩展名,如下所示:

在style.css文件中:

body { 
  background-color: #f0f0f0; 
  font-family: Arial, sans-serif; 
  font-size: 16px; 
  color: #333; 
}

h1 { 
  color: #ff0000; 
  font-size: 24px; 
  font-weight: bold; 
}
Nach dem Login kopieren

在HTML文档中引用style.css

<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
Nach dem Login kopieren
Mithilfe von Inline-Stilen kann CSS-Code im selben HTML-Dokument referenziert werden. Dies hat den Vorteil, dass Sie, wenn Sie den Stil ändern müssen, nur ein Stylesheet ändern müssen, anstatt den Code in jedem HTML-Dokument ändern zu müssen.

    Externes Stylesheet

    🎜Externes Stylesheet bezieht sich auf das Speichern von CSS-Code in einer separaten CSS-Datei und die Referenzierung darauf im HTML-Dokument. Dies hat den Vorteil, dass sich mehrere HTML-Dateien eine CSS-Datei teilen können, was die Pflege und Verwaltung der Website komfortabler macht. Externe Stylesheets verwenden normalerweise die Dateierweiterung .css, wie folgt: 🎜🎜In einer style.css-Datei: 🎜rrreee🎜Bezieht sich auf eine style.css-Datei in einem HTML Dokument:🎜rrreee🎜Die Verwendung externer Stylesheets kann das Schreiben und Warten von Code erheblich vereinfachen. Durch die Trennung des CSS-Codes vom HTML-Dokument kann die Dateigröße der Seite reduziert werden, sodass der Webinhalt dem Benutzer schneller bereitgestellt werden kann. Darüber hinaus können Sie den Caching-Mechanismus des Browsers nutzen, um die Ladezeit der Seite zu verkürzen und die Leistung und Benutzererfahrung der Website zu verbessern. 🎜🎜Zusammenfassend kann CSS als Inline-Stil, eingebetteter Stil und externes Stylesheet gespeichert werden. Durch diese verschiedenen Speichermethoden können wir CSS flexibel anwenden, um unterschiedliche Entwicklungsanforderungen zu erfüllen. Aber im Allgemeinen ist die Verwendung externer Stylesheets die gebräuchlichste Methode, da sie die Vorteile eines präzisen Codes, einer einfachen Wartung und einer Cache-Optimierung bietet. 🎜

Das obige ist der detaillierte Inhalt vonSo speichern Sie CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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