مدرس فناوری اطلاعات و ارتباطات

مقدمه

در این فصل می‌خواهیم در مورد ویژگی به نام display در CSS به جهت نحوه نمایش اِلمنت‌ها در صفحه و تغییر حالت آنها گفتگو کنیم در ادامه نیز ۲ تگ html نیز معرفی خواهیم کرد.

نحوه نمایش – display

این ویژگی css مقادیر متفاوتی را می‌تواند قبول کند، مهم‌ترین آنها عبارتند از:

display:     block | inline | inline-block | grid | flex ;

ما در این مقاله، سه مقدار اول را مورد بررسی قرار خواهیم داد؛
و مقادیر grid و flex را در مقالات جداگانه‌ای در آینده ان شاءالله خواهیم پرداخت.

---

بلاک  –  block

اِلمنت‌هایی که یک خط کامل را برای خودشان اشغال می‌کنند، را عناصر بلاک می‌گویند.
اگر شما دو یا چند اِلمنتی که خاصیت بلاک دارند را پشت هم بنویسید، نمی‌توانند داخل صفحه کنار هم قرار بگیرند و به صورت ستونی زیر هم قرار می‌گیرند.

<h1>کهکشان راه شیری</h1>
<h3>منظومه شمسی</h3>
<p>تیر</p>

متون موجود در سه اِلمنت بالا، نتوانستند کنار هم قرار بگیرند، چرا که هرکدام از آنها، به تنهایی یک خط را برای خودشان اشغال کرده‌اند.

برای اثبات این موضوع، کافی‌ است ابعاد، رنگ، یا رنگ‌ زمینه آنها را تغییر دهیم تا مشاهده کنیم که هر کدام چه فضایی را اشغال کرده‌اند.

h1{
   width: 500px;
   padding: 5px;
   background-color: red;
}
h3{
   padding: 5px;
   color: yellow;
   background-color: blue;
}
p{
   width: 250px;
   padding: 5px;
   color: white;
   background-color: orange;
}

همانطور که ملاحظه می‌کنید، این اِلمنت‌ها نتوانستند کنار هم قرار بگیرند و زیر هم قرار گرفته‌اند.

---

در خط  –  inline

اِلمنت‌های inline، برعکس اِلمنت‌های block هستند! آنها یک خط را برای خودشان اشغال نمی‌کنند.
به این معنا که اِلمنت inline، بدون هیچ مشکلی در کنار هم قرار می‌گیرند.
تنها فضایی که اِلمنت inline اشغال می‌کنند، سایز و ابعاد خود محتواست.

---

پهنای اولیه   –   initial width

این نکته را باید بدانید پهنای اولیه (initial width) اِلمنت از نوع block به اندازه parent آن می‌باشد و در inline به اندازه content می‌باشد.

---

تفاوت  –  Difference

تفاوت در ویژگی‌هایی مانند width , height , margin , padding برای اِلمنت‌های نوع block و Inline.
برای درک این تفاوت ابتدا اینجا کلیک کرده، ‌سپس با استفاده از ابزار Inspect، ویژگی‌هایی که روی عبارت دبیرستان علوی است را تغییر دهید تا متوجه این تفاوت‌ها شوید!

---

جدول تفاوت‌ها   –   Difference table

اگر مثال بالا را درست انجام داده باشید حتماً متوجه شده‌اید که:

اِلمنت inline، دو تفاوت اساسی با اِلمنت block دارد که یادگیری و فهم آن بسیار در طراحی وب  مهم است.

۱) اِلمنت inline، خاصیت های width و height را قبول نمی‌کند.
۲) اِلمنت inline، تنها padding‌ و margin چپ و راست می‌پذیرد و در جهات بالا و پایین عمل نمی‌کند.

خلاصه آنچه در بالا بیان کردیم را می‌توانید در جدول زیر مشاهده کنید.

---

پیشفرض  اِلمنت‌   –   Element  Default

• inline : b , i
• block : p , h1 … h6 , ol , ul
• تگ b , i یعنی bold , italic پیشفرض به صورت inline است.
• تگ‌های پاراگراف، عناوین۱ الی ۶، لیست ترتیبی و غیر ترتیبی به صورت block می‌باشد.

---

برای تغییر display پیشفرض اِلمنت می‌توانید در فایل css یکی از مقادیر  block یا inline را برای آن اِلمنت تعریف کنید.

h1{
   display: inline;
}

---

inline-block

یکی دیگر از مقادیر display، مقدار inline-block است؛
این مقدار یکی از کاربردی‌ترین مقادیر خاصیت display محسوب می‌شود.‌
زیرا می‌تواند به اِلمنت‌های موردنظر ما، همزمان دو مقدار inline و block را اختصاص بدهد!

• از نظر نحوه نمایش در صفحه، مانند ویژگی inline است.
• پهنای اولیه آن، مانند ویژگی inline می‌باشد.
• همزمان این قابلیت را به اِلمنت می‌دهد تا خاصیت‌های width و height را قبول کند.
• کاری می‌کند که اِلمنت، خاصیت margin و padding هر چهار طرف را قبول کند.

---

پیشفرض  اِلمنت‌   –   Element  Default

• inline-block : img

تگ img (تصویر) پیشفرض به صورت inline-block است.

---

img{
  border-radius: 50%;
  display: block;
  margin: 0 auto;
}

در مثال بالا ابتدا تگ img را به نوع block تبدیل کرده‌ایم سپس margin یعنی فاصله بیرونی را برای بالا و پایین مقدار 0 و از دو طرف راست و چپ مقدار auto در نظر گرفته‌ایم.
مقدار auto به این معنی است که به صورت اتوماتیک مقدار مساوی به دو طرف راست و چپ اِلمنت اختصاص می‌دهد.

---

Division

<div> … </div> :

تگ دیو یکی از کاربردی‌ترین تگ‌ها از نظر block است.
نام این تگ از ۳ حرف اول کلمه division (به معنای بخش یا تقسیم) گرفته شده است.
این تگ وظیفه واضح و مشخصی ندارد! اما بطور کلی می‌توان کاربرد تگ div را اینگونه توصیف کرد:

هرجایی که نیاز به ایجاد یک بخش یا باکس در صفحه داشتید می‌توانید از تگ div استفاده کنید.

Span

تگ span یکی از پرکاربرد‌ترین تگ‌ها از نظر inline است.
این تگ در بیشتر مواقع جهت نمایش متن استفاده می‌شود و کاربرد‌های inline یا درون خطی دارد.
به مثال زیر توجه کنید:

<p>رنگ <span style="color: red;">قرمز</span> برای ایجاد حس هیجان در مخاطب بسیار مناسب است</p>

خروجی کد بالا:

رنگ قرمز برای ایجاد حس هیجان در مخاطب بسیار مناسب است.

---

تمرین

• فایل html با نام about در فلدر مربوط به این فصل(۷) بسازید.
• یک فایل به نام style.css برای دستورات css ایجاد کنید.
• محتوای صفحه درباره‌من مشابه شکل زیر با اطلاعات خودتان طراحی کنید.

وسط چین بودن المنت‌ها مهم است!