CSS - Tập trung: Hướng dẫn cho người mới bắt đầu
Xin chào các bạn, những ngôi sao tương lai của thiết kế web! Hôm nay, chúng ta sẽ nhảy vào thế giới đầy thú vị của CSS tập trung. Đừng lo lắng nếu bạn chưa bao giờ viết một dòng mã trước đây - tôi sẽ là người bạn thân thiện dẫn đường cho bạn trong hành trình này. Cuối cùng của bài hướng dẫn này, bạn sẽ tập trung các phần tử như một chuyên gia!
Tập trung là gì?
Hãy bắt đầu từ cơ bản. CSS tập trung là một伪-class cho phép chúng ta định dạng một phần tử khi nó nhận được tập trung. Nhưng "nhận được tập trung" có nghĩa là gì? Hãy tưởng tượng bạn đang điền vào một biểu mẫu trực tuyến. Khi bạn nhấp vào một trường nhập liệu, nó sẽ được nổi bật hoặc thay đổi theo một cách nào đó. Đó chính là hành động tập trung!
Tập trung vô cùng quan trọng cho khả năng truy cập. Nó giúp người dùng, đặc biệt là những người di chuyển bằng bàn phím, hiểu phần tử nào họ đang tương tác tại thời điểm hiện tại.
Áp dụng cho
Trước khi chúng ta bắt đầu định dạng, điều quan trọng là phải biết哪些元素 thực sự có thể nhận được tập trung. Dưới đây là bảng tiện ích:
| Các phần tử có thể tập trung |
|---|
Liên kết (<a>) |
| Nút |
| Trường nhập liệu |
| Menu thả xuống |
| Textarea |
| Phần tử chọn |
Nhớ rằng, không phải tất cả các phần tử HTML đều có thể nhận được tập trung theo mặc định. Nhưng đừng lo lắng, chúng ta sẽ覆盖如何使 các phần tử khác có thể tập trung sau!
Cú pháp
Bây giờ, hãy xem chúng ta thực sự viết CSS tập trung như thế nào. Cú pháp cơ bản rất đơn giản:
element:focus {
/* Your styles here */
}Xem kí tự двоеточие trước "focus"? Đó là gì làm cho nó thành một伪-class. Nó giống như nói, "Hey CSS, áp dụng các định dạng này khi phần tử này được tập trung!"
CSS Tập trung - Liên kết
Hãy bắt đầu với một trường hợp sử dụng phổ biến: định dạng một liên kết tập trung. Dưới đây là một ví dụ:
a:focus {
color: #ff6600;
text-decoration: underline;
outline: 2px solid #ff6600;
}Trong đoạn mã này, khi một liên kết nhận được tập trung:
- Màu sắc của nó thay đổi thành cam sáng (#ff6600)
- Nó được gạch chân
- Một đường viền solid cam 2-pixel xuất hiện xung quanh nó
Điều này làm cho liên kết tập trung rõ ràng hơn, cải thiện khả năng truy cập và trải nghiệm người dùng.
CSS Tập trung - Nút
Nút là một phần tử khác nơi các phong cách tập trung rất quan trọng. Hãy định dạng một nút:
button:focus {
background-color: #4CAF50;
color: white;
box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.5);
}Khi nút này nhận được tập trung:
- Nền của nó chuyển thành xanh (#4CAF50)
- Văn bản trở thành trắng
- Một hiệu ứng bóng xanh mờ xuất hiện xung quanh nó
Điều này tạo ra một trạng thái tập trung rõ ràng và hấp dẫn cho nút của chúng ta.
CSS Tập trung - Trường nhập liệu
Trường nhập liệu là nơi tập trung thực sự tỏa sáng. Dưới đây là cách chúng ta có thể định dạng một trường nhập liệu tập trung:
input:focus {
border: 2px solid #3498db;
background-color: #e8f4fc;
outline: none;
}Trong ví dụ này:
- Đường viền trở thành một đường solid xanh 2-pixel (#3498db)
- Nền thay đổi thành xanh nhạt (#e8f4fc)
- Chúng ta loại bỏ đường viền mặc định
Lời khuyên chuyên nghiệp: Luôn cung cấp một chỉ báo visuel rõ ràng khi loại bỏ đường viền mặc định. Ngược lại, người dùng bàn phím có thể mất dấu phần tử tập trung của họ!
CSS Tập trung - Menu thả xuống
Menu thả xuống (hoặc phần tử chọn) cũng có thể được định dạng khi tập trung:
select:focus {
border-color: #9b59b6;
box-shadow: 0 0 0 2px rgba(155, 89, 182, 0.2);
}Ở đây, khi menu thả xuống được tập trung:
- Màu đường viền thay đổi thành tím (#9b59b6)
- Một hiệu ứng bóng tím mờ xuất hiện xung quanh nó
Thay đổi tinh tế này giúp người dùng hiểu menu thả xuống nào họ đang tương tác.
CSS Tập trung - Nút bật tắt
Nút bật tắt là một chút đặc biệt. Chúng ta thường muốn định dạng chúng khác nhau khi chúng được tập trung và khi chúng được chọn. Dưới đây là cách:
.toggle:focus {
outline: 2px solid #3498db;
}
.toggle:focus:checked {
outline-color: #e74c3c;
}Trong đoạn mã này:
- Khi nút bật tắt được tập trung, nó có một đường viền xanh
- Nếu nó cả tập trung và chọn, đường viền chuyển thành đỏ
Điều này giúp người dùng hiểu cả trạng thái tập trung và trạng thái bật tắt cùng một lúc.
CSS Tập trung - Các thuộc tính liên quan
Có một số thuộc tính CSS thường được sử dụng với tập trung. Dưới đây là bảng các thuộc tính hữu ích nhất:
| Thuộc tính | Mô tả |
|---|---|
| outline | Tạo một đường xung quanh phần tử |
| box-shadow | Thêm hiệu ứng bóng cho phần tử |
| border | Định nghĩa đường viền của phần tử |
| background | Đặt nền của phần tử |
| color | Thay đổi màu văn bản |
| text-decoration | Thêm hiệu ứng trang trí cho văn bản (như gạch chân) |
Nhớ rằng, bạn có thể kết hợp các thuộc tính này để tạo ra các phong cách tập trung độc đáo và khả năng truy cập!
Kết luận
Và thế là bạn đã có nó, các bạn! Bạn vừa bước những bước đầu tiên vào thế giới của CSS tập trung. Nhớ rằng, phong cách tập trung tốt không chỉ là về việc làm cho mọi thứ trông đẹp hơn - nó còn về việc tạo ra một web bao gồm và khả năng truy cập cho tất cả mọi người.
Trong khi bạn tiếp tục hành trình mã hóa của mình, hãy luôn nhớ đến khả năng truy cập. Nó không chỉ là một điều tốt để có; nó là một phần quan trọng của phát triển web. Và biết đâu? Phong cách tập trung của bạn có thể chính là điều làm cho ngày của ai đó trở nên dễ dàng hơn một chút.
Tiếp tục thực hành, giữ sự tò mò, và quan trọng nhất, hãy vui vẻ với nó! CSS là sân chơi của bạn, và tập trung chỉ là một trong nhiều món đồ chơi thú vị bạn được phép chơi với. Chúc bạn mã hóa vui vẻ!
Credits: Image by storyset