Css-vấn đề chồng chéo và thứ tự ưu tiên [Css]

Sự chồng chéo xảy ra khi một đối tượng chịu tác động bởi nhiều rule khác nhau. Khi sự chồng chéo xảy ra thì thứ tự ưu tiên sẽ quyết định định dạng của đối tượng.

I. NHẮC LẠI CSS:

Có 3 cách đưa CSS vào cho các đối tượng trong trang HTML:

1. Inline:
Định dạng CSS được đưa trực tiếp vào bên trong mỗi đối tượng thông qua thuộc tính style.

2. Internal:
Định dạng CSS đặt trong thẻ <style></style> và nằm bên trong trang HTML. Các định dạng CSS này sẽ được đưa vào các đối tượng thông qua 3 dạng rule:

a. Rule dạng TAG: Được định nghĩa bằng tag {…}, tác động lên tất cả các đối tượng tag đó.

b. Rule dạng CLASS: Định nghĩa dạng .tên lớp {…}, tác động lên các đối tượng có thuộc tính class=”tên lớp”

c. Rule dạng ID: Định nghĩa bằng #định danh {…}  và tác động lên các đối tượng có thuộc tính id=”định danh” (Trong 1 trang .html thuộc tính id nên đặt là duy nhất)

3. External:
Cũng có 3 dạng (tag, class, id) như Internal nhưng các rule không được đặt trong một trang .html (Chỉ dùng cho duy nhất trang .html này) mà được đặt trong file .css riêng và liên kết đến một hoặc nhiều trang .html

Tóm lại: Có thể xem như có 4 dạng rule: inline, tag, class, id. Với phạm vi tác động từ cao đến thấp như sau: tag, class, id, inline.

II. CHỒNG CHÉO CSS VÀ THỨ TỰ ƯU TIÊN. 

- Sự chồng chéo xảy ra khi một đối tượng chịu tác động bởi nhiều rule khác nhau.
- Khi sự chồng chéo xảy ra thì thứ tự ưu tiên sẽ quyết định định dạng của đối tượng.

1. Dạng chồng chéo 1: Chồng chéo giữa các rule khác dạng.
Thứ tự ưu tiên của 4 dạng rule như sau:

Các dạng rule	Thứ tự ưu tiên	Phạm vi tác động
inline	1	4
id	2	3
class	3	2
tag	4	1

Nhận xét: Thứ tự ưu tiên tỉ lệ nghịch với phạm vi tác động. Dạng rule có phạm vi tác động càng cao thì ưu tiên càng thấp, ngược lại dạng rule có phạm vi tác động càng thấp thì ưu tiên càng cao.
Liên tưởng đến câu thành ngữ “Phép vua thua lệ làng”.

Ví dụ 1.1:
Đối tượng đoạn văn “Hello world” chịu tác động bởi 4 rule thuộc 4 dạng khác nhau (inline, tag p, class .p1, id #p2). 4 rule này quy định 4 màu chữ (color) khác nhau.

Kết quả: Theo bảng thứ tự ưu tiên thì màu của chữ “Hello world” sẽ theo màu quy định của rule dạng inline (màu black)

Ví dụ 1.2
Bây giờ nếu ta bỏ đi style=”color:black” (rule dạng inline)

Kết quả chữ “Hello world” sẽ có màu theo quy định của rule dạng id #p2 (màu blue)

Ví dụ 1.3
Nếu ta tiếp tục bỏ đi thuộc tính id (rule dạng id)

Kết quả chữ “Hello world” sẽ có màu theo quy định của rule dạng class .p1 (màu green)


Ví dụ 1.4:
Ta có thể sử dụng !important để tăng mức độ ưu tiên.

->Với việc thêm !important vào sau giá trị màu red thì rule dạng tag (ưu tiên thấp nhất) đã có mức ưu tiên cao hơn cả rule dạng inline (ưu tiên cao nhất).

Ví dụ 1.5

Nhưng nếu các dạng rule đều có !important thì thứ tự ưu tiên lại theo bảng ưu tiên ở trên (inline > id > class > tag)

2. Dạng chồng chéo 2: Chồng chéo do nhiều rule cùng một dạng.
Nhận xét: Khi có sự chồng chéo của các rule cùng dạng thì thứ tự ưu tiên tính theo vị trí rule nằm trước hay sau.

Ví dụ 2.1


Trong khai báo trên thì cả 2 rule đều là dạng class và cùng tên p1. 2 rule này có thuộc tính color  chồng chéo nhau.
Vì trình duyệt xử lý mã (html,css,javascript) theo thứ tự từ trái qua phải, từ trên xuống dưới nên trong trường hợp này rule nào nằm sau sẽ ưu tiên hơn rule nằm trước. Do đó, màu sẽ là blue

Ví dụ 2.2

Trong ví dụ trên thì đối tượng đều chịu tác động bởi 2 rule dạng class .p1 và .p2. Vì .p2 nằm sau .p1 nên màu sẽ theo rule .p2

Ví dụ 2.3

Rule trong file mystyle.css là .p1 { color: red } và .p2 nằm sau .p1
Không quan trọng .p2 nằm sau .p1. Do trong head link đến file css nằm dưới .p2 nên màu chữ sẽ là red.
Ví dụ 2.4

Tác dụng của việc thêm !important

Nguồn: http://www.masterit.vn