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>
Comment trong CSS
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.
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.
- Trang chủ
- Tutorials
- HTML
- HTML cơ bản
Comment là cách bạn có thể để lại nhận xét cho các lập trình viên khác (hoặc chính bạn) biết đoạn mã của bạn đang định viết để làm gì mà mà không ảnh hưởng đến kết quả đầu ra được hiển thị cho người dùng cuối.
Comment cũng là một cách đơn giản
để làm cho code không hoạt động mà không phải
xóa hoàn toàn.
Comment trong HTML bắt đầu bằng <!– – và kết thúc bằng —>
Bạn có thể thao tác nhanh trong trình soạn thảo code của mình bằng việc bôi đen đoạn code hoặc đoạn văn bản và bấm tổ hợp phím Ctrl + /
? Hãy loại bỏ comment cho thẻ h2, h2 và p
? Chỉ loại bỏ comment cho thẻ h2
Đăng ký tư vấn
Nhân viên gọi điện tư vấn miễn phí sau khi đăng ký
Được cập nhật các ưu đãi sớm nhất
Hotline: 0383180086
Hãy đăng ký để nhận những thông tin mới nhất về học bổng mới nhất tại NIIT – ICT Hà Nội
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.
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 */
}
