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.
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ể.
<tagname style="property: value;">
Nội dung
</tagname>
<p style="color: red; font-size: 20px;">Đây là một đoạn văn bản có màu đỏ.</p>
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.
<head>
<style>
/* CSS tại đây */
selector {
property: value;
}
</style>
</head>
<!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>
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ì.
styles.css):body {
background-color: lightgray;
}
h1 {
color: blue;
}
<head> của tài liệu HTML:<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<!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>
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.
