تصميم القوائم: نمط القائمة. قواعد CSS لتخصيص مظهر القائمة على صفحة html. خاصية نمط القائمة (النوع، الصورة، الموضع) أمثلة على تصميم القائمة الجميل

مرحبا عزيزي القراء لموقع بلوق. اليوم سيكون هناك مقال آخر في البنك الخنزير. وسوف يركز على التصميم باستخدام قواعد أوراق الأنماط المتتالية. كل شيء بسيط للغاية هنا، ولكن مع ذلك، قررت تخصيص منشور منفصل لهذا الموضوع.

قبل ذلك بقليل تمكنا بالفعل من معرفة كيف وكيف وكيف يمكنك العمل معها. حسنًا، لقد نظرنا سابقًا بالتفصيل في جميع الأنواع ومجموعاتها المختلفة للإشارة بالضبط إلى عنصر كود HTML الذي يجب تطبيق خصائص تصميم معينة عليه.

نمط القائمة - تصميم القوائم في كود HTML

لذلك، في لغة ترميز النمط، توجد ثلاث قواعد منفصلة تبدأ بنمط القائمة، والتي تعمل على التهيئة مظهرقوائم (مرقمة أو نقطية) في كود مستندات الويب. بالإضافة إلى ذلك، هناك قاعدة نمط قائمة CSS مسبقة الصنع، والتي تسمح لك بتقليل كمية التعليمات البرمجية قليلاً. ولكن أول الأشياء أولا.

ما سننظر فيه الآن يمكن استخدامه لعناصر Html LI وعناصر Ul وOl (قوائم نقطية ومرقمة، على التوالي). ما الفرق بين استخدام نمط القائمة لهذه العلامات؟

في الواقع، يمكنك معرفة ما إذا كانت الخاصية موروثة أم لا على موقع المدقق (اقرأ عنها على الرابط المقدم) في القسم المخصص لمواصفات أوراق الأنماط المتتالية. في العمود "الموروثة"، ستظهر "نعم" مقابل القواعد الموروثة:

دعنا نبدء ب نوع نمط القائمة، والذي يسمح لك بتعيين نوع العلامة للعناصر الفردية قائمة HTML. القيم التالية صالحة لهذه القاعدة:

1. لا شيء - لن يتم تنفيذ أي علامة على الإطلاق (نوع نمط القائمة: لا شيء؛ يتم تطبيقه على هذا العنصر وبالتالي لا يحتوي على علامة)
2. القرص عبارة عن دائرة مملوءة (نوع نمط القائمة: قرص؛ يُستخدم لهذا السطر)
3. الدائرة - دائرة كعلامة
4. مربع - مربع كعلامة
5. عشري - الأرقام العربية (نوع نمط القائمة: عشري؛)
6. ألفا السفلى - حالة صغيرة
7. ألفا العلوي - الحروف اللاتينية الكبيرة
8. Lower-roman — أرقام رومانية صغيرة
9. Upper-roman - أرقام رومانية بأحرف كبيرة

في رأيك، ما الذي تم استخدامه لإنشاء القائمة أعلاه مباشرةً، Ul أو Ol؟ سؤال مخادع. اتضح أن هذا لم يعد مهمًا، على الرغم من أنني استخدمت Ol في هذه الحالة بالذات، ولكن بتغييره إلى Ul، سيبقى المظهر كما هو، لأنه تم ضبطه لكل عنصر خاص به قيمة CSSقواعد نوع نمط القائمة.

في الواقع، يختلف Ul وOl فقط في سلوكهما الافتراضي (علامات Ul وأرقام Ol). ولكن إذا أردت، يمكنك بسهولة تحويل نمط قائمة إلى آخر باستخدام نوع نمط القائمة. الخط المستخدم لوضع علامات على الأرقام أو الحروف هو تمامًا نفس الخط الذي حددته لمحتوى علامات LI. على سبيل المثال، عن طريق تغيير لون الخط للقائمة سوف نقوم بتغيير و لون العلامة:

1. تم تغيير لون النص (نوع نمط القائمة: Lower-roman؛ اللون: أحمر) وتغيير لون العلامة

