Tidadigi Logo

CSS Pagination

Phân trang là quá trình chia tài liệu thành các trang có đánh số.

Types of Pagination: Có nhiều kiểu phân trang trong CSS bạn có thể tham khảo. Một số kiểu phân trang CSS được liệt kê bên dưới đây.

  1. Simple Pagination
  2. Active and Hoverable Pagination
  3. Rounded Active and Hoverable Buttons
  4. Hoverable Transition Effect
  5. Bordered Pagination
  6. Rounded Border Pagination
  7. Centered Pagination
  8. Space between Pagination
  9. Pagination Size

Simple Pagination: Đây là hình thức phân trang cơ bản nhất mà bạn có thể thấy.

Syntax:

.pagination {
    display:type
}
.pagination body {
    color:colorname
    decoration:type
}

Example: Ví dụ này sẽ cho bạn thấy cách sử dụng CSS Pagination đơn giản.

html 
<!DOCTYPE html>
<html>
<head>
    <style>
        .pagination {
            display: inline-block;
        }

        .pagination a {
            font-weight: bold;
            font-size: 20px;
            color: black;
            float: left;
            padding: 8px 16px;
            text-decoration: none;
        }

        .GFG {
            font-size: 42px;
            font-weight: bold;
            color: #009900;
            margin-left: 100px;
            margin-bottom: 60px;
        }

        .peg {
            font-size: 24px;
            font-weight: bold;
            margin-left: 140px;
        }
    </style>
</head>

<body>
    <div class="GFG">GeeksforGeeks</div>
    <div class="peg">Simple Pagination</div>
    <div class="pagination">
        <a href="#">«</a>
        <a href="#">1</a>
        <a href="#">2</a>
        <a href="#">3</a>
        <a href="#">4</a>
        <a href="#">5</a>
        <a href="#">6</a>
        <a href="#">7</a>
        <a href="#">8</a>
        <a href="#">9</a>
        <a href="#">10</a>
        <a href="#">»</a>
    </div>
</body>
</html>

Output:

css-pagination Active and Hoverable Pagination: Với kiểu phân trang này bạn có thể dùng class active để đánh dấu trang hiện tại. Khi di chuột qua các liên kết trang màu sắc sẽ thay đổi.

Syntax:

.pagination body.active {
    display:type
    background-color:colorname
}
.pagination body:hover:not(.active) {
    background-color:colorname
}

Example: Ví dụ sau đây minh họa cách dùng CSS Pagination nâng cao hơn.

html 
<!DOCTYPE html>
<html>
<head>
    <style>
        .pagination {
            display: inline-block;
        }

        .pagination a {
            font-weight: bold;
            font-size: 20px;
            color: black;
            float: left;
            padding: 8px 16px;
            text-decoration: none;
        }

        .pagination a.active {
            background-color: #009900;
        }

        .pagination a:hover:not(.active) {
            background-color: #d4d5d2;
        }

        .GFG {
            font-size: 42px;
            font-weight: bold;
            color: #009900;
            margin-left: 100px;
            margin-bottom: 60px;
        }

        .peg {
            font-size: 24px;
            font-weight: bold;
            margin-left: 90px;
            margin-bottom: 20px;
        }
    </style>
</head>

<body>

    <div class="GFG">GeeksforGeeks</div>
    <div class="peg">Active and Hoverable Pagination</div>
    <div class="pagination">
        <a href="#">«</a>
        <a href="#">1</a>
        <a href="#">2</a>
        <a href="#">3</a>
        <a href="#">4</a>
        <a class="active" href="#">5</a>
        <a href="#">6</a>
        <a href="#">7</a>
        <a href="#">8</a>
        <a href="#">9</a>
        <a href="#">10</a>
        <a href="#">»</a>
    </div>

</body>
</html>

Output: css-paginationRounded Active and Hoverable Buttons: Với kiểu nút phân trang này bạn chỉ cần thêm thuộc tính border-radius.

