Σχόλια CSS

Πίνακας περιεχομένων

    Εμφάνιση πίνακα περιεχομένων

Τα σχόλια CSS δεν εμφανίζονται στο πρόγραμμα περιήγησης, αλλά μπορούν βοηθήστε να τεκμηριώσετε τον πηγαίο κώδικα σας.

Σχόλια CSS

Τα σχόλια χρησιμοποιούνται για την επεξήγηση του κώδικα και μπορεί να βοηθήσουν όταν επεξεργαστείτε τον πηγαίο κώδικα σε μεταγενέστερη ημερομηνία.

Τα σχόλια αγνοούνται από τα προγράμματα περιήγησης.

Ένα σχόλιο CSS τοποθετείται μέσα στο στοιχείο <style> και ξεκινά με /* και τελειώνει σε */:

Παράδειγμα

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

Δοκιμάστε το μόνοι σας →

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

Μπορείτε να προσθέσετε σχόλια όπου θέλετε στον κώδικα:

Παράδειγμα

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

Δοκιμάστε το μόνοι σας →

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

Τα σχόλια μπορούν επίσης να εκτείνονται πολλαπλές γραμμές:

Παράδειγμα

 /* This is
a multi-line
comment */

p
{
   
color: red;
}

Δοκιμάστε το μόνοι σας →

<!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 και CSS

Από το σεμινάριο HTML, μάθατε ότι μπορείτε να προσθέσετε σχόλια στην πηγή HTML χρησιμοποιώντας το σύνταξη .

Στο παρακάτω παράδειγμα, χρησιμοποιούμε έναν συνδυασμό σχολίων HTML και CSS:

Παράδειγμα

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

Δοκιμάστε το μόνοι σας →

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