تعلم لغة css: التحكم في تصميم اللوائح Lists
توجد العديد من قواعد css التي تم انشاءها للتحكم خصيصا في بعض عناصر html محددة، مثل اللوائح، الجداول، والإستمارات.
في هذا الدرس ستتعلم كيف يتم التحكم في لوائح html 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
الكود
none : عدم اظهار نقط اللائحة
disc : قرص
circle : دائرة
square : مربع
الكود
يتم وضع نقط اللوائح إلى الداخل أو الخارج:
في هذا الدرس ستتعلم كيف يتم التحكم في لوائح 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;}
لكل سؤال أو إضافة، يرجى كتابة تعليقك في الخانة اسفله