Syntax:

.pagination body.active {
    display:type
    background-color:colorname
    border-radius:size
}
.pagination body:hover:not(.active) {
    background-color:colorname
    border-radius:size
}

Example: Ví dụ sau đây minh họa cách dùng CSS Pagination này.

html 
<!DOCTYPE html>
<html>
<head>
    <style>
        .pagination {
            display: inline-block;
        }

        .pagination a {
            font-weight: bold;
            font-size: 20px;
            color: black;
            float: left;
            padding: 8px 16px;
            text-decoration: none;
        }

        .pagination a.active {
            border-radius: 5px;
            background-color: #009900;
        }

        .pagination a:hover:not(.active) {
            background-color: #d4d5d2;
            border-radius: 5px;
        }

        .GFG {
            font-size: 42px;
            font-weight: bold;
            color: #009900;
            margin-left: 100px;
            margin-bottom: 60px;
        }

        .peg {
            font-size: 24px;
            font-weight: bold;
            margin-left: 40px;
            margin-bottom: 20px;
        }
    </style>
</head>

<body>

    <div class="GFG">GeeksforGeeks</div>
    <div class="peg">Rounded Active and Hoverable Pagination</div>
    <div class="pagination">
        <a href="#">«</a>
        <a href="#">1</a>
        <a href="#">2</a>
        <a href="#">3</a>
        <a href="#">4</a>
        <a class="active" href="#">5</a>
        <a href="#">6</a>
        <a href="#">7</a>
        <a href="#">8</a>
        <a href="#">9</a>
        <a href="#">10</a>
        <a href="#">»</a>
    </div>

</body>
</html>

Output: css-paginationHoverable Transition Effect: Thuộc tính Transition được thêm vào để tạo hiệu ứng chuyển đổi khi di chuột qua.

Syntax:

.pagination body:hover {
    transition:type
}

Example: Ví dụ sau đây sẽ cho bạn thấy cách sử dụng CSS Pagination này.

html 
<!DOCTYPE html>
<html>

<head>
    <style>
        .pagination {
            display: inline-block;
        }

        .pagination a {
            font-weight: bold;
            font-size: 20px;
            color: black;
            float: left;
            padding: 8px 16px;
            text-decoration: none;
        }

        .pagination a.active {
            background-color: #009900;
        }

        .pagination a:hover:not(.active) {
            background-color: #d4d5d2;
        }

        .GFG {
            font-size: 42px;
            font-weight: bold;
            color: #009900;
            margin-left: 100px;
            margin-bottom: 60px;
        }

        .peg {
            font-size: 24px;
            font-weight: bold;
            margin-left: 40px;
            margin-bottom: 20px;
        }
    </style>
</head>

<body>

    <div class="GFG">GeeksforGeeks</div>
    <div class="peg">Hoverable Transition Effect Pagination</div>
    <div class="pagination">
        <a href="#">«</a>
        <a href="#">1</a>
        <a href="#">2</a>
        <a href="#">3</a>
        <a href="#">4</a>
        <a class="active" href="#">5</a>
        <a href="#">6</a>
        <a href="#">7</a>
        <a href="#">8</a>
        <a href="#">9</a>
        <a href="#">10</a>
        <a href="#">»</a>
    </div>

</body>
</html>

Output: css-paginationBordered Pagination: Với kiểu phân trang này bạn có thể thêm đường viền cho nó. Sử dụng thuộc tính border để thêm đường viền cho phân trang.

Syntax:

.pagination body {
    border:type
}

Example: Ví dụ sau đây sẽ cho bạn thấy cách sử dụng CSS Pagination này.

