Trong CSS, bạn có thể thêm nhận xét để giải thích hoặc sắp xếp các phần khác nhau trong bảng kiểu của bạn. Làm như vậy có vẻ như là một bước không liên quan trong quá trình mã hóa, nhưng nhận xét có thể cực kỳ hữu ích khi gỡ lỗi hoặc thiết kế lại trang web của bạn.
Tại sao? Bởi vì họ nói với người đọc những dòng cụ thể của mã của bạn có nghĩa là gì. Các ghi chú này đặc biệt hữu ích nếu nhiều nhà phát triển đang làm việc trên một trang web hoặc nếu bạn đã kế thừa trang web từ chủ sở hữu khác.
Nếu bạn đã xem qua một biểu định kiểu trước hoặc đọc đủ các bài đăng trên blog với đoạn mã, bạn có thể đã thấy nhận xét. Họ có thể nhận ra bởi / * * / Marks bao quanh chúng./* */ marks that enclose them.
Trong bài đăng này, chúng tôi sẽ đi qua cách tạo nhận xét trong CSS. Sau đó, chúng tôi sẽ đề cập đến những gì nó có nghĩa là để nhận xét về CSS trong CSS và cách thực hiện. Cuối cùng, chúng tôi sẽ bao gồm một phương pháp bình luận CSS khác mà bạn nên tránh. Bắt đầu nào.
Cách bình luận trong CSS
Để nhận xét trong CSS, chỉ cần đặt văn bản đơn giản của bạn bên trong / * * / Marks. Điều này nói với trình duyệt rằng họ là ghi chú và không nên được hiển thị ở mặt trước.
Bạn có thể thêm nhận xét vào bảng kiểu của bạn theo hai cách. Định dạng phổ biến nhất là một nhận xét một dòng, được hiển thị bên dưới:
/* This is a comment in CSS */
p {
color: white;
background-color: #2594A4;
}
Một nhận xét một dòng có thể có dòng riêng của nó hoặc nó có thể được đặt trên một dòng có mã hoạt động, như được hiển thị ở đây:
p {
color: white; /* set the text color to white */
}
Bạn cũng có thể định dạng chúng dưới dạng nhận xét đa dòng:
/* These words…
…are inside…
…the same comment. */
Nhận xét trong CSS bị bỏ qua bởi trình duyệt và không có ảnh hưởng đến cách các kiểu được hiển thị ở mặt trước. Ví dụ dưới đây cho thấy cách các bình luận có thể được sử dụng để cho bất kỳ nhà phát triển nào đọc mã những gì mỗi dòng làm.
Xem Bút CSS Nhận xét: Ví dụ của HubSpot [@HubSpot] trên Codepen.
Nhận xét hoạt động trong cả CSS nội bộ và bên ngoài, cũng như với các khung CSS như Bootstrap CSS.
Ngoài việc giải thích các phần của mã, các bình luận cũng thường được sử dụng để nhận xét về một đoạn mã CSS.
Nhận xét ra CSS
Trong CSS, nhận xét là thực tiễn đặt điểm bình luận [/ * */] xung quanh một đoạn mã để hủy kích hoạt nó. Nhận xét cho phép các nhà phát triển tắt một số kiểu dáng nhất định trong khi lưu mã để sử dụng sau. Nó cũng có thể được sử dụng để bảo tồn toàn bộ các khối mã CSS mà bạn có thể muốn sử dụng sau này mà không cần xóa nó.
Nhận xét là một thủ thuật thuận tiện để sử dụng khi kiểm tra và gỡ lỗi mã CSS. Nó cho phép bạn thử các kết hợp kiểu dáng khác nhau, vì việc đặt một tuyên bố bên trong một nhận xét làm cho nó vô hình với trình duyệt.
Trước khi chúng tôi tiếp tục, hãy để Lừa làm rõ bộ quy tắc là gì. Một bộ quy tắc là bộ chọn CSS và tất cả các khai báo bên trong dấu ngoặc. Dưới đây là một quy tắc được đặt cho tất cả các phần tử đoạn trên một trang web [mà chúng tôi đã sử dụng trong các ví dụ trên].
p {
color: white;
background-color: #FF5C35;
padding: 10px;
}
Bây giờ, hãy để Lôi nhìn vào một ví dụ về một tuyên bố cá nhân trong quy tắc đó đã được nhận xét.
Xem Bút CSS Nhận xét: Nhận xét 1 bởi HubSpot [@HubSpot] trên Codepen.
Màu tuyên bố: Trắng không còn áp dụng vì nó đã được bình luận.color: white no longer applies because it has been commented out.
Bây giờ, hãy để Lôi nhìn vào một ví dụ khác trong đó toàn bộ bộ quy tắc được nhận xét:
Xem Bút CSS Nhận xét: Nhận xét 2 bởi HubSpot [@HubSpot] trên Codepen.
Như bạn có thể thấy, không có kiểu dáng nào được áp dụng cho phần tử đoạn văn.
Nhận xét dòng đơn CSS
Về mặt kỹ thuật, có một cách khác để nhận xét các dòng duy nhất trong CSS trong một số trình duyệt, bằng cách đặt một cú đúp về phía trước [//] trước mã bạn muốn nhận xét thay vì sử dụng tiêu chuẩn/ * ... * * / phương pháp./* ... */ method.
/* This line is commented out. */
// This line is commented out, but you shouldn't use this method!
Tuy nhiên, nó rất khuyến khích bạn tránh phương thức này trong mã của mình. Phương pháp bình luận trượt đôi không được tiêu chuẩn hóa trong CSS [trong khi / * ... ... * / phương thức là], có nghĩa là nó không được đảm bảo hoạt động trên tất cả các trình duyệt./* ... */ method is], meaning that it’s not guaranteed to work on all browsers.
Vâng, nó có thể hoạt động trên một số trình duyệt hiện đại. Nhưng, các trình duyệt này có thể làm nóng tính năng này bất cứ lúc nào, có nghĩa là bình luận của bạn sẽ không còn là nhận xét, CSS của bạn sẽ bị hỏng và khách truy cập của bạn sẽ bị nhầm lẫn.
Để an toàn, hãy gắn bó với phương pháp / * ... * / / nhận xét mà chúng tôi đã thảo luận vì nó chắc chắn là tiêu chuẩn, hoạt động trên các trình duyệt và hệ điều hành, và won sẽ sớm bị phản đối./* ... */ commenting method that we’ve been discussing since it’s firmly the standard, works across browsers and operating systems, and won’t be deprecated any time soon.
Bạn cũng có thể nhận thấy rằng các bình luận CSS hoạt động tương tự như các bình luận của HTML. Sự khác biệt giữa chúng là các bình luận CSS được chỉ định với các ký hiệu / * ... * * /, trong khi các bình luận HTML được đặt trong các thẻ./* ... */, whereas HTML comments are enclosed in tags.
Sự khác biệt được hiển thị trong ví dụ dưới đây:
Xem Bút CSS Nhận xét so với Nhận xét HTML của HubSpot [@HubSpot] trên CodePen.
Đưa ra nhận xét trong CSS
Nếu bạn muốn thêm các ghi chú giải thích hoặc ngăn trình duyệt hiển thị các phần cụ thể trong bảng kiểu của bạn, thì bạn có thể sử dụng nhận xét. Nhận xét sẽ không ảnh hưởng đến việc giải thích các phần khác trong bảng kiểu của bạn hoặc bố cục trang web của bạn ở mặt trước. Họ cũng dễ dàng tạo ra, ngay cả khi bạn chỉ bắt đầu học HTML và CSS.
Lưu ý của biên tập viên: Bài đăng này ban đầu được xuất bản vào tháng 7 năm 2020 và đã được cập nhật về tính toàn diện.