Có 4 cách khác nhau để nhúng CSS vào trong tài liệu HTML và hai cách được sử dụng phổ biến nhất đó là Inline CSS và External CSS. Dưới đấy là hướng dẫn Include CSS vào HTML một cách đơn giản và chi tiết nhất các bạn cùng theo dõi nhé
Sử dụng Internal CSS
Nhúng CSS trong HTML sử dụng phần tử <style>
Cách này đơn giản và nên chỉ áp dụng với những ứng dụng webpage nhỏ. Bạn có thể nhúng CSS vào trong tài liệu HTML của bạn bởi sử dụng phần tử style. Thẻ này được đặt bên trong các thẻ <head>...</head>. Style Rule được định nghĩa trong khu vực này sẽ chỉ tác động đến các phần tử trong nội bộ trang đó. Ví dụ sau minh họa cú pháp sử dụng chung và vị trí nhúng CSS vào trong HTML:
<html> <head> <style type = "text/css" media = "all"> body { background-color: linen; } h1 { color: maroon; margin-left: 40px; } </style> </head> <body> <h1>Day la phan tieu de cho tai lieu</h1> <p>Day la vi du mot doan van trong tai lieu.</p> </body> </html>
Kết quả là:
Giải thích các Thuộc tính trong CSS
Tiếp theo, mình sẽ giải thích các thuộc tính trong CSS đã áp dụng cho thẻ style được sử dụng trong ví dụ trên:
| Thuộc tính | Giá trị | Miêu tả |
|---|---|---|
| type | text/css | Thuộc tính type trong CSS này là bắt buộc. Nó báo cho tài liệu HTML của bạn biết rằng bạn đang nhúng CSS vào trong tài liệu HTML. |
| media | screenttytvprojectionhandheldprintbrailleauralall | Thuộc tính media trong CSS nói cho HTML biết về kiểu thiết bị mà tài liệu này sẽ được hiển thị trên đó. Giá trị mặc định là all. Đây là một thuộc tính tùy ý trong CSS. |
Inline CSS – Sử dụng thuộc tính style
Ở trên, bạn đã nhúng CSS vào trong HTML bởi sử dụng thẻ style, và sử dụng cách này thì style rule sẽ là có sẵn (có sẵn tức là bạn có thể áp dụng cho phần tử nào cũng được) cho tất cả các phần tử trong trang đó. Tiếp theo, mình trình bày cách nhúng CSS trong HTML bởi sử dụng thuộc tính style của các thẻ HTML. Làm theo cách này thì style rule sẽ chỉ được áp dụng cho phần tử đó. Cú pháp chung như sau:
<tenPhanTu style = "...style rules....">
Giải thích các Thuộc tính
| Thuộc tính | Giá trị | Miêu tả |
|---|---|---|
| style | style rule | Chắc bạn đã biết và hiểu qua về thuộc tính style của các thẻ HTML. Nó báo cho HTML về style mà bạn muốn áp dụng cho phần tử mà bạn đã chọn. Giá trị của thuộc tính style là tổ hợp của các Style Declaration ( xem lại chương Cú pháp CSS) và chúng được tách biệt với nhau bởi dấu chấm phảy (;). |
Ví dụ
Ví dụ sau minh họa Inline CSS theo cú pháp trên:
<html> <head> </head> <body> <h1 style = "color:#36C;"> Vi du ve Inline CSS </h1> </body> </html>
Kết quả là:
Tuy nhiên, sử dụng cách này có thể làm nội dung trình bày của bạn có thể bị xáo trộn, do đó bạn nên ít sử dụng.
Sử dụng External CSS - Sử dụng phần tử <link>
Với những ứng dụng Website lớn mà có nhiều page, thì cách tốt nhất là bạn nên sử dụng phần tử <link> để include (hay nhúng) CSS file vào trong tài liệu HTML. Làm theo cách này, bạn chỉ cần sửa đổi một file, thì bạn đã có thể sửa đổi toàn bộ phần Look và Feel cho cả Website.
CSS file này là một text file và có đuôi là .css. Bạn định nghĩa tất cả style rule bên trong file này và sau đó bạn có thể include file vào trong bất kỳ trang HTML nào bởi sử dụng thẻ <link>.
Cú pháp cho thẻ <link> để nhúng CSS vào trong HTML như sau:
<head> <link type = "text/css" href = "..." media = "..." /> </head>
Ghi chú:
- Thẻ
<link>này phải được đặt trong các thẻ<head></head> - CSS file không nên bao gồm bất cứ thẻ HTML nào.
- CSS file được lưu dưới đuôi .css.
Thuộc tính
Giải thích các thuộc tính được sử dụng trong cú pháp trên:
| Thuộc tính | Giá trị | Miêu tả |
|---|---|---|
| type | text/css | Thuộc tính type trong CSS này là bắt buộc. Nó báo cho tài liệu HTML của bạn biết rằng bạn đang nhúng CSS vào trong tài liệu HTML. |
| href | URL | Thuộc tính href xác định đường link tới css file có chứa style rule mà bạn đã định nghĩa. Thuộc tính này là bắt buộc. |
| media | screen tty tv projection handheld print braille aural all | Thuộc tính media trong CSS nói cho HTML biết về kiểu thiết bị mà tài liệu này sẽ được hiển thị trên đó. Giá trị mặc định là _all_. Đây là một thuộc tính tùy ý trong CSS. |
Ví dụ
Giả sử, mình xác định một style rule đơn giản và đặt nó trong style.css có nội dung như sau:
h1, h2, h3 {
color: #36C;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
}Bây giờ, mình có thể nhúng style.css vào trong HTML như sau:
<head> <link type = "text/css" href = "style.css" media = " all" /> </head>
Import CSS - Qui tắc @import trong CSS
Ý nghĩa của việc sử dụng qui tắc @import là tương tự như khi sử dụng phần tử <link> để nhúng CSS file vào trong HTML. Cú pháp của qui tắc @import trong CSS như sau:
<head> <@import "URL"; </head>
Ở đây, URL sẽ là địa chỉ trỏ đến css file mà bạn đã định nghĩa. Bạn cũng có thể sử dụng một cú pháp khác tương tự là:
<head>
<@import url("URL");
</head>Ví dụ
Ví dụ sau minh họa cách nhúng style.css vào trong HTML.
<head> @import "style.css"; </head>
Qui tắc áp dụng Style Rule khi có nhiều CSS rule
Đôi khi xảy ra một tình huống là: bạn đã định nghĩa một style cho một phần tử nào đó (h1 chẳng hạn) trong css file, nhưng sau đó có thể do bạn quên, bạn lại định nghĩa lại trong tài liệu HTML bởi sử dụng theo cách Internal CSS, thì câu hỏi đặt ra là phần tử h1 này sẽ áp dụng theo style nào. Dưới đây là một số qui tắc chỉ ra mức độ ưu tiên của từng cách thức đã được trình bày ở trên.
- Inline CSS có quyền ưu tiên cao nhất. Vì thế, trong trường hợp có nhiều style khác nhau được áp dụng cho một thuộc tính của một phần tử, thì Inline CSS sẽ có quyền ưu tiên cao nhất, nó sẽ ghi đè các style rule còn lại được xác định trong thẻ
<style>...</style>hoặc trong External CSS file. - Rule được định nghĩa trong thẻ
<style>...</style>sẽ ghi đè rule được định nghĩa trong External CSS file. - Rule được định nghĩa trong External CSS file có mức độ ưu tiên thấp nhất. Nó sẽ chỉ được áp dụng trên một phần tử khi không bị ghi đè hay không có hai rule trên cùng định nghĩa trên phần tử đó.
Cách xử lý CSS với một số trình duyệt cũ
Có nhiều trình duyệt cũ không hỗ trợ CSS. Do đó, bạn cần cẩn trọng trong khi nhúng CSS vào trong HTML. Để xử lý trường hợp này, bạn làm theo cách sau để ẩn CSS đối với các trình duyệt cũ.
<style type="text/css">
<!--
body, td {
color: blue;
}
-->
</style>
