آشنایی با display

آشنایی با display

همان طور که تا این قسمت از آموزش های مقدماتی استایل نویسی با css ملاحظه کردید، این زبان کمکی برای ایجاد جلوه های ظاهری و فرمت بندی کدها و عناصر html از خاصیت های ویژه خود استفاده می کند که هر کدام از آنها کاربرد خاصی دارند و بر روی عناصر به خصوصی تاثیرگذار هستند، یکی دیگر از این خاصیت ها display نام دارد که تعیین کننده نحوه نمایش یک عنصر (به صورت بلاک، جدول، لایه مخفی و…) در صفحات وب است،  display با مقادیر متفاوت، تنظیمات متفاوتی نیز در اختیار طراحان وب قرار می دهد، در ادامه آموزش با کاربرد این خاصیت در css بیشتر آشنا خواهیم شد.

آشنایی با display آشنایی با display آشنایی با display display

آشنایی با display

 
آشنایی با display

همان طور که پیش از این اشاره شد، ویژگی display برای تنظیم نحوه نمایش عناصر در صفحات وب به کار می رود و بدین منظور مقادیر متفاوتی می پذیرد که هر کدام از آنها کاربرد خاصی دارند، از جمله این مقادیر می توان block، table ، inline-block، none، list-item و… را نام برد، در زیر به تفصیل به این موارد اشاره می کنیم

 

آشنایی با display:دستور inline block چه کاربردی دارد؟

همانطور که می‌دانید المان‌های اچ‌تی‌ال غالبا به صورت بلاک و خطی بوده و هر المان یک سطر کامل را اشغال می‌کند. کلمه بلاک در واقع برای المان‌هایی مثل <p> یا <div> اطلاق می‌شود. این المان‌ها زمانی که نوشته می‌شوند هیچ چیز دیگری را در کنار خود جای نمی‌دهند. اگر خاطرتان باشد چند جلسه پیش ما با استفاده از شناوری float المان‌ها توانستیم که این المان‌ها را در کنار هم قرار دهیم. اما امروز می‌خواهیم یک راه حل دیگر برای کنار هم چیدن المان‌های صفحه به شما بگوییم و آن هم چیزی نیست به جز استفاده از display و مقدار inline-block!  با کمک این دستور تمامی المان‌هایی که دارای این ویژگی باشند، در یک خط و در کنار یکدیگر قرار می‌گیرند.

از display با مقادیر block برای ایجاد لایه های معمولی و پرکاربرد وب (به شکل مربع یا مستطیل) به صورت غیر هم سطح استفاده می شود، یعنی یک بلاک اگر در کنار سایر عناصر وب قرار گیرد (به طور مثال اگر بلاک div در بین دو بلاک div دیگر قرار گیرد)، موارد بعد از خود را به پائین هدایت کرده و خود در زیر عناصر سطح بالاتر قرار می گیرد (یک لایه از نوع block در حالت پیش فرض، امتداد عرض خود را پوشش می دهد)،

مثال:

نمونه‌ی نوشتن این دستور: display: inline-block

 و در قسمت css آن خواهیم داشت:

 

آشنایی با display آشنایی با display آشنایی با display display css

آشنایی با display

همانطور که در مثال بالا مشاهده می‌کنید، بعد از استفاده از دستور inline-block دیویژن‌های ما به صورت شناور در کنار هم و در یک سطر قرار گرفتند. 

نکته ۱: لایه های از نوع display block با استفاده از خاصیت float می توانند در کنار هم و به صورت هم سطح قرار گیرند.
نکته ۲: در فرمت بندی قالب های وب و طراحی کاربردی، به طور معمول از بلاک هایی با پس زمینه transparent یا شفاف نیز استفاده می شود، لذا یک بلاک ممکن است از لحاظ بصری هیچ نمودی نداشته باشد، ولی در اسکلت بندی کار موثر باشد.

حالت inline

تگ هایی مانند تگ a ، تگ b ، تگ span ، تگ i و …. به طور پیش فرض در این حالت قرار دارند به طوری که عرض و ارتفاع این تگ ها از محتویات آنها تبعیت می کند این تگ ها همواره در مرور گر در یک خط نمایش داده می شوند . این تگ ها از دستورات css همانند text-align و direction و … تاثیر می گیرند ولی تحت تاثیر دستوراتی همانند height ، width  و … قرار نمی گیرند

حالت table

این حالت برای تگ table می باشد این حالت دارای زیر مجموعه های دیگر می باشد که مختص تگ هایی است که در داخل تگ table  مورد استفاده قرار می گیرد مثل تگ tr که برای ردیف جدول  تگ td برای ستونهای جدول موزد استفاده قرار میگیرد مثلا تگ td دارای حالت table-cell میباشد این حالت های جدول وزیر مجموعه های آن را در ادامه مطلب توضیح خواهیم داد.

حالت list-item

این حالت مختص تگul  و ol  زیر مجموعه آن تگ li میباشد که برای لیست کردن مورد استفاده قرار میگیرد مرورگر این تگ را به صورت سلسه مراتب نمایش میدهد.

آموزش CSS آموزش طراحی وب

دیدگاه خود را بیان کنید