ویژگی display در CSS : آموزش خاصیت display در CSS + کاربردها

شغل:طراحی وب

درآمد:۱۳۰ هزار دلار سالانه

مکان:هر کشوری دوست داری

مسیر: ۷ دوره آموزشی

منتور ۲ :جلسه آنلاین با استاد

منتور ۱ : کافه گپ و گفت

بزن بریم

در این مطلب از آموزش html و css می خواهیم به معرفی ویژگی display در CSS بپردازیم. برخی تگ ها در html به صورت اینلاینی و برخی بلاکی هستند. شما به کمک کدها و ویژگی های css می توانید استایل تگ های خود را تغییر دهید. بنابراین لازم است که با کاربرد و نحوه کدنویسی ویژگی display در CSS آشنا شوید. بنابراین تا انتهای مطلب با ما همراه باشید تا تسلط کافی نسبت به این موضوع پیدا کنید.

آنچه در این مقاله می آموزید:

ویژگی display در CSS چیست؟

با استفاده از ویژگی display در CSS می توان حالت یا نحوه نمایش یک تگ را مشخص کرد. مثلا می توانید تعریف کنید که یک تگ به صورت بلاکی (Block) نمایش داده شود یا به صورت اینلاینی (Inline). هر یک از تگ های HTML یک حالت نمایش دارند، مثلا تگ P حالت نمایشش بصورت بلاکی یا Block می باشد، این یعنی تمام عرض سطر را به خودشان اختصاص می دهند.

در مقابل تگ هایی هستند که حالت نمایششان بصورت درون خطی می باشد، مثل تگ a و b و span. ( این ها در یک سطر کنار همدیگر قرار می گیرند و فقط به اندازه خودشان فضا اشغال میکنند.)حال شما به راحتی با استفاده از ویژگی display در CSS می توانید حالت نمایش یک تگ را به دلخواه خودتان در صورت نیاز تغییر دهید. به عنوان مثال می توانید حالت نمایش تگ P که بلاکی هست را به اینلاینی یا Inline تغییر دهید.

کاربرد خاصیت display در CSS

همانطور که گفته شد، با استفاده از ویژگی display در css شما می توانید رفتار پیش فرض عناصر را تغییر دهید. مثلا رفتار یک عنصر inline را به block و برعکس تبدیل کنید.

انواع display در css

قبل از بیان هر چیزی از ویژگی display در CSS در مورد انواع display در css صحبت می کنیم. شما متناسب با فعالیتی که در صفحات وب انجام خواهید داد، در حال فعلی و در html5 می توانید از display های زیر در css استفاده کنید:

display none
display inline
display block
display inline-block
display list-item
display run-in
display flex
display inline-flex
display flexbox
display inline-flexbox
display grid
display inline-grid
display table
display inline-table
display ruby

ویژگی display none

همانطور که در ابتدا گفته شد دستور display برای مدیریت شیوه نمایش تگ های html استفاده می شود. حال اگر مقدار ویژگی display در css برای یک تگ برابر با مقدار none یعنی هیچ باشد، عملا نمایش تگ مورد نظر را محدود کرده اید (نمایش داده نمی شود). توجه داشته باشید که این کار تگ را از DOM حذف نمی کند، اما اثری از عنصر در صفحه باقی نگذاشته و فضایی که گرفته بود کاملا خالی می شود و عناصر مجاور جای آن را پر می کنند. زمانی که عنصر حذف شود تمام فرزندان آن (عناصر داخل) نیز حذف خواهند شد.

نکته مهم در سئو : دقت کنید که وقتی عنصری را با این روش حذف کرده یا نمایش آن را محدود می کنید، ربات های موتورهای جستجو به آن عنصر دسترسی نخواهند داشت.

ویژگی display block

در ویژگی display در CSS تگ هایی با ویژگی پیش فرض display block را تگ های بلاکی می گویند. این تگ ها به واسطه داشتن ویژگی display block یک سطر کامل از وب سایت را به خود اختصاص می دهند. به عبارتی بر خلاف عناصر inline که فقط به اندازی فضای خود تگ، فضا اشغال می کنند، عناصری با ویژگی display block کل فضای افقی را می گیرند. مثلا تگ nav و تگ header از تگ های بلاکی هستند.

