GALAXY TECH
Chuyên gia Công nghệ
Thứ hai, 31/08/2020 | 00:00 GMT+7

Giới thiệu về Bộ đếm CSS

Trong lập trình, bộ đếm là các biến giữ một giá trị tăng theo các luật có thể tùy chỉnh. Chúng có nhiều mục đích, chẳng hạn như giúp giữ các tab trêncác vòng lặp bằng cách lưu trữ số lần vòng lặp đã được thực thi. Mặc dù được sử dụng thường xuyên trong các ngôn ngữ lập trình, bộ đếm theo truyền thống không được đưa vào cú pháp của Trang tính kiểu xếp tầng (CSS) . Trước những ngày của CSS hiện đại, việc theo dõi các phần tử trên trang cho mục đích tạo kiểu hoặc được thực hiện thủ công trong phần đánh dấu hoặc bằng cách sử dụng JavaScript để kiểm đếm mọi thứ. Nhưng hiện tại, CSS có một thuộc tính bộ đếm được hỗ trợ tốt có thể theo dõi số gia tăng mà không cần JavaScript.

Trong hướng dẫn này, bạn sẽ chạy qua các khái niệm cơ bản về bộ đếm CSS bằng cách sử dụng chúng để đánh số các section tử phần trong tài liệu Ngôn ngữ đánh dấu siêu văn bản (HTML) và kiểm đếm số hàng trong một phần tử table .

Yêu cầu

Đánh số các phần của một trang

Để chứng minh cách bộ đếm hoạt động trong CSS, trước tiên bạn sẽ sử dụng biểu định kiểu để đính kèm một số vào nhiều section tử phần trong HTML của bạn . Sử dụng bộ đếm, bạn sẽ làm cho số lượng tăng lên một cho mỗi phần mới.

Đầu tiên, sử dụng editor mà bạn chọn để mở index.html của bạn. Trong hướng dẫn này, bạn sẽ sử dụng nano :

  • nano index.html

Khi file được mở, hãy thêm HTML sau để tạo cấu trúc ngữ nghĩa cho trang web , trong ví dụ của ta là một bảng thông tin về loài bò sát:

index.html
<!DOCTYPE html> <html>    <head>     <meta charset="utf-8">     <title>Introduction to CSS Counters</title>     <link rel="stylesheet" type="text/css" href="counter.css">   </head>    <body>     <section>       <h2>Ratings</h2>       Insert a table with reptile ratings on it...     </section>      <section>       <h2>Alligators</h2>       Insert facts about alligators here...     </section>      <section>       <h2>Turtles</h2>       Insert facts about turtles here...     </section>      <section>       <h2>Snakes</h2>       Insert facts about snakes here...     </section>   </body>  </html>

Trong mã này, bạn đã sử dụng section tử phần để tạo bốn phần trên trang web của bạn , với tiêu đề được đặt làm tiêu đề h2 . Bạn cũng đã thêm một phần tử link vào phần head kết nối với file CSS counter.css mà bạn sẽ sớm tạo.

Lưu và đóng file . Mở index.html trong trình duyệt của bạn và bạn sẽ thấy những điều sau:

HTML được hiển thị với bốn phần

Nếu bạn muốn đánh số từng section trong HTML này, bạn có thể đặt trước mỗi h2 bằng số ngay trong phần đánh dấu, như sau:

...     <section>       <h2>1. Ratings</h2>       Insert a table with reptile ratings on it...     </section>      <section>       <h2>2. Alligators</h2>       Insert facts about alligators here...     </section> ...

Mặc dù là một giải pháp tuyệt vời khi bạn có một số lượng nhỏ các phần cố định, nhưng điều này sẽ trở nên tẻ nhạt và dễ xảy ra lỗi khi bạn có hàng chục hoặc thậm chí hàng trăm phần. Thêm vào đó, độ phức tạp sẽ nhanh chóng kết hợp với nhau ngay khi bạn cần sắp xếp lại các phần.

Để tự động đánh số này, bạn có thể sử dụng bộ đếm CSS.

Tạo và mở file counter.css của bạn trong cùng folder với index.html :

  • nano counter.css

Bộ đếm trong CSS hoạt động giống như các biến trong ngôn ngữ lập trình truyền thống. Bước đầu tiên để sử dụng bộ đếm CSS là khởi tạo bộ đếm, bộ đếm này đặt tên cho bộ đếm và đặt giá trị ban đầu.

Thêm mã sau vào file của bạn:

counter.css
body {   counter-reset: sectionCounter; }

Trong mã này, bạn đã sử dụng counter-reset để khởi tạo bộ đếm có tên là sectionCounter . Đến đây, sectionCounter bằng 0 .

Bạn có thể khai báo giá trị đã khởi tạo một cách rõ ràng bằng cách chuyển một số nguyên vào thuộc counter-reset bộ đếm sau tên bộ đếm. Ví dụ, counter-reset: sectionCounter 2 sẽ khởi tạo bộ đếm sectionCounter với giá trị là 2 . Nếu giá trị số nguyên không được chỉ định, giá trị bộ đếm là 0 theo mặc định.

