آموزش CSS پیشرفته : مقدمهای بر طرحبندی CSS
این درس برخی از ویژگیهای طرحبندی CSS را که قبلاً در ماژولهای قبلی به آنها پرداختهایم، مانند مقادیر مختلف نمایش، و همچنین معرفی برخی از مفاهیمی که در طول این ماژول پوشش خواهیم داد، خلاصه میکند. همچنین مفهوم جریان عادی را به طور عمیق پوشش میدهد.
تکنیکهای طرحبندی صفحه CSS به ما این امکان را میدهند که عناصر موجود در یک صفحه وب را در نظر بگیریم و موقعیت آنها را نسبت به عوامل زیر کنترل کنیم: موقعیت پیشفرض آنها در جریان طرحبندی عادی، سایر عناصر اطراف آنها، کانتینر والد آنها و نمای/پنجره اصلی.
تکنیکهای طرحبندی صفحه که در زیر به آنها اشاره خواهیم کرد و از طریق ماژول به تفصیل پوشش خواهیم داد، کاربردها، مزایا و معایب خود را دارند. هیچ تکنیکی برای استفاده به صورت جداگانه طراحی نشده است. با درک اینکه هر روش طرحبندی برای چه چیزی طراحی شده است، در موقعیت خوبی خواهید بود تا بفهمید کدام روش برای هر کار مناسبتر است.
عناصر یک صفحه وب در صورتی که هیچ CSS برای تغییر نحوه رفتار آنها اعمال نکرده باشید، در جریان عادی قرار میگیرند. میتوانید نحوه رفتار عناصر را با تنظیم موقعیت آنها در جریان عادی یا با حذف کامل آنها از آن تغییر دهید. شروع با یک سند محکم و ساختار یافته که در جریان عادی قابل خواندن است، بهترین راه برای شروع هر صفحه وب است. این تضمین میکند که محتوای شما حتی اگر کاربر از یک مرورگر بسیار محدود یا دستگاهی مانند صفحهخوان که محتوای صفحه را میخواند استفاده کند، قابل خواندن است. علاوه بر این، از آنجایی که جریان عادی برای ایجاد یک سند قابل خواندن طراحی شده است، با شروع به این روش، به جای اینکه با ایجاد تغییرات در طرحبندی، با سند دست و پنجه نرم کنید، با آن کار میکنید.
قبل از اینکه عمیقتر به روشهای مختلف طرحبندی بپردازید، بهتر است برخی از مواردی را که در ماژولهای قبلی در رابطه با جریان عادی سند مطالعه کردهاید، دوباره مرور کنید.
عناصر به طور پیشفرض چگونه چیدمان میشوند؟
این فرآیند با چیدمان جعبههای عناصر منفرد به گونهای آغاز میشود که هرگونه padding، border یا margin که دارند به محتوای آنها اضافه میشود. این چیزی است که ما آن را مدل جعبه مینامیم.
به طور پیشفرض، محتوای یک عنصر سطح بلوک، فضای درونخطی موجود عنصر والد حاوی آن را پر میکند و در امتداد بعد بلوک رشد میکند تا محتوای آن را در خود جای دهد. اندازه عناصر سطح درونخطی فقط اندازه محتوای آنهاست. میتوانید عرض یا ارتفاع را روی برخی از عناصر که مقدار پیشفرض ویژگی نمایش آنها inline است، مانند ، تنظیم کنید، اما مقدار نمایش همچنان درونخطی باقی میماند.
اگر میخواهید ویژگی نمایش یک عنصر سطح درونخطی را به این روش کنترل کنید، از CSS برای تنظیم آن به گونهای استفاده کنید که مانند یک عنصر سطح بلوک رفتار کند (مثلاً با یا که ویژگیهای هر دو را با هم ترکیب میکند).
این توضیح میدهد که عناصر چگونه به صورت جداگانه ساختار یافتهاند، اما نحوه ساختار آنها هنگام تعامل با یکدیگر چگونه است؟ جریان چیدمان عادی (که در مقاله معرفی چیدمان به آن اشاره شد) سیستمی است که عناصر توسط آن در داخل نمای مرورگر قرار میگیرند. به طور پیشفرض، عناصر سطح بلوک در جهت جریان بلوک قرار میگیرند که بر اساس حالت نوشتاری والد (اولیه: horizontal-tb) است. هر عنصر در یک خط جدید زیر آخرین عنصر ظاهر میشود و هر کدام با هر حاشیهای که مشخص شده است از هم جدا میشوند. به عنوان مثال، در انگلیسی (یا هر حالت نوشتاری افقی، از بالا به پایین) عناصر سطح بلوک به صورت عمودی قرار میگیرند.
عناصر درونخطی رفتار متفاوتی دارند. آنها در خطوط جدید ظاهر نمیشوند. در عوض، همه آنها در یک خط به همراه هر محتوای متنی مجاور (یا پیچیده شده) قرار میگیرند، تا زمانی که فضایی برای آنها در عرض عنصر سطح بلوک والد وجود داشته باشد. اگر فضایی وجود نداشته باشد، محتوای سرریز شده به یک خط جدید منتقل میشود.
اگر دو عنصر مجاور عمودی هر دو حاشیه داشته باشند و حاشیههای آنها به هم برسد، حاشیه بزرگتر از دو حاشیه باقی میماند و حاشیه کوچکتر ناپدید میشود. این به عنوان فروپاشی حاشیه شناخته میشود. جمع شدن حاشیهها فقط در جهت عمودی اهمیت دارد.
بیایید به یک مثال ساده نگاه کنیم که همه اینها را توضیح میدهد:
توجه داشته باشید که چگونه HTML دقیقاً به همان ترتیبی که در کد منبع ظاهر میشود، نمایش داده میشود، به طوری که عناصر بلوکی روی یکدیگر قرار گرفتهاند.
برای بسیاری از عناصر صفحه شما، جریان عادی دقیقاً طرح مورد نیاز شما را ایجاد میکند. با این حال، برای طرحبندیهای پیچیدهتر، باید این رفتار پیشفرض را با استفاده از برخی از ابزارهای موجود در CSS تغییر دهید. شروع با یک سند HTML با ساختار خوب بسیار مهم است زیرا میتوانید به جای مبارزه با آن، با نحوه چیدمان پیشفرض چیزها کار کنید.
روشهایی که میتوانند جریان عادی را نادیده بگیرند و نحوه چیدمان عناصر در CSS را تغییر دهند، که در این ماژول به تفصیل به آنها خواهیم پرداخت، عبارتند از:
- ویژگی display
مقادیر استاندارد مانند block، inline یا inline-block میتوانند نحوه رفتار عناصر را در جریان عادی تغییر دهند، به عنوان مثال، با ایجاد یک عنصر سطح block مانند یک عنصر سطح inline رفتار کنند (ما این موارد را در درس مدل Box بررسی کردیم).
- Floats
اعمال یک مقدار float مانند left میتواند باعث شود عناصر سطح block در یک طرف یک عنصر قرار بگیرند، مانند روشی که تصاویر گاهی اوقات متن را در اطراف خود در طرحبندیهای مجله شناور میکنند.
- موقعیتیابی
ویژگی position به شما امکان میدهد تا دقیقاً محل قرارگیری کادرها را در داخل کادرهای دیگر کنترل کنید. موقعیتیابی استاتیک در جریان عادی پیشفرض است، اما میتوانید با استفاده از مقادیر دیگر، چیدمان عناصر را به طور متفاوتی تنظیم کنید، به عنوان مثال، آنها را با استفاده از در بالای نمای مرورگر ثابت کنید.
- سیستمهای چیدمان خاص که از طریق display قابل دسترسی هستند
همچنین ما روشهای چیدمان کاملی داریم که از طریق مقادیر نمایشی خاص فعال میشوند. مهمترین مواردی که باید در مورد آنها بدانید، CSS grid و Flexbox هستند که هر دو نحوه چیدمان عناصر فرزند را در داخل والد خود تغییر میدهند.
- طراحی واکنشگرا
طراحی واکنشگرا به ایجاد طرحبندیهایی اشاره دارد که با دستگاههای مختلفی که صفحه وب روی آنها نمایش داده میشود (مثلاً دسکتاپ و تلفن همراه) سازگار میشوند. طراحی واکنشگرا هیچ ابزار طرحبندی خاصی را ارائه نمیدهد؛ مهمترین جزء آن است که به شما امکان میدهد طرحبندیهای مختلفی را بسته به ویژگیهای دستگاه مانند عرض صفحه یا وضوح تصویر اعمال کنید.
تکنیکهای طرحبندی دیگری نیز وجود دارند که کمتر مورد استفاده قرار میگیرند و در این ماژول به آنها نمیپردازیم:
طرحبندی جدول
ویژگیهای طراحیشده برای استایلدهی به بخشهای یک جدول HTML را میتوان با استفاده از و ویژگیهای مرتبط، روی عناصر غیر جدولی نیز استفاده کرد.
طرحبندی چند ستونی
ویژگیهای طرحبندی چند ستونی میتوانند باعث شوند محتوای یک بلوک به صورت ستونی طرحبندی شود، همانطور که ممکن است در یک روزنامه ببینید.
