عالم التصميم والبرمجة عالم التصميم والبرمجة
random

آخر الأخبار

random
جاري التحميل ...

أساسيات لغة CSS | الدرس الخامس(الإتجاه وتنسيق القوائم)

                                        بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته

نبدأ بإذن الله تعالى الخصائص العامة في css بتحديد اتجاه الصفحة ، في السابق كنا نحدد ذلك داخل العلامة html بالخاصية dir التي تأخذ القيمة rtl أو ltr ، لغة css الجميلة أغنتنا عن ذلك بالخاصية direction .


الخاصية direction : تأخذ القيمة rtl بمعنى right to left من اليمين إلى اليسار عندما يتعلق الأمر بصفحة عربية مثلا ، أو القيمة ltr وهو الإتجاه الإفتراضي دون استخدام الخاصية ، يمكن وضعها للصفحة ككل أو أي عنصر.

 ليكن كود html التالي:


 وكود css التالي:


والنتيجة:


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

تنسيق القوائم

خاصية list-style : تكتب أيضا بطريقة أخرى list-style-type ، وتستخدم مع القوائم ul و ol للتحكم في شكل ظهورها .

ليكن مثلا كود html التالي:


وكود css التالي:


والنتيجة:


وكما ترى القوائم لا تظهر منقطة كما هو معتاد بشكل افتراضي ، بل ظهرت مربعات في القائمة الأولى ،  ودوائر في القائمة الثانية ، بينما ألغينا الخاصية تماما بالنسبة للقائمة الثالثة باستخدام القيمة none .

خاصية list-style-image : خاصية جميلة جدا تساعد في تحديد صورة صغيرة الأبعاد تظهر مكان النقط .

سنفعل ذلك مع المثال السابق عن طريق كود css التالي:

 طبعا الأيقونة موجودة مع ملف css في نفس المجلد ، والنتيجة :


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

عن الكاتب

Abdellah Yassine

التعليقات






اتصل بنا

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

جميع الحقوق محفوظة

عالم التصميم والبرمجة