تگ های بلاکی برخلاف عناصر اینلاین می توانند هر نوع عنصر بلاکی و اینلاین را درون خود داشته باشند. که در مثال زیر و مثال های بعدی به آن پرداخته شده است. در مثال زیر تگ p که یک تگ با display block است داری متن خارجی و با background آبی می باشد. همچنین این تگ حاوی یک تگ i (تگ inline) با background قرمز است.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
background: black;
color: white;
}
i{
background: red;
}
p{
background: blue;
}

</style>
</head>
<body>
<p>Hi Aryatehran. I am <i>i tag</i> and my background is red.</p>
</body>
</html>

همانطور که در تصویر می بینید، از آنجا که تگ p دارای ویژگی display در css با مقدار block است، یک سطر کامل را به خود اختصاص داده که با رنگ آبی نمایش داده شده است. و تگ i که دارای display با مقداری inline است با رنگ قرمز فقط میزان فضایی که تگ نیاز دارد را اشغال کرده است.

از دیگر تگ های مهم با display block می توان به تگ div، تگ p، تگ section و…. اشاره کرد.

ویژگی display inline

در ویژگی display در CSS اگر عنصری دارای ویژگی display inline باشد زمانی که در ادامه یک خط و یا یک سطر قرار می گیرد، آن سطر یا خط شکسته نشده و عنصر به خط بعدی نخواهد رفت. در واقع تگ هایی که inline هستند، خطی بوده و به اندازه فضای مورد نیاز خودشان فضا اشغال می کنند. برعکس تگ های بلاکی که یک سطر کامل را به خود اختصاص می دهند، حتی اینکه به اندازه یک سطر فضا احتیاج نداشته باشند. تگ em، تگ span و… از این نوع تگ ها هستند که ویژگی display در css آنها inline است.

برای مثال در کد زیر کلمات «من تگ اسپن هستم» و «من تگ تاکیدی هستم» در تگ span و تگ em قرار داشته و اگر این کدها در صفحه وب قرار داشته باشند باعث شکستن خط نمی شوند. همین رفتار در مورد تصویری که در تگ img قرار داده می شود نیز صادق شده است. البته در کد زیر تگ p دارای خاصیت display block بوده که می تواند تگ های با خاصیت display inline را در خود جای دهد.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
span{
background: blue;
}
em{
background: red;
}
</style>
</head>
<body>
<p>Hi Aryatehran. I am <span>span tag</span> and my background is blue. I am <em>em tag </em> and my background is red</p>
</body>
</html>
</html>

چیزی که در مورد تگ های با display inline مهم است، این است که شما می توانید به این عناصر margin و یا padding اختصاص دهید و بر خلاف تگ های با display block نمی توانید از ویژگی های width و height استفاده کنید. به همین علت زمانی که برای این تگ ها ویژگی padding و margin اختصاص می دهید عناصر مجاورشان را در راستای افقی هول می دهند، اما در راستای عمودی تاثیری بر روی آنها ندارند. در کد زیر متن مشخص شده عنصر span است که از همه جهت padding و margin گرفته است.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
background: black;
color: white;
}
span{
background: blue;
padding: 20px;
margin: 20px;
}

</style>
</head>
<body>
<p>Hi Aryatehran. I am <span>span tag</span> and my background is blue. I am inline tag</p>
</body>
</html>

البته برای حل این مشکل، درصورتی که بخواهید از ویژگی inline بودن و همچنین عرض و ارتفاع گرفتن برای یک تگ استفاده کنید، می بایست ویژگی display در css آن را inline-block قرار دهید.

ویژگی display inline-block

