آموزش رایگان CSS

poster
پیش‌نمایش دوره

CSS (Cascading Style Sheets) یک زبان شیوه‌نامه است که برای توصیف ارائه یک سند نوشته شده به زبان نشانه‌گذاری مانند HTML استفاده می‌شود. CSS برای تعریف استایل و ظاهر برای صفحات وب، ازجمله طراحی، طرح‌بندی ... ادامه

برگزارکننده:  مکتب‌خونه  مکتب‌خونه
مدرس دوره:
محمدحسین سیدآقایی
محمدحسین سیدآقایی
4.7 (29 رای)
 رایگان
  
زمان مورد نیاز برای گذراندن دوره:  26 جلسه
مجموع محتوای آموزشی:  3 ساعت ویدئو
 (قابل دانلود می‌باشد)

پیش‌نیاز‌ها

یکی از پیش‌نیازهای مهم دوره آموزش CSS که به‌نوعی مکمل آن نیز به شمار می‌رود، دوره آموزش HTML است؛ زیرا این دوره آموزشی برای ساخت بدنه وب‌سایت و بستر پیاده‌سازی CSS لازم است.

سرفصل‌های دوره آموزش رایگان CSS

آموزش رایگان CSS
  CSS چیست؟
مشاهده
"06:01  
  انواع روش‌های استایل‌دهی
مشاهده
"09:13  
  سلکتورها
مشاهده
"15:23  
  استایل دادن به تکست
"09:28  
  اضافه‌کردن فونت
"02:49  
  استایل‌های پیش‌فرض مرورگر
"04:36  
  کامنت‌کردن کد
"01:56  
  رنگ‌ها
"04:07  
  Border و Outline
"03:45  
  باکس مدل
"11:32  
  Text Align
"04:36  
  Display
"07:36  
  وسط قرار دادن تصویر
"04:31  
  آیکن‌ها
"03:03  
  استایل‌دادن به تگ a
"05:47  
  استایل‌دادن به لیست
"04:29  
  استایل‌دادن به جدول
"11:16  
  Max Width
"06:22  
  Position
"04:32  
  Over Flow
"02:21  
  Float
"02:30  
  Combinators
"04:33  
  سودو کلاس‌ها
"06:42  
  سودو المنت‌ها
"03:27  
  استایل‌دادن به فرم
"17:49  
  واحدهای em و rem
"09:27  

درباره دوره

CSS (Cascading Style Sheets) یک زبان شیوه‌نامه است که برای توصیف ارائه یک سند نوشته شده به زبان نشانه‌گذاری مانند HTML استفاده می‌شود. CSS برای تعریف استایل و ظاهر برای صفحات وب، ازجمله طراحی، طرح‌بندی و تغییرات نمایش برای دستگاه‌ها و اندازه‌های مختلف صفحه مورد استفاده قرار می‌گیرد. دوره آموزش دوره آموزش رایگان CSS با هدف آموزش این زبان شیوه‌نامه تهیه و تدوین‌شده است که در ادامه آن را معرفی خواهیم کرد.

دوره آموزش CSS

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

دوره آموزش CSS رایگان

CSS ابزاری برای توسعه‌دهندگان وب است که با استفاده از آن می‌توانند ظاهر وب‌سایت خود را بهبود بخشیده و از المان‌های گرافیکی در آن استفاده کنند. به همین دلیل یادگیری این ابزار برای همه مهندسان نرم‌افزار و همه افرادی که تمایل به کار در حوزه طراحی وب دارند؛ ضروری است. این دوره آموزش رایگان CSS با هدف آموزش این ابزار تهیه شده و هم اکنون در دسترس کاربران قرار دارد.

هدف از یادگیری دوره آموزش رایگان CSS چیست؟

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

دوره آموزش CSS رایگان مناسب چه کسانی است؟

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

بعد از فراگیری دوره آموزش رایگان CSS چه مهارت‌هایی کسب خواهید کرد؟

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

سرفصل‌های دوره آموزش رایگان CSS 

دوره آموزش رایگان CSS در 26 قسمت ارائه شده که دیدن آن‌ها حدود 3 ساعت زمان می‌برد. در قسمت‌های اول تا هفتم این دوره شما با مفهوم CSS آشنا شده و روش‌های استفاده از آن را خواهید آموخت. همچنین یاد می‌گیرید که چگونه به متن استایل داده و فونت اضافه کنید. همچنین انواع روش‌های استایل دهی برای شما توضیح داده شده و استایل‌های پیش‌فرض مرورگر بررسی می‌شوند. همچنین یاد می‌گیرید که چگونه یک کد را در CSS تبدیل به کامنت کنید.

