Nhúng CSS vào trong tài liệu HTML
NỘI DUNG BÀI VIẾT
Có 3 cách để nhúng mã CSS vào trong một tài liệu HTML, bao gồm:
- Khai báo trực tiếp ở thẻ HTML (Inline style sheet)
- Khai báo trong thẻ <style> của tài liệu HTML (Internal style sheet)
- Khai báo trong file .css riêng biệt (External style sheet)
1. Khai báo trực tiếp ở thẻ HTML (Inline style)
Chúng ta có thể khai báo mã CSS trực tiếp trên một thẻ HTML bằng cách sử dụng thuộc tính style.
Ví dụ sau đây sử dụng cách khai báo CSS trực tiếp để thay đổi màu chữ và căn lề trái của một thẻ <h1>:
Có 3 cách để nhúng mã CSS vào trong một tài liệu HTML, bao gồm:
- Khai báo trực tiếp ở thẻ HTML (Inline style sheet)
- Khai báo trong thẻ <style> của tài liệu HTML (Internal style sheet)
- Khai báo trong file .css riêng biệt (External style sheet)
1. Khai báo trực tiếp ở thẻ HTML (Inline style)
Chúng ta có thể khai báo mã CSS trực tiếp trên một thẻ HTML bằng cách sử dụng thuộc tính style.
Ví dụ sau đây sử dụng cách khai báo CSS trực tiếp để thay đổi màu chữ và căn lề trái của một thẻ <h1>:
Cách làm này có ưu điểm là đơn giản, dễ thực hiện. Tuy nhiên, nhược điểm lớn nhất của nó là chúng ta phải khai báo các thuộc tính style cho tất cả các thẻ HTML mà chúng ta muốn điều khiển. Điều này khiến cho lượng mã CSS tăng lên đáng kể và khó quản lý. Chẳng hạn, khi chúng ta muốn thay đổi màu sắc của các thẻ <h1> thì chúng ta phải tìm đến tất cả các thẻ này và sửa khai báo CSS cho chúng.
Do vậy, cách làm này không được sử dụng phổ biến. Thay vào đó, chúng ta thường sử dụng cách 2 hoặc cách 3.
2. Khai báo trong thẻ <style> của tài liệu HTML (Internal style sheet)
Cách tiếp theo để khai báo các thuộc tính CSS đó là sử dụng thẻ <style> trong một tài liệu HTML.
Bên trong thẻ <style> chúng ta có thể đưa ra tất cả các khai báo CSS cần thiết rồi sau đó áp dụng cho từng thẻ HTML.
Thông thường, thẻ <style> được đặt bên trong thẻ <head>, nhưng đó không phải là bắt buộc, chúng ta có thể đặt chúng ở bất cứ đâu. Một tài liệu HTML có thể có rất nhiều thẻ <style> khác nhau.
Trong ví dụ sau đây, chúng ta sẽ khai báo các thuộc tính CSS trong thẻ <style> để thay đổi màu nền của trang web, màu chữ và căn lề trái của thẻ <h1>.
Cách làm này thường phổ biến hơn cách 1, bởi vì chúng ta dễ dàng quản lý hơn. Chẳng hạn, nếu muốn thay đổi màu sắc của các tiêu đề, chúng ta chỉ cần cập nhật màu sắc một lần duy nhất mà không cần phải tìm đến tất cả các thẻ <h1> như trước.
Tuy nhiên, cách làm này vẫn còn hạn chế đó là chúng ta phải khai báo các thẻ <style> cùng với các thuộc tính CSS cho từng trang HTML. Như vậy, nếu website có 100 trang thì chúng ta phải lặp lại 100 lần các đoạn mã CSS giống nhau.
Để khắc phục hạn chế này, chúng ta sử dụng cách nhúng file .css riêng biệt.
3. Khai báo trong file .css riêng biệt (External style sheet)
Với cách làm này, chúng ta tạo một file có đuôi là .css, chẳng hạn là style.css. Trong file này chúng ta khai báo tất cả các thuộc tính CSS mong muốn. Sau đó, chúng ta nhúng file .css này vào trong tài liệu HTML bằng cách sử dụng thẻ <link>.
Thẻ <link> được đặt ở trong thẻ <head> của tài liệu HTML.
Trong ví dụ sau, chúng ta sử dụng một file mystyle.css để thay đổi màu nền của trang web, màu chữ và căn lề trái của thẻ <h1>.
Như vậy, việc lựa chọn cách nhúng CSS phù hợp là tuỳ thuộc vào chúng ta.
Trong thực tế, hầu hết các website đều không chỉ sử dụng một cách nào cố định cả, chúng ta có thể kết hợp cả 3 cách này vào trong cùng một tài liệu.
Nhiều khai báo Style sheet trùng nhau
Trong trường hợp có nhiều khai báo trùng nhau thì khai báo cuối cùng sẽ được sử dụng.
Ví dụ, chúng ta có một file mystyle.css với khai báo màu cho thẻ <h1> như sau:
Sau đó, trong thẻ <style> của tài liệu HTML chúng ta cũng có khai báo tương tự, nhưng với màu sắc khác:
Trong trường hợp này, thẻ <h1> sẽ hiển thị màu cam (orange).
Nhưng nếu khối thẻ <style> được khai báo trước thẻ <link> thì màu của thẻ <h1> sẽ là xanh (navy).
Đè kiểu
Khi có nhiều khai báo CSS cho cùng một thẻ HTML thì các khai báo này sẽ tuân thủ theo độ ưu tiên như sau:
- Inline style
- External và Internal Style
- Kiểu mặc định của trình duyệt
Có nghĩa là các khai báo trực tiếp trên thẻ HTML (Inline style) sẽ có độ ưu tiên cao nhất, sau đó là đến các khai báo External Style và Internal Style, và cuối cùng, nếu không có khai báo nào cả thì các kiểu mặc định của trình duyệt sẽ được sử dụng.
<h1 style="color:blue;margin-left:30px;">
This is a heading
</h1>
Cách làm này có ưu điểm là đơn giản, dễ thực hiện. Tuy nhiên, nhược điểm lớn nhất của nó là chúng ta phải khai báo các thuộc tính style cho tất cả các thẻ HTML mà chúng ta muốn điều khiển. Điều này khiến cho lượng mã CSS tăng lên đáng kể và khó quản lý. Chẳng hạn, khi chúng ta muốn thay đổi màu sắc của các thẻ <h1> thì chúng ta phải tìm đến tất cả các thẻ này và sửa khai báo CSS cho chúng.
Do vậy, cách làm này không được sử dụng phổ biến. Thay vào đó, chúng ta thường sử dụng cách 2 hoặc cách 3.
2. Khai báo trong thẻ <style> của tài liệu HTML (Internal style sheet)
Cách tiếp theo để khai báo các thuộc tính CSS đó là sử dụng thẻ <style> trong một tài liệu HTML.
Bên trong thẻ <style> chúng ta có thể đưa ra tất cả các khai báo CSS cần thiết rồi sau đó áp dụng cho từng thẻ HTML.
Thông thường, thẻ <style> được đặt bên trong thẻ <head>, nhưng đó không phải là bắt buộc, chúng ta có thể đặt chúng ở bất cứ đâu. Một tài liệu HTML có thể có rất nhiều thẻ <style> khác nhau.
Trong ví dụ sau đây, chúng ta sẽ khai báo các thuộc tính CSS trong thẻ <style> để thay đổi màu nền của trang web, màu chữ và căn lề trái của thẻ <h1>.
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
</body>
<h1>This is a heading</h1>
<body>
Cách làm này thường phổ biến hơn cách 1, bởi vì chúng ta dễ dàng quản lý hơn. Chẳng hạn, nếu muốn thay đổi màu sắc của các tiêu đề, chúng ta chỉ cần cập nhật màu sắc một lần duy nhất mà không cần phải tìm đến tất cả các thẻ <h1> như trước.
Tuy nhiên, cách làm này vẫn còn hạn chế đó là chúng ta phải khai báo các thẻ <style> cùng với các thuộc tính CSS cho từng trang HTML. Như vậy, nếu website có 100 trang thì chúng ta phải lặp lại 100 lần các đoạn mã CSS giống nhau.
Để khắc phục hạn chế này, chúng ta sử dụng cách nhúng file .css riêng biệt.
3. Khai báo trong file .css riêng biệt (External style sheet)
Với cách làm này, chúng ta tạo một file có đuôi là .css, chẳng hạn là style.css. Trong file này chúng ta khai báo tất cả các thuộc tính CSS mong muốn. Sau đó, chúng ta nhúng file .css này vào trong tài liệu HTML bằng cách sử dụng thẻ <link>.
Thẻ <link> được đặt ở trong thẻ <head> của tài liệu HTML.
Trong ví dụ sau, chúng ta sử dụng một file mystyle.css để thay đổi màu nền của trang web, màu chữ và căn lề trái của thẻ <h1>.
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
</body>
<h1>This is a heading</h1>
<body>
Như vậy, việc lựa chọn cách nhúng CSS phù hợp là tuỳ thuộc vào chúng ta.
Trong thực tế, hầu hết các website đều không chỉ sử dụng một cách nào cố định cả, chúng ta có thể kết hợp cả 3 cách này vào trong cùng một tài liệu.
Nhiều khai báo Style sheet trùng nhau
Trong trường hợp có nhiều khai báo trùng nhau thì khai báo cuối cùng sẽ được sử dụng.
Ví dụ, chúng ta có một file mystyle.css với khai báo màu cho thẻ <h1> như sau:
h1 {
color: navy;
}
Sau đó, trong thẻ <style> của tài liệu HTML chúng ta cũng có khai báo tương tự, nhưng với màu sắc khác:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
color: orange;
}
</style>
</head>
Trong trường hợp này, thẻ <h1> sẽ hiển thị màu cam (orange).
Nhưng nếu khối thẻ <style> được khai báo trước thẻ <link> thì màu của thẻ <h1> sẽ là xanh (navy).
HTML:
<head>
<style>
h1 {
color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
Đè kiểu
Khi có nhiều khai báo CSS cho cùng một thẻ HTML thì các khai báo này sẽ tuân thủ theo độ ưu tiên như sau:
- Inline style
- External và Internal Style
- Kiểu mặc định của trình duyệt
Có nghĩa là các khai báo trực tiếp trên thẻ HTML (Inline style) sẽ có độ ưu tiên cao nhất, sau đó là đến các khai báo External Style và Internal Style, và cuối cùng, nếu không có khai báo nào cả thì các kiểu mặc định của trình duyệt sẽ được sử dụng.
Chẳng hạn, trong ví dụ sau thì màu của thẻ <h1> sẽ là đỏ.
<head>
<style>
h1{
color:green;
}
</style>
</head>
<body>
<h1 style="color:red;">This is a heading</h1>
</body>
Leave a Reply