آموزش CSS پایه

مدل جعبه CSS

آموزش CSS3 پایه

دستورالعمل‌های CSS

قوانین CSS (RULES)

الرؤية CSS (الرؤية)

ویژگی Visibility تعیین می‌کند که یک عنصر قابل مشاهده است یا مخفی.

تعیین قابل مشاهده بودن عنصر

می‌توانید از ویژگی visibility برای تعیین اینکه یک عنصر قابل مشاهده است یا خیر، استفاده کنید. این ویژگی می‌تواند یکی از مقادیر زیر را از جدول زیر استفاده کند:

مقدار	توضیح
visible	مقدار پیش‌فرض. این جعبه و محتوای آن قابل مشاهده هستند.
hidden	این جعبه و محتوای آن قابل مشاهده نیست، اما تأثیری بر چیدمان صفحه دارد.
collapse	این مقدار باعث حذف کامل یک ردیف یا ستون از نمایش می‌شود. این مقدار برای عناصر ردیف، گروه ردیف، ستون و گروه ستون استفاده می‌شود.
inherit	مقدارهای ویژگی قابل مشاهده باید از عنصر والد ارث ببرند، یعنی از مقدار قابل مشاهده عناصر والد خود استفاده کنند.

visibility: collapse; اما، قوانین استایل عناصر جدول داخلی را حذف می‌کند، اما تأثیری بر چیدمان جدول ندارد. فضایی که عناصر جدول معمولاً اشغال می‌کنند، توسط پرکننده‌های هم‌ردیف بعدی پر می‌شود.

توجه داشته باشید:اگر visibility: collapse; برای سایر عناصر (نه عناصر جدول) قوانین استایل تعیین شده باشد، رفتار آن مانند hidden خواهد بود.

CSS Visibility vs Display

CSS display و ویژگی visibility به نظر می‌رسد که یک چیز هستند، اما در واقع کاملاً متفاوت هستند و اغلب باعث سردرگمی توسعه‌دهندگان وب تازه‌کار می‌شوند.

visibility: hidden; عنصر را مخفی کن، اما هنوز آن را در فضای چیدمان نگه می‌دارد. اگر قابل مشاهده بودن فرزندان جعبه مخفی به 'قابل مشاهده' تنظیم شده باشد، آن‌ها قابل مشاهده خواهند بود.
display: none; نمایش را ببند و این عنصر را به طور کامل از مستند حذف کن. حتی اگر HTML آن در کد منبع وجود دارد، هیچ فضایی اشغال نمی‌کند. حتی اگر نمایش همه فرزندان نیز به none تنظیم شده باشد، نمایش را ببند.

نحوه استفاده از ویژگی Visibility

Visibility ویژگی دارای چهار مقدار قابل استفاده (visible، hidden، collapse و inherit) است، اما مقدارهای معمول visible و hidden هستند.

visibility: visible
/* عنصر قابل مشاهده است، مقدار پیش‌فرض */
visibility: hidden
/* عنصر قابل مشاهده نیست، اما هنوز برای آن فضای مناسب نگه داشته می‌شود */
visibility: collapse
/* فقط برای شیء table موثر است، می‌تواند ردیف‌ها یا ستون‌ها را حذف کند اما تأثیری بر چیدمان جدول ندارد. اگر این مقدار برای شیء table خارجی استفاده شود، به صورت hidden ظاهر می‌شود. */
visibility: inherit
/* تنقلق من قيمة visibility للعنصر الأعلى. */

استخدام خصائص Display

هناك العديد من القيم المتاحة لخصائص Display، ولكن هنا نركز فقط على بعض القيم: block،none و inline

display: none
/* العنصر غير مرئي وليس هناك حاجة لحفظ مساحته في الصفحة */
display: block
/* يظهر كعنصر مكدس (عادةً يحتل سطرًا واحدًا) */
display: inline
/* يظهر كعنصر خطي (عادةً لا يحتل سطرًا واحدًا) */

من خلال ما سبق، يمكن ملاحظة أن كلاً من Visibility و Display يمكنهما إخفاء عنصر، ولكن الفرق بينهما يكمن في أن visibility: hidden يحافظ على مساحة العنصر المطلوبة على الصفحة عند إخفاء العنصر، بينما display: none يظهر وكأنه تم حذف العنصر من الصفحة ولا يمكن رؤيته.
إضافةً إلى ذلك، الفرق بين display: block و display: inline يكمن في أن العنصر block سيحتل سطرًا واحدًا في الصفحة، بينما العنصر inline لن يحتل سطرًا واحدًا، بعض العناصر تُعتبر عناصر block بشكل افتراضي، بينما تُعتبر بعض العناصر عناصر inline بشكل افتراضي، يجب الانتباه عند استخدامها لتجنب تكرار التعريفات ذات نفس الخصائص.

متى يجب استخدام خصائص Visibility أو Display

على الرغم من أن خصائص Visibility و Display يمكنها تحقيق الغرض من إخفاء عناصر الصفحة، إلا أن الفرق بينهما يكمن في كيفية استجابتها إلى تدفق الوثيقة العادي.
إذا كنت ترغب في إخفاء عنصر معين ولكن الحفاظ على مساحة العنصر في الصفحة، يجب عليك استخدام visibility: hidden. إذا كنت ترغب في إخفاء عنصر معين وملء الفراغات بالمواد الأخرى في نفس الوقت، يجب عليك استخدام display: none.

التصويب CSS (التصويب)عرض CSS (العرض)