Tuy nhiên, bài viết này sẽ trình bày chi tiết về hai loại cụ thể là số tỷ lệ và số dạng bảng. Chúng được dùng để tạo kiểu cho các giá trị số trong Tailwind, đồng thời sắp xếp và trình bày dữ liệu số theo cách phù hợp với thiết kế của tài liệu.
Bài viết này sẽ giải thích chi tiết về các số liệu tỷ lệ và dạng bảng trong CSS Tailwind bằng cách sử dụng phác thảo sau:
- Làm cách nào để sử dụng các số liệu tỷ lệ trong CSS Tailwind?
- Làm cách nào để sử dụng số liệu dạng bảng trong CSS Tailwind?
- Sự khác biệt giữa số liệu tỷ lệ và dạng bảng
Làm cách nào để sử dụng các số liệu tỷ lệ trong CSS Tailwind?
Lớp các số liệu tỷ lệ sẽ gán cho phần tử một quy ước trong đó mọi số không có cùng chiều rộng.
Cú pháp
Cú pháp sử dụng số tỉ lệ trong Tailwind như sau:
< div lớp học = 'số tỷ lệ' >
< div / >
Trong cú pháp được cung cấp ở trên, “ số tỷ lệ ” lớp phải được cung cấp cho phần tử để sử dụng các số liệu tỷ lệ.
Hãy xem một ví dụ thực tế về các số tỷ lệ.
Trong mã được cung cấp bên dưới, hai “ P ” phần tử được chứa trong một “ div ” phần tử sử dụng lớp số liệu tỷ lệ:
< div lớp học = ' số trung tâm văn bản tỷ lệ bg-slate-200 văn bản-xl' >< P > 121212 < / P >
< P > 838383 < / P >
< / div >
Giải thích về đoạn mã được cung cấp ở trên như sau:
- Các ' div Phần tử ” sử dụng “ số tỷ lệ ” lớp sẽ áp dụng thuộc tính hình tỷ lệ cho các số.
- Các ' trung tâm văn bản ” lớp định vị văn bản ở giữa phần tử.
- Các ' bg-{color}-{number} ” class chịu trách nhiệm về màu nền của phần tử.
- Các ' văn bản-xl ” Lớp cung cấp cỡ chữ cực lớn cho văn bản.
- Tiếp theo, hai “ P ” các phần tử được tạo có chứa các số khác nhau.
đầu ra
Có thể thấy ở kết quả đầu ra rằng các số ở chữ “ thứ hai P ” phần tử có chiều rộng lớn hơn một chút so với phần tử đầu tiên. Điều này là do lớp số liệu tỷ lệ:
Làm cách nào để sử dụng số liệu dạng bảng trong CSS Tailwind?
Các số liệu dạng bảng trong Tailwind gán quy ước cho một phần tử trong đó mọi số đều có cùng kích thước chiều rộng. Điều này tạo ra một biểu diễn đối xứng giống như bảng của các con số.
Cú pháp
Cú pháp sử dụng các số liệu dạng bảng như sau:
< div lớp học = 'số bảng' >< div / >
Trong cú pháp được cung cấp ở trên, “ số bảng ” được cung cấp cho phần tử để sử dụng các số liệu dạng bảng.
Hãy cùng xem cách “ số bảng ” ảnh hưởng đến các giá trị số trong tài liệu HTML. Đối với cuộc biểu tình này, hai “ P ” với các giá trị số được tạo và chứa trong một “ div ” phần tử sử dụng lớp số liệu dạng bảng:
< div lớp học = ' tabular-nums văn bản-trung tâm bg-slate-200 văn bản-xl' >< P > 121212 < / P >
< P > 838383 < / P >
< / div >
Trong đoạn mã trên, “ số bảng ” lớp được cung cấp cho “ div ” phần tử sẽ gán kiểu của các số liệu dạng bảng cho trẻ “ P “các phần tử.
Đầu ra:
Có thể thấy ở kết quả đầu ra ở trên rằng các giá trị số trong cả hai phần tử được căn chỉnh hoàn hảo do có cùng kích thước chiều rộng của các chữ số.
Thông tin bổ sung: Sự khác biệt giữa các số liệu tỷ lệ và dạng bảng trong CSS Tailwind
Chúng ta hãy xem một minh họa phân biệt tác động của các lớp số liệu dạng bảng và tỷ lệ đối với các giá trị số. Trong phần trình diễn này, các phần tử sẽ được gán lớp số liệu tỷ lệ làm mặc định. Tiếp theo, bằng cách sử dụng trạng thái di chuột, các phần tử sẽ được gán lớp số liệu dạng bảng:
< div lớp học = ' số trung tâm văn bản theo tỷ lệ bg-slate-200 văn bản-xl di chuột: số bảng' >< P > 121212 < / P >
< P > 838383 < / P >
< / div >
Có thể thấy trong đoạn mã trên rằng “ div Phần tử ” được cung cấp với “ số tỷ lệ ”, đây sẽ là quy ước mặc định mà các giá trị số sẽ tuân theo.
Tương tự, do “ di chuột: số bảng ”, các giá trị số sẽ tuân theo quy ước số liệu dạng bảng bất cứ khi nào người dùng di con trỏ chuột lên phần tử “div”.
đầu ra
Trong kết quả đầu ra đã cho, độ rộng của các giá trị số thay đổi khi người dùng di chuột qua phần tử. Điều này mang lại sự khác biệt trực quan giữa số liệu tỷ lệ và số liệu dạng bảng trong Tailwind:
Đó là tất cả về các số liệu tỷ lệ và dạng bảng trong Tailwind.
Phần kết luận
Để sử dụng số liệu tỷ lệ trong Tailwind, “ số tỷ lệ ” lớp được sử dụng. Các số liệu tỷ lệ sử dụng quy ước trong đó mỗi giá trị số có kích thước chiều rộng khác nhau. Để sử dụng số liệu dạng bảng trong Tailwind, “ số bảng ” lớp được sử dụng. Các số liệu dạng bảng sử dụng quy ước trong đó mọi giá trị số có cùng kích thước chiều rộng. Bài viết này đã cung cấp quy trình sử dụng các số liệu tỷ lệ và dạng bảng trong Tailwind.