دعنا ننتقل إلى خاصية CSS التالية - موضع نمط القائمة. باستخدامه، يمكنك ضبط موضع (موضع) المنطقة باستخدام العلامة. هناك قيمتان محتملتان فقط لذلك:

أولئك. بشكل أساسي، في موضع نمط القائمة، نشير إلى المكان الذي يجب وضع المنطقة ذات العلامات فيه - خارج عنصر LI (في الخارج) أو داخله (في الداخل). بشكل افتراضي، يتم إخراج المنطقة التي تحتوي على العلامة خارج الحدود، أي. يتم استخدام القيمة خارج.

دعونا نرى هذا مع مثال. في العنصر الأول من القائمة، سأكتب على وجه التحديد list-style-position:inside وسنرى ما سيحدث:

1. كل شيء افتراضي هنا
2. هذا هو الشكل الذي سيبدو عليه وضع منطقة التحديد بالداخل. يرجى ملاحظة أن السطر الثاني في هذا العنصر والعلامة يقعان على نفس المستوى
3. كل شيء افتراضي هنا

قائمة نمط الصورة وقاعدة Css الجاهزة

بعد ذلك لدينا صورة نمط القائمة - تسمح لك بتحديد الصورة التي سيتم استخدامها كعلامة. يتم تعيين هذه القاعدة على لا شيء افتراضيًا (أي لا يتم استخدام أي صورة كعلامة)، ولكن يمكنك كتابة وظيفة Url() عن طريق تحديد المسار إلى الصورة، والتي ستعمل لاحقًا كعلامة في هذه القائمة:

قد يبدو مثل هذا:

