<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;}

همین دیگه…

• سی اس اس اونقدرها هم بی معنی نیست! – دو (مخاطب » افراد مبتدی)
• سی اس اس اونقدرها هم بی معنی نیست! – یک (مخاطب » افراد مبتدی)
• گرادینت متن با سی اس اس
• جی‌کوئری UI یا هرآنچه برای طراحی یک اپلیکیشن نیاز دارید
• افکت نقطه‌نقطه برای تصاویر با سی‌اس‌اس

P {
color: #33b133;
font-family: Tahoma;
}

تحلیل این دستور:
از اونجایی که ما میخواستیم این دستورات رو به یک پاراگراف نسبت بدیم، پس باید این استایل ها به تگ P نسبت داده میشدن! درسته؟!
خب، در اینجا ما میخوایم دوتا دستور بدیم… یعنی هم رنگ رو مشخص کنیم، هم فونت رو!
پس باید اول (ترتیبش فرقی نمیکنه) با دستور color رنگ متن رو مقدار دهی کنیم (که با این دستور قبلا آشنا شدیم) و بعد از اون یه اینتر میزنیم و میایم خط پایین و نوع فونت رو مشخص میکنیم…
برای مشخص کردن فونت هم از مشخصه ی font-family استفاده میکنیم و برای مقدار دهی هم اسم فونت دلخواه رو میدیم! توجه داشته باشین که اگر فونتی رو بدید و اون فونت در کامپیوتر یک کاربر وجود نداشته باشه، برای اون متن، فونت پیشفرض مرورگر مورد استفاده قرار میگیره… اما شاید شما دوست نداشته باشید که مثلا اگر فلان فونت در کامپیوتر کاربری وجود نداشت، فونتی بغیر از فونت دلخواه شما جایگزین بشه… پس راه حل؟!
خیلی ساده هست! به جای اینکه فقط یک فونت رو مشخص کنین، چند فونت رو به مشخصه ی font-family معرفی کنین تا اگر فونت اول وجود نداشت، فونت بعدی جایگزین بشه… دستور زیر همین چیزی که گفتم هست:

P {
color: #33b133;
font-family: BElham, Tahoma, Arial, Times New Roman;
}

همونطور که میبینین، اول از همه من فونت BElham رو به مشخصه font-family دادم و مسلما این فونت در هر کامپیوتری موجود نیست و من بعد از اون فونت Tahoma رو به این مشخصه پیشنهاد کردم و اگر این فونت هم در کامپیوتری یافت نشد، فونت بعدی یعنی Arial به پاراگراف اختصاص داده میشه و همینطور این رویه پیش میره تا نوبت به آخرین فونت برسه… اگر اون هم وجود نداشت، اونوقته که دوباره مرورگر جان دخالت میکنه و فونت پیشفرض خودش رو قالب میکنه! (البته به جز فونت BElham، بقیه ی فونت هایی که در دستور بالا اومدن، در هر کامیپتری پیدا میشن!).

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

#paragraph-1 {
color: #33b133;
font-family: Tahoma, Arial;
}

تحلیل این دستور:
بله، قبل از هر چیز، ابتدا باید کاراکتر # بذارین و بعد هم نامی دلخواه و البته متناسب برای کلاس! مثلا من نام Paragraph-1 رو انتخاب کردم.
یه سوال؟! چرا تا الان فقط اسم تگ رو مینوشتیم و استایل مورد نظر رو بهش میدادیم و کار حل میشد ولی الان یه اسم دلخواه نوشتیم و تازه قبلش هم یه کاراکتر # گذاشتیم؟!
واضحه! هر وقت میخوایم مستقیما به یک تگ، استایلی رو نسبت بدیم، کافیه که اسم همون تگ رو بنویسیم و بعدش هم استایل های مربوطه! اما زمانی که میخوایم از یک تگ در چندین جا استفاده کنیم و هر کدوم از اون تگ ها باید نسبت به هم متفاوت باشن، باید برای هر کدومشون یه کلاس یا آی‌دی درست کنیم و به تگ مورد نظر نسبت بدیمشون! برای نسبت دادن آی‌دی بالا به تگ پاراگراف هم مثل زیر عمل میکنیم (برای همه ی تگ ها به همین صورت عمل میکنیم):

<p id="paragraph-1">متن پاراگراف</p>

حالا میخوایم استایل های پاراگراف دوم رو بنویسیم:

#paragraph-2 {
color: #009cff;
font-family: Tahoma, Arial;
font-weight: bold;
}

در مورد این استایل هم مثل پاراگراف یک عمل می‌کنیم.

.paragraph-3 {
color: #ff1260;
font-family: Tahoma, Arial;
flign: justify;
}

خب، نکته‌ای که الان اینجا وجود داره اینه که ما پاراگراف سوم رو به‌صورت آی‌دی درست نکردیم و به‌صورت کلاس درآوردیم.

<p class="paragraph-3">متن پاراگراف</p>

