دوره آموزش مقدماتی css

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

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

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

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

دوره‌ی مقدماتی کسب مهارت و آموزش CSS

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

  1. آشنایی با CSS و لزوم استفاده از آن در طراحی سایت
  2. آموزش css – درس دوم-دستورات
  3. آموزشcss – درس سوم – ID و Class
  4. آموزش css – درس چهارم – نحوه استفاده از css
  5. آموزشcss – درس پنجم – تصویر زمینه
  6. آموزش css – درس ششم – ویرایش متن
  7. تعیین فونت و قلم نوشته‌ها و استایل بندی آن در CSS
  8. استایل‌بندی لینک و پیوندها در صفحات وب با css
  9. استایل بندی لیست‌ها و آشنایی با مفاهیم آن در CSS
  10. طراحی و استایل بندی جدول با کمک CSS
  11. اصول باکس بندی و قاب بندی محتوا در CSS
  12. استایل بندی و تعیین خطوط مرزی و Border در CSS
  13. مفهوم Padding و Margin و تفاوت‌های آن‌ها در CSS
  14. آموزش css – درس چهاردهم – گروه بندی انتخابگرها
  15. آموزش css – درس پانزدهم – Display و Visibility
  16. آموزش css – درس شانزدهم – موقعیت دهی به عناصر (Positioning)
  17. آموزش css – درس هفدهم – شناور سازی (Float)
  18. آموزش css – درس هجدهم – کلاس کاذب (Pseudo Class)
  19. آموزش css – درس نوزدهم – تعیین میزان شفافیت (Opacity)
  20. آموزش css – درس بیستم – انواع واسطه ها و رسانه ها (Media Types)
  21. آموزش css – درس بیست و یکم – انتخاب کردن عناصر از طریق صفت آنها
دوره‌ی مقدماتی آموزش کسب مهارت CSS

آشنایی با CSS و لزوم استفاده از آن در طراحی سایت

Cascading Style Sheets که به اختصار css نامیده می‌شود شیوه‌ای برای تعیین نمایش عناصر html در صفحات وب می‌باشد. این شیوه‌ها و برگه‌ها که می‌توانند به دو صورت داخلی و خارجی تعیین شوند راه حلی مناسب برای زیبا سازی و نظم بخشی به صفحات html هستند. چرا به css در طراحی صفحات وب سایت نیاز […]


آموزش css – درس دوم-دستورات

در درس قبل به معرفی css پرداختیم و مزایای آن را با یکدیگر بررسی کردیم.در این درس دستورات css و نحوه ی استفاده آن را فرا میگیریم. دستورات css دارای دو بخش اصلی می باشند : یک انتخابگر(selector) ، و یک یا چند معرف (Declaration)! انتخابگر معمولا عنصر html ای میباشد که شما قصد دارید […]


آموزشcss – درس سوم – ID و Class

در درس گذشته با انتخابگر(selector) و نحوه استفاده از آن آشنا شدیم ، در این درس نیز با انواع انتخابگر های css آشنا میشویم.علاوه بر عناصر html، در css میتوانید انتخابگری با نام دلخواه خود ایجاد نمایید و از آنها با عنوان id و class استفاده نمایید. ID : این نوع انتخابگر ها زمانی استفاده […]


آموزش css – درس چهارم – نحوه استفاده از css

در دروس گذشته با هم مزیت های css را بررسی کردیم و ساختار آن را با هم فراگرفتیم و یاد گرفتیم که چگونه از انتخابگر استفاده کنیم و یا یک انتخابگر دلخواه ایجاد کنیم.در این درس به نحوه ی استفاده از فایل های css و اعمال آن بر صفحات خود می پردازیم. هنگامی که مرورگر […]


آموزشcss – درس پنجم – تصویر زمینه

در درس های گذشته با کلیات css و نحوه استفاده از اون آشنا شدیم.از این درس و دروس آینده با مباحث اصلی و ریزتر css آشنا میشیم و با ذکر مثال های کاربردی مطالب رو بهتر درک خواهیم کرد. مشخصه background در css برای اختصاص دادن تصویر زمینه برای یک عنصر بکار میرود.مشخصه هایی که […]


آموزش css – درس ششم – ویرایش متن

در درس گذشته باهم مشخصه Background رو بررسی کردیم و یاد گرفتیم که چطور برای یک عنصر از صفحه یک تصویر زمینه قرار بدیم و تصاویر رو با css در صفحه بچینیم.در این درس به قالب بندی متن می پردازیم و در نهایت یاد میگیریم که چطور نحوه ی نمایش متن و جهت بندی اون […]


تعیین فونت و قلم نوشته‌ها و استایل بندی آن در CSS

در درس گذشته تزیین فونت و قالب بندی متون رو با استفاده از css یاد گرفتیم.در این درس نحوه ی تعیین کردن فونت ها و قلم ها رو با هم یاد خواهیم گرفت. در css فونت ها (قلم) به دو گروه عمده تقسیم میشن: فونت های خانواده Serif و فونت های خانواده sans serif . […]


استایل‌بندی لینک و پیوندها در صفحات وب با css

اگر از ابتدا در آموزش css با ما همراه بوده باشید به خاطر میارید که در درس های گذشته اصول اولیه و اصلی css رو با هم یاد گرفتیم و سپس به تصاویر زمینه، قالب بندی متن و انتخاب فونت ها پرداختیم.در ادامه ی این سری آموزشی امروز به نحوه ی قالب بندی لینک ها […]


استایل بندی لیست‌ها و آشنایی با مفاهیم آن در CSS