پس از آن و با شروع جلسه هشتم، شما با مفاهیمی مانند رنگ، outline، border، باکس مدل، text align و display آشنا خواهید شد. همچنین آیکون‌ها را شناخته و کار با تصاویر را در CSS یاد خواهید گرفت. به‌علاوه خواهید آموخت که چگونه می‌توان به تگ a، لیست، فرم و جدول استایل داده و با سودو کلاس‌ها و سودو المنت‌ها آشنا خواهید شد.

درباره استاد

maktabkhooneh-teacher محمدحسین سیدآقایی

سید محمدحسین سیدآقایی فارغ‌التحصیل کارشناسی ارشد مهندسی کامپیوتر گرایش نرم‌افزار و مدیر شرکت نرم‌افزاری دارت است.

وی از سال 1392 سابقه برنامه‌نویسی، مدیریت و مشاوره شرکت‌های برنامه‌نویسی و فناوری اطلاعات و همچنین همکاری در پروژه‌های فناورانه دولتی دارد.

تخصص وی در حوزه‌های برنامه‌نویسی فرانت‌اند تحت وب (Html, Css, javascript browser API, jQuery, bootstrap, reactJs, redux)، زبان جاوا اسکریپت، python و برنامه‌نویسی بک‌اند است.

ایشان در حال حاضر، مدیر و مدرس وب‌سایت آموزشی neonlearn است.

 

نظرات کاربران

تا کنون نظری برای این دوره ثبت نشده است. برای ثبت نظر باید ابتدا در دوره ثبت نام کرده و دانشجوی دوره باشید.
محمدحسین روح نواز 1403-01-24
واقعا دوره مفید و عالی بود
1403-01-03
بخاطر اینکه رایگان بود پنج ستاره دادم
علیرضا بختیاری زاده 1401-08-06
عالی.
هادی احمدنیا 1401-05-06
سلام استاد خیلی دوره عالی و کاملی بود همیشه موفق باشید
1400-12-10
5 واقعا عالی بود دوره html رو دیدم و دنبال cssبودم واقعا خیلی عالی و واضح توضیح میدید ممنون
فاطمه ماهوت چی 1400-11-16
باتشکراز استاد مربوطه و طراحان سایت مکتب خونه این دوره برای مرور عالی بود ولی برای یادگیری مطلب از صفر پیشنهاد نمیدم ای کاش اموزش های رایگان هم قسمت پروزه و مدرک بهشون اضافه میشد ممنون از خدماتتون
1400-07-15
سلام و عرض ارادت آموزش بسیار عالی و کاربردی بود ممنونم خداقوت
رضا سلطانی 1400-07-12
بسیار عالی
بنت الهدی لیراوی 1400-06-24
بسیار سپاسگزارم بابت دوره ی آموزشی، خیلی عالی بود. روش تدریس بسیار عالی و جذاب بود. آموزش کاملا کاربردی و ساده و روان بود.
1400-06-15
دوره خوبی بود. ممنون
پوریا فلاحت پیشه 1400-06-15
واقعا شیوه ی آموزش ایشون خوبه. خیلی از عزیزان دو ساعت تاریخچه، دوساعت چرا باید اینارو یاد بگیریم، چرا باید یادنگیریم، چرا و.....! اما ایشون میگه سلام و میره تو کدنویسیش تک تک مثال میزنه و شما میبینی هرکدوم رو که میشه باهاش چیکار کرد. تموم شد و رفت دوره ی دو ماهه نمیخواد که. شما تو دو ساعت یاد میگیری بعد دیگه برو تمرین کن ماهر بشی. حالا بعدا تاریخچه و هرچی خواستی رو برو بخون. کاش ازین آموزش ها زیاد باشه از استاد مدرس و مکتب خونه بسیار ممنونم.
فرزین 1400-06-14
واقعا راست میگن بچه ها ، آقای سیدآقایی خیلی خوب آموزش میده ، خیلی ساده ولی خیلی کامل ، واقعا دستت درد نکنه آقای سیدآقایی
1400-06-13
عالیه خیلی ممنون از اموزش خوبتون
امیر حاجیان 1400-06-08
واقعا عالی
مجید 1400-06-03
تعجب می‌کنم که تا الان نظری در مورد آموزش آقای سیدآقایی ثبت نشده. چون اگر کسی آموزش ایشون در این زمینه و همین طور اچ‌تی‌ام‌ال رو ببینه، بعید می‌دونم که قدردانی خودش رو با بیش‌ترین امتیاز و نوشتن نظر ابراز نکنه. از ایشون و تیم مکتب‌خونه سپاس‌گزارم و امیدوارم که مباحث دیگه‌ای هم برای آموزش از ایشون داشته باشید.
1
2

