HTML/CSS | Thuộc tính CSS thông dụng #1

Học HTML, CSS từ Zero Tới Hero

• Cú pháp sử dụng CSS
• Cú pháp comment
• Lưu ý khi trình bày code CSS
• Làm quen với thuộc tính color

Cú pháp sử dụng CSS

Cú pháp comment

Comment trong CSS được sử dụng để ghi chú, giúp giải thích một đoạn code hoặc để tạm thời vô hiệu hóa code mà không ảnh hưởng tới hiển thị của trang web.

Ví dụ:

/* Màu nền cho phần tử body */
body {
  background-color: #f3f3f3;
}

Cú pháp comment trong CSS luôn bắt đầu bằng /* và kết thúc bằng */.

Phím tắt để comment/bỏ comment:

• Windows/Linux: Ctrl + /
• Mac: Cmd + /

Để comment, bôi đen đoạn code cần comment, sử dụng phím tắt Ctrl + / hoặc Cmd + \, chuỗi /* */ sẽ tự động được chèn quanh đoạn code được chọn.

Lưu ý khi trình bày code CSS

Quan sát cách trình bày của đoạn code sau:

button {
  background-color: #4CAF50;
  border: none;
  color: white;
} 

a {
  color: #0056b3;
  text-decoration: none
}

Quan sát thấy, code được bao bọc trong cặp ngoặc nhọn {}. Sau selector sử dụng một dấu space, sau đó mới tới dấu ngoặc nhọn mở {. Luôn kết thúc block code bằng dấu ngoặc nhọn đóng }.

Mỗi cặp thuộc tính và giá trị nằm trên một hàng mới. Sau tên thuộc tính sử dụng dấu hai chấm :. Sau dấu hai chấm : sử dụng một dấu cách rồi mới tới giá trị thuộc tính. Sau giá trị luôn có dấu ;. Ở dòng cuối cùng của block code, dấu ; không bắt buộc phải có.

Có thể bạn sẽ thắc mắc, việc dùng dấu ; ở cuối cùng có ảnh hưởng gì không? Câu trả lời là “Có”. Mỗi ký tự sẽ luôn chiếm một byte nhất định. Với các dự án lớn, nếu bạn bớt đi tất cả các dấu ; ở cuối thì nó sẽ giảm một chút dung lượng, giúp tiết kiệm băng thông và trang web được tải nhanh hơn.

Tuy nhiên, bạn nên ưu tiên việc trình bày code, sử dụng khoảng trắng, ; hay xuống dòng hợp lý để đảm bảo code được trình bày rõ ràng, mạch lạc, dễ đọc nhất. Ngày nay, khi triển khai dự án lên trang web, các công cụ hiện đại đã tự loại bỏ các ký tự không cần thiết đi (dấu cách, comment, dấu ; ở cuối, khoảng trắng, v.v) nên bạn cứ ưu tiên việc sử dụng ký tự cần thiết để đảm bảo code được rõ ràng nhất.

Trong trường hợp có nhiều selectors, mỗi selector cách nhau một dòng trống.

Các thuộc tính và giá trị không phân biệt viết hoa, thường. Tuy nhiên, nên chọn cách viết thường để đảm bảo tính nhất quán.

Tips: Luôn giữ khoảng cách sau dấu hai chấm và trước dấu chấm phẩy.

Làm quen với thuộc tính color

Thuộc tính color trong CSS được sử dụng để thiết lập màu chữ cho văn bản.

Ví dụ:

<h1 style="color:Tomato;">Hello World</h1>

Giá trị màu sắc của thuộc tính color có nhiều kiểu khác nhau, chi tiết hơn bạn sẽ được học ở các chương sau.

Tóm tắt

• Comment trong CSS dùng để ghi chú hoặc tạm thời vô hiệu hóa code. Bắt đầu bằng /* và kết thúc bằng */.
• Phím tắt Ctrl + / cho Windows hoặc Cmd + / cho Mac để comment/bỏ comment là
• Lưu ý khi trình bày code CSS:
  • Sau selector là một khoảng trắng, sau đó mới là {. Mỗi thuộc tính và giá trị nằm trên một hàng mới, sau : và trước ; có khoảng trắng.
  • Không bắt buộc phải có dấu ; ở cuối nhưng nên dùng để rõ ràng. Các công cụ hiện đại có thể loại bỏ các ký tự không cần thiết khi triển khai dự án.
• Thuộc tính color trong CSS dùng để thiết lập màu sắc cho chữ. Có nhiều kiểu giá trị màu khác nhau sẽ được học sau.