2.1 Bảng định kiểu bên ngoài
Kết nối CSS (Cascading Style Sheets) vào tài liệu HTML cho phép định kiểu trang web, cải thiện giao diện và khả năng sử dụng. Có nhiều cách để kết nối CSS vào HTML, mỗi cách có những lợi ích riêng và phù hợp với các tình huống khác nhau.
Các cách kết nối CSS:
- Bảng định kiểu bên ngoài (External Stylesheets)
- Bảng định kiểu nội bộ (Internal Stylesheets)
- Định kiểu nội tuyến (Inline Styles)
Bảng định kiểu bên ngoài (External Stylesheets)
Bảng định kiểu bên ngoài là các file CSS riêng biệt, được kết nối vào tài liệu HTML thông qua thẻ <link>. Cách này cho phép tách riêng phần định kiểu ra khỏi cấu trúc tài liệu, giúp dễ dàng quản lý và tái sử dụng file CSS trên nhiều trang.
Lợi ích:
- Dễ dàng quản lý định kiểu
- Tái sử dụng định kiểu trên nhiều trang
- Cải thiện cache và hiệu suất
Cú pháp:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ví dụ bảng định kiểu bên ngoài</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
}
h1 {
color: #333;
}
p {
color: #666;
}
</style>
</head>
<body>
<h1>Đề mục</h1>
<p>Văn bản</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ví dụ bảng định kiểu bên ngoài</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Đề mục</h1>
<p>Văn bản</p>
</body>
</html>
Ví dụ file CSS(styles.css):
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
}
h1 {
color: #333;
}
p {
color: #666;
}
2.2 Bảng định kiểu nội bộ (Internal Stylesheets)
Bảng định kiểu nội bộ được đặt ngay trong tài liệu HTML, trong phần <head> bằng thẻ <style>. Cách này tiện lợi khi cần áp dụng định kiểu cho một trang duy nhất hoặc khi file bên ngoài không có sẵn.
Lợi ích:
- Dễ sử dụng cho một trang duy nhất
- Không cần file bổ sung
Cú pháp:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ví dụ bảng định kiểu nội bộ</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
}
h1 {
color: #333;
}
p {
color: #666;
}
</style>
</head>
<body>
<h1>Đề mục</h1>
<p>Văn bản</p>
</body>
</html>
2.3 Định kiểu nội tuyến (Inline Styles)
Định kiểu nội tuyến được áp dụng trực tiếp vào các phần tử HTML bằng thuộc tính style. Cách này hữu ích để thử nghiệm nhanh hoặc khi cần thay đổi định kiểu của một phần tử riêng lẻ.
Lợi ích:
- Áp dụng định kiểu nhanh chóng và chính xác
- Phù hợp với thay đổi động qua JavaScript
Nhược điểm:
- Khó quản lý định kiểu khi có nhiều phần tử
- Khó khăn trong việc tái sử dụng định kiểu
Cú pháp:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ví dụ định kiểu nội tuyến</title>
</head>
<body>
<h1 style="color: #333; font-family: Arial, sans-serif;">Đề mục</h1>
<p style="color: #666; background-color: #f4f4f4;">Văn bản</p>
</body>
</html>
Ví dụ sử dụng tất cả các cách trên một trang:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ví dụ tất cả các cách kết nối CSS</title>
<link rel="stylesheet" href="styles.css">
<style>
body {
background-color: #f4f4f4;
}
.internal {
color: #333;
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<h1 class="internal">Đề mục</h1>
<p style="color: #666;">Văn bản này được định kiểu bằng cách sử dụng định kiểu nội tuyến.</p>
</body>
</html>
2.4 Thứ tự ưu tiên của các định kiểu
Khi các định kiểu được kết nối theo nhiều cách khác nhau, thứ tự ưu tiên của chúng được xác định như sau:
- Định kiểu nội tuyến (Inline Styles) có ưu tiên cao nhất
- Bảng định kiểu nội bộ (Internal Stylesheets) có mức ưu tiên tiếp theo
- Bảng định kiểu bên ngoài (External Stylesheets) có mức ưu tiên thấp nhất
Nếu cho một phần tử áp dụng nhiều định kiểu có cùng mức ưu tiên, thì mức ưu tiên được xác định bằng tính đặc hiệu của bộ chọn và thứ tự tuyên bố.
Ví dụ về thứ tự ưu tiên của định kiểu:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ví dụ về thứ tự ưu tiên của định kiểu</title>
<link rel="stylesheet" href="styles.css">
<style>
p {
color: blue; /* Nội bộ */
}
</style>
</head>
<body>
<p style="color: red;">Văn bản này sẽ có màu đỏ do ưu tiên của định kiểu nội tuyến.</p>
</body>
</html>
GO TO FULL VERSION