دوره‌های پیشنهادی

سوالات پرتکرار

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

سوالات پرتکرار

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

سوالات پرتکرار

آیا امکان دریافت فیلم های یک درس به صورت سی دی یا دی وی دی وجود دارد؟
در حال حاضر امکان ارسال دروس به صورت سی دی یا دی وی دی وجود ندارد.

CSS چیست؟

CSS مخفف عبارت Cascading Style Sheets است. از CSS برای استایل و چیدمان صفحات وب استفاده می‌شود، به‌عنوان‌مثال، برای تغییر فونت، رنگ، اندازه و فاصله محتوای، تقسیم آن به چندین ستون، یا افزودن انیمیشن‎‌ها و سایر ویژگی‌های تزئینی این زبان شیوه‌نامه کاربرد دارد؛ به عبارت دیگر، CSS عنصری است که صفحات وب بسیار جذاب و کاربرپسند می‌کند. CSS یکی از فناوری‌های اصلی مورد استفاده در توسعه وب به همراه HTML و جاوا اسکریپت است.

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

کاربرد CSS چیست؟

از مهم‌ترین کاربردهای CSS می‌توان به مواردی اشاره کرد که در ادامه آمده‌اند:

1. استایل دادن به صفحات وب: از CSS می توان برای استایل دادن به صفحات وب با افزودن رنگ‌ها، فونت‌ها، سبک های چیدمان و پس‌زمینه (background) استفاده کرد.

2. طراحی واکنش گرا: از CSS می توان برای ایجاد طرح‌های واکنش گرا استفاده کرد که با اندازه‌ها و جهت‌گیری‌های مختلف صفحه‌نمایش تنظیم می‌شوند و در هر دستگاهی قابل‌نمایش هستند.

3. انیمیشن‌ها: از CSS می توان برای ایجاد انیمیشن برای صفحات وب استفاده کرد.

4. قابلیت دسترسی: از CSS می توان برای بهبود دسترسی افراد به عناصر موجود در صفحات وب استفاده کرد.

5. بهینه‌سازی تصویر: از CSS می توان برای بهینه‌سازی تصاویر برای زمان بارگذاری سریع‌تر استفاده کرد.

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

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

مزایای CSS چیست؟

CSS به‌خودی‌خود مزایای بسیار قابل‌توجهی دارد که می‌توان از مهم‌ترین آن‌ها به موارد زیر اشاره کرد:

1. CSS در زمان صرفه‌جویی می‌کند: می‌توانید یک بار کد CSS بنویسید و سپس از همان کد برای اعمال آن در چندین صفحه HTML استفاده مجدد کنید. همچنین می‌توانید برای هر عنصر HTML یک سبک تعریف کرد و آن را به تعداد صفحات وب که می‌خواهید اعمال کنید.

2. صفحات سریع‌تر بارگذاری می‌شوند: اگر از CSS استفاده می‌کنید، لازم نیست هر بار ویژگی‌های تگ HTML را بنویسید. فقط یک قانون CSS از یک تگ بنویسید و آن را برای همه موارد آن تگ اعمال کنید؛ بنابراین کد کمتر به معنای زمان دانلود سریع‌تر است.

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

4. سبک‌های برتر نسبت به HTML: CSS دارای آرایه‌های بسیار گسترده‌تری از ویژگی‌ها نسبت به HTML است، بنابراین می‌توانید در مقایسه با ویژگی‌های HTML ظاهر بسیار بهتری به صفحه HTML خود بدهید.

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

6. بدون نیاز به پلاگین‌های اضافی: CSS با انواع مرورگرها به خوبی کار می‌کند. در واقع HTML یک زبان چند پلتفرمی است، به این معنی که برای اجرای آن به هیچ پلاگین یا نرم‌افزار اضافی نیاز ندارید.

معایب CSS چیست؟

در کنار همه ویژگی‌های خوبی که CSS ارائه میدهد، چند معایب محدود نیز دارد که از مهم‌ترین آن‌ها می‌توان به فهرست موارد زیر اشاره کرد:

1. پشتیبانی محدود مرورگر برای نسخه‌های قدیمی‌تر CSS: نسخه‌های قدیمی‌تر CSS توسط همه مرورگرها پشتیبانی نمی‌شوند که می‌تواند منجر به مشکلات سازگاری شود.

