CSS-Kommentare

Inhaltsverzeichnis

    Inhaltsverzeichnis anzeigen

CSS-Kommentare werden im Browser nicht angezeigt, können es aber Helfen Sie bei der Dokumentation Ihres Quellcodes.

CSS-Kommentare

Kommentare werden zur Erläuterung des Codes verwendet und können hilfreich sein, wenn Sie den Quellcode zu einem späteren Zeitpunkt bearbeiten.

Kommentare werden von Browsern ignoriert.

Ein CSS-Kommentar wird innerhalb des Elements <style> platziert und beginnt mit /* und endet mit */:

Beispiel

 /* This is a single-line comment */
p
{
   
color: red;
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
/* This is a single-line comment */
p {
  color: red;
} 
</style>
</head>
<body>

<p>Hello World!</p>
<p>This paragraph is styled with CSS.</p>
<p>CSS comments are not shown in the output.</p>

</body>
</html>

Sie können Kommentare an beliebiger Stelle im Code hinzufügen:

Beispiel

   p
{
   
color: red; 
  /* Set text color to red */
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
p {
  color: red;  /* Set text color to red */
} 
</style>
</head>
<body>

<p>Hello World!</p>
<p>This paragraph is styled with CSS.</p>
<p>CSS comments are not shown in the output.</p>

</body>
</html>

Kommentare können auch mehrere Bereiche umfassen mehrere Zeilen:

Beispiel

 /* This is
a multi-line
comment */

p
{
   
color: red;
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
/* This is
a multi-line
comment */

p {
  color: red;
} 
</style>
</head>
<body>

<p>Hello World!</p>
<p>This paragraph is styled with CSS.</p>
<p>CSS comments are not shown in the output.</p>

</body>
</html>

HTML- und CSS-Kommentare

Im HTML-Tutorial haben Sie gelernt, dass Sie mithilfe von Kommentare zu Ihrer HTML-Quelle hinzufügen können -Syntax.

Im folgenden Beispiel verwenden wir eine Kombination aus HTML- und CSS-Kommentaren:

Beispiel

 <!DOCTYPE html>
<html>
<head>
<style>
p {
  color: red; /* Set 
  text color to red */
} 
</style>
</head>
<body>
<h2>My 
  Heading</h2>
<!-- These paragraphs will be red -->
<p>Hello 
  World!</p>
<p>This paragraph is styled with CSS.</p>
<p>CSS comments are 
  not shown in the output.</p>
</body>
</html>

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
p {
  color: red; /* Set text color to red */
}
</style>
</head>
<body>

<h2>My Heading</h2>

<!-- These paragraphs will be red -->
<p>Hello World!</p>
<p>This paragraph is styled with CSS.</p>
<p>HTML and CSS comments are not shown in the output.</p>

</body>
</html>