در قسمت قبل یاد گرفتیم که کلاسی از استایل ها بنویسیم و اون کلاس رو به یک یا چند تگ خاص نسبت بدیم. اما چیزی که در این پست قرار هست یاد بگیریم کمی متفاوت تر از بحث های قبلی هست و سوالِ خیلی از تازه کارهاست!
سی اس اس، ویژگی مهم تری نسبت به رنگ یا فونت دادن به یک عنصر داره… اصل سی اس اس چیز دیگه ای هست و تغییر دادن ظاهر یک عنصر، از مباحث معمولی اون هست و هر کسی هم با کمی ور رفتن و دست کاری کردن، می تونه یاد بگیردش…!
و اما این اصل مهم سی اس اس، یعنی مکان دهی به یک عنصر در صفحه!
طراحای معروفی که از گذشته کارهاشون استاندارد بود و همیشه طبق همین استانداردها طراحی میکردن، بعد از پیدایش سی اس اس و معمول شدن استفاده از اون، با خودشون عهد بستن که دیگه از جداول (table) برای مکان دهی به عناصر موجود در صفحه استفاده نکنن و این کار رو غیر استاندارد و منسوخ اعلام کنن و از این به بعد روشی آسون تر و کاربردی تر و انعطاف پذیر تر رو به کار ببرن!
در این پست تا حدودی یاد میگیریم که به یک یا چند عنصر در یک صفحه موقعیت و مکان بدیم و اگر تا به حال از جداول برای موقعیت دهی به عناصر استفاده میکردیم، دیگه این روش رو دور بریزیم و سی اس اس رو به کار بگیریم…
از این قسمت به بعد رو به دقت بخونین که هرچی هست، همین جاست!
فرض کنین که میخوایم یه کادر در بالا و وسط صفحه داشته باشیم و در اون کادر، یک متنِ یک خطی داشته باشیم:
یک. خب اول باید از یه تگ نگه دارنده برای گذاشتن متن مورد نظر در اون استفاده کنیم… بهترین گزینه، تگ div هست!
به کد زیر نگاه کنین:

<div id="header">متن مورد نظر</div>

احیانا واضح هست دیگه؟!
دو. حالا استایل های زیر رو ببینین:

#header {
width: 300px;
height: 100px;
margin: 0 auto;
text-align: center;
}

تحلیل این دستورات:
دستور Width درواقع عرض تگ div رو مشخص میکنه که مقدارش رو من به واحد پیکسل دادم! همینطور دستور height که ارتفاع تگ div رو مشخص کرده.
و اما margin که شاید بشه گفت مهمترین وظیفه رو در مکان دهی بر عهده داره… دستور margin نسبت به چهار جهت راست، چپ، بالا و پایین میتونه عکس العمل های خوبی نشون بده و باهاش می‌شه اندازه‌ی حاشیه‌های بیرونی رو تنظیم کرد…

در اینجا من مارجین رو برابر با دو مقدار صفر و اوتو قرار دادم. یعنی مارجین بالا و پایین صفر باشن و چپ و راست هم اوتو. برای این اوتو می‌ذارم که بیاد وسط صفحه. البته این روش در حالت عادی کار نمی‌کنه و باید کد زیر رو هم به استایل اضافه کنیم:

* {margin: 0; padding: 0;}

همین دیگه…