Gắn CSS vào tài liệu HTML
Gắn CSS vào tài liệu HTML chính là việc bổ sung đoạn mã định dạng cho tài liệu HTML, để khi biên dịch, trình duyệt sẽ dùng thông tin này để định dạng nội dung hiển thị.
Ở bài thực hành Lab2.1.a đã thực hiện việc gắn CSS vào tài liệu HTML bằng cách đặt mã CSS trong phần tử style. Đây chính là một trong ba cách có thể sử dụng để gắn CSS vào một tài liệu HTML.
Ba cách để gắn CSS vào tài liệu HTML gồm: gắn bằng thuộc tính style, gắn bằng phần tử style và gắn bằng phần tử link; tương ứng với ba vị trí đặt mã CSS, đặt ở trong phần tử HTML, đặt trong tài liệu HTML và đặt ngoài tài liệu HTML.
Đặt mã CSS ở ngoài tài liệu HTML
Đặt mã CSS ở ngoài tài liệu HTML (external style sheets) là phương pháp được sử dụng nhiều nhất và có nhiều ưu điểm. Mã CSS bao gồm các luật sẽ được chứa trong một tập tin có phần mở rộng là .css, tập tin này được liên kết tới một hoặc nhiều tài liệu HTML bằng phần tử link. Bằng cách này, với một tập tin CSS có thể áp dụng cho nhiều tài liệu HTML khác nhau.
Ví dụ,
<link rel="stylesheet" href="main.css">
Đặt mã CSS ở trong tài liệu HTML
Đặt mã CSS ở trong tài liệu HTML (embedded style sheets) là phương pháp viết mã CSS ngay trong tài liệu HTML, mã CSS phải được đặt trong phần tử style, phần tử style phải được đặt trong phần tử head. Bằng cách này, mã CSS chỉ áp dụng được cho chính tài liệu HTML chứa nó.
Ví dụ,
<style>
/* type the styles below this line */
h1 {
color: red;
border-bottom: 1px solid red;
}
h2 {
color: red;
margin-left: 100px;
}
</style>
Đặt mã CSS ở trong phần tử HTML
Đặt mã CSS ở trong phần tử HTML (inline style) là phương pháp viết mã CSS ngay trong phần tử HTML, mã CSS chính là giá trị của thuộc tính style. Bằng cách này, mã CSS chỉ áp dụng được cho chính phần tử HTML chứa nó. Nên tránh sử dụng cách này, trừ một số trường hợp đặc biệt cần phải ghi đè mã CSS của hai phương pháp trên. Vì việc đưa mã định dạng vào trong phần tử HTML sẽ gây ra rất nhiều khó khăn khi cần thay đổi việc hiển thị của toàn bộ trang web.
Ví dụ,
<h1 style="color: blue">Giới thiệu</h1>
2.1.3 Các khái niệm quan trọng
Phần này sẽ trình bày một số khái niệm quan trọng của CSS, hiểu được các khái niệm này sẽ giúp làm việc với CSS được nhẹ nhàng và chuyên nghiệp.
Kế thừa (Inheritance)
Mặc định, một số định dạng CSS đang được áp dụng cho một phần tử cũng sẽ được áp dụng trên các phần tử nằm trong nó.
Ví dụ, trong bài Lab2.1.a,
[CSS]
…
p {
font-size: small;
font-family: sans-serif;
margin-left: 100px;
}
…
[HTML]
<p>I'm not going to concern myself here with a critique of the front of the bill (my friend Jeff says "it looks like something got spilled on it."). It's the <em>back</em> of the note that's driving me crazy.</p>
Do phần tử em nằm trong phần tử p, nên chữ “back” cũng sẽ có phông là sans-serif và kiểu chữ nhỏ.
Cấu trúc của tài liệu
Làm sao biết được phần tử nào chứa phần tử nào? Để biết được cái nào kế thừa cái nào? Như đã biết, tài liệu HTML đã ngầm chứa trong nó một cấu trúc phân cấp (hierarchy). Như tài liệu HTML trong tập tin twenties.html ở trên, có phần tử gốc html chứa phần tử head và body, phần tử body chứa các phần tử h1, h2 và p, một số phần tử p lại chứa các phần tử kiểu inline như img, em. Một cách hình ảnh, tài liệu HTML chính là một cái cây lộn ngược (upside-down tree), với gốc là html, và các cành mọc xuống từ gốc. Xem hình minh họa,
Mối quan hệ giữa các nút trong “cây HTML”
Để dễ hiểu, có thể xem mối quan hệ giữa các nút trong “cây HTML” như là mối quan hệ trong một dòng tộc, với mỗi phần tử HTML là một thành viên trong dòng tộc.
– Mọi phần tử nằm trong một phần tử thì được gọi hậu duệ (descendants) của nó. Ví dụ, các phần tử h1, h2, p, em, img được gọi là hậu duệ của phần tử body
– Phần tử chứa trực tiếp phần tử khác được gọi là cha (parent), các phần tử được chứa gọi là con (child). Ví dụ, phần tử p chứa em, nên p là cha, em là con
– Với một phần tử bất kì, mọi phần tử mở mức cao hơn mà có mối liên hệ nội tộc (…ông-cha-con-cháu…) thì được gọi là tổ tiên (ancestors) của nó. Ví dụ, tổ tiên của img là p, body, html
– Hai phần tử có cùng cha thì được gọi là anh em (siblings), Ví dụ, h1, h2, p là anh em, vì đều có cha là body
Có thuộc tính được kế thừa, có thuộc tính không
Như ở ví dụ đang xét, khi thiết lập định dạng font cho phần tử p, thì định dạng đó sẽ tác động trên mọi phần tử p của tài liệu HTML và các phần tử văn bản kiểu inline (em) nằm trong nó. Có nghĩa là phần tử em đã kế thừa thuộc tính định dạng font từ phần tử p. Tuy nhiên, phần tử img cũng nằm trong p nhưng sẽ không kế thừa thuộc tính định dạng font, vì hình ảnh thì không có thuộc tính font. Vậy là sẽ có một số thuộc tính được kế thừa và có một số thuộc tính thì không.
Xem hình minh họa,
Nói chung, các thuộc tính liên quan đến định dạng văn bản (ví dụ: font-size, color, style) thì sẽ được kế thừa, các thuộc tính liên quan đến borders, backgrounds, margins sẽ không được kế thừa.
Tính kế thừa có chọn lọc này rất hữu dụng trong một số tính huống, ví dụ nếu muốn thiết lập thuộc tính font cho tất cả các phần tử văn bản, thay vì phải thiết lập cho từng phần tử văn bản thì có thể thiết lập một lần cho phần tử body. Ngược lại, khi thiết lập thuộc tính border (đường biên) cho một phần tử p nào đó thì chắc chắn là không muốn có border cho cả các phần tử em, strong, hay a nằm ở trong nó.
Khi thiết lập thuộc tính cho một phần tử, nó sẽ ghi đè (override) lên thuộc tính được kế thừa tương ứng. Ví dụ, với phần tử em là con của phần tử p, nếu thiết lập phông cho p là sans-serif và thiết lập phông cho em là serif thì thuộc tính được áp dụng cho em sẽ là serif.
Định dạng bị xung đột
Cùng nhìn lại chữ viết tắt của CSS (cascading style sheet), hiểu nôm na “style sheet” là đoạn mã định dạng, thế còn “cascading” có nghĩa là gì?
CSS cho phép áp dụng cùng lúc nhiều đoạn mã định dạng trên một tài liệu HTML, như vậy chắc chắn sẽ có tình trạng xung đột (conflict) xảy ra. Ví dụ, đoạn mã CSS này định dạng h1 có chữ màu đỏ, đoạn CSS khác định dạng h1 có chữ màu xanh, vậy cuối cùng h1 có chữ màu gì?
Những người tạo ra đặc tả CSS đã nghĩ tới tình huống xung đột này và đã đưa ra giải pháp là sử dụng một hệ thống có thứ bậc về độ ưu tiên, thứ bậc này được xác định dựa trên nguồn gốc (nơi chứa) của các tài liệu CSS, mỗi nguồn gốc sẽ được gán một mức độ ưu tiên khác nhau.
Từ cascade có nghĩa là “xếp lớp” hay “dòng thác”, hiểu theo nghĩa là khi có nhiều tài liệu CSS cùng muốn áp dụng trên một phần tử, thì làm ơn hãy xếp hàng, anh nào có độ ưu tiên thấp thì đứng trước, anh nào có độ ưu tiên cao hơn thì đứng sau. Khi có hiệu lệnh, thì từng anh một thực hiện việc định dạng của mình, anh có độ ưu tiên thấp hơn định dạng trước, anh có độ ưu tiên cao hơn định dạng sau và sẽ có quyền ghi đè anh có độ ưu tiên thấp hơn.
Ví dụ, mã định dạng (CSS) mặc định của mỗi trình duyệt sẽ có độ ưu tiên thấp nhất (thuật ngữ hay gọi là user agent style sheet), sau đó đến CSS do người duyệt web tạo ra (user style sheet), tuy nhiên, nếu trang web có mã CSS do lập trình viên tạo ra (author style sheet) thì đoạn mã này sẽ có quyền ưu tiên cao hơn hai đoạn mã định dạng ở trên.
Như đã biết, mã CSS do lập trình viên tạo ra có ba loại, ứng với ba nguồn chứa khác nhau, gồm: đặt trong phần tử HTML, đặt trong tài liệu HTML và đặt ngoài tài liệu HTML. Nói chung, tài liệu CSS nào nằm càng gần phần tử HTML hơn thì có độ ưu tiên cao hơn, vậy độ ưu tiên cao nhất sẽ là CSS đặt trong phần tử HTML, sau đó đến CSS đặt trong tài liệu HTML và cuối cùng là CSS đặt ngoài tài liệu HTML.
Bảng sau là thứ tự ưu tiên của các tài liệu CSS, dựa vào nguồn của nó, thứ tự ưu tiên sẽ tăng dần từ trên xuống,
CSS mặc định của trình duyệt |
CSS do người duyệt web định nghĩa |
CSS để bên ngoài tài liệu HTML, được liên kết bằng phần tử link |
CSS để bên ngoài tài liệu HTML, được liên kết bằng chức năng @import |
CSS đặt ngay trong tài liệu HTML, được chứa trong phần tử style |
CSS đặt ngay trong phần tử HTML, được chứa trong thuộc tính style |
Các luật do lập trình viên đánh dấu là “!important” |
Các luật do người duyệt web đánh dấu là “!important” |
Để ngăn việc ghi đè cho một luật CSS bất kì, sử dụng từ khóa “!important” ngay trước dấu “;” của mỗi luật. Ví dụ,
Trong phần tử style của tài liệu twenties.html có thuộc tính,
h2 {
color: red;
margin-left: 100px;
}
Trong tập tin main.css có thuộc tính,
h2 {
color: green !important;
}
Mặc dù mã CSS trong main.css có độ ưu tiên thấp hơn, nhưng nhờ từ khóa “!important” nên nó sẽ được áp dụng.
Tính rõ ràng
Khi đã chọn được tài liệu CSS để áp dụng cho tài liệu HTML rồi, thì vẫn có thể xảy ra tình trạng xung đột. Do vậy, lại cần phải sử dụng đến tính chất “cascading” ở mức luật (rule level). Nghĩa là, khi có hai luật trong một tài liệu CSS có xung đột thì sẽ dựa vào loại của bộ chọn (type of selector) để xác định độ ưu tiên, bộ chọn nào càng rõ ràng (specificity) thì có độ ưu tiên cao hơn.
Thứ tự của luật
Cuối cùng, với hai luật có cùng độ ưu tiên vẫn có thể xảy ra xung đột, khi đó cũng áp dụng quy tắc “cái nào gần nội dung cần định dạng hơn sẽ có độ ưu tiên cao hơn (cái cuối cùng sẽ có độ ưu tiên cao nhất)”. Sau đây là một số trường hợp,
Ví dụ 1, ba luật sau có xung đột, và p { color: green; } sẽ được áp dụng,
<style>
p { color: red; }
p { color: blue; }
p { color: green; }
</style>
Ví dụ 2, ba khai báo sau có xung đột, và color: green; sẽ được áp dụng,
<style>
p { color: red;
color: blue;
color: green; }
</style>
Ví dụ 3, ba liên kết sau có xung đột, và <link rel="stylesheet" href="main3.css"> sẽ có độ ưu tiên cao hơn,
<link rel="stylesheet" href="main1.css">
<link rel="stylesheet" href="main2.css">
<link rel="stylesheet" href="main3.css">
.jpg)
.jpg)
){kind=link}
0 Nhận xét