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

سی اس اس (css) چیست؟

سی اس اس مخفف کلمات انگلیسی Cascading Style Sheets می باشد و منظور استایل دهی به صفحات وب html می باشد اگر بخواهیم به صورت ساده تری css را تعریف کنیم می توان گفت سی اس اس همان نحوه نمایش و چیدمان، اندازه و شکل تگ های html در کنار یکدیگر است مثل اندازه قلم یک نوشته که مثلا دارای سایز 14 باشد. سی اس اس به شما کمک می کند تا ظاهر نمایش تگ های اچ تی ام ال را در یک یا چندین فایل ذخیره کنید و از تکرار این استایل ها در کد های html جلوگیری کنید.

دوره های حضوری Course
آموزش و دوره حضوری css
ظرفیت : 3 دانشجو
50 ساعت وضعیت : ثبت نام
1,600,000 تومان ثبت نام

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

محل برگذاری : تهران - هفت تیر

کلیه کلاس های حضوری جاب تیم به صورت نیمه خصوصی و با حداکثر ظرفیت 6 نفر برگزار می شود بدیهی هست کیفیت آموزش برای ما در اولویت می باشد.

اساتید دوره

پروفایل بهزاد میرزازاده

بهزاد میرزازاده

مدیر تکنولوژی

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

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

 

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

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

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

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

 

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

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

 

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

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

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css"/>
</head>

 

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

<head>
<style type="text/css">
hr {color:sienna;}
p {margin-left:20px;}
</style>
</head>


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

<p style="color:sienna;margin-left:20px">سی اس اس</p>


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

 

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

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

 

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

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

 

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

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

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

  • فریم ورک Foundation

  • فریم ورک Semantic UI

  • فریم ورک Pure.CSS

  • فریم ورک UIKit

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

 

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

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

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

 

معایب css چیست؟

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

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

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

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