Bắt đầu với CSS

Bắt đầu với CSS
Bắt đầu với CSS

Sau khi đã làm quen với HTML, hôm nay chúng ta sẽ bắt đầu làm việc với CSS. Trong bài hôm nay, chúng ta sẽ tìm hiểu cách nhúng CSS vào tài liệu HTML.

Inline CSS

Inline CSS là phương pháp sử dụng thuộc tính style (style là một global attribute, nên tất cả các tags của HTML đều có thuộc tính này). Thông qua thuộc tính style, chúng ta sẽ sử dụng mã CSS để định dạng style cho thuộc tính này.

Các bạn có thể xem kết quả tại đây.

Ưu điểm của inline CSS

  • Độ ưu tiên thực thi cao
  • Giảm được số lượng request đến server
  • Phù hợp cho việc thử nghiệm các thuộc tính CSS

Nhược điểm của inline CSS

  • Khó quản lý: Khi tài liệu HTML trở nên lớn, kèm theo mỗi phần tử có thêm 1 thuộc tính CSS, mã nguồn của chúng ta sẽ rất kinh khủng khi bị trộn giữa: nội dung, HTML và CSS
  • Khó nâng cấp: Rõ ràng, khi chúng ta muốn thay đổi 1 thuộc tính nào đó, sẽ rất khó khăn trong việc tìm kiếm và chỉnh sửa
  • Không thể tái sử dụng: do mỗi đoạn mã chỉ sử dụng cho 1 phần tử. Vậy khi chúng ta muốn một số phần tử có các thuộc tính giống nhau. Có lẽ việc duy nhất chúng ta có thể làm là copy/paste

Internal CSS

Internal CSS là phương pháp sử dụng tag style đặt trong phần tử head. Tag style sẽ giúp chúng ta tạo ra một khu vực khai báo các rules CSS. Các rules này sẽ được áp dụng lên toàn bộ các phần tử trong tài liệu HTML hiện tại.

Các bạn có thể xem kết quả tại đây.

Ưu điểm của internal CSS

  • Tối ưu được tốc độ tải và render cho trang web
  • Có thể tái sử dụng các CSS cho các phần tử trong cùng một tài liệu HTML.

Nhược điểm của internal CSS

  • Khó quản lý: mặc dù đã được tách riêng ra một khu vực. Tuy nhiên, với internal CSS, tài liệu HTML của chúng ta cũng có hiện tượng phình to. Dẫn đến việc khó quản lý
  • Không thể tái sử dụng: Mặc dù, internal đã làm tốt hơn so với inline CSS. Tuy nhiên, có những phần tử CSS giữa các tài liệu HTML trong cùng 1 dự án chúng ta kì vọng chúng có cùng style (ví dụ các tiêu đề). Internal CSS vẫn chưa đáp ứng được vấn đề này

External CSS

External CSS là phương pháp khai báo các rules CSS tại một file CSS độc lập với tài liệu HTML. Sau đó, chúng ta sẽ sử dụng tag link để nhúng file CSS này vào tài liệu HTML. Thông qua đó, các phần tử HTML trong tài liệu sẽ bị áp đặt các rules CSS trong file CSS được nhúng vào.

Lúc này file HTML của chúng ta chỉ còn toàn bộ mã HTML. Tag link là một empty tag, có 3 thuộc tính là rel, type và href. Trong đó, href là đường dẫn đến file CSS có thể là một đường dẫn tương đối, đường dẫn tuyệt đối hoặc 1 URL.

Nội dung file external-css.css

Các bạn có thể xem kết quả tại đây.

Ưu điểm của external CSS

  • Dễ quản lý
  • Dễ dàng cập nhật
  • Có thể tái sử dụng

Nhược điểm của external CSS

  • Tăng số lượng request đến máy chủ
  • Làm giảm tốc độ render cho trang web