CSS

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

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

التاريخ

12 نوفمبر 2020

الدروس

137

المستوى

مبتدئ

اللغة

انجليزي

المشاهدات

3365

المواضيع

24
الشروحات chevron_left CSS Lists chevron_left CSS
CSS Flex Box keyboard_arrow_down

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

جربها بنفسك chevron_right

يظهر الكود بهذا الشكل على المتصفح

CSS ordered list lower alpha

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

Result

جربها بنفسك chevron_right

يظهر الكود بهذا الشكل على المتصفح

CSS Unordered list square

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

Result

جربها بنفسك chevron_right

يظهر الكود بهذا الشكل على المتصفح

CSS Unordered list circle

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

Result

جربها بنفسك chevron_right

يظهر الكود بهذا الشكل على المتصفح

CSS Unordered and ordered lists style

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

Result

جربها بنفسك chevron_right

يظهر الكود بهذا الشكل على المتصفح

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

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

Result

جربها بنفسك chevron_right

يظهر الكود بهذا الشكل على المتصفح

CSS List Style Image

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

ul {
  list-style-image: url('/images/square.png');
}
يجب ان يكون حجم الصورة متناسق مع حجم خط ال List وفي هذا المثال الصورة 9x9 بكسل

</> 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

جربها بنفسك chevron_right

يظهر الكود بهذا الشكل على المتصفح

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.

Result

جربها بنفسك chevron_right

يظهر الكود بهذا الشكل على المتصفح

CSS Remove List Style

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

ul
{
  list-style-type: none;
  margin: 0;
  padding: 0;
}

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

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

Result

جربها بنفسك chevron_right

يظهر الكود بهذا الشكل على المتصفح

CSS List Shorthand

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

ul
{
  list-style: square inside url("/images/square.png");
}
مصطلحات الدرس
Lists
Lists

قوائم

Unorder List
Unorder List

قائمة غير مرتبة

Orderd List
Orderd List

قائمة مرتبة

Style
Style

نمط أو شكل

Type
Type

نوع

Property
Property

خاصية

Circle
Circle

دائرة

Square
Square

مربع

Upper-Roman
Upper-Roman

أحرف رومانية كبيرة

Value
Value

قيمة

Image
Image

صورة

Position
Position

موقع / وضعية

Bullet Points
Bullet Points

نقاط مهمة

Marker
Marker

علامة

Inside
Inside

داخل

Outside
Outside

خارج

Remove
Remove

حذف

None
None

لاشئ

Shorthand
Shorthand

إختصار

Properties
Properties

خصائص

اختصارات الدرس
CSS
CSS

Cascading Style Sheets

صفحات الأنماط الانسيابية
HTML
HTML

Hypertext Markup Language

لغة توصيف النص الفائق الخاصة ببناء صفحة الإنترنت
link
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات

لديك استفسار ؟

يسعدنا كثيرا مساعدتك في استيعاب افضل للأمور, فلا تترد مطلقا في الاتصال بنا في حال كانت لديك اية اسئله او استفسارات.