با عرض سلام خدمت کاربران سایت پی وی لرن . در این پست آموزشی قصد داریم به آموزش حالات نمایش عناصر html در css بپردازیم. در css با استفاده از تنظیمات ویژگی display ، می توان چگونگی نمایش اندازه عناصر html را در مرورگر تعیین کرد. به عبارتی می توان تعیین کرد که اندازه پیش فرض یک عنصر مانند <div> ، به اندازه عرض پنجره مرورگر باشد . یا اینکه بر حسب اندازه محتوی آن عنصر، مشخص شود.
در مطالب قبلی، آموزشهایی در خصوص تعریف style متن عناصر html در css، با عناوین مدیریت متن عناصر html در css و تنظیمات فونت متن عناصر html در css ارائه گردیده است.
در ادامه به بررسی بحث حالات نمایش عناصر html در css ، می پردازیم.
ویژگی display در css ، برای مدیریت حالات نمایش عناصر html در css استفاده می شود .که دارای دو حالت block یا inline می باشد.
مقدار پیش فرض ویژگی display با مقدار block تنظیم شده است. در این حالت عرض عناصر html با عرض پنجره مرورگر تعیین می شود.
اما در حالت inline عرض عناصر html بر اساس عرض محتوی آن عنصر تعیین می شود.
یک عنصر سطح block همیشه در یک خط جدید شروع می شود. و عرض کامل پنجره را در بر می گیرد (تا آنجا که ممکن است به سمت چپ و راست پنجره برسد).
عناصری که دارای مقدار پیش فرض block هستند:
یک عنصر در حالت inline در خط جدیدی شروع نمی شود و عرض آن، تنها به اندازه لازم بزرگ می شود.(به اندازه محتوی داخل آن عنصر).
عناصری که حالت inline را دارند:
در حالت display: none;
عنصر نمایش داده نمی شود و به اصطلاح مخفی می شود.
این حالت بیشتر زمانی کارایی دارد که با کدهای جاوااسکریپت کنترل ویژگی display را در اختیار بگیرید.
در حالت پیش فرض عنصر <script>
از ویژگی display: none;
استفاده می کند.
همانطور که گفته شد، هر عنصر دارای یک مقدار نمایش پیش فرض است. با این حال، شما می توانید آن را تغییر دهید.
تغییر یک عنصر inline عنصر به یک عنصر block یا برعکس ، در روند طراحی وب بسیار کاربرد داشته و گاها اینکار ضروری است.
یک مثال از اعمال ویژگی inline روی عنصر <li> :
نکته: تنظیم خصوصیت display یک عنصر فقط نحوه ی نمایش آن را مشخص می کند، پس یک عنصر inline با خصوصیت display: block;
اجازه ی قرار گرفتن عناصر block را در داخل خود نمی دهد.
تنظیم ویژگی display در عنصر <span> :
تغییر مقدار ویژگی display در عنصر <a> :
اگر ویژگی display ی عنصر با none تنظیم شود آن عنصر مخفی شده و جایی را نیز اشغال نخواهد کرد:
با ویژگی visibility می توانید هر عنصر html را پنهان کنید. با این حال، عنصر همچنان همان فضای قبلی را خواهد داشت. این عنصر پنهان خواهد شد، اما هنوز روی طرح تاثیر می گذارد.
مثال:
خصوصیات display/visibility در CSS :
خصوصیت | توضیحات |
---|---|
display | چگونگی نمنایش یک عنصر HTML را در صفحه مشخص می کند. |
visibility | مشخص می کند که یک عنصر HTML قابل مشاده باشد یا خیر. |
هر یک از عناصر HTML دارای یک مقدار پیش فرض خصوصیت Display می باشند، که نحوه نمایش آن ها را در صفحه وب مشخص می کند، این یکی از مهم ترین و پرکاربردترین ویژگی ها در CSS است چراکه در روند طراحی وب بارها به تغییر مقادیر آن نیاز خواهی داشت، از این رو در این بخش سعی شده تا شما با حالات نمایش عناصر html در css و مقادیر خصوصیات display/visibility در CSS آشنا شوید
داریوش
سلام خسنه نباشد
تشکر از زحمات بی وقه شما در ارائه آمورش های کاربردی و مفید. استاد عزیز آیا در طراحی سایت های واقعی از تگ های html5 همچون و و استفاده میشه یا هنوزم از کلاس بندی تگ های و استایل دهی به اونا؟ و آیا فقط کاربرد اونارو بدونیم کافیه که در بوت استرپ قالب رو درست کنیم و یا اینکه در پروژه های بزرگ باید قالب رو از ۰ تا ۱۰۰ با کدنویسی نوشت؟
علی اصغری
سلام وقت سلامت باشین ممنون ، الان تمام وب سایت هایی که نوشته میشه بر اساس html5 هست و از تگ های مهم اون از جمله تگ های چندرسانه ای مثل video , audio و تگ های معنایی استفاده میشه ، مثلا برای بخش منو از تگ nav و بخش انتهای سایت از footer استفاده میشه این تگ ها برای مباحث سئوی سایت مهم هستن و بهتره استفاده بشن، بوت استرپ به تنهایی کافی نیست و در بیشتر مواقع حتما شما نیاز به تعریف کلاس برای تگ ها و تعریف استایل مورد نظر خواهی داشت، در پروژه های بزرگ بسته به نوع پروژه از بسیاری از کلاس های بوت استرپ استفاده میشه اما در هر پروژه به احتمال زیاد باید برای تگ های بوت استرپ کلاس و استایل مورد نظر رو تعریف کنین تا اون طرح مورد نظرتون ایجاد بشه.
ناشناس
سلام فرق None با ننوشتن یک عنصر چیه؟