صفحه بندی CSS

صفحه بندی CSS به روش سازماندهی وب سایت ها در صفحات جداگانه و دادن شماره به آن ها اشاره دارد.

شروع با Pagination CSS

صفحه بندی CSS برای سایت های متشکل از چندین صفحه است. روند صفحه بندی با لیست پیوندها به تمام صفحات جداگانه آغاز می شود.

در مثال ، ما یک سبک ساده CSS ایجاد می کنیم:

.paginate {
    display: inline-block;
    padding: 2px;
    margin: 2px;
}

.paginate a {
    text-decoration: none;
    color: blue;
   float: left;
   padding: 10px 15px;
}

اولین نمونه های صفحه بندی CSS این مراحل را دنبال می کنند:

• بیشتر نمونه های صفحه بندی CSS پیوندها را ارائه می دهند و آن ها را در <div> می پیچند.
• پیوندها را با float تراز می کند.
• دکوراسیون متن را برای حذف خطوط زیر از پیوندها به هیچکدام تنظیم می کند.
• padding و حاشیه را اضافه می کند تا پیوندهای صفحه ای به نظر شسته و رفته نشان دهند.

فعال و قابل حمل

با استفاده از کلاس .active و انتخابگر: شناور می توانید صفحه ای را که در حال حاضر در آن هستید برجسته کنید.

در مثال صفحه بندی زیر ، hover و .active را به لیست پیوندهای خود اختصاص می دهیم:

.paginate a.active {
    background-color: lightblue;
    color: lightblue;
}

.paginate a:hover:not(.active) {
    background-color: lightgray;
}

گوشه های گرد

ما مثالهای صفحه بندی CSS زیر را با استفاده از ویژگی border-radius ایجاد می کنیم تا دکمه های گوشه های گرد را داشته باشیم.

شعاع مرز مقادیر را به عنوان شاخص های طول (pt ، px ، cm و غیره) یا درصد (٪) می پذیرد.

در مثال ، ما شعاع حاشیه را به روند صفحه بندی اضافه می کنیم:

.paginate a {
    border-radius: 10px;
}

.paginate a.active {
    border-radius: 10px;
}

اثر گذاری بر روی شناور

انتخابگر: شناور به ما امکان می دهد تا هنگامی که مکان نما ماوس بر روی آن قرار می گیرد ، حالت دهی یک عنصر را تغییر دهیم. با این حال ، تغییرات یک باره اتفاق می افتد.

خاصیت انتقال CSS به شما امکان می دهد سبک را تغییر دهید که به چه سرعت تغییر می کند.

ما در این مثال صفحه بندی CSS انتقال را به لیست خود اختصاص می دهیم تا انتقال سبک ها نرمتر شود:

.paginate a {
    transition: background-color .5s; 
}

افزودن مرزها

در مثال های صفحه بندی CSS زیر ، حاشیه هایی را به پیوندهای صفحه بندی شده اضافه می کنیم. حاشیه ها دکمه های پیوند را از یکدیگر جدا می کنند.

می توانید مرزهای CSS را با تعریف رنگ ها ، سبک ها و مقادیر عرض در داخل متن حاشیه ای سفارشی کنید.

در مثال ، ما حاشیه ها را به صفحه بندی خود اضافه می کنیم:

.paginate a {
    border: 2px solid green;
}

کد زیر نحوه ایجاد حاشیه های گرد با استفاده از خاصیت مرز-شعاع را نشان می دهد:

.paginate a:first-child {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

.paginate a:last-child {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

اضافه کردن فضای اطراف پیوندها

اگر می خواهید فضای اطراف هر پیوند صفحه را اضافه کنید ، از حاشیه استفاده کنید.

در مثال ، ما از ویژگی margin با دو مقدار تعریف شده استفاده می کنیم:

.paginate a {
    margin: 5px 10px;
}

تنظیم اندازه متن

به راحتی می توانید اندازه شماره صفحه خود را با CSS دستکاری کنید. ویژگی font-size بدون تغییر اندازه عنصر HTML ، اندازه متن را تغییر می دهد.

ما به اعداد موجود در این مثال لیست صفحه بندی CSS اندازه ویژه (22 پیکسل) اختصاص می دهیم:

.paginate a {
    font-size: 22px;
}

هم ترازی

می توانید لیست صفحه بندی را در سمت چپ ، راست یا مرکز صفحه قرار دهید.

برای تراز بندی صفحه بندی ، باید آن را در ظرفی مانند <div> و <span> و <p> یا موارد دیگر قرار دهید.

سپس ، باید متن-align را با یکی از مقادیر زیر اعمال کنید: چپ ، راست یا مرکز.

در مثال زیر ، صفحه بندی CSS را در مرکز خود قرار می دهیم:

.center {
    text-align: center;
}

Breadcrumbs در اصل نوعی صفحه بندی است. این برای نمایش یک مسیر پرونده در دسته ها است. برای ایجاد breadcrumbs ، باید این مراحل را دنبال کنید:

• صفحه بندی HTML را با ایجاد یک لیست غیر مرتب HTML انجام دهید (<ul>).
• لیست مرتب نشده را سبک کنید.
• برای حذف نشانگرها ، از ویژگی list-style استفاده می کنیم: none.
• اختصاص صفحه نمایش: به صورت درون خطی قرار بگیرید تا پیوندها در کنار هم قرار بگیرند.

در مثال ، صفحه بندی breadcrumbs را ایجاد می کنیم:

ul.bc {
    padding: 10px 15px;
    list-style: none;
    background-color: lightgreen;
}  	

ul.bc li {
    display: inline;
}

ul.bc li+li:before {
    padding: 10px;
    color: white;
    content: "/\00a0";
}

نکات مهم مثال های صفحه بندی CSS:

• صفحه بندی CSS برای سئو مهم است زیرا به موتورهای جستجو کمک می کند تا پست ها را فهرست بندی و رتبه بندی کنند.
• Bootstrap پیوندهای صفحه بندی مدل دار را ارائه می دهد که می توانید از آن ها استفاده کنید.

در دوره آموزش CSS بین المللی آکادمی دویکس به صورت رایگان ثبت نام کنید.