Thử thách ôn tập
Thuộc phần Thành thạo CSS trong hành trình HTML của Coddy. Bài học 6 trên 43.
Thử thách
DễBạn đã học cách kết hợp các bộ chọn CSS bằng bộ kết hợp hậu duệ (descendant), con trực tiếp (child), anh em liền kề (adjacent sibling) và anh em tổng quát (general sibling). Giờ là lúc áp dụng tất cả vào thực hành!
- Định dạng tất cả phần tử
<p>là con trực tiếp bên trong<div>có lớp.roomsbằng màu xanh ngọc lam (#40e0d0). - Định dạng tất cả phần tử
<p>là hậu duệ của<div>có lớp.facilitiesbằng màu xanh lá bọt biển (#2e8b57). - Định dạng mọi phần tử
<p>đứng sau một phần tử<div>bằng màu be cát (#f4a300).
Tự làm thử
<!DOCTYPE html>
<html>
<head>
<title>Recap Challenge</title>
<style>
/* Your CSS solution here */
</style>
</head>
<body>
<section>
<h1>Welcome to Paradise Resort</h1>
<div class="rooms">
<h2>Ocean View Rooms</h2>
<p>Room 101</p>
<p>Room 102</p>
</div>
<div class="facilities">
<h2>Resort Facilities</h2>
<div>
<p>Infinity Pool</p>
<p>Spa & Wellness Center</p>
</div>
<p>Beach Access</p>
</div>
<p>Beachfront Restaurant</p>
<p>Sunset Bar</p>
</section>
</body>
</html>Tất cả bài học trong Thành thạo CSS
1Làm chủ bộ chọn: Kết hợp
Giới thiệuBộ chọn hậu duệBộ chọn conBộ chọn anh em liền kềBộ chọn anh em tổng quátThử thách ôn tập7Xây dựng giao diện với CSS Grid
Cơ bản về GridĐịnh vị phần tử theo hàng của GridCác vùng được đặt tênThử thách ôn tậpTự luyện tập: Playground Web