جلسه ۱۸ : حالات نمایش عناصر ( Display ) در CSS

• جزئیات
• نوع مطلبآموزشی تصویری

مقدمه

با عرض سلام خدمت کاربران سایت پی وی لرن . در این پست آموزشی قصد داریم به آموزش حالات نمایش عناصر html در css بپردازیم. در  css با استفاده از تنظیمات ویژگی display ، می توان چگونگی نمایش اندازه عناصر html را در مرورگر تعیین کرد. به عبارتی می توان تعیین کرد که اندازه پیش فرض یک عنصر مانند <div> ، به اندازه عرض پنجره مرورگر باشد . یا اینکه بر حسب اندازه محتوی آن عنصر، مشخص شود.

در مطالب قبلی، آموزشهایی در خصوص تعریف style متن عناصر html در css، با عناوین مدیریت متن عناصر html در css و تنظیمات فونت متن عناصر html در css ارائه گردیده است.

در ادامه به بررسی بحث حالات نمایش عناصر html در css ، می پردازیم.

layout- حالات نمایش عناصر html در css

حالات نمایش عناصر html در css

ویژگی display در css ، برای مدیریت حالات نمایش عناصر html در css استفاده می شود .که دارای دو حالت block یا inline می باشد.

مقدار پیش فرض ویژگی display با مقدار block تنظیم شده است. در این حالت عرض عناصر html با عرض پنجره مرورگر تعیین می شود.

اما در حالت inline عرض عناصر html بر اساس عرض محتوی آن عنصر تعیین می شود.

حالت block

یک عنصر سطح block همیشه در یک خط جدید شروع می شود. و عرض کامل پنجره را در بر می گیرد (تا آنجا که ممکن است به سمت چپ و راست پنجره برسد).

عناصری که دارای مقدار پیش فرض block هستند:

• <div>
• <h1> – <h6>
• <p>
• <form>
• <header>
• <footer>
• <section>

حالت inline

یک عنصر در حالت inline در خط جدیدی شروع نمی شود و عرض آن، تنها به اندازه لازم  بزرگ می شود.(به اندازه محتوی داخل آن عنصر).

عناصری که حالت inline را دارند:

• <span>
• <a>
• <img>

حالت none

در حالت display: none; عنصر نمایش داده نمی شود و به اصطلاح مخفی می شود.

این حالت بیشتر زمانی کارایی دارد که با کدهای جاوااسکریپت کنترل ویژگی display را در اختیار بگیرید.

در حالت پیش فرض عنصر <script> از ویژگی display: none; استفاده می کند.

تغییر مقدار پیش فرض خصوصیت display در عناصر مختلف

همانطور که گفته شد، هر عنصر دارای یک مقدار نمایش پیش فرض است. با این حال، شما می توانید آن را تغییر دهید.

تغییر یک عنصر inline عنصر به یک عنصر block یا برعکس ، در روند طراحی وب بسیار کاربرد داشته و گاها اینکار ضروری است.

یک مثال از اعمال ویژگی inline روی عنصر <li> :

نکته: تنظیم خصوصیت display یک عنصر فقط نحوه ی نمایش آن را مشخص می کند، پس یک عنصر inline با خصوصیت display: block; اجازه ی قرار گرفتن عناصر block را در داخل خود نمی دهد.

تنظیم ویژگی display در عنصر <span> :

تغییر مقدار ویژگی display در عنصر <a> :

اگر ویژگی display ی عنصر با none تنظیم شود آن عنصر مخفی شده و جایی را نیز اشغال نخواهد کرد:

ویژگی visibility

با ویژگی  visibility  می توانید هر عنصر html را پنهان کنید. با این حال، عنصر همچنان همان فضای قبلی را خواهد داشت. این عنصر پنهان خواهد شد، اما هنوز روی طرح تاثیر می گذارد.

مثال:

خصوصیات display/visibility در CSS :

کلام آخر

هر یک از عناصر HTML دارای یک مقدار پیش فرض خصوصیت Display می باشند، که نحوه نمایش آن ها را در صفحه وب مشخص می کند، این یکی از مهم ترین و پرکاربردترین ویژگی ها در CSS است چراکه در روند طراحی وب بارها به تغییر  مقادیر آن نیاز خواهی داشت، از این رو در این بخش سعی شده تا شما با حالات نمایش عناصر html در css و مقادیر خصوصیات display/visibility در CSS آشنا شوید