So speichern Sie CSS-Front-End-Fragen und Antworten-php.cn

So speichern Sie CSS

王林

Freigeben： 2023-05-29 15:11:07

Original

549 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.

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.

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文档中的代码。

外部样式表

外部样式表是指将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.

.css

style.css

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!