html 
<!DOCTYPE html>
<html>
<head>
    <style>
        .pagination {
            display: inline-block;
        }

        .pagination a {
            font-weight: bold;
            font-size: 20px;
            color: black;
            float: left;
            padding: 8px 16px;
            text-decoration: none;
            border: 1px solid black;
        }

        .pagination a.active {
            background-color: #009900;
        }

        .pagination a:hover:not(.active) {
            background-color: #d4d5d2;
        }

        .GFG {
            font-size: 42px;
            font-weight: bold;
            color: #009900;
            margin-left: 100px;
            margin-bottom: 60px;
        }

        .peg {
            font-size: 24px;
            font-weight: bold;
            margin-left: 140px;
            margin-bottom: 20px;
        }
    </style>
</head>

<body>

    <div class="GFG">GeeksforGeeks</div>
    <div class="peg">Bordered Pagination</div>
    <div class="pagination">
        <a href="#">«</a>
        <a href="#">1</a>
        <a href="#">2</a>
        <a href="#">3</a>
        <a href="#">4</a>
        <a class="active" href="#">5</a>
        <a href="#">6</a>
        <a href="#">7</a>
        <a href="#">8</a>
        <a href="#">9</a>
        <a href="#">10</a>
        <a href="#">»</a>
    </div>

</body>
</html>

Output: css-paginationRounded Border Pagination: Bạn có thể làm tròn đường viền bằng cách sử dụng thuộc tính border-radius.

Syntax:

.pagination body {
    border:type
    border-radius:size
}

Example: Ví dụ sau đây sẽ cho bạn thấy cách sử dụng CSS Pagination này.

html 
<!DOCTYPE html>
<html>
<head>
    <style>
        .pagination {
            display: inline-block;
        }

        .pagination a {
            font-weight: bold;
            font-size: 20px;
            color: black;
            float: left;
            padding: 8px 16px;
            text-decoration: none;
            border-radius: 5px;
            border: 1px solid black;
        }

        .pagination a.active {
            background-color: #009900;
        }

        .pagination a:hover:not(.active) {
            background-color: #d4d5d2;
        }

        .GFG {
            font-size: 42px;
            font-weight: bold;
            color: #009900;
            margin-left: 100px;
            margin-bottom: 60px;
        }

        .peg {
            font-size: 24px;
            font-weight: bold;
            margin-left: 110px;
            margin-bottom: 20px;
        }
    </style>
</head>

<body>

    <div class="GFG">GeeksforGeeks</div>
    <div class="peg">Rounded Border Pagination</div>
    <div class="pagination">
        <a href="#">«</a>
        <a href="#">1</a>
        <a href="#">2</a>
        <a href="#">3</a>
        <a href="#">4</a>
        <a class="active" href="#">5</a>
        <a href="#">6</a>
        <a href="#">7</a>
        <a href="#">8</a>
        <a href="#">9</a>
        <a href="#">10</a>
        <a href="#">»</a>
    </div>

</body>
</html>

Output:

css-paginationCentered Pagination: Bạn có thể căn giữa phân trang bằng cách sử dụng thuộc tính text-align.

Syntax:

.center {
    text-align:center
}
.pagination body {
    color:colorname
}

Example: Ví dụ sau đây sẽ cho bạn thấy cách sử dụng CSS Pagination này.

html 
<!DOCTYPE html>
<html>
<head>
    <style>
        .pagination {
            display: inline-block;
        }

        .center {
            text-align: center;
        }

        .pagination a {
            font-weight: bold;
            font-size: 20px;
            color: black;
            float: left;
            padding: 8px 16px;
            text-decoration: none;
            border: 1px solid black;
        }

        .pagination a.active {
            background-color: #009900;
        }

        .pagination a:hover:not(.active) {
            background-color: #d4d5d2;
        }

        .GFG {
            font-size: 42px;
            font-weight: bold;
            color: #009900;
            text-align: center;
            margin-bottom: 60px;
        }

        .peg {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 20px;
            text-align: center;
        }
    </style>
</head>

