انتقل إلى محتوى الدرس
الدرس 119
دورة لغة CSS

ترقيم الصفحات بلغة CSSCSS Pagination

سوف تتعلم في هذا الدرس عمل أزرار ترقيم الصفحات للتنقل داخل صفحة الويب لصفحات أخري إذا كانت الصفحة الحالية تعرض جزء من البيانات وباقي البيانات موزع علي صفحات أخري  بلغة CSS.

أقسام الدرس
6
الأمثلة
5
اللغة
العربية
تاريخ النشر
غير محدد
المشاهدات
4,270
محتوى الدرس
في هذا الدرس 6تصفّح المواضيع

CSS Pagination ترقيم الصفحات بلغة CSS

ترقيم الصفحات في لغة CSS هو عبارة عن زر أو مجموعة أزرار تكون أسفل كل الصفحات التي تعرض فيها البينات بشكل جزئي وتستخدم في عرض باقي البيانات في صفحات منفصلة وعادة ما يكون في نهاية الصفحات.

CSS create pagination إنشاء تعدد الصفحات في لغة CSS

يتم عمل ترقيم الصفحات بلغة CSS عن طريق عنصر <a> ثم إضافة له بعض التأثيرات مثل اللون والحجم والإطار وإضافة سهمين سهم أخر صفحة وسهم أول صفحة.

CSS create pagination

HTML
.pagination a
{
  color: black;
  float: left;
  padding: 10px 20px;
  text-decoration: none;
}

CSS active current page تفعيل الصفحة الحالية بلون مختلف في لغة CSS

إضافة كلاس active بلون مختلف لتمييز الصفحة الحالية في ترقيم الصفحات وتغيير اللون والخلفية في لغة CSS.

CSS active current page

إضافة كلاس active لتمييز الصفحة الحالية بلون مختلف في لغة CSS.

HTML
.active
{
  background-color:#007bff;
  color:white !important;
}

CSS rounded current page

عمل تدوير للإطار للصفحة الحالية في لغة CSS.

CSS bordered pagination عمل ترقيم الصفحات بإطارات في لغة CSS

إضافة إطار للترقيم عن طريق خاصية border في لغة CSS لتحديد الروابط ولكي تعطي مظهراً جذاباً.

CSS bordered pagination

عمل ترقيم الصفحات بإطارات في لغة CSS.

HTML
.pagination a
{
  color: black;
  float: left;
  padding: 10px 20px;
  text-decoration: none;
  border:black solid 1px;
}

CSS Centered Pagination توسيط ترقيم الصفحات في لغة CSS

توسيط ترقيم الصفحات في غلة CSS عن طريق إضافة pagination داخل div ثم إضافة خاصية text-align:center لأن pagination لا يمكن توسيطها لأن لها float:left.

CSS Centered Pagination

CSS Centered Pagination

توسيط ترقيم الصفحات في لغة CSS.

HTML
.center {
  text-align: center;
}

CSS Breadcrumbs تنقل للصفحات المتفرعة في لغة CSS

عمل شريط تنقل صفحات متفرعة من صفحات أخري في لغة CSS.

CSS Breadcrumbs

HTML
ul.breadcrumb 
{
  padding: 8px 16px;
  list-style: none;
  background-color: #eee;
}

مشاركة

هل كان هذا الدرس مفيدًا؟

جارٍ تحميل الآراء…

ابنِ لغتك البرمجية

المصطلحات10

راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.

0 / 10 مفهومةأول بطاقة، أول خطوة
01 Pagination ترقيم الصفحات
للمراجعة
02 Simple بسيط
للمراجعة
03 Active نشط / فعال
للمراجعة
04 Hoverable قابل للتحويم
للمراجعة
05 Class فئة
للمراجعة
06 Hover يحوم
للمراجعة
07 Border حد
للمراجعة
08 Center في المنتصف
للمراجعة
09 Text-Align محاذاة النص
للمراجعة
10 Breadcrumbs شكل قطع الخبز
للمراجعة

اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.

حروف قليلة. معنى كامل.

الاختصارات1

راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.

0 / 1 مفهومةأول بطاقة، أول خطوة
01 CSS CSS
Cascading Style Sheets
صفحات الأنماط الانسيابية
للمراجعة

اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.

مساحة التحدي

اختبر فهمك.
ووصلها للإتقان.

كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.

2أسئلة 1أنواع تحديات 100%هدف الإتقان
تصحيح تلقائي. فرص بلا حدود.

أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.

الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.

لمحة عن التحدي2 أسئلة تنتظرك
01

ال pagination هو ؟

02

يستخدم ال class ............ في تحديد الصفحة الحالية في pagination