CSS (Cascading Style Sheets) là ngôn ngữ được sử dụng để định kiểu cho các trang web. Để áp dụng CSS cho một trang web, có ba phương pháp chính mà bạn có thể sử dụng: Inline CSS, Internal CSS, và External CSS. Mỗi phương pháp có những ưu và nhược điểm riêng. Dưới đây là hướng dẫn chi tiết về từng phương pháp.
1. Inline CSS
Inline CSS cho phép bạn thêm các quy tắc CSS trực tiếp vào các phần tử HTML thông qua thuộc tính style
. Phương pháp này hữu ích cho việc điều chỉnh nhanh các thuộc tính của một phần tử cụ thể.
Cú Pháp
<tagname style="property: value;">
Nội dung
</tagname>
Ví Dụ
<p style="color: red; font-size: 20px;">Đây là một đoạn văn bản có màu đỏ.</p>
Ưu Điểm
- Dễ dàng và nhanh chóng để áp dụng cho một phần tử duy nhất.
- Không cần tạo file CSS riêng.
Nhược Điểm
- Không thể áp dụng cho nhiều phần tử.
- Làm cho mã HTML trở nên lộn xộn.
- Khó khăn trong việc bảo trì.
2. Internal CSS
Internal CSS cho phép bạn thêm các quy tắc CSS trong thẻ <style>
trong phần <head>
của tài liệu HTML. Phương pháp này rất hữu ích khi bạn muốn áp dụng kiểu cho toàn bộ trang web mà không cần tạo file CSS bên ngoài.
Cú Pháp
<head>
<style>
/* CSS tại đây */
selector {
property: value;
}
</style>
</head>
Ví Dụ
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ví dụ Internal CSS</title>
<style>
body {
background-color: lightgray;
}
h1 {
color: blue;
}
</style>
</head>
<body>
<h1>Chào mừng đến với trang web của tôi!</h1>
</body>
</html>
Ưu Điểm
- Có thể áp dụng cho nhiều phần tử trong một trang.
- Tổ chức và dễ đọc hơn so với inline CSS.
Nhược Điểm
- Không thể chia sẻ giữa các trang khác nhau.
- Nếu bạn có nhiều trang, bạn sẽ phải sao chép mã CSS cho từng trang.
3. External CSS
External CSS là phương pháp sử dụng một file CSS riêng biệt để định kiểu cho các trang HTML. Phương pháp này rất phổ biến trong phát triển web vì nó cho phép bạn giữ mã HTML và CSS tách biệt và dễ dàng bảo trì.
Cú Pháp
- Tạo file CSS (ví dụ:
styles.css
):
body {
background-color: lightgray;
}
h1 {
color: blue;
}
- Liên kết file CSS trong phần
<head>
của tài liệu HTML:
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
Ví Dụ
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ví dụ External CSS</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>Chào mừng đến với trang web của tôi!</h1>
</body>
</html>
Ưu Điểm
- Có thể chia sẻ giữa nhiều trang, giúp tiết kiệm thời gian và công sức.
- Dễ dàng bảo trì và thay đổi kiểu dáng mà không cần sửa đổi HTML.
- Giúp mã HTML trở nên sạch sẽ hơn.
Nhược Điểm
- Cần phải tải file CSS trước khi áp dụng kiểu.
- Nếu file CSS bị lỗi hoặc không tải được, trang sẽ không có kiểu dáng.
Kết Luận
Có ba phương pháp chính để thêm CSS vào trang web: Inline CSS, Internal CSS, và External CSS. Mỗi phương pháp có ưu và nhược điểm riêng, và việc lựa chọn phương pháp nào phụ thuộc vào nhu cầu cụ thể của bạn. Đối với các dự án lớn hoặc cần bảo trì lâu dài, sử dụng External CSS là lựa chọn tốt nhất.