Ví dụ về bình luận CSS - Cách bình luận về CSS

Chú thích được sử dụng trong CSS để giải thích một khối mã hoặc để thực hiện các thay đổi tạm thời trong quá trình phát triển. Mã nhận xét không thực thi.

Cả nhận xét đơn và nhiều dòng trong CSS đều bắt đầu bằng /*và kết thúc bằng */, và bạn có thể thêm bao nhiêu nhận xét vào biểu định kiểu của mình tùy thích. Ví dụ:

/* This is a single line comment*/ .group:after { content: ""; display: table; clear: both; } /* This is a multi-line comment */

Bạn cũng có thể làm cho nhận xét của mình dễ đọc hơn bằng cách cách điệu chúng:

/* *** * SECTION FOR H2 STYLE *** * A paragraph with information * that would be useful for someone * who didn't write the code. * The asterisks around the paragraph * help make it more readable. *** */

Sắp xếp CSS với nhận xét

Trong các dự án lớn hơn, các tệp CSS có thể nhanh chóng tăng kích thước và khó bảo trì. Có thể hữu ích nếu tổ chức CSS của bạn thành các phần riêng biệt với mục lục để giúp bạn dễ dàng tìm thấy các quy tắc nhất định trong tương lai:

/* * CSS TABLE OF CONTENTS * * 1.0 - Reset * 2.0 - Fonts * 3.0 - Globals * 4.0 - Color Palette * 5.0 - Header * 6.0 - Body * 6.1 - Sliders * 6.2 - Imagery * 7.0 - Footer */ /*** 1.0 - Reset ***/ /*** 2.0 - Fonts ***/ /*** 3.0 - Globals ***/ /*** 4.0 - Color Palette ***/ /*** 5.0 - Header ***/ /*** 6.0 - Body ***/ h2 { font-size: 1.2em; font-family: "Ubuntu", serif; text-transform: uppercase; } /*** 5.1 - Sliders ***/ /*** 5.2 - Imagery ***/ /*** 7.0 - Footer ***/

Thêm một chút về CSS: CSS Syntax và Bộ chọn

Khi chúng ta nói về cú pháp của CSS, chúng ta đang nói về cách mọi thứ được sắp xếp. Có những quy tắc về những gì diễn ra ở đâu, cả hai để bạn có thể viết CSS một cách nhất quán và một chương trình (như trình duyệt) có thể giải thích nó và áp dụng nó vào trang một cách chính xác.

Có hai cách chính để viết CSS.

CSS nội tuyến

Thông tin cụ thể về Đặc điểm CSS: Thủ thuật CSS

CSS nội tuyến áp dụng kiểu cho một phần tử duy nhất và phần tử con của nó, cho đến khi gặp một kiểu khác ghi đè phần tử đầu tiên.

Để áp dụng CSS nội tuyến, hãy thêm thuộc tính “style” vào phần tử HTML mà bạn muốn sửa đổi. Bên trong dấu ngoặc kép, bao gồm danh sách các cặp khóa / giá trị được phân tách bằng dấu chấm phẩy (mỗi cặp lần lượt được phân tách bằng dấu hai chấm) cho biết các kiểu cần đặt.

Đây là một ví dụ về CSS nội tuyến. Từ “Một” và “Hai” sẽ có màu nền là màu vàng và màu chữ là màu đỏ. Từ “Three” có kiểu mới ghi đè từ đầu tiên và sẽ có màu nền là xanh lục và màu chữ là lục lam. Trong ví dụ, chúng tôi đang áp dụng kiểu cho các thẻ, nhưng bạn có thể áp dụng một kiểu cho bất kỳ phần tử HTML nào.

 One Two Three 

CSS nội bộ

Mặc dù viết một kiểu nội dòng là một cách nhanh chóng để thay đổi một phần tử, nhưng có một cách hiệu quả hơn để áp dụng cùng một kiểu cho nhiều phần tử của trang cùng một lúc.

CSS nội bộ có các kiểu được chỉ định trong thẻ và nó được nhúng trong thẻ.

Đây là một ví dụ có tác dụng tương tự như ví dụ “nội tuyến” ở trên, ngoại trừ CSS đã được trích xuất vào vùng riêng của nó. Các từ “Một” và “Hai” sẽ khớp với divbộ chọn và là văn bản màu đỏ trên nền màu vàng. Các từ “Ba” và “Bốn” cũng sẽ khớp với divbộ chọn, nhưng chúng cũng khớp với .nested_divbộ chọn áp dụng cho bất kỳ phần tử HTML nào tham chiếu đến lớp đó. Bộ chọn cụ thể hơn này sẽ ghi đè bộ chọn đầu tiên và chúng sẽ xuất hiện dưới dạng văn bản màu lục lam trên nền xanh lục.

 div { color: red; background: yellow; } .nested_div { color: cyan; background: green; } One Two Three Four 

Các bộ chọn hiển thị ở trên cực kỳ đơn giản, nhưng chúng có thể khá phức tạp. Ví dụ, có thể chỉ áp dụng kiểu cho các phần tử lồng nhau; nghĩa là, một phần tử là con của một phần tử khác.

Đây là một ví dụ mà chúng tôi chỉ định một kiểu chỉ nên áp dụng cho divcác phần tử là con trực tiếp của các divphần tử khác . Kết quả là “Hai” và “Ba” sẽ xuất hiện dưới dạng văn bản màu đỏ trên nền vàng, nhưng “Một” và “Bốn” sẽ không bị ảnh hưởng (và rất có thể là văn bản màu đen trên nền trắng).

 div > div { color: red; background: yellow; } One Two Three Four 

CSS bên ngoài

Tất cả các kiểu đều có tài liệu riêng được liên kết trong thẻ. Phần mở rộng của tệp được liên kết là.css