CSS Comments – Ghi chú trong CSS

CSS Comments – Ghi chú trong CSS

Ghi chú trong CSS

Ghí chú CSS không được hiển thị trong trình duyệt, nhưng chúng có thể giúp ghi lại mã nguồn của bạn.

Nhận xét được sử dụng để giải thích mã và có thể hữu ích khi bạn chỉnh sửa mã nguồn vào một ngày sau đó.

Các bình luận bị trình duyệt bỏ qua.

Một chú thích CSS được đặt bên trong phần tử <style> và bắt đầu bằng /* và kết thúc bằng */:

Ví dụ:

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

Bạn có thể thêm nhận xét ở bất cứ đâu bạn muốn trong mã:

Ví dụ:

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

Ghi chú cũng có thể kéo dài nhiều dòng:

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

Ghi chú HTML và CSS

Từ hướng dẫn HTML, bạn đã biết rằng bạn có thể thêm nhận xét vào nguồn HTML của mình bằng cách sử dụng cú pháp <! --...-->.

Trong ví dụ sau, chúng tôi sử dụng kết hợp các nhận xét HTML và 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>HTML and CSS comments are not shown in the output.</p>
  </body>
</html>