Đến đây bạn đã khởi tạo bộ đếm của bạn , bạn có thể đặt cách bộ đếm tăng lên. Đối với mỗi phần, bạn cần tăng bộ đếm lên 1 . Thực hiện việc này, thêm mã được đánh dấu sau:

counter.css
body {   counter-reset: sectionCounter; }  section {   counter-increment: sectionCounter; }

Trong mã này, bạn đã chọn tất cả các section tử của phần để có thuộc counter-increment số counter-increment . Điều này nghĩa là mỗi khi CSS gặp một section tử section , nó sẽ tăng bộ đếm. Đặt thuộc tính thành sectionCounter chọn để tăng bộ đếm có tên sectionCounter . Theo mặc định, bộ đếm tăng lên một, nhưng nếu bạn muốn chỉ định số tăng, bạn có thể thêm một số nguyên sau sectionCounter phân tách bằng khoảng trắng.

Với bộ đếm được khởi tạo và bộ logic tăng dần, bây giờ bạn có thể sử dụng bộ đếm của bạn . Để sử dụng giá trị của bộ đếm, hãy sử dụng thuộc tính content để thêm giá trị vào đầu đề h2 :

counter.css
body {   counter-reset: sectionCounter; }  section {   counter-increment: sectionCounter; }  h2::before {   content: counter(sectionCounter) ". "; }

Bạn đã sử dụng phần tử giả ::before để thêm phần tử vào trước mỗi tiêu đề h2 . Để đặt nội dung của phần tử mới, bạn đã sử dụng thuộc tính content , được ghép nối với hàm counter() . Hàm này trả về giá trị của sectionCounter dưới dạng một chuỗi . Truyền một chuỗi thứ hai vào content sẽ nối chuỗi, do đó, điều này sẽ in ra giá trị của sectionCounter theo sau là a . và một khoảng trắng.

Lưu và đóng file . Làm mới trình duyệt web và bạn sẽ có các tiêu đề phần như 1. Xếp hạng và 2. Cá sấu :

Các phần có thêm số

Đó chưa phải là tất cả; bộ đếm không thể thêm và bớt các phần mới cũng như sắp xếp lại thứ tự chúng, vì vậy bạn sẽ không phải đánh số lại nếu thay đổi thứ tự.

Để thử điều này, hãy mở file HTML của bạn:

  • nano index.html

Chuyển đổi thứ tự của phần Turtles và Snakes :

index.html
...   <body>     <section>       <h2>Ratings</h2>       Insert a table with reptile ratings on it...     </section>      <section>       <h2>Alligators</h2>       Insert facts about alligators here...     </section>      <section>       <h2>Snakes</h2>       Insert facts about snakes here...     </section>      <section>       <h2>Turtles</h2>       Insert facts about turtles here...     </section>    </body> ...

Lưu và đóng file . Reload trình duyệt của bạn và bạn sẽ thấy những điều sau:

HTML mẫu với phần rắn và phần rùa được chuyển đổi

Trong phần này, bạn đã sử dụng bộ đếm CSS để tự động hóa các phần được đánh số trong trang HTML . Tiếp theo, bạn sẽ chạy qua một ví dụ sử dụng phần tử table để minh họa cách sử dụng bộ đếm để tính tổng.

Đếm số hàng trong bảng

Ngoài việc tự động đánh số trong trang HTML , bạn có thể sử dụng bộ đếm CSS cho bất kỳ tác vụ nào liên quan đến việc tăng dần định kỳ. Để chứng minh điều này, bạn sẽ sử dụng bộ đếm để lưu trữ số hàng trong một phần tử table , sau đó hiển thị tổng số trong bảng.

Đếm số hàng hoặc phần tử tr trong table tương tự như cách bạn thêm giá trị số vào mỗi section tử phần trong phần trước của hướng dẫn. Sự khác biệt lớn sẽ là phần quan trọng là tổng giá trị chứ không phải giá trị cho mỗi hàng.

Trước khi kiểm đếm các hàng trong table , bạn cần một table để làm việc. Mở file HTML của bạn:

  • nano index.html

Bây giờ thêm dòng tô đậm sau để tạo bảng trong Ratings section :

index.html
<!DOCTYPE html> <html>    <head>     <meta charset="utf-8">     <title>Introduction to CSS Counters</title>     <link rel="stylesheet" type="text/css" href="counter.css">   </head>    <body>     <section>       <h2>Ratings</h2>       <table border="1" cellpadding="5">         <thead>           <tr>             <th>Reptile</th>             <th>Rating</th>           </tr>         </thead>         <tbody>           <tr>             <td>Alligator</td>             <td>9001</td>           </tr>           <tr>             <td>Turtle</td>             <td>223</td>           </tr>           <tr>             <td>Snake</td>             <td>3.14</td>           </tr>         </tbody>         <tfoot>           <tr>             <th>Rows</th>             <th class="total"></th>           </tr>         </tfoot>       </table>     </section>      <section>       <h2>Alligators</h2>       Insert facts about alligators here...     </section> ...

