40% تخفیف با کد Mehr روی تمام آموزش ها بمناسبت فرارسیدن ماه مهر ...!
زمان باقی مانده (تمدید شد)
سبد (0)

آموزش‌های پیشنهادی فرادرس

خاصیت display در CSS

خاصیت Display در CSS

Wiki

خصوصیت display چگونگی نمایش یک عنصر را مشخص می کند و خصوصیت visibility، یک عنصر را پنهان(hidden) یا قابل رویت(visible) می کند.

Box 1

Box 2
Box 3

پنهان کردن یک عنصر(Hidden)

Wiki

برای پنهان کردن یک عنصر دو روش وجود دارد:

  1. خصوصیت display را با مقدار "none" تنظیم کنیم
  2. خصوصیت visibility را با مقدار "hidden" تنظیم کنیم

به هرحال باید توجه داشته باشید که این دو روش، نتایج مختلفی را تولید خواهند کرد.

در روش دوم (visibility:hidden) عنصر پنهان خواهد شد ولی اثر آن یا به عبارتی فضایی که اشغال کرده است، در صفحه باقی خواهد ماند:

مثال (خاصیت display در CSS)

h1.hidden {visibility:hidden;}
خودتان امتحان کنید »

در روش اول (display:none) عنصر حذف می شود و اثری از آن در صفحه باقی نخواهد ماند:

مثال (خاصیت display در CSS)

h1.hidden {display:none;}
خودتان امتحان کنید »

عناصر inline و block

Wiki

block: یک عنصر block عنصری است که تمام طول یک سطر را اشغال می کند و قبل و بعد از آن یک سطر وجود دارد.

مثال برای عناصر Block:

  • <h1>
  • <p>
  • <div>

inline: یک عنصر inline تنها به اندازه ای که نیاز دارد، عرض یک سطر را اشغال می کند، و هیچ اجباری در اشغال کل یک سطر وجود ندارد.

مثال برای عناصر inline:

  • <span>
  • <a>

چگونه طریقه نمایش یک عنصر را تغییر دهیم

Wiki

تغییر یک عنصر inline به block و برعکس می تواند برای ساخت ظاهر یک صفحه مفید باشد.

مثال زیر آیتم های لیست را به صورت یک عنصر inline نمایش می دهد:

مثال (خاصیت display در CSS)

li {display:inline;}
خودتان امتحان کنید »

مثال زیر عنصر span را به عنوان یک عنصر block نمایش می دهد:

مثال (خاصیت display در CSS)

span {display:block;}
خودتان امتحان کنید »

توجه: تغییر نوع نمایش یک عنصر، تنها چگونگی نمایش عنصر را تغییر می دهد و نوع، تغییر نخواهد کرد. برای مثال یک عنصر inline که برای آن display:block تنظیم شده است اجازه نمی دهد که یک عنصر block به صورت تودرتو داخل آن قرار داده شود.


مثال - خودتان امتحان کنید

Wiki

نمایش یک عنصر به صورت inline
این مثال نشان می دهد که چگونه یک عنصر را به صورت inline نمایش دهیم.

نمایش یک عنصر به صورت block
این مثال نشان می دهد که چگونه یک عنصر را به صورت block نمایش دهیم.

تنظیم خصوصیت display با مقدار collapse برای یکی از ردیفهای جدول
این مثال نشان می دهد که چگونه یکی از ردیف های جدول را ویران یا collapse کنیم.

آموزش صوتی CSS

بستن
مدرس:
سوال و جواب:

ابزاری که در پیش روی دارید یکی از ابزارهای بسیار کاربردی سایت بیاموز در زمینه آموزش است، این ابزار برای سهولت یادگیری شما کاربران محترم طراحی شده است.

فقط کافی است روی عنوان پاراگراف مورد نظرتان کلیک کنید تا پخش صدا آغاز شود ...!

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehiمجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامیپرداخت آنلاین -  بانک ملتپرداخت آنلاین - بانک اقتصاد نوینپرداخت آنلاین - بانک سامان