تعلم لغة css: التحكم في تصميم اللوائح Lists

توجد العديد من قواعد css التي تم انشاءها للتحكم خصيصا في بعض عناصر html محددة، مثل اللوائح، الجداول، والإستمارات.
في هذا الدرس ستتعلم كيف يتم التحكم في لوائح html lists ب:

تحدد نوع النقط أو الأرقام الذي تظهر بجانب اللوائح.

شكل نقط اللوائح

اللوائح الترتيبية Ordered Lists

يمكن اظهارها بهذه الخيارات:
decimal
1 2 3
decimal-leading-zero
01 02 03
lower-alpha
a b c
upper-alpha
A B C
lower-roman
i. ii. iii.
upper-roman
I II III

الكود

ol {

list-style-type: lower-roman;}

اللوائح الغير ترتيبية Unordered Lists

يمكن استعمال هذه القيم:

none : عدم اظهار نقط اللائحة
disc : قرص
circle : دائرة
square : مربع

الكود

ul {

list-style-type: square;}

استعمال صورة

يمكن استعمال الصورة عوض النقط أو الأرقام كما رأينا أعلاه كما يلي:

ul {

list-style-image: url("images/star.png");}

li {

margin: 10px 0px 0px 0px;}

وضعية النقط Bullets Positions

داخلية أو خارجية

يتم وضع نقط اللوائح إلى الداخل أو الخارج:

ul {

width: 150px;}

li {

margin: 10px;}

ul.illuminations {

list-style-position: outside;}

ul.season {

list-style-position: inside;}