آموزش css – درس پانزدهم – Display و Visibility

طراحی سایت » آموزش CSS » آموزش css – درس پانزدهم – Display و Visibility
۳ اسفند ۱۳۹۷ چاپ

نقشه راه یادگیری دوره آموزشی CSS

مشخصه ی Display صفتی است که نحوه ی نمایش عناصر موجود در یک صفحه html را کنترل میکند. علاوه بر آن میتوانید تعیین کنید که عنصری نمایش داده شود یا نه، یعنی میتوانید با استفاده از این مشخصه بخشی از صفحه را مخفی کنید.

قابلیت مخفی کردن عناصر موجود در صفحات توسط مشخصه ی visibility نیز قابل اجرا است ولی دارای تفاوتهایی با مشخصه Display است که در این جلسه به آنها خواهیم پرداخت.

 Display و Visibility

مشخصه Display

مشخصه ی Display کاربردهای زیادی در طراحی صفحات وب دارد. به طور کلی عناصر موجود در صفحه به دو دسته تقسیم میشوند که عبارتند از:

  1. عناصر بلوک ( Block Elements)؛
  2. عناصر درون خط ( Inline Elements)

عناصر بلوک به صورت پیشفرض تمام عرض محدوده ای که در آن قرار گرفته اند را اشغال میکنند و علاوه بر آن از بالا و پایین یک سطر با سایر عناصر فاصله خواهند داشت. از جمله این عناصر میتوان به تگهای h یا سرتیترها، تگهای p یا پاراگراف و تگ Div اشاره داشت.
برای اینکه مفهوم عناصر بلوک را درک کنید میتوانید به صورت عملی آنها را مورد استفاده قرار دهید. برای نمونه، صفحه html ای ایجاد کنید و کد زیر را درون آن بنویسید:

<h1>تیتر نخست</h1>
<h2>تیتر رده ی دوم</h2>

اگر کد فوق را در قالب صفحه وب مشاهده کنید خواهید دید که هرکدام از نوشته ها در یک سطر جداگانه قرار گرفته اند چراکه تگ h ذاتا یک عنصر بلوکی است.

در مقابل بعضی از عناصر، درون خط هستند، مثل تگ <a> یا تگ <span>. اگر مثال فوق را با این عناصر امتحان کنید، نتیجه کاملا متفاوت خواهد بود:

<span> تیتر نخست </span>
<span>تیتر رده ی دوم</span>

و هر دو متن در امتداد یکدیگر نمایش داده خواهند شد.

با استفاده از مشخصه ی Display میتوانید نحوه ی نمایش عناصر درون خط را به بلوک و یا برعکس تبدیل کنید. این مشخصه مقادیر زیر را دریافت میکند:

  • Block
  • Inline
  • Inline-block
  • None
  • Table
  • Compact

البته مقادیر دیگری نیز وجود دارند که کاربرد زیادی ندارند. در بین موارد فوق نیز پرکاربردترین آنها شامل 4 تای نخست است که به توضیح آنها خواهیم پرداخت.

Display:block

این مقدار باعث میشود تا عناصری که به صورت درون خط هستند، به شیوه ی عناصر بلوک نمایش داده شوند. در مثالی که داشتیم، تگهای span در امتداد یکدیگر نمایش داده میشدند ولی میتوانیم نحوه ی نمایش آنها را مانند تگهای h تغییر دهیم:

span { display:block;}

اگر کد css بالا را به تگهای span موجود در صفحه ( که ذاتا درون خط هستند ) اختصاص دهید، آنها به صورت بلوک به نمایش درخواهند آمد.

Display: inline

این مقدار دقیقا برعکس مقدار قبلی است و عناصری را که به صورت بلوک هستند را به صورت درون خط نمایش خواهد داد. به عنوان مثال:

H1,h2{ display:inline;}

اگر این کد را برای تگهای h1 و h2 در صفحه اعمال کنید، بر خلاف مثال نخست که هرکدام در یک سطر بودند، در اینجا آنها را در امتداد یکدیگر و در یک سطر خواهید دید.

Display: inline-block

مقدار ترکیبی است از دو مقدار قبلی، یعنی یک عنصر را هم به صورت بلوک و هم به صورت درون خط تبدیل خواهد کرد.

Display: none

اگر بخواهید عنصری در صفحه نمایش داده نشود از مقدار none برای صفت Display استفاده میکنیم.

مشخصه Visibility

با استفاده از مشخصه ی visibility میتوانید یک عنصر را در صفحه مخفی کنید ولی به گونه ای که جای عنصر در صفحه حفظ شود. در واقع اگر برای یک عنصر مقدار display:none را در نظر بگیرید، مرورگر به گونه ای عمل خواهد کرد که کد وجود ندارد و فضای آن عنصر توسط سایر عناصر در صفحه اشغال خواهد شد.

ولی مشخصه ی visibility فضا را برای عنصر حفظ میکند و تنها از نمایش داده شدن آن جلوگیری میکند. برای درک بهتر تفاوت بین display و visibility نمونه آنلاین زیر را مشاهده کنید:

مشاهده مثال آنلاین

مشخصه ی visibility سه مقدار اصلی را دریافت میکند:

  • Visible
  • Hidden
  • Collapse

مقدار visible تنها در صورتی بکار گرفته میشود که یک عنصر را قبلا hidden کرده باشید. برای مثال یک دکمه طراحی کرده اید که با قرار گرفتن ماوس بر روی آن متنی نمایش داده میشود ولی نمیخواهید در حالت عادی این متن نمایش داده شود.