صورة نمط القائمة: url(https://site/images/list_star.png);

1. كل شيء افتراضي هنا
2. هذا هو ما قد يبدو عليه استخدام الصورة كعلامة. من الواضح أنه يمكنك اختيار صورة أكثر ملاءمة لهذا الغرض.
3. على سبيل المثال، مثل هنا.

كما تتذكر، في المقال الذي قلت فيه أن الصور تنتمي إلى عناصر مضمنة (في الواقع، بالنسبة للمتصفح، هذا هو نفس الحرف، ولكن في بعض الأحيان كبير جدًا).

هنا تأخذ الصورة مكان العلامة (حروف أو أرقام). في هذه الحالة، سيتم زيادة ارتفاع السطر الذي يحتوي على عنصر القائمة إذا قمت بإدراج صورة كبيرة كعلامة (كما حدث في العنصر الثاني من المثال الموضح أعلاه).

في وظيفة صورة نمط القائمة، يمكنك تحديد كلتا الصورتين. إذا لم يتم تحميل الصورة، فسيتم استخدام العلامة الافتراضية أو الترقيم، أو ما هو محدد في نوع نمط القائمة لعنصر القائمة هذا.

لكتابة قواعد CSS الثلاث الموضحة أعلاه في قاعدة واحدة، يمكنك استخدام نمط القائمة، وهو نمط جاهز لتصميم القوائم. لا يهم الترتيب الذي يتم به تحديد القيم. سيتم تفسير تلك القيم التي لم تحددها في نمط القائمة بشكل صريح بواسطة المتصفح بالقيم الافتراضية.

أين يمكنني رؤية القيم الافتراضية؟ نعم، كل هذا موجود - في مواصفات CSS الخاصة بمدقق W3C في عمود "القيمة الأولية" مقابل الخصائص التي تهمك:

يتم فصل قيم الخصائص الفردية في قاعدة نمط القائمة الجاهزة بمسافات. الموقع، كما ذكرنا سابقًا، ليس مهمًا:

من الناحية العملية قد يبدو الأمر كما يلي:

نمط القائمة: داخل عنوان url الروماني العلوي (https://site/images/list_star.png)؛

يمكنك استخدام القيم بأي ترتيب وبأي رقم (بدءًا من واحد). بالمناسبة، يتم إنشاء القوائم في أغلب الأحيان على مواقع الويب باستخدام القوائم، ويتم استخدام خاصية نمط القائمة من أجل ذلك لإزالة العلامات من قوائم القائمة، وهي غير ضرورية على الإطلاق هناك:

نوع نمط القائمة: لا شيء؛

نمط القائمة: لا شيء؛

كل التوفيق لك! نراكم قريبا على صفحات موقع المدونة

أنت قد تكون مهتم

العرض (كتلة، لا شيء، مضمّن) في CSS - اضبط نوع عرض عناصر Html على صفحة الويب كيفية إعداد الدوران لون الخلفيةصفوف من الجداول والقوائم وعناصر Html الأخرى على الموقع باستخدام الفئة الزائفة nth-child
تعويم ومسح في CSS - أدوات تخطيط الكتلة
تحديد المواقع باستخدام Z-index وقاعدة CSS Cursor لتغيير مؤشر الماوس
الموضع (المطلق والنسبي والثابت) - طرق تحديد موضع عناصر Html في CSS (قواعد اليسار واليمين والأعلى والأسفل)
ما هو CSS وكيفية ربط أوراق الأنماط المتتالية بها وثيقة HTMLوبناء الجملة الأساسي لهذه اللغة
CSS خصائص زخرفة النص، محاذاة رأسية، محاذاة النص، مسافة بادئة للنص لتنسيق النص في HTML
قواعد الخط (الوزن والعائلة والحجم والنمط) وارتفاع الخط لتصميم الخطوط في CSS
الخلفية في CSS (اللون، الموضع، الصورة، التكرار، المرفق) - كل شيء لتعيين لون الخلفية أو صورة الخلفية لعناصر Html
CSS - ما هو وكيف تتصل أوراق الأنماط المتتالية كود HTMLباستخدام النمط والارتباط
الأولويات في Css وزيادتها بسبب المهم ودمج وتجميع المحددات وأنماط المستخدم والمؤلف

معلومات مختصرة

وصف

سمة تسمح لك بتحديد نمط العلامة وموضعها والصورة التي سيتم استخدامها كعلامة في نفس الوقت. لمزيد من التفاصيل حول الوسائط، راجع خصائص list-style-type وlist-style-position وlist-style-image لكل معلمة على حدة.

بناء الجملة

نمط القائمة: نوع نمط القائمة || موقف نمط القائمة || صورة نمط القائمة

الحجج

أي مجموعة من ثلاث قيم تحدد نمط العلامة، بأي ترتيب. يتم فصل القيم بمسافة. ليست هناك حاجة لأي من الوسيطتين، لذلك يمكن حذف القيم غير المستخدمة.

• أبجد هوز دولور الجلوس امات


• Consectetuer adipiscing النخبة


• Sed diem Nonummy nibh euismod


• Tincidunt ut lacreet dolore magna aliguam erat volutpat. من الحكمة أن نمارس الحد الأدنى من النشاط الذي نمارسه من أجل ullamcorper ولا نرغب في الحصول على أي شيء من أي شيء يترتب على ذلك.

وتظهر نتيجة هذا المثال في الشكل. 1.

أرز. 1. استخدام معلمة نمط القائمة

يضبط عنوان الصورة التي تعمل كعلامة قائمة. يتم توريث هذه الخاصية، لذلك بالنسبة لعناصر القائمة الفردية، يتم استخدام القيمة لا شيء لاستعادة العلامة.

معلومات مختصرة

بناء الجملة

صورة نمط القائمة: لا شيء | عنوان URL(<адрес>)

المواد من دليل لغات الويب

القيم المستخدمة

تتم قراءة/كتابة هذه الخاصية لجميع الكائنات باستثناء النمط الحالي (للقراءة فقط). القيمة الافتراضية هي لا أحد. يتم توريث سمة أوراق الأنماط المتتالية (CSS).

ملحوظات

ملكية listStyleImageينطبق على جميع العناصر التي هامِشو عرض:قائمة الاغراض.

عندما تكون الصورة متاحة، فإنها تحل محل صورة العلامة التي تم تعيينها listStyleType.

لإظهار صورة علامة القائمة للخاصية هامِشيجب ضبطه على الحد الأدنى 30 قرشاً.

أمثلة

توضح الأمثلة التالية استخدام الخاصية listStyleImageوالسمة صورة نمط القائمةلتعيين صورة علامة القائمة.

يستخدم المثال الأول المحدد مايوالسمة صورة نمط القائمة.

يستخدم المثال الثاني الخاصية listStyleImageلتغيير نمط العلامة عند وقوع حدث ما على الفأرة فوق.