CSS - Đ inclusão
Xin chào các bạn đang học phát triển web! Hôm nay, chúng ta sẽ nhảy vào thế giới thú vị của việc bao gồm CSS. Là giáo viên máy tính hàng xóm thân thiện của bạn, tôi ở đây để hướng dẫn bạn qua các cách khác nhau để thêm một chút phong cách vào tài liệu HTML của chúng ta. Vậy, hãy lấy một tách cà phê (hoặc trà, nếu đó là sở thích của bạn), và chúng ta cùng bắt đầu!
CSS Đ嵌入式 - Thẻ <style>
Hãy bắt đầu với cách đơn giản nhất để bao gồm CSS trong tài liệu HTML của bạn: thẻ <style>. Hãy tưởng tượng bạn đang mặc đồ cho một buổi tiệc. Thẻ <style> giống như việc chọn trang phục và mặc nó ngay trước khi bạn ra khỏi cửa.
Dưới đây là cách nó trông như thế nào:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
h1 {
color: #333;
text-align: center;
}
</style>
</head>
<body>
<h1>Chào mừng đến trang web thời trang của tôi!</h1>
</body>
</html>Trong ví dụ này, chúng ta đã xác định các phong cách cho các phần tử body và h1. body sẽ có nền màu xám nhạt và sử dụng phông Arial, trong khi h1 sẽ có màu xám đậm và căn giữa.
CSS Nối dòng - Thuộc tính style
Tiếp theo, chúng ta có CSS nối dòng. Điều này giống như việc trang trí trang phục của bạn với một chiếc mũ sang trọng hoặc một chiếc项链 ngay khi bạn đang đi ra cửa.
Dưới đây là một ví dụ:
<p style="color: blue; font-size: 18px;">Đây là đoạn văn bản màu xanh với cỡ chữ lớn hơn.</p>Trong trường hợp này, chúng ta đã áp dụng các phong cách trực tiếp vào thẻ <p> sử dụng thuộc tính style. Văn bản sẽ có màu xanh và có cỡ chữ 18 pixel.
CSS Ngoại부 - Thẻ <link>
Bây giờ, hãy nói về CSS ngoại bộ. Điều này giống như việc có một tủ quần áo riêng đầy trang phục khác nhau mà bạn có thể chọn cho bất kỳ dịp nào.
Đầu tiên, tạo một tệp CSS riêng (hãy gọi nó là styles.css):
/* styles.css */
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
h1 {
color: #333;
text-align: center;
}Sau đó, liên kết nó với tệp HTML của bạn:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Chào mừng đến trang web thời trang của tôi!</h1>
</body>
</html>Thẻ <link> cho biết trình duyệt nơi tìm thấy tệp CSS của chúng ta. Nó giống như đưa ra hướng dẫn đến tủ quần áo của bạn!
CSS Nhập khẩu - Quy tắc @import
Quy tắc @import giống như việc có một người tư vấn thời trang cá nhân mang đến cho bạn trang phục từ các cửa hàng khác nhau. Nó cho phép bạn nhập một tệp CSS vào một tệp CSS khác.
Trong tệp CSS chính của bạn:
/* main.css */
@import url('typography.css');
@import url('colors.css');
body {
background-color: #f0f0f0;
}Ở đây, chúng ta đang nhập hai tệp CSS khác vào tệp CSS chính của chúng ta. Đây là một cách tuyệt vời để tổ chức phong cách của bạn!
CSS Quy tắc Thay thế
Bây giờ, hãy nói về điều gì sẽ xảy ra khi các phong cách xung đột. Điều này giống như khi bạn đang cố quyết định giữa hai trang phục và một trong số chúng phải chiến thắng.
Dưới đây là bảng specificity của CSS, từ thấp đến cao:
| Loại Selector | Ví dụ | Specificity |
|---|---|---|
| Element | p |
1 |
| Class | .highlight |
10 |
| ID | #header |
100 |
| Inline | style="color: red;" |
1000 |
Một selector cụ thể hơn sẽ có ưu tiên cao hơn. Ví dụ:
<style>
p { color: blue; }
.highlight { color: yellow; }
#special { color: green; }
</style>
<p class="highlight" id="special" style="color: red;">Màu của tôi là gì?</p>Trong trường hợp này, văn bản sẽ có màu đỏ vì các phong cách nối dòng có độ cụ thể cao nhất.
Xử lý các Trình duyệt Cũ
Đôi khi, chúng ta cần phải phục vụ các trình duyệt cũ có thể không hiểu CSS mới của chúng ta. Điều này giống như việc có một trang phục cổ điển sẵn sàng chỉ trong trường hợp.
background-color: #f0f0f0; /* Fallback cho các trình duyệt cũ */
background-color: rgba(240, 240, 240, 0.5); /* Các trình duyệt hiện đại với alpha transparency */Ở đây, chúng ta cung cấp một màu solid cho các trình duyệt cũ và một màu bán trong suốt cho các trình duyệt hiện đại.
CSS Bình luận
Cuối cùng, hãy nói về CSS bình luận. Chúng giống như những ghi chú nhỏ bạn để lại cho mình (hoặc các nhà phát triển khác) để giải thích các lựa chọn phong cách của bạn.
/* Đây là một bình luận CSS */
body {
background-color: #f0f0f0; /* Nền màu xám nhạt */
font-family: Arial, sans-serif; /* Sử dụng phông sans-serif để dễ đọc hơn */
}Bình luận bị bỏ qua bởi các trình duyệt nhưng có thể rất hữu ích cho việc hiểu và duy trì mã của bạn.
Và đó là tất cả, các bạn! Chúng ta đã bao gồm các cách khác nhau để bao gồm CSS trong tài liệu HTML của bạn, từ phong cách nội嵌入式 đến các bảng phong cách ngoại bộ. Nhớ rằng, thực hành làm cho hoàn hảo, vì vậy đừng ngần ngại thử nghiệm với các phương pháp khác nhau và xem điều gì hoạt động tốt nhất cho các dự án của bạn. Chúc các bạn may mắn với việc thiết kế!
Credits: Image by storyset