Home » CSS » [CSS Tutorial] Bài 3: Vị trí đặt CSS và độ ưu tiên trong CSS

[CSS Tutorial] Bài 3: Vị trí đặt CSS và độ ưu tiên trong CSS

This entry is part 3 of 9 in the series CSS

Chúng ta có ba vị trí đặt CSS vào trong một tài liệu HTML.

Inline Styles (cùng dòng):

Đây là một phương pháp nguyên thủy nhất để nhúng CSS vào một tài liệu HTML bằng cách nhúng vào từng thẻ HTML muốn áp dụng. Và dĩ nhiên trong trường hợp này chúng ta sẽ không cần selector trong cú pháp.

Lưu ý: Nếu bạn muốn áp dụng nhiều thuộc tính cho nhiều thẻ HTML khác nhau thì không nên dùng cách này.

Ví dụ: Tạo tiêu đề có chữ màu xanhcanh trái.

Kết quả thu được:

Bai-3-Vi-Tri-Dat-CSS-Anh-01

 

Internal Style Sheet (Trong file HTML):

Thật ra nếu nhìn kỹ chúng ta cũng nhận ra đây chỉ là một phương cách thay thế cách thứ nhất bằng cách rút tất cả các thuộc tính CSS vào trong thẻ <style></style> .

Lưu ý: cập thẻ <style></style> nên đặt bên trong phần <head>

Ví dụ: Tạo trang web tương tự như ví dụ trên.

External Style Sheet (Bên ngoài trang HTML):

Tương tự như cách 2 nhưng thay vì đặt tất cả các mã CSS trong thẻ style chúng ta sẽ đưa chúng vào trong một file CSS (có phần mở rộng .css) bên ngoài và liên kết nó vào trang web bằng thuộc tính href và mối quan hệ rel=”stylesheet” trong thẻ link.
Đây là cách làm được khuyến cáo, nó đặc biệt hữu ích cho việc đồng bộ hay bảo trì một website lớn sử dụng cùng một kiểu mẫu.

Đầu tiên chúng ta sẽ tạo ra một file hello.html có nội dung như sau:

Tiếp theo, tao một file style.css nằm cùng thư mục với file hello.html có nôi dụng như sau:

Độ ưu tiên:

Ta có nhiều cách đặt CSS vào một trang HTML, vậy điều gì xảy ra khi cùng một đối tượng nhưng được định dạng khác nhau theo 3 kiểu trên? Lúc bấy giờ, ta cần quan tâm đến thự tự ưu tiên trong CSS.

Trước khi thực thi CSS cho một trang web. Trình duyệt sẽ đọc toàn bộ CSS mà trang web có thể được áp dụng, bao gồm:

  • CSS mặc định của trình duyệt.
  • File CSS bên ngoài liên kết vào trang web. (External Style Sheet)
  • CSS nhúng trong thẻ <style>. (Internal Style Sheet)
  • CSS nội tuyến. (Inline Styles)

Sau đó, trình duyệt sẽ tổng hợp toàn bộ CSS này vào một CSS ảo, và nếu có các thuộc tính CSS giống nhau thì thuộc tính CSS nào nằm sau sẽ được ưu tiên sử dụng.

Theo nguyên tắc trên, trình duyệt của bạn sẽ ưu tiên cho các CSS nội tuyến > CSS bên trong > CSS bên ngoài > CSS mặc định của trình duyệt.

Series Navigation<< [CSS Tutorial] Bài 2: Cú pháp CSS và comment trong CSS[CSS Tutorial] Bài 4: Background >>
Share
Share
Free WordPress Themes - Download High-quality Templates