CSS مخفف Cascading Style Sheets هست . با استفاده از زبان ساده ی CSS شما می تونید تنظیمات خاصی رو روی تگ های html (یا زبان های Murkup دیگه مثل xml) اعمال کنید.

 

هدف CSS جداسازی طراحی بدنه ی یک فایل html از شیوه ی نمایش اون فایل html هست. با CSS شما می تونید تعیین کنید که هر تگ html به چه شکلی نمایش داده بشه. مثلا رنگ ، اندازه و نوع فونت متن درون تگ رو مشخص کنید. یا اینکه پس زمینه و ویژگی های دیگه ی تگ رو تعیین کنید.

 

شاید با خودتون بگید که هر تگ html خودش یک سری ویژگی هایی داره که با دادن مقدار به اونها میشه نوع نمایش تگ رو مشخص کرد . پس دیگه CSS واسه چیه؟

 

مثلا تگ <font> در زیر رو ببینید که ویژگی های رنگ و اندازه و نوع فونت رو در خودش داره:

 

<font color=”red” size=”12px” face=”Tahoma”>onlymsm.ir</font>

 

خروجی این کد متن onlymsm.ir هست که با رنگ قرمز ، اندازه ی ۱۲ پیکسل و با فونت Tahoma نمایش داده میشه.

 

(در html اصطلاحا به ویژگی هایی که روی هر تگ می تونید اعمال کنید attribute های اون تگ میگن . مثلا size و color از attribute های تگ font هستند )

 

خب پس با توجه به اینکه هر تگی خودش می تونه نوع نمایشش رو تعیین کنه ، دیگه چه لزومی به استفاده از CSS هست؟

شما فرض کنید می خواید تو صفحه ی وبتون ۱۰۰ بار (به تعداد زیاد) در جاهای مختلف صفحه ، متنی رو با شیوه ی نمایش خاصی بیارید . اگر بخواهید از attribute های هر تگ برای نوع نمایش اون استفاده کنید ، مثلا در مثال بالا باید ۱۰۰ بار تگ font رو همراه با هر سه ویژگی color ، size و face در کد صفحه ی وبتونن بیارید.

 

ولی حالا توی CSS در نظر بگیرید: شما تنظیمات color ، size و face رو فقط در یک جای کد صفحه ی وبتون میارید و به این دسته تنظیمات یک اسم (توی css اصطلاحا Selector) اختصاص میدید و به جای اینکه در هر ۱۰۰ مرتبه تنظیمات رو توی خود تگ بیارید ، فقط میگید که آقای تگ font برو و تنظیمات فلان Selector رو روی خودت اعمال کن به صورت خاص در این مثال پیاده سازی CSS اون به شکل زیره:

 

اول باید Selector مد نظرتون رو با تنظیمات نمایشش در تگ <style> تعریف کنید. به شکل زیر:

 

<style>

.fontStyle1{color:red; font-size:12px; font-family:Tahoma;}

</style>

 

و بعد هر جایی که خواستید می تونید از این Selector که در اینجا به نام fontStyle1 تعریف شده به شکل زیر استفاده کنید:

 

<font class=”fontStyle1“>onlymsm.ir</font>

 

از ویژگی class در همه ی تگهای html می تونید برای مشخص کردن تنظیمات اعمالی روی تگ استفاده کنید. که البته تنظیماتی با چنین اسمی باید قبلا توی تگ Style نوشته باشید. مثلا در کد بالا تمام تنظیمات سلکتور fontStyle1 روی تگ font اعمال میشه.

 

مزیت استفاده از CSS در مقابل ویژگی های خود تگهای html چیه؟

 

۱- کاملا مشخصه که اگه بخواید از attribute های خود html استفاده کنید، بدلیل اینکه باید اونها رو در هر تگ دوباره و چندباره تکرار کنید حجم فایل html شما خیلی زیاد میشه ، در صورتی که ما با استفاده از CSS میتونیم یک دسته از attribute ها رو فقط یکبار و در یکجا تعریف کنیم و تگهای مختلف به اون دسته تنظیمات ارجاع بدن و نیازی به آوردن تنظیمات در خود تگ و اتلاف فضای بیشتر نباشه . با CSS کلی در اندازه ی فایل صفحه ی وبتون صرفه جویی می کنید !

 

۲- خوب هر چی اندازه ی فایل وبتون کوچیکتر باشه سرعت لود شدن صفحه ی وب هم مسلما بیشتر میشه. که اینکار با CSS میسره !

 

۳- تغییر دادن صفحه ی وبتون به مراتب راحتتر میشه. تو مثال بالا فرض کنید بعد از یه مدتی استقلالی میشید و عاشق رنگ آبی . و تصمیم می گیرید همه ی اون ۱۰۰ تا جایی که onlymsm.ir رو با رنگ قرمز تو صفحه وبتون آورده بودید آبی کنید . حالا اگه از attribute های html استفاده کرده باشید باید تمام کد صفحه تون رو جستجو کنید و هر جا متن onlymsm.ir رو آوردید برید و مقدار ویژگی color تگ font رو از red به blue تغیر بدید . ولی اگه از CSS استفاده میکردید فقط همون یکجا (توی Selector مورد نظر) red رو تبدیل به blue می کردید و همه ی تگهایی که به این Selector ارجاع میدادند تغيیرات رو متوجه میشن.

 

۴- تنظیمات CSS رو می تونید توی فایل جداگونه بزارید و به این ترتیب استفاده و نگهداریش راحتتره !

و …