از کلاس‌ها ما می‌تونیم بارها در صفحه استفاده کنیم اما از آی‌دی‌ها فقط یک بار باید استفاده کنیم. یعنی paragraph-1 و paragraph-2رو فقط هر کدوم می‌تونیم یک بار به تگ پی بدیم. اما pragraph-3 رو می‌تونیم به هرچقدر تگ پی که دلمون خواست بدیم و هیچ اتفاقی هم نمی‌اُفته. این رو هم احتمالا متوجه شدید که برای مشخص کردن آی‌دی، اول اسمش شارپ (#) می‌ذاریم و برای کلاس هم اول اسمش نقطه (.).

• سی اس اس اونقدرها هم بی معنی نیست! – سه (مخاطب » افراد مبتدی)
• سی اس اس اونقدرها هم بی معنی نیست! – یک (مخاطب » افراد مبتدی)
• گرادینت متن با سی اس اس
• جی‌کوئری UI یا هرآنچه برای طراحی یک اپلیکیشن نیاز دارید
• افکت نقطه‌نقطه برای تصاویر با سی‌اس‌اس

دقت کنین؛ از اونجایی که اینکار یکم ریسکش زیاده و ممکنه ضایع بشین، باید تمام سعیتون رو بکنین و اگر نتیجه ای نگرفتین، من رو مقصر ندونین! یحتمل مشکل از جای دیگری هست! :دی

-مواد لازم برای رهایی از غرق شدن، یا همون یادگیری سی اس اس و آماده کردن سایت فول سی اس اس اون آدم بیچاره:

قبل از هرچیزی، باید مطمئن بشین که به زبان انگلیسی در حد اول دوم دبیرستان تسلط دارین یا نه! اگه آره که بریم دنبال مابقی ماجرا!
بعد از شرط بالا، مهمترین چیزی که باید باهاش سروکله بزنین اینه که یه سری از دستورات پایه رو درک کنین و بتونین بخونینشون! اصلا سخت نیست! چندتا از مهماش رو به همراه توضیح، مثال میزنم:
مثلا من یک صفحه ی html دارم که میخوام رنگ زمینه ی اون صفحه رو آبی کنم!
دستور سی اس اس زیر به راحتی هرچه تمام این کار رو انجام میده:

body {
background-color: #1eb8ff;
}

تحلیل این دستور:
در این دستور چندتا واژه دیده میشه!
اولی body هست. یعنی “بدنه”! :)
احتمالا با تگ body در کدهای html آشنا هستین و میدونین که تمامی محتوای یک سایت (یعنی هرچیزی که با رفتن به یک سایت، توی مرورگر میبینیم) توی این تگ قرار میگیرن و به اصطلاح مادر همه ی تگ هایی هست که در زیر این تگ قرار میگیرن!
بعد از واژه ی body یه آکولاد – } – باز میکنیم و بعدش یه اینتر میزنیم تا بیایم خط بعد وعینا مینویسیم:

Background-color:

معنیش میشه “رنگ زمینه”! که جلوش یه علامت دونقطه هم گذاشتیم!
حالا با خیال راحت کد rgb رنگ مورد نظر رو مینویسیم! برای پیدا کردن کد rgb یک رنگ، راه های مختلفی وجود داره… یکیش همین فوتوشاپ کوچولو هست که وقتی یک رنگی رو انتخاب میکنین، کد اون رنگ رو در اختیارتون میذاره! راه های دیگه هم هست که اونا رو هم به مرور توضیح میدم! البته یادتون باشه که قبل از نوشتن کد رنگ یه علامت # (شارپ) بذارین و بعد کد رنگ رو بنویسین!
یه چیزی میگم، برای همیشه یادتون بمونه! همیشه، بعد از دادن مقدار یا مقادیر، یک علامت سمی‌کولن بذارین! (یعنی هروقت دستور دادن تموم شد، برای اینکه مرورگر بفهمه دستور تموم شده، یه سمی‌کولن بذارین)
خب امر و نهی کردن به مرورگر تموم شد و بعد از گذاشتن سمی‌کولن، یه اینتر بزنین و آکولاد – { – رو ببندین!
حالا دیگه رنگ دلخواه ( که تو مثال ما آبی بود) روی زمینه اعمال شده!
با این اوصاف، دستور سی اس اس بالا، دقیقا یه همچین چیزی رو به مرورگر میگه:
مرورگر جان! بی زحمت رنگ زمینه‌ی تگ body رو آبی (۱eb8ff) کن. تمام!

اینو خوب یاد بگیرین و بعد از تسلط کامل روی این دستور، میریم سراغ دستور بعدی که خیلی آسونم هست…

توی مثال قبل ما تونستیم رنگ زمینه ی یه صفحه رو آبی کنیم! حالا میخوایم با کمی تغییر در دستور قبلی کاری کنیم که متن های داخل یک صفحه هم به رنگ دلخواه (مثلا سفید) در بیاد.
دستور سی اس اس زیر، این کار رو برامون انجام میده:

body {
color: #ffffff;
}

اگه گفتین چرا بازم اولش نوشتم body؟!
آفرین آفرین، چون میخوام هرچی متن داخل تگ body هست رو به رنگ سفید در بیارم!
تحلیل این دستور:
برای نگارش این دستور هم مثل دستور قبل عمل کنین و تنها چیزی که در این دستور نسبت به دستور قبلی تغییر کرده، هدف و مقدار هست!
که در اینجا هدف یعنی رنگ دادن به متن و مقدار یعنی رنگ مورد نظر!

پس دستور بالا به مرورگر چی میگه؟! میگه:
مرورگر جان! بی زحمت متن‌های داخل تگ body رو سفید (ffffff) کن. تمام!

فعلا همین ها رو تمرین کنین و حالت های مختلف رو تست کنین… و تغییراتی که به وجود میاد رو با هم مقایسه کنین تا در ادامه توضیحات بیش‌تر و کاربردی تری بدم!

• سی اس اس اونقدرها هم بی معنی نیست! – سه (مخاطب » افراد مبتدی)
• سی اس اس اونقدرها هم بی معنی نیست! – دو (مخاطب » افراد مبتدی)
• گرادینت متن با سی اس اس
• جی‌کوئری UI یا هرآنچه برای طراحی یک اپلیکیشن نیاز دارید
• افکت نقطه‌نقطه برای تصاویر با سی‌اس‌اس