2. عدم پشتیبانی از برخی ویژگی‌ها: CSS از تمام ویژگی‌هایی که در زبان‌های دیگر مانند جاوا اسکریپت موجود است، پشتیبانی نمی‌کند که این می‌تواند طراحی وب‌سایت‌های خاص را محدود کند.

3. ناسازگاری بین مرورگرها: مرورگرهای مختلف می‌توانند CSS را متفاوت تفسیر کنند که می‌تواند منجر به نتایج متناقض در مرورگرهای مختلف شود.

آیا یادگیری CSS برای طراحی سایت اجباری است؟

نه یادگیری CSS برای طراحی وب‌سایت اجباری نیست، اما به شدت توصیه می‌شود زیرا به شما کمک می‌کند تا وب‌سایت‌های پیچیده‌تر و جذاب‌تری با کار کمتری ایجاد کنید. یادگیری CSS همچنین به شما این امکان را می‌دهد که تغییرات دقیق‌تری در ظاهر وب‌سایت خود ایجاد کرده و سفارشی‌سازی آن را به ظاهر دلخواه خود آسان‌تر می‌کند. در کل CSS بخشی ضروری از طراحی وب است و می‌تواند تجربه کاربری بهتری را برای بازدیدکنندگان سایت شما فراهم کند.

نقشه راه یادگیری CSS

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

1. اصول CSS را بیاموزید: با یادگیری اصول CSS شروع کنید: انتخابگرها (سلکتورها)، خصوصیات و مقادیر از مهم‌ترین این موضوعات هستند. همچنین یاد بگیرید که چگونه کد CSS خود را ساختار دهید.

2. بر مدل جعبه (Box Model)مسلط شوید: مدل جعبه را که اساس همه طرح‌بندی CSS است، یاد بگیرید

3. تکنیک‌های CSS Layout را یاد بگیرید: تکنیک‌های چیدمان مانند شناور کردن عناصر، نمایش و موقعیت‌یابی را بیاموزید.

4. ویژگی‌های CSS را درک کنید: در مورد ویژگی‌های CSS و چگونگی تأثیر آن بر قوانین اعمال شده روی یک عنصر بیاموزید. همچنین در همین رابطه تفاوت بین استایل شیت‌های درون‌خطی، جاسازی شده و خارجی را درک کنید.

5. پیش پردازشگرهای CSS را یاد بگیرید: با پیش پردازشگرهای CSS مانند Sass و Less آشنا شوید. درک کنید که چگونه می‌توان از آن‌ها برای نوشتن کدهای CSS کارآمدتر استفاده کرد و چگونه می توان آن‌ها را در یک گردش کار توسعه ادغام کرد.

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

7. چارچوب‌های CSS را یاد بگیرید: با فریمورک‌های CSS محبوب مانند Bootstrap و Foundation آشنا شوید. درک کنید که چگونه می‌توان از این چارچوب‌ها برای توسعه سریع وب‌سایت‌ها و برنامه‌ها استفاده کرد.

8. تمرین، تمرین، تمرین: بهترین راه برای یادگیری CSS تمرین است. برای این هدف پروژه‌ها را ایجاد کرده و با تکنیک‌های مختلف آن‌ها را آزمایش کنید. همچنین مقالات و آموزش‌های جدید CSS را بخوانید تا از آخرین پیشرفت‌های آن مطلع شوید.

آسانترین راه یادگیری CSS با مکتب خونه

اگر به فکر یادگیری مفاهیم CSS هستید و دوست دارید در این زمینه پیشرفت کنید هم‌اکنون با ثبت‌نام در دوره آموزش CSS رایگان مکتب خونه اولین و مهم‌ترین این قدم را بردارید. این دوره علاوه بر رایگان بودن مزیت‌های بسیار قابل‌توجه دیگری ازجمله پایه‌ای بودن مباحث را ارائه می‌دهد.

دوره نام‌برده یکی از بهترین دوره‌های آموزشی CSS برای شروع است و به کاربران جهت می‌دهد. این دوره آموزش پروژه محور CSS به هیچ پیش‌ نیاز خاصی ندارد و فقط کافی است که در آن شرکت کنید تا با زبان ساده با مفاهیم CSS آشنا شوید. استفاده از CSS بسیار آسان بوده و فقط کافی است که شما اولین قدم را بردارید.

poster
پیش‌نمایش دوره
  
برگزار کننده:  مکتب‌خونه
  
زمان مورد نیاز برای گذراندن دوره:  26 جلسه
مجموع محتوای آموزشی:  3 ساعت ویدئو
 (قابل دانلود می‌باشد)