如何添加 CSS

当浏览器读取样式表时，它将根据样式表中的信息来格式化 HTML 文档。

三种使用 CSS 的方法

有三种插入样式表的方法：

  • 外部 CSS
  • Interne CSS
  • Inline-CSS

外部 CSS

通过使用外部样式表，您只需修改一个文件即可改变整个网站的外观！

每张 HTML 页面必须在 head 部分的 <link> 元素内包含对外部样式表文件的引用。

Beispiel

外部样式在 HTML 页面的 <head> 部分内的 <link> 元素中进行定义：

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

Probieren Sie es selbst aus

Externe Stylesheets können in jedem Texteditor geschrieben werden und müssen mit der .css-Dateiendung gespeichert werden.

Externe .css-Dateien sollten keine HTML-Tags enthalten.

"mystyle.css" sieht so aus:

"mystyle.css"

body {
  background-color: lightblue;
}
h1 {
  color: navy;
  margin-left: 20px;
}

Hinweis:Fügen Sie kein Leerzeichen zwischen Attributwert und Einheit hinzu (z.B. margin-left: 20 px;）。Die korrekte Schreibweise ist:margin-left: 20px;

Interne CSS

Wenn eine HTML-Seite nur ein einzigartiges Stylesheet hat, kann ein internes Stylesheet verwendet werden.

Interne Styles werden im <style>-Element im <head>-Abschnitt definiert.

Beispiel

Interne Styles werden im <style>-Element im <head>-Abschnitt der HTML-Seite definiert:

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: linen;
}
h1 {
  color: maroon;
  margin-left: 40px;
} 
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

Probieren Sie es selbst aus

Inline-CSS

Inline-Styles (auch bekannt als Inline-Styles) können verwendet werden, um einzigartige Stile für ein einzelnes Element anzuwenden.

Um Inline-Styles zu verwenden, fügen Sie das "style"-Attribut dem relevanten Element hinzu. Das "style"-Attribut kann alle CSS-Eigenschaften enthalten.

Beispiel

Inline-Styles werden im "style"-Attribut des relevanten Elements definiert:

<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">Dies ist ein Überschrift</h1>
<p style="color:red;">Dies ist ein Absatz.</p>
</body>
</html>

Probieren Sie es selbst aus

Hinweis:Inline-Styles verlieren viele Vorteile der Stylesheets (indem sie Inhalt und Darstellung miteinander vermischen). Verwenden Sie diese Methode vorsichtig.

mehrere Stylesheets

wenn für denselben Selektor (Element) in verschiedenen Stylesheets einige Eigenschaften definiert wurden, wird der Wert aus dem zuletzt gelesenen Stylesheet verwendet.

angenommen, dass eineexternes Stylesheethat wie folgt für das <h1>-Element die folgenden Stile festgelegt:

h1 {
  color: navy;
}

angenommen, dass eineinterne Stylesheethat auch wie folgt für das <h1>-Element die folgenden Stile festgelegt:

h1 {
  color: orange;    
}

Beispiel

wenn das interne Stylesheet auf ein externes Stylesheet verlinkt之后wenn es definiert ist, wird das <h1>-Element orange sein:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
  color: orange;
}
</style>
</head>

Probieren Sie es selbst aus

Beispiel

aber, wenn es auf ein externes Stylesheet verlinkt之前Definition von internen Stilen, dann wird das <h1>-Element tiefblau sein:

<head>
<style>
h1 {
  color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

Probieren Sie es selbst aus

Kaskadierungsreihenfolge

Wenn mehrere Stile für ein bestimmtes HTML-Element angegeben werden, wird welcher Stil verwendet?

Alle Stile auf der Seite werden gemäß folgenden Regeln "Kaskadieren", um eine neue "virtuelle" Stylesheet zu erstellen, bei der die erste Priorität am höchsten ist:

  1. Inline-Styles (im HTML-Element)
  2. Externe und interne Stylesheets (im Head-Bereich)
  3. Standardstile des Browsers

Daher haben Inline-Styles die höchste Priorität und überschreiben sowohl externe und interne Styles als auch Standardstile des Browsers.

Probieren Sie es selbst aus