آموزش css (سی اس اس)

سی اس اس و انواع نوشتن آن:

برای نوشتن سی اس اس (css) سه روش کلی وجود دارد اما بهترین روش سی اس اس خارجی می باشد که از لحاظ سئو نیز به شما کمک می کند مورد تایید موتورهای جستجو قرار بگیرید.
سی اس اس خارجی (external):  بهترین روش ممکن می باشد و شما یک فایل css که حاوی استایل ها می باشد را با تگ لینک وارد صفحه می کنند. در این روش به راحتی فایل شما توسط مرورگر بازدید کننده کش می شود و سرعت لود سایت در بازدید های بعدی چند برابر خواهد بود. مثال:

سی اس اس داخلی (internal): در این روش شما کدهای سی اس اس را در قسمت head به صورت مستقیم وارد می کنند. که این روش در مواقع ضروری فقط توصیه می شود.

سی اس اس درون خطی (inline) : در این روش استایل مستقیم به تگ مربوطه اعمال می شود. این روش در هنگام تست صفحه توسط برنامه نویس انجام می شود اما به هیچ عنوان کدهایی به این شکل نباید در صفحه باقی بماند.

سی اس اس

بهترین روش استفاده از این 3 نوع روش اول (سی اس اس خارجی)  می باشد. چون به مرورگرها کمک می کند تا استایل را در حافظه نهان خود ذخیره کند و سرعت لود سایت بیشتر شود.

آموزش سی اس اس :

برای آموزش سی اس اس کتاب ها و دوره های آموزشی مختلفی وجود دارد. بهتر است از آموزش های گام به گام و تصویری استفاده کنید حتما سعی کنید که به صورت عملی آموزش های سی اس اس را اجرا کنید. کتاب و فیلم های آموزشی را می توانید از جاب تیم دانلود کنید. تمام مطالب css در همین دسته بندی قرار خواهد گرفت.

تاریخچه سی اس اس :

در سال 1996 نسخه اول زبان سی اس اس (CSS) تحت عنوان CSS 1.0 ایجاد شد و در سال 1998 هم نسخه CSS 2.0 به بازار عرضه شد. سپس در سال 2004 با اعمال برخی بازنگری ها در کدهای سی اس اس، نسخه CSS 2.1 شکل گرفت و در نهایت در سال 2011 با رفع برخی مشکلات این نسخه، مجدد تحت همین عنوان به دنیا عرضه شد و این نسخه از سی اس اس (CSS) همان نسخه ای است که طراحان وب با آن سر و کار دارند.
با توجه به سرعت گسترش وب و همچنین ایجاد وب اپلیکیشن ها و دستگاه های موبایل نیاز به نسخه جدیدی از سی اس اس بود که می بایست رویکردی کاملاً متفاوت را اتخاذ می کرد. از این رو نسخه CSS 3 ایجاد شد که هنوز هم در حال توسعه و تکمیل است.

سی اس اس در مرورگرهای مختلف : 

کدهای سی اس اس در برخی از مرورگرها کمی متفاوت است مثلا مرورگر safary باید کدهایی با کمی تفاوت داشته باشد البته فقط در برخی از استایل های انگشت شمار این اتفاق می افتد اما بهترین مرورگر برای نمایش خروجی کار کروم (chrome) می باشد.

سی اس اس و فریم ورک های آن :

برای سرعت در کار طراحی و استایل دهی صفحات وب فریم ورک های برای css آماده شده است که کمک می کند شما با کمترین فعالیت سایت های ریسپانسیو بسیار حرفه ای و زیبا طراحی کرد برخی از این فریم ورک های سی اس اس به شرح ذیل می باشد

• فریم ورک بوت استرپ

• فریم ورک Foundation

• فریم ورک Semantic UI

• فریم ورک Pure.CSS

• فریم ورک UIKit

• فریم ورک زیبای  Materialize CSS

بیشتر بدانیم : معرفی بهترین فریمورک های UI (کتابخانه های css)

چرا باید از css (سی اس اس) استفاده کنیم؟

اکثر کسانی که به شما درخواست طراحی سایت دارند نیاز بعدیشان بهینه سازی سایت برای رقابت در سئو می باشد برخی از مزایای این زبان به صورت زیر می باشد.

• نگهداری آسان کدها
• جلوگیری از کدنویسی کثیف و غیراصولی
• بهبود بخشیدن به سرعت وب سایت و زمان بارگذاری کمتر برای صفحات

معایب css چیست؟

ناتوانی در انتخاب والد در سی اس اس نمی‌توان برای هر عنصر، گزینه بالاتر یا والد را انتخاب کرد. دلیل اصلی آن، بهبود کارایی در نمایش صفحات وب در مرورگرهای مختلف است.

ناتوانی در نام گذاری نقش‌ها در زمان ارجاع script‌های بخش کاربر و تغییر Selectorها

تفاوت کارکرد CSS در مرورگرهای مختلف که ممکن است مشکلاتی برای برنامه نویسان ایجاد کند.

دسترسی برای ایجاد هرگونه تغییر به علت متن باز بودن CSS می‌تواند برنامه نویسان را در دام تغییرات ناخواسته ای بیندازد که ممکن است روی ظاهر کل سایت تاثیر بگذارند.

نسخه استاندارد css :

آخرین نسخه استاندارد و پیشنهاد شده نسخه css3  می باشد که امروزه تمام مرورگرها با این نسخه سازگار هستند.

انواع نسخه های css

نسخه اول سی اس اس که همانطور گفته شد فقط فونت و رنگ ها را می توانستید به کار ببرید در نسخه دوم علاوه بر تغییر رنگ و فونت ها می توانستید برخی از اشکال را به سمت راست یا چپ حرکت دهید.

در نسخه سی اس اس سه به این دلیل که نسخه دوم مورد قبول واقع نشد اصلاحاتی صورت گرفت در واقع سی اس اس 3 همان سی اس اس 2 است با اندکی تغییر همراه بوده است.نسخه آخر css چهار در آینده قرار ساخته شود.

سی اس اس یک زبان نشانه گذاری است. css و html هر دو مکمل هستند. اگر css را کاشی و سرامیک بدونیم html ستون یک ساختمان و اینگونه می شود نتیجه گرفت که ساختمانی که متشکل از ستون است بدون نما هیچ جلوه زیبایی ندارد و css به این ساختمان با فونت و رنگ نما می دهد. به طور کلی اگر سایتی بدون سی اس اس باشد چهره ناپسندی را به خود میگرفت.

بیشتر بدانیم : آموزش html