انتقل إلى محتوى الدرس
ابدأ رحلتك
الدرس 65
دورة لغة CSS

التحكم في شكل القوائم في لغة CSSCSS Lists

سوف تتعلم في هذا الدرس كيفية التحكم في شكل العلامات التي تظهر بجانب القوائم المرقمة والقوائم الغير مرقمة في لغة CSS.

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

CSS Lists التحكم في شكل القوائم في لغة CSS

باستخدام HTML يمكنك اضافة ordered lists قوائم مرقمة أو unordered lists قوائم غير مرقمة في لغة CSS يمكن التحكم في تغيير من إلي unordered والعكس يمكن التحكم في شكل الترقيم ويمكن تحديد صورة تظهر بدلاً من الترقيم.


في لغة CSS يمكن تغيير شكل الترقيم إلي:

  • يمكن تغيير شكل ordered lists القوائم المرقمة الي شكل مختلف.
  • يمكن تغيير شكل unordered lists القوائم الغير مرقمة الي شكل مختلف.
  • يمكن تغيير العلامات إلي صور في القوائم ordered lists و unordered lists.
  • يمكن إضافة خلفيات للعناصر الداخلية للقوائم ordered lists و unordered lists..
  • يمكن إخفاء العلامات من القوائم ordered lists و unordered lists.

CSS unordered list

جرّب بنفسك

CSS ordered list

جرّب بنفسك

CSS list style type خاصية list-style-type في لغة CSS

تُستخدم خاصية list-style-type لتغيير أشكال علامات الترقيم التي تظهر بجوار القوائم في لغة CSS.

CSS list-style-type syntax

طريقة كتابة خاصية list-style-type في لغة CSS.

HTML 
list-style-type:value;

CSS list-style-type values

قم خاصية list-style-type في لغة CSS.

HTML 
list-style-type:disc|armenian|circle|cjk-ideographicdecimal|decimal-leading-zero|georgian|hebrew|hiragana|hiragana-iroha|katakana|katakana-iroha|lower-alpha|lower-greek|lower-latin|lower-roman|none|square|upper-alpha|upper-greek|upper-latin|upper-roman|initial|inherit;

CSS ordered list upper roman

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

Result

جرّب بنفسك

CSS ordered list lower alpha

تحويل اللستة المرقمة الي ترقيم أبجدي بحروف صغيرة في لغة CSS.

Result

جرّب بنفسك

CSS Unordered list square

تحويل اللستة الغير مرقمة الي ترقيم مربعات في لغة CSS.

Result

جرّب بنفسك

CSS Unordered list circle

تحويل اللستة الغير مرقمة الي ترقيم دائرية في لغة CSS.

Result

جرّب بنفسك

CSS Unordered and ordered lists style

تحويل والقائمة الغير مرقمة الي ترقيم ,والقائمة المرقمة الي غير مرقمة في لغة CSS.

Result

جرّب بنفسك

CSS List Style Image صور القوائم في لغة CSS

يمكن تغيير أو إضافة صورة للقوائم المرقمة أو الغير مرقمة في لغة CSS بواسطة خاصية list-style-image وعن طريق القيمة يمكن وضع مسار الصورة.

Result

جرّب بنفسك

CSS List Style Image

تغيير شكل القائمة إلي صورة في لغة CSS.

HTML 
ul {
  list-style-image: url('/images/square.png');
}
جرّب بنفسك

CSS list style position خاصية list-style-position في لغة CSS

يمكن تحديد  bullet points ترقيم القوائم داخلياً أو خارجياً في لغة CSS وذلك عن طريق خاصية list-style-position.


قيم  خاصية list-style-position:

  • inside داخل صندوق النصوص.
  • outside خارج صندوق النصوص.

CSS list style position

خاصية list-style-position في لغة CSS.

Result

جرّب بنفسك

CSS list style position

خاصية list-style-position في لغة CSS.

HTML 
.a
{
  list-style-position: outside;
}
.b
{
  list-style-position: inside;
}
جرّب بنفسك

CSS Remove List Style إزالة علامات القوائم في لغة CSS

عن طريق خاصية  list-style-type يمكن إخفاء bullet points العلامات الموجودة بجوار القوائم في لغة CSS.

Result

جرّب بنفسك

CSS Remove List Style

ازالة العلامات من القوائم في لغة CSS.

HTML 
ul
{
  list-style-type: none;
  margin: 0;
  padding: 0;
}
جرّب بنفسك

CSS List Shorthand إختصار القوائم في لغة CSS

عن طريق خاصية list-style في لغة CSS يمكنك إختصار جميع خصائص القوائم في خاصية واحده وهي list-style وإضافة جميع القيم لها.

Result

جرّب بنفسك

CSS List Shorthand

اختصار جميع خصائص القوائم في خاصية واحدة فقط في لغة CSS

HTML 
ul
{
  list-style: square inside url("/images/square.png");
}
جرّب بنفسك

مشاركة

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

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

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

المصطلحات20

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

0 / 20 مفهومةأول بطاقة، أول خطوة
01 Lists قوائم
للمراجعة
02 Unorder List قائمة غير مرتبة
للمراجعة
03 Orderd List قائمة مرتبة
للمراجعة
04 Style نمط أو شكل
للمراجعة
05 Type نوع
للمراجعة
06 Property خاصية
للمراجعة
07 Circle دائرة
للمراجعة
08 Square مربع
للمراجعة
09 Upper-Roman أحرف رومانية كبيرة
للمراجعة
10 Value قيمة
للمراجعة
11 Image صورة
للمراجعة
12 Position موقع / وضعية
للمراجعة
13 Bullet Points نقاط مهمة
للمراجعة
14 Marker علامة
للمراجعة
15 Inside داخل
للمراجعة
16 Outside خارج
للمراجعة
17 Remove حذف
للمراجعة
18 None لاشئ
للمراجعة
19 Shorthand إختصار
للمراجعة
20 Properties خصائص
للمراجعة

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

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

الاختصارات2

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

0 / 2 مفهومةأول بطاقة، أول خطوة
01 CSS CSS
Cascading Style Sheets
صفحات الأنماط الانسيابية
للمراجعة
02 HTML HTML
Hypertext Markup Language
لغة توصيف النص الفائق الخاصة ببناء صفحة الإنترنت<p><a href="https://www.closetag.com/tutorial/html/html-introduction">المزيد عن HTML</a></p>
للمراجعة

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

مساحة التحدي

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

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

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

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

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

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

يمكننا باستخدام ال CSS ان نتحكم في القائمة ونجعلها حروف ابجدية ؟

02

تستخدم الخاصية ................. في التحكم في شكل ترقيم القوائم ؟

____
03

هل نستطيع اضافة صورة كعلامة ترقيم للقوائم ؟

04

ماهي القيمة التي نستخدمها مع خاصية "list-style-position " والتي تمكننا من اضافة علامات الترقيم خارج صندوق النص ؟