کدوسریال نود32شاپ تیس

آموزش سی اس اس در کنار آموزش html گام اول برای آموزش طراحی وب سایت می باشند.

ما در این سایت قست داریم تا این مفاهیم رابه زبانی ساده برای ما بازگو کنیم و به شما آموزش دهیم.

css اصلی ترین راه برای زیبا سازی سایت ویا وبلاگ هست که شما با استفاده از ان خواهید توانست جلوه خاصی به وبسایت خود بدهید

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

امیدواریم بخش آموزش سی اس اس برای شما مفید باشد.

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

صبر کنید الان بهتون می گم

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

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

خروجی این کد متنblogcell.ir هسته که با رنگ آبی با  اندازه ی 16 پیکسل و با فونت Tahoma نمایش داده می شود. 

blogcell.ir

یه  اصطلاح : در 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 که در اینجا به نام fontStyle1 تعریف شده به صورت  زیر استفاده کنید :

 مزیت استفاده از CSS در مقابل ویژگی های خود تگهای html چیه ؟
1) کاملا مشخصه که اگه بخواید از attribute های خود html استفاده کنید ، بدلیل اینکه باید اونها رو در هر تگ دوباره و چندباره تکرار کنید حجم فایل html شما خیلی زیاد میشه ، در صورتی که ما با استفاده از CSS میتونیم یک دسته از attribute ها رو فقط یکبار و در یکجا تعریف کنیم و تگهای مختلف به اون دسته تنظیمات ارجاع بدن و نیازی به آوردن تنظیمات در خود تگ و هدر دادن  فضای بیشتر نباشه . با CSS کلی در اندازه ی فایل صفحه ی سایتتون  صرفه جویی می کنید !
2) خوب هر چی اندازه ی فایل سایتتون کوچیکتر باشه سرعت باز  شدن صفحه ی وب هم مسلما بیشتر میشه . که اینکار با CSS میسره !
3) تغییر دادن صفحه ی وبتون به مراتب راحتتر میشه . تو مثال بالا فرض کنید بعد از یه مدتی استقلالی میشید و عاشق رنگ آبی . و تصمیم می گیرید همه ی اون 100 تا جایی کهblogcell.ir رو با رنگ قرمز تو صفحه وبتون آورده بودید آبی کنید . حالا اگه از attribute های html استفاده کرده باشید باید تمام کد صفحه تون رو جستجو کنید و هر جا متن blogcell.ir رو آوردید برید و مقدار ویژگی color تگ font رو از red به blue تغیر بدید . ولی اگه از CSS استفاده میکردید فقط همون یکجا (توی Selector مورد نظر) red رو تبدیل به blue می کردید و همه ی تگهایی که به این Selector ارجاع میدادند تغیرات رو متوجه میشن !
4) تنظیمات CSS رو می تونید توی فایل جداگونه بزارید و به این ترتیب استفاده و نگهداریش راحتتره !
و ...

این اولین پست سایتم بود زبان های تحت وب در اموزش های آینده نیز با ما باشید تا بیشتر با وب آشنا شوید.

منبع:www.blogcell.ir