در ویژگی display در CSS ویژگی inline-block کاملا شبیه به ویژگی inline است با این تفاوت که تگ دارای این ویژگی مثل تگ دارای ویژگی block می تواند مقادیر عرض و ارتفاع بگیرد. همچنین margin و padding تگ دارای ویژگی display inline-block بر روی عناصر مجاور آن در هر دو راستای عمودی و افقی تاثیر گذار خواهد بود. تگ img یک تگ با display اینلاین بلاک است. در کد زیر تگ a که یک تگ inline است به کمک ویژگی display در css به چهارچوب inline-block تغییر پیدا کرده است تا بتوان margin و padding دریافت کرده و به شکل زیر زیبا نمایش داده شود.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
background-color: #1b1b1b;
color: #fff;
direction: rtl;
}
nav {
margin-top: 3em;
text-align: center;
}

a {
display: inline-block;
margin: 0 .5em;
padding: 1em;
background-color: #fff;
color: #1b1b1b;
font-size: 1.3em;
text-decoration: none;
}

</style>
</head>
<body>
<nav>
<a href="">html</a>
<a href="">css</a>
<a href="">javascript</a>
<a href="">php</a>
</nav>
</body>
</html>

ویژگی display flex

در ویژگی display در CSS به کمک دستور display flex در CSS رفتار عنصر یا تگ تبدیل به inline می شود. به وسیله این ویژگی آیتم ها یا تگ های html درون یک تگ container پدری (مثل تگ div) بر اساس مدل Flexbox در کنار هم قرار می گیرند. به عبارتی دیگر با استفاده از خصوصیت flex می توانید آیتم های درونی عنصر کانتینر را در یک عرض و ارتفاع تعریف شده، ستون بندی و صفحه آرایی کنید.

توجه داشته باشید که در صورتیکه تگ ها یا آیتم های درون تگ container، صفت display در آنها برابر مقدار flex تعیین نشده باشد، خصوصیت flex نیز بی تاثیر خواهد بود. به عبارت دیگر آیتم های درونی در این حالت از صفحه آرایی فلکس باکس بهره مند نخواهند شد. به کد زیر دقت کنید:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
background-color: #1b1b1b;
color: #fff;
direction: rtl;
}
.divbox{
display:flex;
justify-content: center;
}

.divbox div{
width:100px;
height:100px;
margin:10px;
}

.Square1{
background-color:red;
}

.Square2{
background-color:green;
}

.Square3{
background-color:blue;
}

.Square4{
background-color:orange;
}
}

</style>
</head>
<body>
<div class="divbox">
<div class="Square1"></div>
<div class="Square2"></div>
<div class="Square3"></div>
<div class="Square4"></div>
</div>
</body>
</html>

همانطور که در کد و تصویر زیر می بینید، شما ۴ تگ div دارید که به صورت تو در تو داخل یه تگ div پدر جا داده شده اند. شما با اختصاص دادن display: flex به تگ div پدر یا والد، طبقه بندی flexbox را به شکل بالا برقرار کرده اید (البته از ویژگی justify-content: center برای وسط چین کردن استفاده شد).

با استفاده از این دستور عناصر داخلی، برخلاف block بودنشان، inline رفتار کرده و در راستای یک خط یا row قرار گرفته اند. بنابراین اولین تاثیر display: flex، این است که عناصر داخلی یک کانتینر را هر چه که باشند، در راستای یک خط مرتب می‌کند. اما چطور عناصر داخلی را به دلخواه مرتب کنید؟ چطور آنها را ستونی کنید؟ خاصیت flex یک خاصیت کاربردی است که در ادامه آموزش جامع فلکس باکس، می توانید از دستورات زیر نیز استفاده کنید:

flex-direction
justify-content
align-content
align-items
flex-wrap
flex-grow
flex-shrink
flex-basis
flex-flow

برای کسب اطلاعات بیشتر در این خصوص، و یادگیری دستورات می توانید آموزش flexbox در css را مطالعه کنید.

ویژگی display grid

