Bộ chọn loại CSS

CSS Bộ chọn loại (còn được gọi là bộ chọn loại phần tử ) được sử dụng để nhắm mục tiêu các phần tử HTML theo loại của chúng. Loại có thể là bất kỳ phần tử HTML tích hợp nào, chẳng hạn như <h2> , <p> , <button> .

Nhập cú pháp bộ chọn

Chúng tôi sử dụng cú pháp sau để tạo kiểu cho các phần tử thông qua bộ chọn kiểu

element-name {
    property-name: value;
}

Ví dụ:hãy tạo kiểu cho phần tử nút này thông qua bộ chọn loại của nó:

<button>Click me!</button>

CSS:

Nút

button {
    font-size: 32px;
    padding: 1rem;
    color: red;
}

Kết quả:

Khi bạn sử dụng bộ chọn loại, bạn định kiểu các phần tử trên trang web của mình nói chung.

Vì vậy, nếu bạn có 10 phần tử nút trên trang web của mình và bạn sử dụng CSS từ trên xuống, thì mọi nút sẽ có cùng kiểu dáng đó. Điều này có thể có hoặc không là những gì bạn muốn, tùy thuộc vào ngữ cảnh.

Kiểu cơ sở

Bạn có thể đặt một số kiểu cơ sở rộng trực tiếp trên các phần tử HTML. Tuy nhiên, kiểu dáng cơ bản phải càng không cụ thể càng tốt. Nó phải là một cách để thực thi tính nhất quán trực quan có ý nghĩa trên giao diện người dùng của bạn - và tránh lặp lại mã không cần thiết.

Các khu vực bạn thường muốn nhất quán:

Phông chữ (còn được gọi là kiểu chữ)
Kích thước phông chữ
Chiều cao dòng
Màu sắc
Khoảng cách (khoảng trắng)

Ví dụ:bạn nên nhất quán với lựa chọn họ phông chữ trong giao diện người dùng của mình. Bạn không muốn sử dụng 5 phông chữ khác nhau, điều đó làm cho giao diện người dùng của bạn trông kỳ lạ và không nhất quán. Bạn muốn ở đâu đó từ 1 đến tối đa 3 họ phông chữ khác nhau trên hầu hết các trang web.

Giả sử bạn muốn sử dụng hai loại phông chữ trên trang web của mình:

một Serif cho các đoạn văn và danh sách của bạn
một Sans Serif cho mọi thứ khác.

Trong trường hợp này, thật hợp lý khi sử dụng bộ chọn kiểu rộng để áp dụng các họ phông chữ đó:

/* Roboto is a sans serif*/
html, body {
  font-family: roboto;  
}

/* Merriweather is a serif*/
p, li {
  font-family: merriweather;
}

Với CSS ở trên, mọi phần tử HTML sẽ sử dụng phông chữ Roboto, ngoại trừ các đoạn văn và danh sách sẽ sử dụng Merriweather.

Khi nào thì không sử dụng bộ chọn loại?

Nói chung là một phương pháp không tốt khi “tạo kiểu” bất kỳ phần tử nào có nét vẽ rộng vì nó ảnh hưởng đến mọi biểu diễn của phần tử đó trên trang của bạn.

Ví dụ:không làm điều này trong CSS của bạn:

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 loạt các phong cách cho mọi phần tử nút trên trang web của bạn. Rất có thể bạn có nhiều nút với các vai trò khác nhau trên trang web của mình. Mặc dù bạn muốn thiết kế giao diện người dùng cơ sở nhất quán (đặc biệt là kiểu chữ), nhưng có thể bạn không muốn tất cả chúng trông hoặc hoạt động giống hệt nhau. Đặc biệt là những thứ như giá trị ký quỹ rất nguy hiểm khi áp dụng rộng rãi cho bất kỳ loại phần tử nhất định nào.

Tất nhiên, bạn luôn có thể ghi đè bất kỳ kiểu cơ sở nào trên một phần tử bằng cách sử dụng bộ chọn lớp. Tuy nhiên, mục đích của việc sử dụng các lớp không phải là dành nhiều thời gian để hoàn tác / ghi đè các kiểu cơ sở được truyền từ bộ chọn phần tử.

Mục đích của việc sử dụng các lớp trên các phần tử là:

Để mở rộng các kiểu dựa trên các yếu tố trong các tình huống cụ thể yêu cầu nó. Ví dụ:bạn có thể muốn nút kêu gọi hành động trên các phần anh hùng của mình lớn hơn một chút so với mọi nơi khác.
Khả năng tái sử dụng. Các lớp có thể được tái sử dụng vô hạn, điều này làm cho chúng linh hoạt và hiệu quả. Một ví dụ tuyệt vời về điều đó là khung CSS Tailwind dựa trên các lớp tiện ích cho một mục đích, còn được gọi là CSS chức năng.

Tóm lại:

Sử dụng công cụ chọn kiểu để thiết lập đường cơ sở về các kiểu chung nhằm thực thi đặc điểm nhận dạng hình ảnh thương hiệu của bạn thông qua tính nhất quán.
Sử dụng các lớp (và đôi khi là id) để xây dựng dựa trên các kiểu cơ sở, để tạo kiểu cho các phần tử dựa trên vai trò của chúng trong môi trường cụ thể mà chúng đang ở.