دستور display در css

هدایت عباسی آموزش CSS

آمورش ویدئویی دستور display

آمورش ویدئویی دستور display همراه با ویژگی های آن شامل none و inline و block و inline-block می باشد. توضیحات کامل همراه با مثال.

چنانچه مشکلی در اجرای فیلم دارید از مرورگر فایرفاکس استفاده نمایید یا روی لینک زیر کلیک نمایید.

مشاهده یا دانلود فیلم بالا

در این بخش از آموزش css از تاپ سایت 98 به سراغ آموزش دستور display در css می رویم.ویژگی های inline و block و inline-block و none را با ذکر مثال بررسی می کنیم و تفاوت inline و inline-block و block را بررسی می کنیم .

کاربرد display در css

ابتدا به کاربرد display در css می پردازیم سپس با ذکر مثال با ویژگی های این دستور آشنا می شویم.

دستور یا ویژگی display نحوه نمایش عناصر را در صفحات html نشان می دهد.

اگر 3 تگ h1 را تایپ کنیم هر 3 زیر هم نمایش داده می شوند. این کار را دستور یا ویژگی display انجام می دهد و پیش فرض تگ h1 را مشخص می کند که باید در یک ردیف نمایش داده شود و از ویژگی block استفاده می کند.

اگر 3 تگ a را در کنار هم قرار دهید هر 3 تگ در کنار هم نمایش داده می شوند یعنی حالت پیش فرض نمایش آنها inline است.

نکته : اما نکته مهم این است که می توان با استفاده از css ، نحوه نمایش آنها را تغییر داد.

ویژگی inline دستور display

با ویژگی inline دستور display مشخص می کنیم که تگ html باید در کنار هم قرار بگیرد.

مثال

ما دو تگ h1 را در صفحه قرار می دهیم. کد را اجرا نمایید . مشاهده می کنید که تگ h1 زیر هم نمایش داده می شوند.

ما می خواهیم آنها در کنار هم نمایش داده شوند پس ویژگی inline را برای آنها تعیین می کنیم.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
h1{
display: inline;
}
</style>
</head>
<body>
<h1>TopSite98.com</h1>
<h1>TopSite98.com</h1>
</body>
</html>

خروجی مثال بالا نمایش تگ های h1 در کنار هم می باشد.

ویژگی block دستور display

با ویژگی block دستور display مشخص می کنیم که تگ html باید در زیر هم نمایش داده شوند.

مثال

ما دو تگ a را در صفحه قرار می دهیم. کد را اجرا کنید . مشاهده می کنید که لینک ها کنار هم نمایش داده می شوند.

ما می خواهیم آنها در زیر هم نمایش داده شوند پس ویژگی block را برای آنها تعیین می کنیم.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
a{
display: block;
}
</style>
</head>
<body>
<h1>TopSite98.com</h1>
<a href="https://topsite98.com/">TopSite98</a>
<a href="https://topsite98.com/">TopSite98</a>
</body>
</html>

همان طور که در خروجی مشاهده می کنید تگ های a زیر هم نمایش داده میشوند.

ویژگی none دستور display

برای عدم نمایش عنصر html می توانیم از ویژگی none دستور display استفاده کنیم.

در مثال زیر ما عنصر h1 را مخفی می کنیم.

مثال

در مثال زیر ما تگ h1 را مخفی کردیم.

گاهی نیاز است یک عنصر مخفی شود و با جی کوئری براحتی می توانیم آن را دوباره نمایش دهیم که با دستور show , hide در جی کوئری این کار را انجام می دهند.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
a{
display: none;
}
</style>
</head>
<body>
<h1>TopSite98.com</h1>
<a href="https://topsite98.com/">TopSite98</a>
<a href="https://topsite98.com/">TopSite98</a>
</body>
</html>

آموزش ادامه دارد ..

موفق باشید.

اگر به دنبال کار پاره وقت هستید با ما تماس بگیرید.

اگر سوال یا نظری دارید در بخش کامنت ها بنویسید.اگر موضوع خاصی مد نظر شماست که در سایت موجود نیست در بخش کامنت ها بنویسید