پس ابتدا با استفاده از visibility:hidden این متن را مخفی میکنیم و سپس تعیین میکنیم که اگر ماوس بر روی دکمه قرار گرفت آنها visibility:visible باشد.
مقدار collapse نیز بیشتر برای ردیفهای جداول مورد استفاده قرار میگیرد که تمام ردیف ها را درون یک ردیف قرار خواهد داد.

با استفاده از صفت visibility و با کمک display میتوانید منوهای آبشاری را نیز طراحی کنید.

گفتگو پیرامون آموزش css – درس پانزدهم – Display و Visibility

(منتشر شده: 11 | در انتظار تایید: 0)
تیام

یه پیشتهاد داشتم: برای درسهای چند جلسه ای دکمه ای برای رفتن به درس بعد و قبل تعبیه کنید، پیمایش رو خیلی راحت تر خواهد کرد

پاسخ دهید
سمانه

عااااااااااااااااالی بود واقعا مفهمومی و زیبا توضیخ داید خسته نباشید

پاسخ دهید
محمد شایان

سلام.
واقعا عالی بود…
تو هیچ سایتی نتونستم تفاوت این دو مورد رو پیدا کنم و اینجا به جواب رسیدم.
تشکر

پاسخ دهید
محمد

باسلام
با تشكر از آموزشهاي عاليتون
اگر زحمتي نيست براي مشخصه Visibility مثالي ميزنيد
مثالا : درسي كه منو افقي درست كرده بوديد رو با اين مشخصه به صورت آبشاري بنويسيد (در انجا وقتي با ماوس به روي نوشته ميرفتيم رنگ پس زمينه نوشته ها عوض ميشد
و اگر بخواهيم وقتي ماوس ميره روي نوشته هاي منو ، بخوايم منوي ابشاري باز بشه بايد چي كار كرد

پاسخ دهید
عصرعلم

در پاسخ به محمد

سلام
بزودی در خصوص منوی آبشاری آموزش قرار خواهیم داد.

پاسخ دهید
پوریا

سلام اساتید درسها چند بخش هستند؟۱۸یا بیشتر

پاسخ دهید
عصرعلم

در پاسخ به پوریا

سلام
دوره آموزشی css شامل ۲۱ درس است که آخرین درس در تاریخ ۶ اردیبهشت ماه ۱۳۹۲ منتشر خواهد شد.

پاسخ دهید
siavash-k

سلام
ببخشید نیدونستم سوال رو کجا باید مطرح کنم اینجا پرسیدم
یه سایتی هست man-az.ir که من میخوام برای آموزش خودم از روش باسه خودم کپی درست کن
تغریبا هم موفق شدم فقط چند جا مشکل دارم
۱ . من صفحه ی اول ( خانه ) و صفحه ی کلیات رو بدون مشکل درست کردم اما به هیچ وجه صفحه های خدمات و امکاناتش رو نمیتونم درست کنم 😀 حتی نمیدونم از چه ماژولی برای ساخت این مودلی صفحه باید استفاده کرد !!!
ایا راهی هست که سایر صفحه هارم خودمون طراحی کنیم ؟
ایا با ماژول خاصی این کارو کردن ؟ اگه آره چه ماژولی ؟
۲- چطوری به فیلدهای ثبت نام اضافه کردن اون هم دسته بندی شده ؟!!!
۳- چطوری تمام صفحاتشون چیدمانش با هم فرق میکنه ؟
۴ – چطوری لینک های مربوطه تو هر صفحه با صفحه های دیگه فرق میکنه ؟

ببخشین سرتونو درد اوردم اما من واقعا میگم تنها جایی که دیدم واقعا باسه آدم ارزش میدن و سریع و با حوصله جواب میدن سایت شماست باسه همین اینجا سوال پرسیدم 😀
ممنون

پاسخ دهید
عصرعلم

در پاسخ به siavash-k

سلام
سایت خوب و ساده ای رو انتخاب کردید، برای شروع خیلی خوبه.
۱- برای ساخت صفحاتی مثل خدمات و امکانات سایتی که فرمودید نیاز نیست از ماژولی استفاده کنید. خیلی ساده میتونید ۳ تا div ایجاد کنید و محتویات رو درون اونها قرار بدید و سپس اونها رو شناور کنید. در درس هفدهم css آموزش شناورسازی رو میتونید مطالعه کنید.
بله، هیچ محدودیتی وجود نداره و میتونید اینکار رو انجام بدید، ماژول چیز خاصی نیست، از هر ماژولی هم که استفاده شده باشه در نهایت باید با استفاده از html و css شکل دهی بشوند (به همین صورتی که خودتون مشاهده کردید) پس بر روی ماژول تمرکز نکنید.

۲- فیلدهای ثبت نام هم در واقع یک فرم هستند که فیلدهاش بوسیله ی html جداسازی شده، یعنی در یک div اطلاعات شخصی، در یک div اطلاعات تماس و … و تمام این div ها درون تگ form قرار دارند.

۳- خوب احتمالا برای هر صفحه css جداگانه ای طراحی کرده اند.

۴- برای لینکها احتیاج هست زبان برنامه نویسی بدونید و فکر میکنم کمی زود باشه بخواهید یاد بگیرید. در حال حاضر فعلا بر روی css و html تمرکز کنید تا کاملا مسلط بشید و بعد مرحله بعد رو شروع کنید.

پاسخ دهید
علی

فقط گزینه‌ی وسط را تیک بزنید. »مشاهده قوانین