Hướng dẫn cách comment trong css

Posted on by mtoplistChuyên mục:Top List

Chúng ta đã biết file CSS của 1 website khá dài vậy phải viết css thế nào để dễ chỉnh sửa tìm kiếm. Đơn giản là thêm vào những dòng comment.

Nội dung chính

Show

  • Định nghĩa comment trong Css ( comment in css)
  • Comment trong CSS
  • 2. Comment HTML và CSS

CSS comment là những dòng chú thích được thêm vào để giải thích ý nghĩa của mã lệnh hoặc cũng được dùng để vô hiệu hóa mã lệnh.

Comment trong CSS được bắt đầu bởi /*và kết thúc bởi */.

/* bắt đầu CSS style */
body {
    background: #f2f2f2;
}

Comment in CSS
có thể dài nhiều dòng:

/* comment
dài nhiều dòng
*/

Hoặc để vô hiệu hóa mã CSS:

/*
body {
    background: #f2f2f2;
}
*/

Chúng ta có thể đặt comment phía cuối dòng:

body { /* bộ chọn */
   background: #f2f2f2; /* quy luật CSS */
}

Comment trong CSS thường được sử dụng để giải thích mã của bạn. Nó rất hữu ích cho người khác hoặc chính bạn đọc lại mã CSS mà bạn viết ra để có thể dễ dàng hiểu chúng.

Comment được các trình duyệt bỏ qua, không hiển thị trên trình duyệt.

Comment được viết ở một hoặc nhiều dòng và được viết trong /*…………*/

Ví dụ về comment trong CSS: 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
p {
  color: blue;
  /* Comment duoc viet tren 1 dong */
  text-align: center;
  font-size: 17px;
}
/* Comment nay 
 * duoc viet tren 
 * nhieu dong 
*/
</style>
</head>
<body>
  <p>Hello CSS</p>
  <p>Ví dụ về comment trong CSS.</p>
  <p>Những dòng comment không được hiển thị lên trình duyệt.</p>
</body>
</html>

Output:

Khi viết code HTML và CSS bạn cần phải chú thích (Comment) lại một số đoạn mã. Điều này sẽ giúp cho code trở nên rõ ràng, dễ hiểu và sau này chỉnh sửa dễ hơn.

Với người mới bắt đầu nên thường xuyên để ý tới Comment để giúp cho công việc trở nên hiệu quả. Bạn sẽ không mất quá nhiều thời gian cho việc này đâu.

  • Comment trong HTML
  • Comment trong CSS

Các đoạn comment khi viết nó chỉ hiển thị ở trong code. Và không được hiển thị trên trình duyệt.

Cách viết trong HTML như sau:

<!-- ... -->

Sẽ bắt đầu bằng <!-- và kết thúc
bằng -->

Ví dụ:

<!DOCTYPE html>
<html>
<head>
    <!-- Đây là tiêu đề -->
    <title>Tiêu đề</title>
</head>
<body>

<div class="container">

    <div class="header">
    </div><!-- End header -->
    
    <div class="body">
    	<!-- ảnh logo -->
    	<img src="anh.jpg"/>
        
    </div><!-- End body -->
    
    <div class="footer">
    </div><!-- End footer -->
    
</div>

</body>
</html>

Trong CSS comment sẽ khác so với HTML.

/* ... */

Nó sẽ bắt đầu bằng /* và kết thúc bằng */

Ví dụ:

/* Khu vực Header */
.header {
    background: #444;
    height: 100px;
    margin-bottom: 20px;
}

Cách viết Comment hiệu quả

Khi viết chú thích mình thường áp dụng những cách sau:

– Đối với HTML nên đặt sau kết thúc của một khối mã. Như ví dụ ở trên đưa ra. Bởi vì trong HTML khi kết thúc </div> có khá nhiều vì vậy
mình thường áp dụng cách này. Khi đặt như vậy sau này nhìn lại bạn sẽ dễ hiểu hơn.

– Đối với CSS mình thường viết

/*****************
*     Body CSS   *
*****************/

Cho các khu vực khác nhau. Chẳng hặn như header, body, footer.

/* Khu vực Header */
.header {
    background: #444;
    height: 100px;
    margin-bottom: 20px;
}

/* Khu vực Footer */
.footer {
    height: 200px;
    background: #555;
}

Và mình cũng sẽ tạo ra khoảng cách giữa các khối CSS lớn bằng một khoảng trắng.

Như vậy chúng đã đã cùng nhau tìm hiểu về Comment trong HTML, CSS. Tuy nhìn qua thì đơn giản nhưng áp dụng vào trong code lại là một chuyện không đơn giản. Đôi lúc mình hay quên không chú thích gì cả. Vậy
nên bạn nên rèn luyện thói quen chú thích để code tốt hơn.

Cafedev chia sẻ về cách comments trong code css như thế nào là hợp lý nhất có thể.

Bình luận(comments) được sử dụng để giải thích code và có thể giúp ích khi bạn chỉnh sửa code nguồn vào một ngày sau đó.

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

Bình luận 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ụ: 

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

Bạn có thể thêm comments ​​bất cứ nơi nào bạn muốn trong code:

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

Comments cũng có thể trải dài trên
nhiều dòng:

/* This is
a multi-line
comment */

p {
  color: red;
}

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

Trong ví dụ sau, chúng ta sử dụng kết hợp các nhận xét HTML và CSS:

<!--
Cafedev.vn - Kênh thông tin IT hàng đầu Việt Nam
@author cafedevn
Contact: 
Fanpage: https://www.facebook.com/cafedevn
Group: https://www.facebook.com/groups/cafedev.vn/
Instagram: https://instagram.com/cafedevn
Twitter: https://twitter.com/CafedeVn
Linkedin: https://www.linkedin.com/in/cafe-dev-407054199/
Pinterest: https://www.pinterest.com/cafedevvn/
YouTube: https://www.youtube.com/channel/UCE7zpY_SlHGEgo67pHxqIoA/
-->

<!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 Cafedev!</p>
<p>This paragraph is styled with CSS.</p>
<p>CSS comments are not shown in the output.</p>

</body>
</html>

Copy and chạy code

Nếu bạn thấy hay và hữu ích, bạn có thể tham gia các kênh sau của cafedev để nhận được nhiều hơn nữa:

  • Group Facebook
  • Fanpage
  • Youtube
  • Instagram
  • Twitter
  • Linkedin
  • Pinterest
  • Trang chủ

Chào thân ái và quyết thắng!

Đăng ký kênh youtube để ủng
hộ Cafedev nha các bạn, Thanks you!

mtoplist