انواع القوائم في لغة HTML
هناك ثلاثة أنواع مختلفة من القوائم في HTML ولكل منها استخدامها :
- القائمة الغير مرتبة (Unordered list)- تُستخدم لإنشاء قائمة بالبنود ذات الصلة ، بدون ترتيب معين.
- القائمة المرتبة (Ordered list)- تُستخدم لإنشاء قائمة بالبنود ذات الصلة بترتيب معين.
- قائمة الوصف (Description list) - تستخدم لإنشاء قائمة بالمصطلحات وتفصيلاتها.
لمعرفة المزيد حول القوائم وكيفية إنشائها راجع دروس القوائم Lists في لغة HTML.
تنسيق القوائم بإستخدام لغة CSS
توفر لغة CSS العديد من الخصائص لتصميم وتنسيق القوائم غير المرتبة Unordered lists والقوائم المرتبة Ordered lists الأكثر استخدامًا. تسمح لنا خصائص القائمة في لغة CSS بما يلي:
- التحكم في شكل أو مظهر العلامة.
- تحديد صورة للعلامة بدلاً من النقطة أو الرقم.
- تحديد مسافة بين العلامة والنص في القائمة.
- تحديد ما إذا كانت العلامة ستظهر داخل أو خارج المربع الذي يحتوي على عناصر القائمة.
في هذا الدرس سوف نناقش الخصائص التي يمكن استخدامها لتصميم وتنسيق قوائم HTML.
تغيير شكل العلامة للقوائم css
بشكل افتراضي ، يتم ترقيم العناصر الموجودة في القائمة المرتبة بأرقام عربية (1 ، 2 ، 3 ، 4 ، وما إلى ذلك) ، بينما يتم تمييز العناصر في القائمة الغير مرتبة بعلامات دائرية •.
ولكن ، يمكنك تغيير نوع علامة القائمة الافتراضية هذه إلى أي نوع آخر مثل الأرقام الرومانية Roman Numerals ، والأحرف اللاتينية Latin Letters ، والدائرة Circle ، والمربع Square ، وما إلى ذلك باستخدام الخاصية list-style-type.
لنجرب المثال التالي لفهم كيفية عمل هذه الخاصية بشكل عملي:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>تغيير شكل العلامة للقوائم</title>
<style>
ul {
list-style-type: square;
}
ol {
list-style-type: upper-roman;
}
</style>
</head>
<body>
<h2>Unordered List</h2>
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ul>
<h2>Ordered List</h2>
<ol>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ol>
</body>
</html>
المخرجات
تغيير موضع العلامة للقوائم css
بشكل افتراضي ، يتم وضع علامات كل عناصر القائمة خارج مربعات العرض الخاصة بها.
ومع ذلك ، يمكنك أيضًا وضع هذه العلامات داخل مربعات عرض بنود القائمة باستخدام الخاصية list-style-position مع القيمة inside.
لنجرب المثال التالي لفهم كيفية عمل هذه الخاصية بشكل عملي:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>تغيير موضع العلامة للقوائم</title>
<style>
body{
font-size: 14px;
font-family: Arial,sans-serif;
}
ol li {
background: #ddd;
padding: 5px;
margin: 5px;
}
ol.in li {
list-style-position: inside;
}
ol.out li {
list-style-position: outside;
}
</style>
</head>
<body>
<h2>List Marker Position - Inside</h2>
<ol class="in">
<li>Fasten your seatbelt</li>
<li>Start the car's engine and take a closer look the instrument cluster for any warning sign</li>
<li>Look around carefully and go</li>
</ol>
<h2>List Marker Position - Outside</h2>
<ol class="out">
<li>Fasten your seatbelt</li>
<li>Start the car's engine and take a closer look the instrument cluster for any warning sign</li>
<li>Look around carefully and go</li>
</ol>
</body>
</html>
المخرجات
استخدام الصور كعلامات للقائمة
يمكننا أيضًا تحديد صورة كعلامة قائمة باستخدام الخاصية list-style-image.
المثال التالي سنقوم بتحديد صورة ذات خلفية شفافة من النوع PNG كعلامة قائمة لجميع البنود في القائمة الغير مرتبة. لنجربها ونرى كيفة عملها:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>استخدام الصور كعلامات للقائمة</title>
<style>
ul li {
list-style-image: url("saddam.png");
/*
ملف الصوره بنفس المجلد
*/
margin: 0px;
}
</style>
</head>
<body>
<h2>Using Image as Bullet Point</h2>
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ul>
</body>
</html>
المخرجات
في بعض الأحيان ، لا تعطي الخاصية list-style-image المخرجات المتوقعة. بدلاً من ذلك ، يمكنك استخدام الحل التالي للتحكم بشكل أفضل في جعل الصورة علامة للقائمة.
كحل بديل ، يمكننا أيضًا جعل الصور كعلامات للقائمة عبر الخاصية background-image في لغة CSS . أولاً ، قم بإزالة العلامات من القائمة عن طريق الخاصية list-style-type كما ذكرنا سابقا . ثم حدد صورة خلفية غير متكررة لبنود القائمة كما في المثال التالي :
يعرض المثال التالي الصورة كعلامات للقائمة وسيتم تطبيقها بالتساوي في جميع المتصفحات:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>استخدام الصور كعلامات للقائمة</title>
<style>
ul {
list-style-type: none;
}
ul li {
background-image: url("saddam.png");
/*
ملف الصوره بنفس المجلد
*/
background-position: 0px 3px;
background-repeat: no-repeat;
padding-left: 20px;
margin: 5px
}
</style>
</head>
<body>
<h1>Using Image as Bullet Point</h1>
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ul>
</body>
</html>
المخرجات
تحديد كافة خصائص القائمة مرة واحدة css
إن الخاصية list-style هي خاصية مختصرة لتحديد الخصائص الثلاث للقائمة list-style-type و list-style-image و list-style-position في مكان واحد.
في المثال التالي سنقوم بتحديد علامة لبنود القائمة المرتبة لتكون أرقام رومانية كبيرة تظهر داخل مربعات عرض بنود القائمة في حال لم تظهر الصورة المحددة :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>تحديد كافة خصائص القائمة مرة واحدة</title>
<style>
ul {
list-style: square inside url("images/checkmark.png");
background: #9ddfef;
}
ul li {
background: #ededed;
margin: 5px 0;
padding: 5px;
}
</style>
</head>
<body>
<h2>The <code>list-style</code> Shorthand Property</h2>
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ul>
</body>
</html>
المخرجات
عند استخدام الخاصية المختصرة list-style ، فإن ترتيب القيم هو:
list-style-type-
list-style-position -
list-style-image
لا يهم إذا كانت إحدى هذه القيم المذكورة مفقودة طالما أن الباقي في الترتيب الصحيح.
إنشاء قوائم التنقل Navigation Menus باستخدام القوائم
تُستخدم قوائم HTML بشكل متكرر لإنشاء شريط أو قائمة تنقل navigation bar أفقية تظهر عادةً أعلى موقع ويب. ولكن نظرًا لأن عناصر القائمة هي عناصر كتلة block elements ، لذا لعرضها في السطر ، نحتاج إلى استخدام الخاصية display من لغة CSS.
لنجرب المثال التالي لفهم كيفة انشاء شريط أو قائمة تنقل بشكل عملي:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>إنشاء قوائم التنقل باستخدام القوائم</title>
<style>
body{
font-size: 14px;
font-family: Arial,sans-serif;
}
ul {
padding: 0;
list-style: none;
background: #f2f2f2;
}
ul li {
display: inline-block;
}
ul li a {
display: block;
padding: 10px 25px;
color: #333;
text-decoration: none;
}
ul li a:hover {
color: #fff;
background: #939393;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<p><strong>Note:</strong> Place mouse pointer over the menu link to see the hover effect.</p>
</body>
المخرجات
سوف تتعرف على الخاصية display والخاصية padding بالتفصيل في الدروس القادمة.
| عنوان الدرس | التاريخ | الكورس |
| القوائم Lists في CSS | 2021-10-03 | css3 |
| الروابط Links في CSS | 2021-10-03 | css3 |
| النصوص Text في css | 2021-10-02 | css3 |
| الخطوط Fonts في css | 2021-10-02 | css3 |
| الخلفيات Background في css | 2021-10-02 | css3 |
| الألوان Colors في css | 2021-10-01 | css3 |
| المحددات Selectors في css | 2021-10-01 | css3 |
| بناء جملة CSS | 2021-10-01 | css3 |
| البداية مع CSS إضافة أنماط (Styles) إلى عناصر HTML | 2021-10-01 | css3 |
| دورة CSS المجانية من البداية حتى الإحتراف بالتطبيق العملي | 2021-09-30 | css3 |