Bài tập thực hành CSS Selector - Từ cơ bản đến nâng cao
Bài tập thực hành CSS Selector - Từ cơ bản đến nâng cao
Sau khi đã tìm hiểu về các loại CSS Selector, hãy cùng thực hành qua các bài tập từ cơ bản đến nâng cao. Các bài tập này sẽ giúp bạn nắm vững cách sử dụng CSS Selector trong thực tế.
Bài tập 1: Styling cơ bản
Yêu cầu
- Tạo style cho các phần tử theo yêu cầu sau:
- Tất cả các tiêu đề h2 có màu xanh dương
- Các đoạn văn bản có class "highlight" có nền màu vàng
- Các liên kết có màu xanh lá và không có gạch chân
- Các nút có viền tròn và padding 10px
<!-- HTML -->
<div class="container">
<h2>Tiêu đề chính</h2>
<p class="highlight">Đoạn văn bản được highlight</p>
<p>Đoạn văn bản thông thường</p>
<a href="#">Liên kết</a>
<button>Nút bấm</button>
</div>
/* CSS - Hãy viết code để thực hiện các yêu cầu trên */
Bài tập 2: Navigation Menu
Yêu cầu
- Tạo một navigation menu với các yêu cầu sau:
- Menu items nằm ngang
- Có hover effect
- Item đang active có màu nền khác
- Có border bottom cho item đang active
<!-- HTML -->
<nav class="main-nav">
<ul>
<li class="active"><a href="#">Trang chủ</a></li>
<li><a href="#">Sản phẩm</a></li>
<li><a href="#">Dịch vụ</a></li>
<li><a href="#">Liên hệ</a></li>
</ul>
</nav>
/* CSS - Hãy viết code để thực hiện các yêu cầu trên */
Bài tập 3: Card Layout
Yêu cầu
- Tạo layout cho các card với các yêu cầu sau:
- Card có viền và border radius
- Ảnh trong card có width 100%
- Tiêu đề có màu xanh dương
- Nút có hover effect
- Card có shadow khi hover
<!-- HTML -->
<div class="card">
<img src="image.jpg" alt="Card image">
<div class="card-content">
<h3>Tiêu đề card</h3>
<p>Mô tả ngắn về card này.</p>
<button class="card-btn">Xem thêm</button>
</div>
</div>
/* CSS - Hãy viết code để thực hiện các yêu cầu trên */
Bài tập 4: Form Styling
Yêu cầu
- Tạo style cho form với các yêu cầu sau:
- Input có viền và padding
- Input focus có viền màu xanh
- Label có màu xám đậm
- Nút submit có màu xanh và hover effect
- Thông báo lỗi có màu đỏ
<!-- HTML -->
<form class="contact-form">
<div class="form-group">
<label for="name">Họ tên</label>
<input type="text" id="name" required>
<span class="error">Vui lòng nhập họ tên</span>
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" id="email" required>
<span class="error">Email không hợp lệ</span>
</div>
<button type="submit">Gửi</button>
</form>
/* CSS - Hãy viết code để thực hiện các yêu cầu trên */
Bài tập 5: Responsive Grid
Yêu cầu
- Tạo grid layout responsive với các yêu cầu sau:
- 3 cột trên desktop
- 2 cột trên tablet
- 1 cột trên mobile
- Có gap giữa các item
- Item có border và padding
<!-- HTML -->
<div class="grid">
<div class="grid-item">Item 1</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3</div>
<div class="grid-item">Item 4</div>
<div class="grid-item">Item 5</div>
<div class="grid-item">Item 6</div>
</div>
/* CSS - Hãy viết code để thực hiện các yêu cầu trên */
Bài tập 6: Animation
Yêu cầu
- Tạo các hiệu ứng animation với các yêu cầu sau:
- Nút có hiệu ứng scale khi hover
- Loading spinner xoay liên tục
- Text có hiệu ứng fade in
- Card có hiệu ứng slide up khi hover
<!-- HTML -->
<div class="container">
<button class="animate-btn">Hover me</button>
<div class="spinner"></div>
<p class="fade-text">Text with fade in effect</p>
<div class="animate-card">
<h3>Card Title</h3>
<p>Card content with slide up effect</p>
</div>
</div>
/* CSS - Hãy viết code để thực hiện các yêu cầu trên */
Kết luận
Các bài tập trên đã bao gồm nhiều tình huống thực tế khi làm việc với CSS Selector. Hãy thực hành từng bài tập và thử nghiệm các giải pháp khác nhau. Điều này sẽ giúp bạn:
- Nắm vững cách sử dụng các loại CSS Selector
- Hiểu rõ cách kết hợp các selector
- Tối ưu CSS để có hiệu suất tốt nhất
- Áp dụng các best practices trong thực tế
Hãy thử thách bản thân bằng cách:
- Tự viết code trước khi xem giải pháp
- Thêm các tính năng mới cho mỗi bài tập
- Tối ưu code để có hiệu suất tốt nhất
- Thử nghiệm các giải pháp khác nhau