شاید تا حالا این سه حرف رو خیلی جاها دیده باشید ، ولی ندونید چیه !
CSS مخفف Cascading Style Sheets هست . با استفاده از زبان ساده ی CSS شما می تونید تنظیمات خاصی رو روی تگ های html (یا زبان های Murkup دیگه مثل xml) اعمال کنید !
هدف CSS جداسازی طراحی بدنه ی یک فایل html از شیوه ی نمایش اون فایل html هست . با CSS شما می تونید تعیین کنید که هر تگ html به چه شکلی نمایش داده بشه . مثلا رنگ ، اندازه و نوع فونت متن درون تگ رو مشخص کنید . یا اینکه پس زمینه و ویژگی های دیگه ی تگ رو تعیین کنید .
! سوال : شاید با خودتون بگید که هر تگ html خودش یک سری ویژگی هایی داره که با دادن مقدار به اونها میشه نوع نمایش تگ رو مشخص کرد . پس دیگه CSS واسه چیه ؟
مثلا تگ <font>در زیر رو ببینید که ویژگی های رنگ و اندازه و نوع فونت رو در خودش داره :
<font color=”red” size=”12px” face=”Tahoma”>7Learn.com</font>
خروجی این کد متن 7Learn.com هست که با رنگ قرمز ، اندازه ی 12 پیکسل و با فونت Tahoma نمایش داده میشه.
( اصطلاح : در html اصطلاحا به ویژگی هایی که روی هر تگ می تونید اعمال کنید attribute های اون تگ میگن . مثلا size و color از attribute های تگ font هستند )
خب پس با توجه به اینکه هر تگی خودش می تونه نوع نمایشش رو تعیین کنه ، دیگه چه لزومی به استفاده از CSS هست ؟
! جواب : شما فرض کنید می خواید تو صفحه ی وبتون 100 بار (به تعداد زیاد) در جاهای مختلف صفحه ، متنی رو با شیوه ی نمایش خاصی بیارید . اگر بخواهید از attribute های هر تگ برای نوع نمایش اون استفاده کنید ، مثلا در مثال بالا باید 100 بار تگ font رو همراه با هر سه ویژگی color ، size و face در کد صفحه ی وبتونن بیارید .
ولی حالا توی CSS در نظر بگیرید : شما تنظیمات color ، size و face رو فقط در یک جای کد صفحه ی وبتون میارید و به این دسته تنظیمات یک اسم (توی css اصطلاحا Selector) اختصاص میدید و به جای اینکه در هر 100 مرتبه تنظیمات رو توی خود تگ بیارید ، فقط میگید که آقای تگ font برو و تنظیمات فلان Selector رو روی خودت اعمال کن . به صورت خاص در این مثال پیاده سازی CSS اون به شکل زیره :
اول باید Selector مد نظرتون رو با تنظیمات نمایشش در تگ<style> تعریف کنید . به شکل زیر :
<style>
.fontStyle1{color:red; font-size:12px; font-family:Tahoma;}
</style>
و بعد هر جایی که خواستید می تونید از این Selector که در اینجا به نام fontStyle1 تعریف شده به شکل زیر استفاده کنید :
<font class=”fontStyle1“>7Learn.com</font>
7Learn.comاز ویژگی class در همه ی تگهای html می تونید برای مشخص کردن تنظیمات اعمالی روی تگ استفاده کنید . که البته تنظیماتی با چنین اسمی باید قبلا توی تگ Style نوشته باشید . مثلا در کد بالا تمام تنظیمات سلکتور fontStyle1 روی تگ font اعمال میشه !
(در این پست ، هدف آموزش CSS نیست . این مثال صرفا برای درک بهتر از اینکه چرا باید از CSS استفاده کنیم آورده شده . در پست های آینده به صورت مفصل وارد بحث آموزش CSS خواهیم شد)
:: خوب حالا این همه قصه گفتیم ، مزیت استفاده از CSS در مقابل ویژگی های خود تگهای html چیه ؟
1) کاملا مشخصه که اگه بخواید از attribute های خود html استفاده کنید ، بدلیل اینکه باید اونها رو در هر تگ دوباره و چندباره تکرار کنید حجم فایل html شما خیلی زیاد میشه ، در صورتی که ما با استفاده از CSS میتونیم یک دسته از attribute ها رو فقط یکبار و در یکجا تعریف کنیم و تگهای مختلف به اون دسته تنظیمات ارجاع بدن و نیازی به آوردن تنظیمات در خود تگ و اتلاف فضای بیشتر نباشه . با CSS کلی در اندازه ی فایل صفحه ی وبتون صرفه جویی می کنید !
2) خوب هر چی اندازه ی فایل وبتون کوچیکتر باشه سرعت لود شدن صفحه ی وب هم مسلما بیشتر میشه . که اینکار با CSS میسره !
3) تغییر دادن صفحه ی وبتون به مراتب راحتتر میشه . تو مثال بالا فرض کنید بعد از یه مدتی استقلالی میشید و عاشق رنگ آبی . و تصمیم می گیرید همه ی اون 100 تا جایی که 7Learn.com رو با رنگ قرمز تو صفحه وبتون آورده بودید آبی کنید . حالا اگه از attribute های html استفاده کرده باشید باید تمام کد صفحه تون رو جستجو کنید و هر جا متن 7learn.com رو آوردید برید و مقدار ویژگی color تگ font رو از red به blue تغیر بدید . ولی اگه از CSS استفاده میکردید فقط همون یکجا (توی Selector مورد نظر) red رو تبدیل به blue می کردید و همه ی تگهایی که به این Selector ارجاع میدادند تغیرات رو متوجه میشن !
4) تنظیمات CSS رو می تونید توی فایل جداگونه بزارید و به این ترتیب استفاده و نگهداریش راحتتره !
و …
منبع
ایران تکنولوژی
CSS مخفف Cascading Style Sheets هست . با استفاده از زبان ساده ی CSS شما می تونید تنظیمات خاصی رو روی تگ های html (یا زبان های Murkup دیگه مثل xml) اعمال کنید !
هدف CSS جداسازی طراحی بدنه ی یک فایل html از شیوه ی نمایش اون فایل html هست . با CSS شما می تونید تعیین کنید که هر تگ html به چه شکلی نمایش داده بشه . مثلا رنگ ، اندازه و نوع فونت متن درون تگ رو مشخص کنید . یا اینکه پس زمینه و ویژگی های دیگه ی تگ رو تعیین کنید .
! سوال : شاید با خودتون بگید که هر تگ html خودش یک سری ویژگی هایی داره که با دادن مقدار به اونها میشه نوع نمایش تگ رو مشخص کرد . پس دیگه CSS واسه چیه ؟
مثلا تگ <font>در زیر رو ببینید که ویژگی های رنگ و اندازه و نوع فونت رو در خودش داره :
<font color=”red” size=”12px” face=”Tahoma”>7Learn.com</font>
خروجی این کد متن 7Learn.com هست که با رنگ قرمز ، اندازه ی 12 پیکسل و با فونت Tahoma نمایش داده میشه.
( اصطلاح : در html اصطلاحا به ویژگی هایی که روی هر تگ می تونید اعمال کنید attribute های اون تگ میگن . مثلا size و color از attribute های تگ font هستند )
خب پس با توجه به اینکه هر تگی خودش می تونه نوع نمایشش رو تعیین کنه ، دیگه چه لزومی به استفاده از CSS هست ؟
! جواب : شما فرض کنید می خواید تو صفحه ی وبتون 100 بار (به تعداد زیاد) در جاهای مختلف صفحه ، متنی رو با شیوه ی نمایش خاصی بیارید . اگر بخواهید از attribute های هر تگ برای نوع نمایش اون استفاده کنید ، مثلا در مثال بالا باید 100 بار تگ font رو همراه با هر سه ویژگی color ، size و face در کد صفحه ی وبتونن بیارید .
ولی حالا توی CSS در نظر بگیرید : شما تنظیمات color ، size و face رو فقط در یک جای کد صفحه ی وبتون میارید و به این دسته تنظیمات یک اسم (توی css اصطلاحا Selector) اختصاص میدید و به جای اینکه در هر 100 مرتبه تنظیمات رو توی خود تگ بیارید ، فقط میگید که آقای تگ font برو و تنظیمات فلان Selector رو روی خودت اعمال کن . به صورت خاص در این مثال پیاده سازی CSS اون به شکل زیره :
اول باید Selector مد نظرتون رو با تنظیمات نمایشش در تگ<style> تعریف کنید . به شکل زیر :
<style>
.fontStyle1{color:red; font-size:12px; font-family:Tahoma;}
</style>
و بعد هر جایی که خواستید می تونید از این Selector که در اینجا به نام fontStyle1 تعریف شده به شکل زیر استفاده کنید :
<font class=”fontStyle1“>7Learn.com</font>
7Learn.comاز ویژگی class در همه ی تگهای html می تونید برای مشخص کردن تنظیمات اعمالی روی تگ استفاده کنید . که البته تنظیماتی با چنین اسمی باید قبلا توی تگ Style نوشته باشید . مثلا در کد بالا تمام تنظیمات سلکتور fontStyle1 روی تگ font اعمال میشه !
(در این پست ، هدف آموزش CSS نیست . این مثال صرفا برای درک بهتر از اینکه چرا باید از CSS استفاده کنیم آورده شده . در پست های آینده به صورت مفصل وارد بحث آموزش CSS خواهیم شد)
:: خوب حالا این همه قصه گفتیم ، مزیت استفاده از CSS در مقابل ویژگی های خود تگهای html چیه ؟
1) کاملا مشخصه که اگه بخواید از attribute های خود html استفاده کنید ، بدلیل اینکه باید اونها رو در هر تگ دوباره و چندباره تکرار کنید حجم فایل html شما خیلی زیاد میشه ، در صورتی که ما با استفاده از CSS میتونیم یک دسته از attribute ها رو فقط یکبار و در یکجا تعریف کنیم و تگهای مختلف به اون دسته تنظیمات ارجاع بدن و نیازی به آوردن تنظیمات در خود تگ و اتلاف فضای بیشتر نباشه . با CSS کلی در اندازه ی فایل صفحه ی وبتون صرفه جویی می کنید !
2) خوب هر چی اندازه ی فایل وبتون کوچیکتر باشه سرعت لود شدن صفحه ی وب هم مسلما بیشتر میشه . که اینکار با CSS میسره !
3) تغییر دادن صفحه ی وبتون به مراتب راحتتر میشه . تو مثال بالا فرض کنید بعد از یه مدتی استقلالی میشید و عاشق رنگ آبی . و تصمیم می گیرید همه ی اون 100 تا جایی که 7Learn.com رو با رنگ قرمز تو صفحه وبتون آورده بودید آبی کنید . حالا اگه از attribute های html استفاده کرده باشید باید تمام کد صفحه تون رو جستجو کنید و هر جا متن 7learn.com رو آوردید برید و مقدار ویژگی color تگ font رو از red به blue تغیر بدید . ولی اگه از CSS استفاده میکردید فقط همون یکجا (توی Selector مورد نظر) red رو تبدیل به blue می کردید و همه ی تگهایی که به این Selector ارجاع میدادند تغیرات رو متوجه میشن !
4) تنظیمات CSS رو می تونید توی فایل جداگونه بزارید و به این ترتیب استفاده و نگهداریش راحتتره !
و …
منبع
ایران تکنولوژی
