CSS có những cách nào để áp dụng kiểu dáng cho một trang web? Phân biệt giữa CSS nội bộ (internal) và CSS ngoài (external).
CSS có 3 cách chính để áp dụng kiểu dáng cho một trang web:
CSS nội dòng (Inline CSS):
Viết trực tiếp trong thuộc tính style của thẻ HTML.
Chỉ áp dụng cho phần tử cụ thể.
Ví dụ:
html
Sao chépChỉnh sửa
<p style="color: blue; ">Đây là một đoạn văn bản.</p>
- Hạn chế: Khó bảo trì, khó kiểm soát khi áp dụng cho nhiều phần tử.
CSS nội bộ (Internal CSS):
Viết trong thẻ <style> bên trong <head> của trang HTML.
Áp dụng cho toàn bộ trang web.
Ví dụ:
html
Sao chépChỉnh sửa
<head>
<style>
p {
color: blue;
}
</style>
</head>
-Ưu điểm: Dễ chỉnh sửa hơn so với inline CSS.
- Hạn chế: Nếu có nhiều trang, cần lặp lại CSS trong mỗi trang.
CSS ngoài (External CSS):
Viết trong một tệp riêng .css và liên kết với HTML bằng thẻ <link>.
Ví dụ:
File style.css
css
Sao chépChỉnh sửa
p {
color: blue;
}
Trong file HTML:
html
Sao chépChỉnh sửa
<head>
<link rel="stylesheet" href="style.css">
</head>
-Ưu điểm: Dễ bảo trì, có thể sử dụng cùng một file CSS cho nhiều trang.
-Hạn chế: Cần tải thêm file CSS, có thể ảnh hưởng đến tốc độ tải trang.
Phân biệt Internal CSS và External CSS
Tiêu chí | Internal CSS | External CSS |
|---|---|---|
Vị trí | Trong thẻ <style> trong <head> | Trong file .css riêng |
Áp dụng | Chỉ cho trang HTML chứa nó | Nhiều trang web có thể sử dụng chung |
Tốc độ tải | Nhanh hơn vì không cần tải file ngoài | Có thể chậm hơn nếu file CSS lớn |
Dễ bảo trì | Khó bảo trì nếu có nhiều trang | Dễ bảo trì, chỉ cần sửa một file CSS |