More

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

" Here you can search for everything you want and you will find it as soon as possible "


تحدد خاصية الاظهار 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  فيلم الاكشن والفانتازيا Dracula Untold 2014 بجودة CAM


Show More
" Here you can search for everything you want and you will find it as soon as possible "

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