این آموزش در تاریخ ۱۴۰۰/۱۱/۰۱ آپدیت شده است.
آموزش ویژگی display در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی display در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
ویژگی display در CSS
با استفاده از ویژگی display در CSS میتوان حالت یا نحوه نمایش یک تگ رو مشخص کرد، مثلا میتونیم تعریف کنیم که یک تگ بصورت بلاکی ( Block ) نمایش داده شود یا نه مثلا بصورت اینلاینی ( Inline )
اگه آموزش زبان HTML رو دنبال کرده باشید، خب میدونید که هر یک از تگ های HTML یک حالت نمایش دارند، مثلا تگ P حالت نمایشش بصورت بلاکی یا Block می باشد، این یعنی تمام عرض سطر رو بخودشون اختصاص میدن.
و در مقابل تگ هایی هم هستن که حالت نمایششون بصورت درون خطی می باشد، مثه تگ a و b و span و.. ( اینا در یک سطر کنار همدیگه قرار میگیرند و فقط به اندازه خودشون فضارو اشغال میکنن )
حال ما به راحتی با استفاده از ویژگی display در CSS میتونیم حالت نمایش یک تگ رو به دلخواه خودمون در صورت نیاز تغییر بدهیم، مثلا میتونیم حالت نمایش تگ P که بلاکی هس رو به اینلاینی یا Inline تغییر بدیم.
Free-Learn
مثال از این ویژگی
در ادامه میتوانید یک مثال از ویژگی display را در زبان CSS مشاهده نمایید.
مثال شماره ۱ : خب تگ span بصورت پیش فرض اینلاینی هستش ولی ما میخوایم اون رو بلاکی کنیم
|
1 2 3 4 5 6 7 |
<style> .MySpan{ display: block; } </style> |
مثال شماره ۲ : مخفی کردن تگ ها در صفحه با استفاده از مقدار none در ویژگی display
|
1 2 3 4 5 6 7 |
<style> .MyHide{ display: none; } </style> |
مثال شماره ۳ : حالت نمایش فلکس یا Flex ( آموزش فلکس باکس در CSS رو مشاهده نمایید )
|
1 2 3 4 5 6 |
.MyContainer{ background-color:#607D8B; color:#fff; display: flex; flex-direction: row; } |
مثال شماره ۴ : حالت نمایش گرید یا Grid ( آموزش ماژول گرید در CSS )
|
1 2 3 4 5 6 |
.My-Container{ background-color:#FF5722; color:#fff; display: grid; grid-template-columns: auto auto auto auto; } |
مثال شماره ۵ : تگ a هم بصورت پیش فرض اینلاینی هستش ولی خب میخوایم بلاکیش کنیم ( یعنی بصورت تمام عرض ۱۰۰ درصدی )
|
1 2 3 |
a.MyLink{ display:block; } |
Free-Learn
جدول مشخصات ویژگی display در CSS
در جدول زیر میتوانید مشخصات کلی این ویژگی را در زبان CSS مشاهده نمایید.
| مقدار پیش فرض | بستگی به خوده تگ دارد |
|---|---|
| قابل ارث بری | ندارد | اطلاعات بیشتر |
| قابل متحرک سازی | ندارد | اطلاعات بیشتر |
| نسخه | CSS1 |
| نحوه استفاده در جاوااسکریپت | object.style.display=”none”; |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از ویژگی display در CSS پشتیبانی میکنند یا خیر.
| نام ویژگی | Chrome | Firefox | Opera | Safari | Edge |
| display | بله | بله | بله | بله | بله |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این ویژگی در CSS بصورت زیر می باشد.
|
1 |
display: یکی از مقادیر موجود در جدول مقادیر; |
Free-Learn
جدول مقادیر ویژگی 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 | استفاده از مقدار پدر یا والد ( به ارث بری ) | اطلاعات بیشتر |
Free-Learn
نکات و توضیحات
- تگ در حالت inline بصورت درون خطی نمایش داده میشود و اگر از ویژگی های width و height و.. استفاده شود هیچ تاثیری روی تگ نخواهد داشت ولی در حالت inline-block میتوان از ویژگی هایی مثه width و height و.. استفاده کرد
- وقتی یه تگ مخفی میشه، فقط از دید کاربر مخفی میشه ولی خب همچنان در صفحه و سورس وجود داره، پس اگه کسی بخواد به راحتی میتونه اون چیزی که مخفی شده رو نمایش بده
