Ibrahem Smart

زيزوومى ذهبى
إنضم
30 يناير 2017
المشاركات
1,832
مستوى التفاعل
1,081
النقاط
1,050
الإقامة
الاسكندرية
غير متصل
165399


مرحبا إخوتي أعضاء منتديات زيزووم للأمن والحماية
اليوم سأشرح لكم في دورة تعلم لغة
CSS

Display
طريقة عرض العنصر

------------------------------------------------------------

خاصية Display بسيطة جدًا وليست في قمة الصعوبة التي تتخيلها، كل ما عليك فقط هو فهمها جيدًا وفهم عمل كل خواصها.
وتسمى خاصية
Display بهذا الاسم لانها تحدد لك طريقة عرض العنصر / العناصر وقد تخفيهم لك تمامًا.
قد تجد أن مفهومها صعبٌ أيضًا، لكن مع الأمثلة وكثر الأستخدام ستجد أن الخاصية بسيطة جدًا، وقبل أن نبدأ في الشرح يجب أن تعرف أن خاصية
Display تأخذ عديد من القيم في محرر Brackets.

1.webp


لكنك حاليًا ستتعلم عدد قليل من القيم والتي هي الأهم والأكثر استعمالاً وقد لا تستعمل باقي القيم عند تعرفك عليهم جيدًا، القيم التي سنحتاجها وسوف نتعلمها جيدًا هي ( inline & block & inline-block & none & table ) وتم تقسيم الخاصية لدرسين في الدرس الأول (الجزء الأول) سنتعلم قيمتين فقط وهم (inline & block) وأسف لعدم شرح كل القيم نظرًا لأنشغالي بظروف كثيرة.

block

نبدأ الشرح بقيمة block ومعناها ( جعل العناصر فوق بعضها & بشكل عمودي ) فمثلًا لدي 3 روابط هنا في الصفحة ولكنهم على سطر واحد فقط

2.webp


3.webp


عندما أعطي تاغ a الخاص بالروابط خاصية Display بقيمة بلوك block

4.webp


سيتغير شكل العرض من روابط على سطر واحد إلى روابط منفصلة بشكل عمودي

5.webp


لكن يوجد بعض التاغات في HTML تقوم بجعل طريقة عرضها بلوك بدون أي تدخل منك مثل الديف (div) وخواص أخرى يمكنك البحث عن العناصر البلوك في اللغة لمعرفة معلومات أكثر.

inline

أما القيمة الأخرى وهي قيمة inline وهي عكس قيمة block تمامًا فخاصية بلوك تجعل العناصر بشكل عمودي أما خاصية inline تجعل العناصر بشكل أفقي أي أن خاصية inline تجعل العناصر على سطر واحد وخاصية بلوك تجعلهم كل عنصر على سطر بمفرده.

واليكم مثال فمثلًا سأقوم بعمل 3 ديف كل ديف فيه نص

6.webp


فسيظهرون في الصفحة بشكل بلوك لأن خاصية ديف تعرض بلوك

لأقوم بتحويلهم من بلوك اللى انلاين سنقوم بإضافة لهم خاصية Display بقيمة inline

7.webp


فسنجد أن النصوص أصبحت على سطر واحد (انلاين)

8.webp


ويوجد أيضًا الكثير من التاغات تكون انلاين مثل الصور والروابط وقيم أخرى يمكنك أيضًا البحث عنها.

165400
 

توقيع : Ibrahem Smart
الله يبارك فيك اخي ابراهيم
على هذه الدورة القيمة
جزاكم الله خير الجزاء
استمر يالغالي

:222love:
 
توقيع : أبن الرافدينأبن الرافدين is verified member.
عودة
أعلى