در ویژگی display در CSS در کنار روش display flex برای چینش و طبقه بندی عناصر در صفحات وب، روش دیگری هم به اسم display grid وجود دارد. عملکرد و شیوه استفاده از این ویژگی، شباهت زیادی به روش قبل یعنی flexbox دارد. این ویژگی رفتار تگ را تبدیل به حالت بلاکی کرده و عناصر داخلی آن را بر اساس مدل grid در کنار هم قرار می دهد. برای استفاده از این ویژگی کافی است دستور display: grid را به عنصر والد یا همان تگ پدری که می‌خواهید عناصر داخلی یا فرزندانش را طبقه بندی کنید، اختصاص دهید.

پس از این مرحله، کافی است مثل دستورات موجود در flexbox از خاصیت های مربوط به grid برای عناصر فرزند استفاده کنید. عنصری که دارای دستور display: grid است، یک grid container نامیده می شود و تمام فرزندان آن عنصر، تحت تاثیر خاصیت‌ هایی زیر تغییر می‌ کنند.

grid-template-columns
grid-template-rows
grid-column
grid-row
justify-self
align-self

برای کسب اطلاعات بیشتر در این خصوص و یادگیری دستورات بالا می توانید آموزش grid در css را مطالعه کنید.

شما در هنگام استفاده از این ویژگی حتما باید از ویژگی های فوق استفاده کنید. چرا که اگر قرار باشد فقط از دستور display grid استفاده کنید، تفاوتی بین این حالت و حالتی که display: block برای هر کدوم از عناصر فرزند ایجاد می کند، مشاهده نخواهید کرد. بنابراین در ادامه شما می توانید از دستورات grid-template-columns استفاده کنید.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
background-color: #1b1b1b;
color: #fff;
direction: ltr;
}
#parent{
display:grid;
grid-template-columns: 200px 200px;

}

#parent div{
height:100px;
color:white;
font-size:3em;
}

.box1{
background-color:blue;
}

.box2{
background-color:red;
}

.box3{
background-color:green;
}

.box4{
background-color:orange;
}

.box5{
background-color:purple;
}

.box6{
background-color:lightcoral;
}
}

</style>
</head>
<body>
<div id="parent">
<div class="box1">۱</div>
<div class="box2">۲</div>
<div class="box3">۳</div>
<div class="box4">۴</div>
<div class="box5">۵</div>
<div class="box6">۶</div>
</div>
</body>
</html>

همانطور که در شکل و کد بالا می بینید توسط خاصیت grid-template-columns، توانستیم تعداد ستون های مورد نیاز برای نمایش را ۲ عدد در نظر بگیرم که عناصر فرزند در اون ها قرار می‌گیرند. توجه داشته باشید که خاصیت grid-template-columns برای عنصر پدر نوشته شده است.

table

در ویژگی display در CSS با استفاده از مقادیر زیر می توان جدول و عناصر آن را در CSS شبیه سازی کرد. بیشتر مقادیر لیست شده در زیر معادل تگ های مربوط به جدول در HTML عمل می کنند.

table: <table>
table-row-group: <tbody>
table-column: <col>
table-column-group: <colgroup>
table-header-group: <thead>
table-footer-group: <tfoot>
table-row: <tr>
table-cell: <td>
table-caption: <caption>
inline-table: این مقدار معادل HTML ندارد. کار آن دقیقا شبیه به مقدار table است با این تفاوت که به جدول رفتار inline می دهد.

مثال از ویژگی display در CSS

مثال شماره ۱ : بلاکی کردن تگ span که به صورت پیش فرض اینلاینی می باشد.

<style>
 
.MySpan{
 display: block;
}
 
</style>

مثال شماره ۲ : مخفی کردن تگ ها در صفحه با استفاده از مقدار none در ویژگی display در css

<style>
 
.MyHide{
 display: none;
}
 
</style>

مثال شماره ۳ : حالت نمایش Flex (فلکس باکس)

.MyContainer{
 background-color:#607D8B;
 color:#fff;
 display: flex;
 flex-direction: row;
}

مثال شماره ۴ : حالت نمایش Grid (گرید) در ویژگی display در CSS

.My-Container{
 background-color:#FF5722;
 color:#fff;
 display: grid;
 grid-template-columns: auto auto auto auto;
}

