CSS Lists
التحكم في شكل القوائم في لغة CSS
سوف تتعلم في هذا الدرس كيفية التحكم في شكل العلامات التي تظهر بجانب القوائم المرقمة والقوائم الغير مرقمة في لغة CSS.
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
CSS Lists
التحكم في شكل القوائم في لغة CSS
</>
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 list style type
خاصية list-style-type في لغة CSS
تُستخدم خاصية list-style-type لتغيير أشكال علامات الترقيم التي تظهر بجوار القوائم في لغة CSS.
CSS list-style-type syntax
طريقة كتابة خاصية list-style-type في لغة CSS.
list-style-type:value;
CSS list-style-type values
قم خاصية list-style-type في لغة CSS.
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 وعن طريق القيمة يمكن وضع مسار الصورة.
CSS List Style Image
تغيير شكل القائمة إلي صورة في لغة CSS.
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.
.a
{
list-style-position: outside;
}
.b
{
list-style-position: inside;
}
</>
CSS Remove List Style
إزالة علامات القوائم في لغة CSS
عن طريق خاصية list-style-type يمكن إخفاء bullet points العلامات الموجودة بجوار القوائم في لغة CSS.
CSS Remove List Style
ازالة العلامات من القوائم في لغة CSS.
ul
{
list-style-type: none;
margin: 0;
padding: 0;
}
</>
CSS List Shorthand
إختصار القوائم في لغة CSS
عن طريق خاصية list-style في لغة CSS يمكنك إختصار جميع خصائص القوائم في خاصية واحده وهي list-style وإضافة جميع القيم لها.
CSS List Shorthand
اختصار جميع خصائص القوائم في خاصية واحدة فقط في لغة CSS
ul
{
list-style: square inside url("/images/square.png");
}
قوائم
قائمة غير مرتبة
قائمة مرتبة
نمط أو شكل
نوع
خاصية
دائرة
مربع
أحرف رومانية كبيرة
قيمة
صورة
موقع / وضعية
نقاط مهمة
علامة
داخل
خارج
حذف
لاشئ
إختصار
خصائص
Cascading Style Sheets
صفحات الأنماط الانسيابية
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم البرمجة. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال البرمجة. مهمتنا ليست فقط تعليم البرمجة، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
