🎨
Cơ bản CSS
1 tuần Nhập mônMàu sắc, khoảng cách, font chữ. Chỉnh sửa giao diện.
Tổng quan
Cái này là gì?
CSS là ngôn ngữ quyết định diện mạo của trang web. Bạn có thể chỉ định màu sắc, kích thước, khoảng cách và bố cục.
Tại sao lại quan trọng?
HTML đơn thuần sẽ trông rất nhạt nhẽo. CSS giúp trang web đẹp và dễ dùng hơn.
Bạn sẽ học được gì
- Chỉ định màu sắc (color, background-color)
- Khoảng cách (margin, padding)
- Font chữ (font-size, font-family)
- Class và Selector
Chi tiết
Cách viết CSS
Cú pháp: Bộ chọn { thuộc tính: giá trị; }. Ví dụ: h1 { color: blue; } làm h1 có màu xanh. Dùng dấu chấm phẩy để ngăn cách các thuộc tính.
Ví dụ:
- h1 { color: blue; }
- p { font-size: 16px; margin: 10px; }
Tips:
- Có dấu hai chấm giữa thuộc tính và giá trị
- Luôn kết thúc bằng dấu chấm phẩy
Lỗi thường gặp:
- Quên dấu hai chấm
- Quên đơn vị (như 16 thay vì 16px)
Chỉ định màu sắc
color là màu chữ, background-color là màu nền. Có thể dùng tên màu (blue), mã hex (#0000ff) hoặc rgb.
Ví dụ:
- color: blue;
- background-color: #f5f5f5;
Tips:
- Chú ý độ tương phản để dễ đọc
Lỗi thường gặp:
- Sai chính tả tên màu
- Màu chữ và nền quá giống nhau
Khoảng cách (margin và padding)
margin là khoảng cách bên ngoài phần tử, padding là khoảng cách bên trong.
Ví dụ:
- margin: 16px;
- padding: 8px 16px;
Tips:
- margin giúp các phần tử cách xa nhau
- padding tạo khoảng trống giữa nội dung và viền
Lỗi thường gặp:
- Nhầm giữa margin và padding
Các bước thực hành
- 1 Thêm thẻ style 2 phút
Viết CSS ngay trong file HTML bằng thẻ <style>.
- Viết <style> trong phần <head>
- Viết mã CSS bên trong đó
<style> h1 { color: blue; } </style>
Câu hỏi thường gặp
- Tại sao margin không cộng dồn mà lại bị nuốt mất?
- Đó là cơ chế margin-collapse. Khi hai phần tử nằm dọc cạnh nhau, margin của chúng sẽ bị gộp lại lấy giá trị lớn nhất thay vì cộng dồn.
① Đã đọc giải thích. Tiếp theo ② Làm bài tập.
Đã nắm vững cơ bản CSS.
Tiếp theo hãy học JavaScript để tạo chuyển động cho trang web.
Công cụ liên quan: Chuyển đổi màu