Một khía cạnh thú vị của Cascading Style Sheets (CSS) là rằng trật tự trong đó các quy tắc được phát
biểu quyết định cái nào được ưu tiên trong trường hợp xung đột hay lặp lại. Nói cách khác, các quy tắc
CSS có thể “rót xuống” (cascade) trong trật tự ưu tiên của chúng.
Nơi nào các quy tắc nằm là một nhân tố trong trật tự ưu tiên. Trật tự vị trí ưu tiên (từ thấp đến cao)
là: các quy tắc mặc định của trình duyệt (browser default rules), các quy tắc external style sheet, embedded
styles và các quy tắc inline style.
Các quy tắc cụ thể hơn (specific rules) chiếm ưu tiên hơn so với các quy tắc chung hơn. Cũng như vậy, các
quy tắc ở cuối style sheet ưu tiên hơn các cái ở phía trước.
Câu hỏi bạn có bao gồm:
+ Rót xuống là gì từ vị trí của các quy tắc?
+ Các quy tắc nào là cụ thể hơn?
+ Trật tự các quy tắc ảnh hưởng như thế nào đến sự ưu tiên?
Phần sau sẽ trả lời những câu hỏi này.
Trật tự ưu tiên theo vị trí của các quy tắc
Các quy tắc CSS có thể xuất phát từ một vài vị trí cái bao gồm style sheet mặc định của trình duyệt, external
style sheets, embedded styles, và các quy tắc inline style.
Một quy tắc càng gần nội dung được style, ưu tiên của nó càng cao hơn. Sự rót xuống của các quy tắc bắt đầu
từ cái xa nhất đi đến cái gần nhất đối với nội dung.
Style sheet trình duyệt có ưu tiên thấp nhất:
Tất cả các trình duyệt có một style sheet mặc định tích hợp sẵn. Các styles trình duyệt có thể hơi khác nhau
đối với các loại trình duyệt, nhưng nhìn chung chúng giống nhau từ đề mục (h1 đến h6) và đoạn văn (<p>)
được cung cấp top và bottom margin, lists (<ol> và <ul>) được cung cấp left padding, màu link, khoảng cách
giữa các dòng và kích cỡ font mặc định… Sự rót xuống sẽ bắt đầu từ các styles này. Nếu tác giả (author)
trang web không có styles nào được định nghĩa, các styles trình duyệt sẽ được sử dụng.
External style sheets có ưu tiên tiếp theo:
Các styles mặc định của trình duyệt bị ghi đè bởi các quy tắc của external style sheets. Nếu có một
vài external style sheets, chúng áp dụng trong trật tự link.
Tiếp theo là embedded style:
Các styles nhúng trong header của trang là cái tiếp theo trong trật tự ưu tiên.
Inline styles có ưu tiên cao nhất:
Cuối cùng, vì inline styles là gần nội dung nhất, chúng chiếm ưu tiên cao nhất.
Tính cụ thể (specificity) và tính kế thừa (inheritance) trong quy tắc CSS
Đặc tính CSS có thể được kế thừa từ một phần tử cha. Nguyên tắc này được gọi là kế thừa (inheritance). Ví dụ
các đề mục và đoạn văn kế thừa các quy tắc font và color từ thẻ chọn body. Chính vì vậy, một thẻ chọn có thể
có nhiều hơn một quy tắc CSS theo kiểu rót xuống. Trong trường hợp như vậy tính cụ thể
(specificity) quyết định quy tắc CSS nào được áp dụng.
Một thẻ chọn càng cụ thể, các quy tắc của nó càng có ưu tiên cao hơn.
Ví dụ, nếu giá trị của đặc tính background-color cho thẻ chọn body là green nhưng cái cho thẻ chon p là blue,
các phần tử p sẽ có một nền blue vì thẻ chọn p cụ thể hơn thẻ chọn body.
Quy tắc trên một tag là ít cụ thể nhất. Một quy tắc class là cụ thể hơn và ghi đè quy tắc tag. Vì một
quy tắc ID chỉ có thể được sử dụng một lần trong một trang web, nó là cụ thể nhất, ghi đè lên hai cái
kia.
Ví dụ, nếu style sheet định nghĩa <h1> như là căn giữa thì <h1 class=”left”> được ưu tiên hơn và <h1 id=
right”> được ưu tiên nhất đối với cả hai quy tắc.
Các quy tắc định nghĩa sau được ưu tiên hơn
Cuối cùng, xắp sếp các quy tắc theo trật tự chúng được định nghĩa. Các quy tắc cái được định nghĩa sau trong
cây tài liệu có ưu tiên cao hơn những cái được định nghĩa trước.
Các quy tắc từ một style sheet nhập khẩu được coi là trước các quy tắc trực tiếp trong style sheet.