سرفصل‌های پست
- 1 آموزش CSS به شکل جامع و کاربری – مقدمه
- 2 برنامه مقالات آموزشی دوره CSS
- 2.1 فصل اول – معرفی CSS
- 2.2 فصل دوم – نحوه کد نویسی در CSS
- 2.3 فصل سوم – فراخوانی کد CSS در HTML
- 2.4 فصل چهارم – رنگ ها
- 2.5 فصل پنجم – background در CSS
- 2.6 فصل ششم – کادر ها در CSS
- 2.7 فصل هفتم – ابعاد عناصر در CSS
- 2.8 فصل هشتم – مدل جعبه ای
- 2.9 فصل نهم – متن در CSS
- 2.10 فصل دهم – فونت ها در CSS
- 2.11 فصل یازدهم – استایل دهی به لینک ها
- 2.12 فصل دوازدهم – جداول در CSS
- 2.13 فصل سیزدهم – سایه در CSS
- 2.14 فصل چهاردهم – position در CSS
- 2.15 فصل پانزدهم – float در CSS
- 2.16 فصل شانزدهم – display در CSS
- 2.17 فصل هفدهم – طبقه بندی در CSS
- 2.18 فصل هجدهم – overflow در CSS
- 2.19 فصل نوزدهم – گرادینت رنگ ها در CSS
- 2.20 فصل بیستم – شفافیت در CSS
- 2.21 فصل بیست و یکم – نشانه های ارتباطی در CSS
- 2.22 فصل بیست و یک و نیم! – کامنت گذاری در CSS
- 2.23 فصل بیست و دوم – شبه کلاس ها در CSS
- 2.24 فصل بیست و سوم – شبه عناصر در CSS
- 2.25 فصل بیست و چهارم – منو ها در CSS
- 2.26 فصل بیست و پنجم – منو های بازشونده در CSS
- 2.27 فصل بیست و ششم – گالری تصاویر در CSS
- 2.28 فصل بیست و هفتم – انتخابگر صفات در CSS
- 2.29 فصل بیست و هشتم – شمارنده ها در CSS
- 2.30 فصل بیست و نهم – آیکون ها در CSS
- 2.31 فصل سی‌ام – استایل دهی عناصر form در CSS
- 2.32 فصل سی و یکم – حاشیه های عکس دار در CSS
- 2.33 فصل سی و دوم – آموزش افکت های پیشرفته متن در CSS
- 2.34 فصل سی و سوم – آموزش طراحی واکنش گرا در CSS
- 2.35 فصل سی و چهارم – تبدیلات در CSS
- 2.36 فصل سی و پنجم – آموزش transition در CSS
- 2.37 فصل سی و ششم – آموزش Animation در CSS
- 2.38 فصل سی و هفتم – آموزش Layout در CSS
- 3 سوالات متداول
آموزش CSS به شکل جامع و کاربری – مقدمه
صفحه ای که هم اکنون در آن حضور دارید، مانند جاده ای است که رسیدن به انتهای آن، به معنی یادگیری آسان CSS است. کافیست در کنار دیگر همراهان همیشگی وب سایت میزفا در این مسیر قدم بگذارید و با گذراندن یک دوره آموزش CSS رایگان، این زبان طراحی لذت بخش را یکبار برای همیشه به ساده ترین شکل ممکن بیاموزید. در طول آموزش همواره تلاش شده مطالب به زبان ساده و مفید بیان شود.
برنامه مقالات آموزشی دوره CSS
در این دوره آموزش CSS آنلاین و رایگان، کلیه مطالب آموزشی CSS طبق سرفصل های سازمان جهانی w3s به صورت گام به گام ارائه خواهد شد. روند مطالب آموزش طبق فهرستی که ارائه شده است خواهد بود و در هر مقاله آموزش html، یک بخش از فهرست در این صفحه درج خواهد شد. بدیهی است بخش هایی که هم اکنون مشاهده میکنید، سرفصل هایی است که طبق آن مسیر آموزش را طی میکنیم . پس با ما همراه باشید تا با قدم گذاشتن در دنیای CSS گامی بلند در مسیریاد گیری بردارید .
فصل اول – معرفی CSS
فصل دوم – نحوه کد نویسی در CSS
- جلسه ۰۴ – ساختمان کد در CSS و اجزای آن
- جلسه ۰۵ – selector در CSS
- جلسه ۰۶ – کلاس ها و آیدی ها در CSS
- جلسه ۰۷ – انتخابگر های گروهی
فصل سوم – فراخوانی کد CSS در HTML
- جلسه ۰۸ – اتصال خارجی (external stylesheet)
- جلسه ۰۹ – اتصال داخلی (internal stylesheet)
- جلسه ۱۰ – اتصال درون خطی (inline stylesheet) و اولویت تاثیرگذاری
فصل چهارم – رنگ ها
- جلسه ۱۱ – تعیین رنگ با استفاده از مقادیر پیش فرض و HEX
- جلسه ۱۲ – تعیین رنگ با استفاده از ()rgb و ()hsl
- جلسه ۱۳ – تعیین رنگ با استفاده از ()rgba و ()hsla
فصل پنجم – background در CSS
فصل ششم – کادر ها در CSS
- جلسه ۱۶ – border ها در CSS
- جلسه ۱۷ – outline ها در CSS
- جلسه ۱۸ – padding ها در CSS
- جلسه ۱۹ – margin ها در CSS
- جلسه ۲۰ – تفاوت margin و padding و border و outline
فصل هفتم – ابعاد عناصر در CSS
فصل هشتم – مدل جعبه ای
فصل نهم – متن در CSS
فصل دهم – فونت ها در CSS
- جلسه ۲۸ – فراخوانی فونت ها در CSS
- جلسه ۲۸.۵ – استایل Font در CSS
- جلسه ۲۹ – وزن و استایل فونت ها در CSS
فصل یازدهم – استایل دهی به لینک ها
- جلسه ۳۰ – حالت های ممکن برای لینک ها (hover، active و …)
- جلسه ۳۰.۵ – استایل لینک ها در CSS
- جلسه ۳۱ – لینک ها به صورت دکمه ها (مقدمه ای از buttons)
فصل دوازدهم – جداول در CSS
- جلسه ۳۲ – استایل Tables در CSS (قدیمی)
- جلسه ۳۲ – استایل دهی به جداول در CSS
- جلسه ۳۳ – استایل های پیشرفته جداول در CSS
فصل سیزدهم – سایه در CSS
- جلسه ۳۴ – دستورات مبتدی shadow
- جلسه ۳۵ – دستورات پیشرفته shadow
- جلسه ۳۶ – مثال های باحال تر و کارت های زیبا با استفاده از shadow
فصل چهاردهم – position در CSS
فصل پانزدهم – float در CSS
فصل شانزدهم – display در CSS
فصل هفدهم – طبقه بندی در CSS
فصل هجدهم – overflow در CSS
فصل نوزدهم – گرادینت رنگ ها در CSS
فصل بیستم – شفافیت در CSS
فصل بیست و یکم – نشانه های ارتباطی در CSS
فصل بیست و یک و نیم! – کامنت گذاری در CSS
فصل بیست و دوم – شبه کلاس ها در CSS
- جلسه ۵۰ – شبه کلاس های مربوط به input
- جلسه ۵۱ – شبه کلاس های موقعیت محور
- جلسه ۵۲ – شبه کلاس های ارتباطی
فصل بیست و سوم – شبه عناصر در CSS
فصل بیست و چهارم – منو ها در CSS
فصل بیست و پنجم – منو های بازشونده در CSS
فصل بیست و ششم – گالری تصاویر در CSS
فصل بیست و هفتم – انتخابگر صفات در CSS
- جلسه ۵۹ – انتخابگر صفت [attr] در CSS
- جلسه ۶۰ – انتخابگر صفت [“attr=”value] در CSS
- جلسه ۶۱ – انتخابگر صفت ~ در CSS
- جلسه ۶۲ – انتخابگر صفات | و ^ در CSS
- جلسه ۶۳ – انتخابگر صفات * و $ در CSS
فصل بیست و هشتم – شمارنده ها در CSS
فصل بیست و نهم – آیکون ها در CSS
فصل سی‌ام – استایل دهی عناصر form در CSS
فصل سی و یکم – حاشیه های عکس دار در CSS
فصل سی و دوم – آموزش افکت های پیشرفته متن در CSS
فصل سی و سوم – آموزش طراحی واکنش گرا در CSS
- جلسه ۷۰ – مفهوم طراحی واکنش گرا
- جلسه ۷۱ – مدیا کوئری در CSS
- جلسه ۷۲ – واکنش گرایی و ابعاد عناصر
- جلسه ۷۳ – روش ها و متد های طراحی واکنش گرا
فصل سی و چهارم – تبدیلات در CSS
فصل سی و پنجم – آموزش transition در CSS
فصل سی و ششم – آموزش Animation در CSS
فصل سی و هفتم – آموزش Layout در CSS
سوالات متداول
سی اس اس یک زبان کدنویسیه که برای استایل دهی به صفحات وب به کار میره. توسط سی اس اس میتونین صفحتون رو از ساختار خشک اچ تی ام ال تنها، به ساختار جذاب اچ تی ام ال و اس ام اس تغییر بدین.
سی اس اس نقش بسیار مهمی رو در استایل دهی به صفحات بازی میکنه. با سی اس اس ، شما میتونین هر استایل و چهره ای که تو ذهن خودتون یا تو ذهن کارفرما هست رو به صفحه وب سایت بدین. یادگیری سی اس اس، برای توسعه دهنده های frontend از نون شب واجب تره و برای توسعه دهنده های backend، تا حد متوسطی کفایت میکنه.
برای یادگیری سی اس اس ، باید به یک سری از مفاهیم اچ تی ام ال مثل روابط پدر فرزندی (parent and child)، و یک سری از تگ های مهم مثل div، p و img آشنایی کامل داشته باشین.
کاملا بستگی به نحوه یادگیری خودتون داره. بنابراین ما نمیتونیم زمان دقیقی برای یادگیری CSS ارائه بدیم. با این حال، تجربه ثابت کرده که تو ۲-۴ ماه میشه به تسلط خوبی از CSS رسید. اما از اون جایی که یادگیری “صددرصد” وجود نداره، میشه گفت یادگیری CSS هیچوقت به انتها نمیرسه 🙂
صفر. ما اینجا مقالاتی رو برای شما آماده کردیم که بتونین “کاملا رایگان” تا حد خوبی سی اس اس رو یاد بگیرین. در انتهای برخی از مقالات هم کوییز های کوچیکی برای شما تدارک دیده شده که بتونین خودتون رو بسنجین و مطمئن بشین که مبحث مورد انتظار رو به خوبی یاد گرفتین.
40 پاسخ
چقدر رنگ و نوع فونت سایتتون افتضاح شده
سلام مینا. ممنون از نظرت? اگه پیشنهادی برای بهتر شدن رنگ و فونت وب سایت داری خوشحال میشیم که بررسی کنیم ?
سلام مینا
نظرت متاسفانه کمکی به ما نکرده. لطفا تو هم دقیق نظر بده و بگو کجاهای سایت به نظرت بد شده تا بهبود بدیم. البته ساختار و ظاهر متن ها در مقالات که عوض نشده و فقط یک بک گراند مشکلی در عنوان ها اورده شده و تغییر همین بوده.
با سلام
تبریک بهتون وب سایت عالی دارین و مطالب مفید و جامع.
بنده با اینکه مدرس این رشته هستم از سرفصل بندی که گذاشتید گاها سر میزنم و دوره میکنم.
موفق باشید .
سلام اقا محمد. خیلی خوشحالیم که این مطالب نه تنها برای هنرجو ها، بلکه برای همکاران عزیز مثل شما هم مفید واقع شده.
شاد و پیروز باشید?
سلام ای کاش کل مطالب Html & Css رو فایل pdf رو هم بزارید با تشکر
سلام آرمان.
الان سایت‌ها شبیه به PDF هستن و حتی بهتر و هر زمان بخوای میتونی وارد سایت بشی و بخونی.
از طرفی هر جلسه ممکنه آپدیت بشه و یا در هر جلسه کلی سوال دانشجوها دارن که میتونه به سایر دانشجوها کم کنه و این موارد داخل PDF امکانش نیست. به عبارت دیگه خیلی سخته PDF هر بار آپدیت کنی ولی مقاله های اینترنتی رو میشه راحت انجام داد.
ممنون از این آموزش خیلی خوب و مرتبی که گذاشتین برای css ها
من برای کارم باید آزمون css بدم و آموزشهای شما خیلی خیلی بهم کمک کردن.
مچکرم
سلام آزاد. خواهش میکنیم ?
خیلی خوشحالیم که آموزش ها تونستن کمکت کنن
موفق و پایدار باشی ?
چرا یادگیری 100در صد وجود نداره؟
چون هر چقدر که بیشتر میخونی بیشتر متوجه میشی که نمیدونی.
انتهای این مباحث مشخص نیست. به عبارت دیگه انتها نداره.
سلام
وقت بخیر
تشکر ویژه از آموزش کامل و عالی این دوره
تقریبا هر شب یک مبحث رو بسته به زمان خودمون جلو ببریم و تمرین کنیم مطمئنا با این آموزش شیوا و عالی و چالش های انتهای هر درس به نتیجه می رسیم.
امیدوارم این دوره ادامه داشته باشه یا حداقل هر روز یا هر هفته یک چالش تو این بخض برای اعضا گذاشته بشه که از تمرین کردن عقب نمونیم.
بازم تشکر میکنم از آموزش های عالی شما
سلام مهدی جان.
تشکر ویژه میکنم ازت که کلی وقت گذاشتی و در همه جلسه های دوره css پاسخ ارسال کردی. نظرات تو کمک زیادی به ما کرده. همینطور امیدوارم از جایزه موجود در حساب کاربریت نهایت استفاده رو ببری.
از پیشنهادت هم تشکر میکنم و سعی میکنم حتما پیاده سازی کنیم.
ممنون از لطف شما و سایت عالی
الان سوال داشتم
بعد این دوره فریمورک بخونم یا نه ؟
دقیقا کدوم فریم ورک منظورت هست؟
من چون html و css رو خوندم الان فریمورک Bootstrap رو بخونم ؟
فریم ورک Bootstrap رو میتونی هر زمانی بخوبی و راحت هست، پیشنهاد میکنم برو سراغ زبان JS چون همه هر جایی کاربردی هست. البته ببین به چی علاقه داری و بعد تصمیم بگیر.
فریم ورک Bootstrap رو هم میتونی حین پروژه به راحتی یاد بگیری.
سلام و درود
ببخشید من خواستم بدونم که چطوری با زبان css کار پیدا کنیم و پول در بیاریم
با تشکر
سلام عباس.
برخی درخواست های CSS در سایت پونیشا هست. میتونید از این سایت استفاده کنید.
سلام
ممنون از آموزش های خوبتون
ممنون میشم مقاله های css را کامل کنید.
سلام کوثر درحال تکمیله
سلام وقت شما بخیر
سایت قشنگی دارید
ساخت این جور سایتی چقدر زمان میبره؟
اگر شخصی ساخت سایت دیجی کالا رو بلد باشه میتونه سایتی همانند سایت شما طراحی کنه؟
مرسی از شما
سلام مسیح
بله میتونید. بستگی به تمرین کردن شما داره. کسانی که زیاد تمرین کردن هر نوع سایتی رو میتونن بزنن.
سلام ممنون از سایت خوبتون
دوره CSS کامله؟
سلام داره تکمیل میشه.
چقدر دیگ مونده تموم یشه؟
چون مبحث html رو تموم کردم الان وسطای css هستم
سلام علی ، یه ذره دیگه مونده
سلام علی دوره تموم شد میتونی مهارتت رو ارتقا بدی!
سلام سایتتون عالیه یه سوال یاد گرفتن زبان های
Html
CSS
جاوا اسکریپت
چقد زمان می بره؟
سلام یاشار، بستگی به خودت داره و آشنایی اولیه با زبان های برنامه نویسی داشته باشی یا نه. یادگیری پایه اینها میتونه از یک هفته تا یک ماه برات زمان ببره ولی یادگیری پیشرفتشون مطمئنا با تمرین مشخص میشه که بعد از تمرین ها این یادگیری ها تبدیل به تخصص میشه.
زبان html رو دارم یاد میگیرم و من سریع مطلب رو میگیرم
خیلی هم علاقه دارم به برنامه نویسی
به نظرت میتونم تا شهریور سایت بزنم
مشکلی هم برای پول هاست و دامنه ندارم
سلام یاشار ، تلاش کن میتونی؛ مطمئن باش.
برا اینکه دولوپر شیم لازمه چندتا زبان برنامه نویسی بلد باشیم ؟
سلام پریسا.
اصولا یک زبان برنامه نویسی رو شما اگر حرفه ای بلد باشین دیگه بقیه مسیر رو خودتون پیش می‌برید. ولی الان درآمد در تخصص هست و شما اگر یک زبان مثلا JS یا PHP یا ASP رو خوب بلد باشید درامد خوبی دارید و نیاز نیست چندتا بدونید.
سلام ببخشید برای یادگیری کل css چقدر زمان لازم هست و آیا میتونم همزمان javascript رو یاد بگیرم ممنون از سایت خوبتون کمک بزرگی برای ما هست.
سلام امیرحسین.
پیشنهاد میکنم اول CSS و HTML بخون و بعد سراغ JS برو.
با سلام و درود
یه سوال داشتم با توجه به اینکه اموزش CSS نیازمند اموزش اچ تی ام ال است ایا با توجه به اینکه هنوز اموزش های اچ تی ام ال تمام نشد ه من میتونم در حین یادگیری اموزش های اچ تی ام ل اموزش CSS را نیز یاد بگیرم
سلام مینا.
پیشنهاد میکنم ابتدا HTML جلو ببرید و بعد سراغ CSS برید. هر چند CSS هم میتونی بخونی ولی حداقل های HTML باید بدونی.
باسلام
بقیه آموزش ها کی در سایت قرار میگیرند؟
سلام، ان شالله به زودی