CSS kommentarer

Indholdsfortegnelse

    Vis indholdsfortegnelse

CSS-kommentarer vises ikke i browseren, men det kan de hjælpe med at dokumentere din kildekode.

CSS kommentarer

Kommentarer bruges til at forklare koden og kan hjælpe, når du redigerer kildekoden på et senere tidspunkt.

Kommentarer ignoreres af browsere.

En CSS-kommentar placeres i <style>-elementet og starter med /* og slutter med */:

Eksempel

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

Prøv det selv →

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

Du kan tilføje kommentarer, hvor du vil i koden:

Eksempel

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

Prøv det selv →

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

Kommentarer kan også spænde over flere linjer:

Eksempel

 /* This is
a multi-line
comment */

p
{
   
color: red;
}

Prøv det selv →

<!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- og CSS-kommentarer

Fra HTML-selvstudiet lærte du, at du kan tilføje kommentarer til din HTML-kilde ved at bruge > syntaks.

I det følgende eksempel bruger vi en kombination af HTML- og CSS-kommentarer:

Eksempel

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

Prøv det selv →

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