همه ی ماها اسم سی اس اس رو شنیدیم و خیلی هامونم روش تسلط کامل داریم و در این بین بعضی هامونم سختمونه بریم طرفش و یاد بگیریمش! (نمیدونی سی اس اس چیه؟!! بیخیال خوندن ادامه ی این پست بشو! :دی)
خود من هم زمانی از سی اس اس چیزی نمیفهمیدم و باید بگم که فقط یک “جرقه” ی تقریبا بزرگ باعث شد که به طور کامل این زبان دوست داشتنی رو یاد بگیرم! بله، جرقه!
بذارید یک مثال بزنم براتون:
تاحالا شده از یک شناگر حرفه ای بپرسید، چطور شناکردن رو یاد گرفته؟!
معمولا 80 درصدِ این ها جواب مشابهی میدن!
میگن همون موقع که داشتیم غرق(غرغ، قرق یا قرغ؟!) میشدیم، یکدفه شناکردن رو یاد گرفتیم و تونستیم خودمون رو از آب نجات بدیم!
احتمالا جمله ی “دلتو بزن به دریا” رو شنیدین!
حالا چرا اینا رو میگم؟! دلیل داره! دقیقا در مورد یادگیری سی اس اس هم باید یک جرقه، یک تحول و یک دگرگونی در شما به وجود بیاد و این تحول و دگرگونی، به منزله ی همون غرق(غرغ، قرق، قرغ؟!) شدنه! یعنی باید یه جورایی خودتون رو بندازین تو هچل و بعدش تمام سعیتون رو بکنین تا سی اس اس رو یاد بگیرین و مطمئن باشین که به طور کامل اون رو درک خواهید کرد!
حالا چطور خودتون رو بندازید تو هچل؟! اونم راه داره و البته احتمال غرق شدنتون هم خیلی زیاده! :)
مثلا به یک شرکت یا یک نفر، قول طراحی سایتش رو بدین و مطمئنش کنین که سایتش رو فول سی اس اس طراحی میکنین!
اما شما سی اس اس بلد نیستین! :دی ولی باید سعی کنین که توی این مدتی که قصد دارین سایت اون یارو رو آماده کنین، هم سی اس اس یاد بگیرین، هم روی سایت اعمالش کنین! به ظاهر خیلی سخت نشون میده، اما باور کنین که یادگیری سی اس اس با داشتن حداقل آی کیو هم شدنیه! :)

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

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

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

body {
background-color: #1eb8ff;
}

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

Background-color:

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

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

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

body {
color: #ffffff;
}

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

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

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