Bạn đã sử dụng phần tử table để tạo bảng, cùng với phần tử tr để xác định các hàng trong bảng và phần tử td để lấp đầy hàng bằng các điểm dữ liệu. Lưu ý việc sử dụng thead , tbody và tfoot . Mặc dù không cần thiết, các phần tử này group các hàng thành các phần ngữ nghĩa, mà bạn có thể sử dụng để nhắm đến tốt hơn các hàng trong phần tbody và bỏ qua bất kỳ hàng nào trong đầu trang hoặc chân trang. Cuối cùng, bạn đã sử dụng các thuộc tính border và cellpadding để tạo kiểu cơ bản cho bảng của bạn .

Lưu và thoát khỏi index.html . Làm mới trang trong trình duyệt của bạn và bạn sẽ thấy như sau:

Trang mẫu có bảng

Bây giờ, hãy mở file CSS của bạn:

  • nano counter.css

Giống như trước đây, bạn cần khởi tạo bộ đếm với giá trị bằng không. Nhưng lần này, hãy thêm một bộ đếm mới có tên rowCounter :

counter.css
body {   counter-reset: sectionCounter;   counter-reset: rowCounter; }  section {   counter-increment: sectionCounter; }  h2::before {   content: counter(sectionCounter) ". "; }

Đối với mỗi hàng hoặc phần tử tr , trong tbody , hãy tăng bộ đếm:

counter.css
body {   counter-reset: sectionCounter;   counter-reset: rowCounter; }  section {   counter-increment: sectionCounter; }  h2::before {   content: counter(sectionCounter) ". "; }  table tbody tr {   counter-increment: rowCounter; }

Bạn đã sử dụng bộ chọn table tbody tr để chọn tất cả các phần tử tr trong tbody , sau đó sử dụng thuộc tính bộ counter-increment , nhưng lần này với bộ đếm rowCounter .

Cuối cùng, thêm giá trị cuối cùng của bộ đếm vào chân trang trong cột với loại total :

counter.css
body {   counter-reset: sectionCounter;   counter-reset: rows; }  section {   counter-increment: sectionCounter; }  h2::before {   content: counter(sectionCounter) ". "; }  table tbody tr {   counter-increment: rowCounter; }  table .total::before {   content: counter(rowCounter); }

Như trước đây, bạn đã sử dụng phần tử giả ::before để thêm giá trị của rowCounter dưới dạng một chuỗi mới. Vì điều này được khai báo sau khi số lượng đã được tăng lên, nó sẽ báo cáo tổng số hàng.

Lưu và thoát khỏi file CSS, sau đó reload trang trong trình duyệt để hiển thị như sau:

Trang mẫu có tổng số hàng bằng bộ đếm CSS

Bây giờ table của bạn sẽ luôn báo cáo nó chứa bao nhiêu hàng. Thêm hoặc xóa các hàng vào đánh dấu sẽ mang lại tổng số được cập nhật. Điều này thậm chí hoạt động khi sử dụng JavaScript để thao tác DOM .

Kết luận

Bộ đếm trong CSS rất hữu ích để hiển thị giá trị tăng dần theo các phần tử nhất định trong HTML của bạn. Trong nhiều trường hợp, điều này có thể loại bỏ hoàn toàn nhu cầu đưa JavaScript vào một trang, làm cho nó trở thành giải pháp lý tưởng cho các dự án web nhẹ không cần tương tác. Tuy nhiên, xin lưu ý việc sử dụng CSS theo cách này làm mờ ranh giới giữa nội dung và thiết kế, đồng thời không phân tách các mối quan tâm theo cách giúp cho các ứng dụng lớn hơn có thể quản lý được. Do đó, nên tránh phương pháp này trong các ứng dụng JavaScript phức tạp hơn.

Nếu bạn muốn tìm hiểu thêm về cách tạo kiểu trang web, hãy xem loạt bài Cách tạo trang web bằng HTML hoặc hướng dẫn của ta về Cách tạo kiểu cho các thành phần React .

Tags:

Các tin liên quan

Thuộc tính CSS text-shadow
2020-08-20
Cách tạo hiệu ứng cuộn thị sai với CSS thuần túy trong Chrome
2020-08-03
Cách tạo trang đích có kiểu dáng với CSS Tailwind
2020-06-23
Triển khai một CSS thuần túy có thể thu gọn
2020-05-02
Căn giữa mọi thứ trong CSS bằng Flexbox
2020-05-02
Tham chiếu phông chữ hệ thống CSS
2020-03-29
Sử dụng Thuộc tính chiều cao dòng CSS để cải thiện khả năng đọc
2020-02-04
Cách sử dụng CSS: root Pseudo-Class Selector
2020-01-15
Khi nào bạn nên sử dụng quy tắc CSS! Important?
2020-01-14
Thủ thuật sử dụng CSS translateZ () và phối cảnh ()
2019-12-13