So fügen Sie CSS hinzu


Inhaltsverzeichnis

    Inhaltsverzeichnis anzeigen


Wenn ein Browser ein Stylesheet liest, formatiert er das HTML-Dokument entsprechend die Informationen im Stylesheet.


Drei Möglichkeiten zum Einfügen von CSS

Es gibt drei Möglichkeiten, ein Stylesheet einzufügen:

  • Externes CSS

  • Internes CSS

  • Inline-CSS


Externes CSS

Mit einem Mit einem externen Stylesheet können Sie durch Ändern das Aussehen einer gesamten Website ändern nur eine Datei!

Jede HTML-Seite muss einen Verweis auf die darin enthaltene externe Stylesheet-Datei enthalten das -Element im Kopfbereich.

Beispiel

Externe Stile werden im -Element im <head>-Abschnitt einer HTML-Seite definiert:

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

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>


Ein externes Stylesheet kann in jedem Texteditor geschrieben werden und muss mit der Erweiterung .css gespeichert werden.

Die externe CSS-Datei sollte keine HTML-Tags enthalten.

So sieht die Datei „mystyle.css“ aus:

„mystyle.css“

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

Hinweis: Fügen Sie kein Leerzeichen zwischen dem Eigenschaftswert (20) und der Einheit ein (px):

Falsch (Leerzeichen):

margin-left: 20 px;

Richtig (kein Leerzeichen):

margin-left: 20px;


Internes CSS

Ein internes Stylesheet kann verwendet werden, wenn eine einzelne HTML-Seite einen eindeutigen Stil hat.

Der interne Stil wird im <style>-Element im Kopf definiert Abschnitt.

Beispiel

Interne Stile werden im <style>-Element im <head>-Abschnitt einer 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 →

<!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>



Inline-CSS

Ein Inline-Stil kann verwendet werden, um einen eindeutigen Stil für ein einzelnes Element anzuwenden.

Um Inline-Stile zu verwenden, fügen Sie das Stilattribut zum entsprechenden Element hinzu. Der Das style-Attribut kann eine beliebige CSS-Eigenschaft enthalten.

Beispiel

Inline-Stile werden innerhalb des „style“-Attributs des relevanten definiert Element:

 <!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">This 
  is a heading</h1>
<p style="color:red;">This is a paragraph.</p>

  </body>
</html>

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>

</body>
</html>


Tipp: Ein Inline-Stil verliert viele der Vorteile eines Stylesheets (durch Mischen). Inhalt mit Präsentation). Gehen Sie mit dieser Methode sparsam um.


Mehrere Stylesheets

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

Nehmen Sie an, dass ein externes Stylesheet den folgenden Stil für das <h1>-Element hat:

h1
{
  color: navy;
}

Nehmen wir dann an, dass ein internes Stylesheet auch den folgenden Stil für das <h1>-Element hat:

h1
{
  color: orange;   
}

Beispiel

Wenn der interne Stil nach dem Link zum externen Stylesheet definiert wird, sind es die <h1>-Elemente "orange":

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

Probieren Sie es selbst aus →

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

<h1>This is a heading</h1>
<p>The style of this document is a combination of an external stylesheet, and internal style</p>

</body>
</html>


Beispiel

Wenn jedoch der interne Stil vor dem Link zum externen Stylesheet definiert wird, sind es die <h1>-Elemente "Marine":

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

Probieren Sie es selbst aus →

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

<h1>This is a heading</h1>
<p>The style of this document is a combination of an external stylesheet, and internal style</p>

</body>
</html>



Kaskadierende Reihenfolge

Welcher Stil wird verwendet, wenn für ein HTML-Element mehr als ein Stil angegeben ist?

Alle Stile auf einer Seite werden zu einem neuen „virtuellen“ Stil „kaskadiert“. Blatt nach den folgenden Regeln, wobei Nummer eins die höchste Priorität hat:

  1. Inline-Stil (innerhalb eines HTML-Elements)

  2. Externe und interne Stylesheets (im Kopfbereich)

  3. Browser-Standardeinstellung

Ein Inline-Stil hat also die höchste Priorität und überschreibt externe und interne Stile und Browser-Standardeinstellungen.

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
body {background-color: linen;}
</style>
</head>
<body style="background-color: lavender">

<h1>Multiple Styles Will Cascade into One</h1>
<p>Here, the background color of the page is set with inline CSS, and also with an internal CSS, and also with an external CSS.</p>
<p>Try experimenting by removing styles to see how the cascading stylesheets work (try removing the inline CSS first, then the internal, then the external).</p>

</body>
</html>