ความคิดเห็น 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>