آموزش ویژگی display در css

Ratings
(0)

علاوه بر عناصر جایگزین شده و جایگزین نشده، CSS عناصر را به دو دسته ی اصلی زیر تقسیم بندی می کند:

  • عناصر block یا بلوکی
  • عناصر inline یا درون خطی

برای ویژگی display مقادیر دیگری نیز وجود دارد، اما این دو مقدار از بقیه مهمتر هستند.

عناصر block یا بلوکی در css

عناصر block یک باکس ایجاد می کنند که به طور پیش فرض، ناحیه ی محتوای عنصر والدش را پر می کند و هیچ عنصر دیگری در اطراف آن ناحیه نمی تواند قرار گیرد. به عبارت دیگر، یک عنصر block قبل و بعد از باکس خود، شکست یا break ایجاد می کند. یعنی این عنصر تمام سطر را اشغال می کند. عناصر p و div شناخته شده ترین عناصر block هستند.

عناصر جایگزین شده یا replaced می توانند عناصر block باشند اما معمولا این طور نیست. عناصر لیست(یعنی ul و li و ol)، یک نوعِ خاص از عناصر block هستند. همان طور که گفته شده، ul ها و ol ها عناصر block هستند و برای ul  یک دایره در کنار آن نشان داده می شود و برای ol یک عدد نشان داده می شود. به جز این علامت های دایره و اعداد، لیست ها کاملا با عناصر block یکسان هستند.

 عناصر inline یا درون خطی در css

 عناصر inline یک باکس در داخل یک خطِ حاوی متن، ایجاد می کند و آن خط را نمی شکند. یکی از بهترین عناصر inline عنصر a می باشد. عناصر strong و em نیز inline هستند. این عناصر، قبل و بعد از باکس خود، خط را نمی شکنند؛ از این رو می توانند در داخل محتوای دیگر عناصر قرار گیرند بدون اینکه ظاهر آن را خراب کنند.

برای ویژگی display مقادیر زیادی وجود دارد، اما ما تنها سه مقدار زیر را برای آن بررسی می کنیم:

  • block
  • inline
  • list-item

اکثر این مقادیر بعدا در این کتاب توضیح داده خواهند شد. مثلا مقادیر grid و inline-grid در یک فصل جدا، و مقادیر مربوط به table نیز در یک فصل جدا مورد بحث قرار می گیرند. اما اکنون اجازه دهید به بررسی مقادیر block و inline بپردازیم. کدهای زیر را در نظر بگیرید:

<body>
<p>This is a paragraph with <em>an inline element</em> within it.</p>
</body>

 در کدهای بالا، عناصر body و p از نوع block هستند و یک عنصر inline یعنی عنصر em نیز وجود دارد. براساس خصوصیات html، عنصر em می تواند در داخل عنصر p قرار گیرد، اما برعکس آن صحیح نیست. در html عناصر inline در داخل عناصر block قرار می گیرند اما نه برعکس. اما از طرف دیگر، CSS به این چیزها محدود نمی شود. زیرا ما می توانیم کدها را هرطور که هست رها کنیم اما ویژگی display آن را تغییر دهیم. به مثال زیر توجه کنید:

p {display: inline;}
em {display: block;}

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

<em><p>This is a paragraph improperly enclosed by an inline element.</p></em>

اما نکته اینجاست که هر کاری که با استفاده از CSS بر روی مقادیر ویژگی display انجام دهیم، در html قانونی نیست. درحالی که تغییر مقادیر ویژگی display برای عناصر در سندهای html کاربردی است اما برای سندهای XML خطرناک است. برای سندهای XML احتمال ندارد از مقادیر display استفاده کنیم. اما این به برنامه نویس بستگی دارد. بعنوان مثال ممکن است بخواهیم برای کدهای XML زیر، چینش تعریف کنیم:

<book>
<maintitle>Cascading Style Sheets: The Definitive Guide</maintitle>
<subtitle>Third Edition</subtitle>
<author>Eric A. Meyer</author>
<publisher>O'Reilly and Associates</publisher>
<pubdate>November 2006</pubdate>
<isbn type="print">978-0-596-52733-4</isbn>
</book>
<book>
<maintitle>CSS Pocket Reference</maintitle>
<subtitle>Third Edition</subtitle>
<author>Eric A. Meyer</author>
<publisher>O'Reilly and Associates</publisher>
<pubdate>October 2007</pubdate>
<isbn type="print">978-0-596-51505-8</isbn>
</book>

چون که مقدار پیش فرض برای ویژگی display برابر با inline است، محتوای کدهای بالا به طور پیش فرض، به صورت یک متن inline نشان داده می شود. که در تصویر 1.2 نشان داده شده است. اما این شیوه ی نمایش جالب نیست.

(تصویر 1.2)

شما می توانید با استفاده از ویژگی display، چینش اصلی آنها را به صورت زیر تعیین کنید:

book, maintitle, subtitle, author, isbn {display: block;}
publisher, pubdate {display: inline;}

 در دستورات بالا، پنج عنصر از هفت عنصرمان را block کرده ایم و دو مورد دیگر را inline کرده ایم. این یعنی هرکدام از این عناصر block به مثابه یک div در html عمل می کنند و دو عنصر inline هم بعنوان عنصر span در html عمل می کنند.نتیجه در تصویر 1.3 قابل مشاهده است:

(تصویر 1.3)

قبل از اینکه با جزئیات کامل CSS را بیاموزیم، نیاز داریم تا ببینیم که چگونه می توانیم از CSS در سند html استفاده کنیم. در مقاله ی بعدی در این زمینه صحبت خواهیم نمود.

آموزش CSS

  • بازدید: 527

نوشتن دیدگاه

لطفا نظرات خود را بیان کنید. به سوالات در سریع ترین زمان پاسخ داده خواهد شد.اما به نکات زیر توجه کنید:
1. سعی کنید نظرات شما مرتبط با مقاله ی مورد نظر باشد، در غیر این صورت پاسخ داده نخواهد شد.
2. سوالات خود را به صورت کوتاه بیان کنید و از پرسیدن چند سوال به طور همزمان خودداری کنید.
3. سوال خود را به طور واضح بیان کنید و از کلمات مبهم استفاده نکنید.

ارسال