مثال شماره ۵ : بلاکی کردن تگ a که به صورت پیش فرض اینلاینی است. (یعنی بصورت تمام عرض ۱۰۰ درصدی)

a.MyLink{
 display:block;
}

ارتباطات بین ویژگی های display و position و float

در ویژگی display در CSS اگر display مقدار none داشته باشد عنصر چارچوپی نخواهد داشت و ویژگی های float و position بر روی عنصر تاثیری نخواهند گذاشت. در غیر این صورت اگر position مقدار absolute و یا fixed داشته باشد ویژگی float تاثیری بر روی عنصر نخواهد گذاشت و برابر none خواهد بود و مقدار display بر اساس جدول زیر محاسبه می شود. در غیر این صورت اگر float مقداری غیر از none داشته باشد عنصر رفتار float خواهد داشت و مقدار display بر اساس جدول زیر محاسبه می شود.

در غیر اگر عنصر مورد نظر عنصر ریشه (<html>) باشد ویژگی display بر اساس جدول زیر محاسبه می شود. اگر هیچ کدام از شرایط بالا را نداشته باشیم. مقدار display همانی خواهد بود که تعیین می کنید.

جدول مشخصات ویژگی display در CSS

مقدار پیش فرض	بستگی به خوده تگ دارد
قابل ارث بری	ندارد
قابل متحرک سازی	ندارد
نسخه	CSS1
نحوه استفاده در جاوااسکریپت	object.style.display=”none”;

کدام مرورگرها از ویژگی display در CSS پشتیبانی می کنند؟

شکل نوشتاری خاصیت ویژگی display در CSS

در ویژگی display در CSS نحوه نوشتن یا استفاده یا Syntax این ویژگی در CSS به صورت زیر می باشد:

display: یکی از مقادیر موجود در جدول مقادیر;

جدول مقادیر ویژگی display در CSS

مقدار	توضیح
inline	تگ رو بصورت درون خطی نمایش میده ( استفاده از Width و Height و Padding و.. تاثیری ندارد )
inline-block	تگ رو بصورت درون خطی نمایش میده ( استفاده از Width و Height و Padding و.. تاثیر دارد )
block	تگ رو بصورت تمام عرض ( ۱۰۰ درصدی ) نمایش میده
list-item	تگ رو همانند آیتم های یک لیست نمایش میده ( همانند تگ Li )
none	برای مخفی / پنهان کردن تگ در صفحه
contents	تگ رو در حالت ظرفی برای نگهداری محتوا و دیگر عناصر نمایش میده
flex	تگ رو در حالت فلکس ( تمام عرض ) نمایش میده
inline-flex	تگ رو در حالت فلکس ( درون خطی ) نمایش میده
grid	تگ رو را در حالت گرید ( تمام عرض ) نمایش میده
inline-grid	تگ رو در حالت گرید ( درون خطی ) نمایش میده
table	تگ رو در حالت جدول ( تمام عرض ) نمایش میده
inline-table	تگ رو در حالت جدول ( درون خطی ) نمایش میده
table-caption	تگ رو به حالت کپشن جدول ( caption ) نمایش میده
table-column-group	تگ رو به حالت ( colgroup ) جدول نمایش میده
table-header-group	تگ رو به حالت ( thead ) جدول نمایش میده
table-footer-group	تگ رو به حالت ( tfoot ) جدول نمایش میده
table-row-group	تگ رو به حالت ( tbody ) جدول نمایش میده
table-cell	تگ رو به حالت سلولی از جدول ( td ) نمایش میده
table-column	تگ رو به حالت ستونی از جدول ( col ) نمایش میده
table-row	تگ رو به حالت یک سطری از جدول ( tr ) نمایش میده
initial	استفاده از مقدار پیش فرض یا اولیه
inherit	استفاده از مقدار پدر یا والد ( به ارث بری )

سخن پایانی

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

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

اگر از مطالعه این مطلب لذت بردید، می توانید آن را در شبکه های اجتماعی خود به اشتراک بگذارید تا دوستان شما نیز از آن بهره ببرند.