HTML/CSS | Cách sử dụng CSS #2

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

• External CSS
• Ưu điểm
• Nhược điểm
• Internal CSS
• Ưu điểm
• Nhược điểm
• Inline CSS
• Ưu điểm
• Nhược điểm
• Trường hợp sử dụng

Trong bài học này chúng ta sẽ tìm hiểu về ưu và nhược điểm của các cách sử dụng CSS.

External CSS

Cách sử dụng:

Tạo file riêng có phần mở rộng là .css và sử dụng thẻ <link rel="stylesheet" href="/path-to-file.css"> để liên kết file CSS vào trong file HTML.

Phạm vi ảnh hưởng:

Trên nhiều trang HTML, bất cứ trang nào có đặt link tới file CSS.

Ưu điểm

• Bóc tách rõ ràng code HTML và CSS
• Tái sử dụng được ở nhiều trang
• Thuận tiện cho việc tổ chức, quản lý file CSS
• Trình duyệt có thể cache, tăng tốc độ truy cập trang những lần sau và tiết kiệm băng thông

Nhược điểm

• Tăng số lượng kết nối mạng để tải file CSS, trang web có thể tải chậm hơn khi có nhiều kết nối mạng (HTTP/1.1)

Internal CSS

Cách sử dụng:

Sử dụng thẻ <style> đặt trong nội dung file HTML.

Phạm vi ảnh hưởng:

Trong một file HTML, đặt thẻ <style> trong file HTML nào thì chỉ file đó bị ảnh hưởng.

Ưu điểm

• CSS chỉ có tác dụng trong một trang
• Giảm số lượng kết nối mạng vì không phải tải file bên ngoài. Trang web có thể tải nhanh hơn vì không phải khởi tạo thêm kết nối (HTTP/1.1)

Nhược điểm

• Không tái sử dụng được ở nhiều trang
• Không bóc tách rõ ràng vì viết code CSS trong file HTML

Inline CSS

Cách sử dụng:

Sử dụng thuộc tính style trong các thẻ HTML.

Phạm vi ảnh hưởng:

Trên một phần tử HTML, ảnh hưởng duy nhất lên phần tử có Inline CSS.

Ưu điểm

• Dùng để test nhanh hoặc làm ví dụ

Nhược điểm

• Không tái sử dụng được (trên nhiều trang và trong một trang)
• Khó khăn khi ghi đè CSS vì Inline CSS có độ ưu tiên cao
• Code CSS và HTML xen lẫn vào nhau, không bóc tách rõ ràng
• Code khó đọc, gây khó khăn cho việc bảo trì, nâng cấp

Trường hợp sử dụng

• Trong dự án thực tế, phần lớn thời gian External CSS được sử dụng vì ưu điểm dùng được trên nhiều trang và tính bóc tách code CSS riêng ra ngoài, không phải viết CSS đan xen vào HTML.
• Nếu code CSS của bạn dùng duy nhất trong một trang thì bạn có thể sử dụng Internal CSS.
• Không nên sử dụng Inline CSS vì các nhược điểm như không tái sử dụng được, code CSS đan xen trong HTML, khó khăn khi ghi đè CSS vì độ ưu tiên cao, code khó đọc, v.v.

Tóm tắt

• External CSS: Sử dụng file riêng .css liên kết qua thẻ <link>, áp dụng cho nhiều trang.
  • Ưu điểm: Bóc tách rõ ràng, tái sử dụng, dễ quản lý, trình duyệt cache được.
  • Nhược điểm: Tăng số lượng kết nối mạng, có thể chậm hơn do tải file CSS.
• Internal CSS: Sử dụng thẻ <style> trong file HTML, chỉ áp dụng cho file đó.
  • Ưu điểm: Giảm số lượng kết nối mạng, tải trang nhanh hơn.
  • Nhược điểm: Không tái sử dụng được ở nhiều trang, code CSS không được bóc tách rõ ràng.
• Inline CSS: Sử dụng thuộc tính style trực tiếp trên các thẻ HTML.
  • Ưu điểm: Dùng để test nhanh hoặc làm ví dụ.
  • Nhược điểm: Không tái sử dụng được, khó ghi đè CSS, code xen lẫn, khó đọc và bảo trì.
• Trường hợp sử dụng:
  • External CSS thường được sử dụng nhiều nhất vì lợi ích tái sử dụng và bóc tách code.
  • Internal CSS phù hợp khi CSS chỉ cần áp dụng cho một trang.
  • Inline CSS không nên sử dụng do nhược điểm về tái sử dụng và quản lý code.