CSS là gì?

CSS (Cascading Style Sheets) hay còn gọi là Bảng định kiểu tầng, là một ngôn ngữ đánh dấu dùng để mô tả giao diện và bố cục của các trang web. CSS giúp định dạng các thành phần HTML như văn bản, hình ảnh, bố cục và các yếu tố trực quan khác, giúp trang web trở nên hấp dẫn và chuyên nghiệp hơn.

CSS cho phép tách biệt cấu trúc (HTML) và giao diện (CSS), giúp mã nguồn dễ bảo trì và phát triển. HTML tập trung vào nội dung, trong khi CSS xử lý mọi khía cạnh về giao diện.

Cú pháp CSS

Quy tắc CSS bao gồm hai phần chính: bộ chọn (selector) và các khai báo (declaration).

• Bộ chọn xác định phần tử HTML cần định dạng
• Khai báo chứa các thuộc tính và giá trị tương ứng
• Cú pháp: selector { property: value; }

Ví dụ:

h1 {
  color: #333;
  font-size: 24px;
  text-align: center;
}

Hướng dẫn Phong cách Viết mã CSS

Việc tuân thủ các quy tắc về phong cách viết mã giúp mã nguồn dễ đọc, dễ bảo trì và đồng bộ.

1. Định dạng Mã nguồn

Có hai cách định dạng:

• Định dạng gọn gàng:

h2 {color: navy;font-size: 18px;}

• Định dạng mở rộng (khuyến nghị):

h2 {
  color: navy;
  font-size: 18px;
}

2. Quy tắc Viết hoa

Khuyến nghị sử dụng chữ thường cho bộ chọn, tên thuộc tính và giá trị từ khóa, trừ các trường hợp đặc biệt.

3. Quy tắc Khoảng trắng

• Thêm khoảng trắng sau dấu hai chấm (:) giữa thuộc tính và giá trị
• Thêm khoảng trắng giữa bộ chọn và dấu ngoặc nhọn ({)

Thứ tự Viết thuộc tính

Để dễ quản lý, nên tuân theo thứ tự sau:

1. Thuộc tính bố cục: display, position, float, clear, visibility, overflow
2. Thuộc tính kích thước: width, height, margin, padding, border, background
3. Thuộc tính văn bản: color, font, text-decoration, text-align, vertical-align
4. Các thuộc tính khác (CSS3): content, cursor, border-radius, box-shadow, text-shadow

Ví dụ:

.product-card {
  display: inline-block;
  position: relative;
  width: 200px;
  height: 150px;
  margin: 10px;
  padding: 15px;
  font-family: 'Arial', sans-serif;
  color: #444;
  background: #f5f5f5;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}