سبد خرید (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 کنیم.

دیدگاه‌ها  

+4 # negar حسنی 1394-09-14 09:22
سلام و خسته نباشید
اگه بخواهیم توی عکس یه نوشته قرار بدیم باید چیکار کنیم!؟
بجز با فتو شاپ.منظورم با استفاده از دستورات سی اس اس یا جاوا هستش...یا پی اچ پی...
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+5 # مهرداد صلاحی 1394-09-14 09:26
با سلام و خسته نباشید.

برای درج نوشته داخل عکس، میتونید از PHP استفاده کنید. ولی این کار مستلزم مقداری دانش در برنامه نویسی PHP هست. برای این کار میتونید از کتابخانه های مخصوص کار با عکس در PHP استفاده کنید.
راجع به دستور imagecreate(); //comment کمی سرچ کنید. مطالب و کدهای زیادی گیر خواهید آورد که تا حدودی جواب شما رو خواهد داد.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # مرتضی صفری 1394-05-16 23:26
دنبال این بودم که برای ایجاد منوی بالای سایت به جز استفاده از جدول چیکار میشه کرد که تو این صفحه پیداش کردم.حالا به نظر شما این راه بهتره یا جدول؟معمولا جدول رو میگن فقط واسه خود جدول استفاده کنید درسته؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # مهرداد صلاحی 1394-09-14 09:24
با سلام.
بله! بهتره همین طور عمل کنید.

برای منو بهتره از ترکیب لیست و CSS استفاده کنید. کدهای آماده زیادی برای منوهای آماده با CSS توی اینترنت موجود هست که با کمی سرچ میتونید پیدا کنید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # مینا 1393-11-02 11:14
خسته نباشید
یه سوال داشتم به کاربردن visibility:hidd en یا display:none وقتی که باعث پنهان شدن عنصر میشه چه کاربردی داره عنصری که پنهان هست به چه دردی میخوره
باتشکر
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+10 # امیر پهلوان صادق 1393-11-04 09:29
کاربردهای مختلفی می توان مطرح کرد، مثلاًٌ در هیمن سایت، اگر به بخش "دیدگاه ها" توجه کرده باشید، در ابتدا این قسمت پنهان است و به ازای کلیک کردن روی لینک "دیدگاه ها" بخش مربوطه نمایان می شود.
و یا در منوهای آبشاری، زمانی که موس روی منوی اصلی قرار می گیرد، زیر منوها نمایان می شوند. توجه داشته باشید که کد HTML مربوط به زیر منوها در صفحه وجود دارد ولی بدلیل تنظیم خصوصیت display با مقدار none قابل رویت نیست و همان طور که گفتم با قرار گرفتن موس روی منوی اصلی (hover:) زیر منوها نمایان می شود.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن

آموزش صوتی CSS

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

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

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