More

[ دورة CSS ] الدروس المتقدمة CSS – الدرس الثالث – الإظهار والإخفاء

What do you think of this post?
  • Bad ()
  • Boring ()
  • Useful ()
  • Interesting ()
  • Awesome ()

تحدد خاصية الاظهار display فيما اذا أو كيف يجب على العنصر الظهور
بينما تحدد خاصية الاخفاء visibility فيما اذا كان العنصر ظاهر visible أو
مخفي hidden

شاهد المثال

إخفاء عنصر باستخدام خاصيات display:none أو visibility:hidden

لإخفاء عنصر معين , يمكنك تخصيص ذلك من خلال ضبط خاصية الاظهار display :
لا “none” أو ضبط خاصية المرئي visibility : مخفي “hidden” ولكن هذه
الطريقتين تعطي نتائج مختلفة


تخفي خاصية visibility:hidden العنصر ولكن تحتفظ بنفس المساحة بالتصميم
كما لو أنه لم يتم اخفائه . سيتم اخفاء العنصر ولكنه سيبقى مأثراً بتصميم
الشكل .

مثال

h1.hidden {visibility:hidden;}

أما خاصية display:none فإنها تخفي العنصر بشكل كامل مع خفي مساحته التي
كان يشغلها في التصميم أي عند خفي العنصر بهذه الخاصية سيختفي تماماً من
الصفحة بدون وجود أي أثر له

h1.hidden {display:none;}

إظهار العناصر على شكل كتل block أو بنفس الخط inline

ان العناصر على شكل كتل هي عبارة عن عناصر تأخذ العرض الكلي بالاضافة الى سطر اضافي قبله وبعده

مثال على عناصر كتلية block

  • <h1>

  • <p>

  • <div>

بينما العناصر التي تكون بنفس الخط هي عبارة عن عناصر لها عرض معين ولاتحتوي على سطر اضافي

مثال عن عناصر في نفس الخط

  • <span>

  • <a>

تغيير ظهور العناصر

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

في المثال التالي تظهر عناصر القائمة بسطر واحد

li {display:inline;}

في المثال التالي يظهر كيف سيتم عرض العنصر span كمجموعات block

span {display:block;}

ملاحظة: ان تغيير نوع ظهور العنصر يعني تغيير شكل العنصر فقط بغض النظر عن نوع هذا العنصر

You may also like  [ دورة CSS ] الدروس المتقدمة CSS - الدرس السادس - التأثيرات الخاصة Pseudo-classes
What do you think of this post?
  • Bad ()
  • Boring ()
  • Useful ()
  • Interesting ()
  • Awesome ()


Tags
Show More

Scorpion

Welcome To The Biggest Site For Android Games And Apps You Can Find New Modded Games And Game Cheat & CrossFire Hacks You Can Find Daily Update Only Here Don't Forget To Like Page in Facebook And Subscribe To Blog

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Adblock Detected

Please consider supporting us by disabling your ad blocker
Inline
Inline