لیست‌ها یکی از بخش‌های مهم در css هستند و علاوه بر اینکه برای نمایش فهرست وار مطالب مورد استفاده قرار می‌گیرند، در ساخت منوهای ساده و آبشاری نیز بسیار کاربرد دارند. مشخصه‌ی لیست در css به شما اجازه میدهد تا: نشانگر خاصی را برای موارد لیست‌های مرتب انتخاب کنید (لیست‌هایی با تگ ol) نشانگر خاصی […]


طراحی و استایل بندی جدول با کمک CSS

جدولها نقش مهمی رو در صفحات وب و نمایش طبقه بندی شده اطلاعات ایفا میکنند و اگر بخواهیم تنها به HTML بسنده کنیم علاوه بر اینکه به محدودیتهای زیادی برخورد خواهیم کرد ، نسبت متن به کد کاهش پیدا میکنه و این خودش یک نکته منفی در طراحی است. همونطور که میدونید در HTML برای […]


اصول باکس بندی و قاب بندی محتوا در CSS

در درسهای یک تا ده از سری آموزشی css به مقدمات پرداختیم و استایل بندی عناصر مختلف رو یادگرفتیم . دونستیم که چطور تگهای html رو با css کنترل کنیم و ظاهر و نحوه نمایش اونها رو تغییر بدیم. خوب از این درس که درس یازدهم هست تا درس پانزدهم در مورد قاب بندی عناصر […]


استایل بندی و تعیین خطوط مرزی و Border در CSS

در درس قبل در زمینه قاب بندی عناصر و بلاکها در css صحبت کردیم و در این درس Border ها رو بررسی خواهیم کرد.بهتر است در زبان فارسی واژه Border را به صورت “خط مرزی” ترجمه کنیم چرا که اگر بخواهیم از معادل حاشیه برای Border استفاده کنیم ممکنه با Margin که اونهم معنی حاشیه […]


مفهوم Padding و Margin و تفاوت‌های آن‌ها در CSS

اگر از درس قبل به خاطر داشته باشید گفتیم که اولین لایه در اطراف متن ، padding یا حاشیه داخلی است ، در اطراف اون خط مرزی یا border قرار دارد (که در موردش صحبت کردیم) و بعد از خط مرزی هم حاشیه خارجی قرار دارد که با نام margin خوانده میشوند. (البته در این […]


آموزش css – درس چهاردهم – گروه بندی انتخابگرها

در دوره مقدماتی آموزش CSS که مشتمل بر ۱۳ درس بود، مقدمات کلی CSS را بیان کردیم و دانستید که چطور میتوان از css در طراحی صفحات وب استفاده کرد. نحوه ی ساختن و بکار گرفتن کلاسها و ID ها را یاد گرفتید و همچنین با مشخه ها و صفت های زیادی آشنا شدید که […]


آموزش css – درس پانزدهم – Display و Visibility

مشخصه ی Display صفتی است که نحوه ی نمایش عناصر موجود در یک صفحه html را کنترل میکند. علاوه بر آن میتوانید تعیین کنید که عنصری نمایش داده شود یا نه، یعنی میتوانید با استفاده از این مشخصه بخشی از صفحه را مخفی کنید. قابلیت مخفی کردن عناصر موجود در صفحات توسط مشخصه ی visibility […]


آموزش css – درس شانزدهم – موقعیت دهی به عناصر (Positioning)

یکی از ویژگیهای دیگری که در css وجود دارد، امکان موقعیت دهی به عناصر موجود در یک صفحه است. با استفاده از این مشخصه میتوانید یک عنصر را در یک نقطه از صفحه به طور ثابت قرار دهید یا عناصر را نسبت به یکدیگر تنظیم کنید و آنها را روی هم بیاندازید. عناصر موجود در […]


آموزش css – درس هفدهم – شناور سازی (Float)

در درس گذشته در مورد موقعیت دهی به عناصر صحبت کردیم ولی گاهی اوقات لازم است تا عناصر موجود در یک صفحه را شناور کنیم تا سایر عناصر موجود آن را دربر بگیرند. استفاده از تکنیک شناورسازی یا float اغلب برای تصاویر مورد استفاده قرار میگیرد ولی میتوانید از آن برای قالب بندی قسمتهای مختلف […]


آموزش css – درس هجدهم – کلاس کاذب (Pseudo Class)

در css برای اینکه بتوانید برخی از جلوه های خاص را به انتخابگرها اختصاص دهید باید از کلاسهای کاذب استفاده کنید. کلاسهای کاذب با علامت دونقطه عمودی (کولن) ” : ” مشخص میشوند و بعد از انتخابگر و یا کلاس css قرار میگیرند. برای اینکه نحوه ی استفاده از کلاسهای کاذب یا Pseudo Classes را […]


شفافیت و opacity در css

آموزش css – درس نوزدهم – تعیین میزان شفافیت (Opacity)

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


آموزش css – درس بیستم – انواع واسطه ها و رسانه ها (Media Types)

برخی از ویژگیها و مشخصات css تنها برای رسانه ای خاص طراحی و ایجاد شده اند. برای مثال مشخصه ی “voice-family” تنها برای رسانه های شنیداری بوجود آمده است. اما برخی دیگر از این مشخصه ها میتوانند در انواع رسانه ها مورد استفاده قرار بگیرند. برای مثال مشخصه ی “font-size” را میتوانید برای رسانه های […]


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

تا بدینجا از دوره ی مقدماتی و دوره پیشرفته ی css تمام مواردی که ذکر کرده بودیم مربوط به انتخابگرها، کلاسها و ID ها بودند. یعنی بر اساس برچسب html و یا کلاس و ID که به برچسب داده بودیم، شیوه ی css آنها را کنترل میکردیم. ولی این تنها راه برای کنترل کردن عناصر […]