<body>

    <div class="GFG">GeeksforGeeks</div>
    <div class="peg">Centered Pagination</div>
    <div class="center">
        <div class="pagination">
            <a href="#">«</a>
            <a href="#">1</a>
            <a href="#">2</a>
            <a href="#">3</a>
            <a href="#">4</a>
            <a class="active" href="#">5</a>
            <a href="#">6</a>
            <a href="#">7</a>
            <a href="#">8</a>
            <a href="#">9</a>
            <a href="#">10</a>
            <a href="#">»</a>
        </div>
    </div>

</body>
</html>

Output: css-paginationSpace Between Pagination: Bạn có thể tạo khoảng cách giữa các liên kết trang nếu bạn không muốn nhóm chúng. Dùng thuộc tính margin để tạo khoảng cách giữa các liên kết.

Syntax:

.pagination body {
    color:colorname
    margin:type
}

Example: Ví dụ sau đây sẽ cho bạn thấy cách sử dụng CSS Pagination này.

html 
<!DOCTYPE html>
<html>
<head>
    <style>
        .pagination {
            display: inline-block;
        }

        .center {
            text-align: center;
        }

        .pagination a {
            font-weight: bold;
            font-size: 20px;
            color: black;
            float: left;
            margin: 0px 5px;
            padding: 8px 16px;
            text-decoration: none;
            border: 1px solid black;
        }

        .pagination a.active {
            background-color: #009900;
        }

        .pagination a:hover:not(.active) {
            background-color: #d4d5d2;
        }

        .GFG {
            font-size: 42px;
            font-weight: bold;
            color: #009900;
            text-align: center;
            margin-bottom: 60px;
        }

        .peg {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 20px;
            text-align: center;
        }
    </style>
</head>

<body>

    <div class="GFG">GeeksforGeeks</div>
    <div class="peg">Space Between Pagination</div>
    <div class="center">
        <div class="pagination">
            <a href="#">«</a>
            <a href="#">1</a>
            <a href="#">2</a>
            <a href="#">3</a>
            <a href="#">4</a>
            <a class="active" href="#">5</a>
            <a href="#">6</a>
            <a href="#">7</a>
            <a href="#">8</a>
            <a href="#">9</a>
            <a href="#">10</a>
            <a href="#">»</a>
        </div>
    </div>

</body>
</html>

Output: css-paginationPagination Size: Bạn có thể thay đổi kích thước phân trang bằng thuộc tính font-size.

Syntax:

.pagination body {
    color:colorname
    font-size:size
}

Example: Ví dụ sau đây sẽ cho bạn thấy cách sử dụng CSS Pagination này.

html 
<!DOCTYPE html>
<html>
<head>
    <style>
        .pagination {
            display: inline-block;
        }

        .center {
            text-align: center;
        }

        .pagination a {
            font-weight: bold;
            font-size: 25px;
            color: black;
            float: left;
            padding: 8px 16px;
            text-decoration: none;
            border: 1px solid black;
        }

        .pagination a.active {
            background-color: #009900;
        }

        .pagination a:hover:not(.active) {
            background-color: #d4d5d2;
        }

        .GFG {
            font-size: 42px;
            font-weight: bold;
            color: #009900;
            text-align: center;
            margin-bottom: 60px;
        }

        .peg {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 20px;
            text-align: center;
        }
    </style>
</head>

<body>

    <div class="GFG">GeeksforGeeks</div>
    <div class="peg">Pagination Size</div>
    <div class="center">
        <div class="pagination">
            <a href="#">«</a>
            <a href="#">1</a>
            <a href="#">2</a>
            <a href="#">3</a>
            <a href="#">4</a>
            <a class="active" href="#">5</a>
            <a href="#">6</a>
            <a href="#">7</a>
            <a href="#">8</a>
            <a href="#">9</a>
            <a href="#">10</a>
            <a href="#">»</a>
        </div>
    </div>

</body>
</html>

Output:

css-pagination


Last Updated : 21/07/2025