CSS Lists
-
في هذا الدرس نتعرف على كيفية عمل List وبعدها بنتعرف كيف ممكن نغير النمط Style مثل المظهر appearance ،الموقع Position ، وكيف ممكن نضيف صورة بالإضافة الى التحكم في كثير من الخصائص مثل الحجم اللون، النمط وغيرها.
اناع list في CSS نوعين :
- List غير مرتبه unordered lists ونستخدم معها الامر <ul> ويتم عرضها على شكل نقاط bullets
- List مرتبه ordered lists ونستخدم معها الامر <ol> ويتم عرضها على شكل ارقام او أحرف.
تمام نعمل مثال حتى نفهم الموضوع بشكل أفضل:
نبدأ بإنشاء ملف HTML باسم Lists وبعدها نضيف الكود التالي:
<!DOCTYPE html>
<html>
<head>
<style>
ul.circle {
list-style-type: circle;
}
ul.square {
list-style-type: square;
}
ol.upper {
list-style-type: upper-roman;
}
ol.lower {
list-style-type: lower-alpha;
}
</style>
</head>
<body>
<h2>The list-style-type Property</h2>
<p>Example of unordered lists:(غير مرتبة)</p>
<ul class="circle">
<li>BMW</li>
<li>Mercedes</li>
<li>jaquar</li>
</ul>
<ul class="square">
<li>BMW</li>
<li>Mercedes</li>
<li>jaquar</li>
</ul>
<p>Example of ordered lists:(مرتبة)</p>
<ol class="upper">
<li>BMW</li>
<li>Mercedes</li>
<li>jaquar</li>
</ol>
<ol class="lower">
<li>BMW</li>
<li>Mercedes</li>
<li>jaquar</li>
</ol>
</body>
</html>
شغل الصفحة ونشوف النتيجة (الصورة)
طيب نفهم الكود:
عملنا List 2 من نوع unordered List و2 من النوع order List الكود التالي:
كود unordered List
<ul class="circle">
<li>BMW</li>
<li>Mercedes</li>
<li>jaquar</li>
</ul>
<ul class="square">
<li>BMW</li>
<li>Mercedes</li>
<li>jaquar</li>
</ul>
وقمنا بتطبيق CSS style عليها بنوعين، لاحظ اول list تم تطبيق class عليها باسم circle والثانية باسم square
كود ordered lists
<ol class="upper">
<li>BMW</li>
<li>Mercedes</li>
<li>jaquar</li>
</ol>
<ol class="lower">
<li>BMW</li>
<li>Mercedes</li>
<li>jaquar</li>
</ol>
وقمنت بتطبيق CSS style عليها بنوعين، لاحظ اول list تم تطبيق class عليها باسم upper والثانية باسم lower
طريقة الكتابة.
list-style: list-style-type list-style-position list-style-image;
تمام نتعرف على القيم المستخدمة Parameters or Arguments هنا
list-style-type
القيمة هنا تكون واحد من :
| القيمة | الوصف |
| disc | القيمة الافتراضية يتم تطبيق دائرة ممتلئة ul { list-style: disc; } |
| circle | دائرة مجوفة ul { list-style: circle; } |
| square | مربع مملوء ul { list-style: square; } |
| decimal | رقم صحيح يبدأ من 1 ol { list-style: decimal; } |
| decimal-leading-zero | ارقام صحيحه تبدأ بـ 1 ،بحيث يتم عرضها بشكل خانتين للأرقام الأقل من 10(01،02،03 ... الخ) ol { list-style: decimal-leading-zero; } |
| lower-roman | أرقام رومانية صغيرة ol { list-style: lower-roman; } |
| upper-roman | أرقام رومانية كبيرة ol { list-style: upper-roman; } |
| lower-greek | أحرف يونانية صغيرة ol { list-style: lower-greek; } |
| lower-alpha | أحرف ASCII صغيرة ol { list-style: lower-alpha; } |
| lower-latin | أحرف ASCII الصغيرة (غير مدعومة في IE7) ol { list-style: lower-latin; } |
| upper-alpha | أحرف ASCII الكبيرة ol { list-style: upper-alpha; } |
| upper-latin | أحرف ASCII الكبيرة (غير مدعومة في IE7) ol { list-style: upper-latin; } |
| Armenian | الترقيم الأرمني ol { list-style: armenian; } |
| georgian | الترقيم الجورجي ol { list-style: georgian; } |
| none | لن يتم تطبيق أي ترقيم او رمز ol { list-style: none; } ul { list-style: none; } |
طيب نطلب منك تطبيق هذه الخصائص وراسلنا في حال ما فهمت اشي او إذا عندك ملاحظة.
list-style-position
مكان الترميز والقيمة هنا تكون واحد من:
| القيمة | الوصف |
| inside | يتم وضع الرمز داخل principal block box ul { list-style: inside; } |
| outside | يتم وضع الرمز خارج principal block box(الوضع الافتراضي) ul { list-style: outside; } |
| القيمة | الوصف |
| url | مسار مكان الصورة ul { list-style: url("/images/circle.png"); } |
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-image: url('bellAlert.gif');
list-style-position: inside;
font-size: small;
}
ul li:before {
display: inline-block;
height: 10px;
width: 10px;
}
ul.img{
height: 5px;
width: 5px;
}
</style>
</head>
<body>
<h2>Apply image for list-style-image Property</h2>
<ul>
<li>BMW</li>
<li>Mercedes</li>
<li>jaquar</li>
</ul>
</body>
</html>
اترك تعليقك