Bộ chọn Type selector CSS (còn gọi là element type selector) dùng để nhắm mục tiêu các phần tử HTML theo kiểu của chúng. Kiểu có thể là bất kỳ phần tử HTML tích hợp nào, như <h2>, <p>, <button>.
Cú pháp Type selector
Chúng ta dùng cú pháp sau để định kiểu phần tử qua type selector
tên-phần-tử { tên-thuộc-tính: giá-trị; }Ví dụ, hãy định kiểu phần tử button qua type selector:
<button>Nhấp tôi!</button>CSS:
button { font-size: 32px; padding: 1rem; color: red; }Kết quả:
Khi bạn dùng type selector, bạn định kiểu phần tử trên trang web rộng rãi.
Vì vậy, nếu bạn có 10 phần tử button trên trang, và dùng CSS trên, mọi button sẽ nhận cùng kiểu dáng. Điều này có thể hoặc không phải điều bạn muốn, tùy ngữ cảnh.
Kiểu cơ bản (Base styles)
Có thể là ý tưởng tốt thiết lập một số kiểu cơ bản rộng trực tiếp trên phần tử HTML. Tuy nhiên, kiểu cơ bản nên càng không cụ thể càng tốt. Nó nên phục vụ như cách thi hành sự nhất quán thị giác có ý nghĩa trên UI — và tránh lặp code không cần thiết.
Lĩnh vực bạn thường muốn nhất quán:
- Font (còn gọi là typefaces)
- Kích thước font
- Chiều cao dòng
- Màu sắc
- Khoảng cách (khoảng trắng)
Ví dụ, thói quen tốt là nhất quán với lựa chọn họ font trong UI. Bạn không muốn dùng 5 font khác nhau, làm UI trông kỳ lạ và không nhất quán. Bạn muốn từ 1 đến tối đa 3 họ font khác nhau trên hầu hết trang web.
Giả sử bạn muốn dùng hai loại font trên trang:
- Serif cho đoạn văn và danh sách
- Sans Serif cho mọi thứ khác.
Trong trường hợp này, hoàn toàn hợp lý dùng type selector rộng để áp dụng họ font đó:
/* Roboto là sans serif*/ html, body { font-family: roboto; } /* Merriweather là serif*/ p, li { font-family: merriweather; }Với CSS trên, mọi phần tử HTML sẽ dùng font Roboto, trừ đoạn văn và danh sách dùng Merriweather.
Khi không dùng type selector?
Nói chung, thói quen xấu là "quá định kiểu" bất kỳ phần tử nào bằng nét rộng vì nó ảnh hưởng mọi biểu diễn của phần tử đó trên trang.
Ví dụ, đừng làm này trong CSS:
button { font-size: 1.125rem; padding: 1.5rem; margin-top: 1rem; border-radius: 8px; border: 1px solid #444444; color: green; background-color: black; transition: all 1s ease-in; }Trên sẽ áp dụng một đống kiểu cho mọi phần tử button trên trang. Có khả năng bạn có nhiều button với vai trò khác nhau. Mặc dù bạn muốn thiết kế UI cơ bản nhất quán (đặc biệt typography) bạn có thể không muốn tất cả trông hoặc hành xử hoàn toàn giống nhau. Đặc biệt giá trị margin nguy hiểm khi áp rộng cho bất kỳ loại phần tử nào.
Tất nhiên, bạn luôn có thể ghi đè bất kỳ kiểu cơ bản nào trên phần tử bằng bộ chọn class. Tuy nhiên, mục đích dùng class không phải để dành thời gian hủy/ghi đè kiểu cơ bản truyền từ bộ chọn phần tử.
Mục đích dùng class trên phần tử là:
- Để mở rộng kiểu cơ bản trên phần tử trong tình huống cụ thể cần thiết. Ví dụ, bạn có thể muốn nút call-to-action trên hero section to hơn chút ở khắp nơi.
- Tái sử dụng. Class có thể tái dùng vô hạn, làm cho chúng linh hoạt và hiệu quả. Ví dụ tuyệt vời là framework Tailwind CSS dựa trên class tiện ích đơn mục đích, còn gọi là functional CSS.
Tóm tắt:
- Dùng type selector thiết lập đường cơ sở kiểu chung thi hành nhận diện thương hiệu qua sự nhất quán.
- Dùng class (và đôi khi id) xây dựng trên kiểu cơ sở, định kiểu phần tử dựa trên vai trò trong môi trường cụ thể.