آموزش مقدماتی CSS3

با یادگیری فرانت اند ایده ها خود را زنده کنید

با تدریس مهندس مهدی زبردست برزین

مهندس مهدی زبردست برزین

359 مگ

3:22 ساعت

15 جلسه

1 سال پشتیبانی

100 درصد رایگان همراه با ضمانت یادگیری

CSS یک زبان فرانت اند (Front End) می باشد

فرانت اند (Front End) به مجموعه ای از کارهایی گفته می شود که بر روی گرافیک و شکل ظاهری سایت تاثیر دارد و با عملکرد سایت کاری ندارد. از جمله زبان هایی که فرانت اند هستند می توان به CSS، HTML، JAVASCRIPT اشاره کرد.

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

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

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

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

CSSیک زبان برای ساخت شیوه نامه است که از آن برای توصیف نمایش یک سند (که به یکی از زبان‌های نشانه‌گذاری مثل اچ‌تی‌ام‌ال نوشته شده‌است) استفاده می‌شود. سی‌اس‌اس یکی از فناوری‌های بنیادین (در کنار اچ‌تی‌ام‌ال و جاوااسکریپت) در وب جهان‌گستر است.

در بحث طراحی با استانداردهای وب، همهٔ ساختار گرافیکی و تصویری صفحه‌های وب باید توسط دستورات سی‌اس‌اس مجزا تعیین شود و لابه‌لای صفحه‌های وب نباید دستورهایی برای درج چگونگی نمایش آن‌ها نوشته شود. به بیانی دیگر، نشانه‌گذاری یک صفحهٔ وب (کدهای html) و دستورات مربوط به گرافیک آن (دستورات css) باید کاملاً از یکدیگر جدا باشند.

CSS3 آخرین و بزرگ‌ترین بروزرسانی CSS تاکنون بوده‌است. در حال حاضر CSS3 نسخه آخر CSS است ولی بر اساس Level بالا میرود. ولی شماره نسخه تغییری نمی کند.

هدف و کاربرد css

هدف از تولید css در واقع جداسازی اطلاعات محتوا (که توسط زبانی مانند HTML نوشته شده اند) از اطلاعات ظاهری مانند صفحه بندی، رنگ و سایز و نوع فونت می باشد. این جداسازی موجب افزایش سرعت در دسترسی به سایت، انعطاف پذیری بیشتر برای کنترل ویژگی های ظاهری، قابلیت طراحی چندین صفحه با یک فرمت یکسان و جلوگیری از پیچیدگی و انجام کارهای تکراری در طراحی وب سایت می گردد.

برخی از کاربردهای CSS

مزایای CSS3

محدودیت های زبان CSS

این دوره برای چه کسانی مناسـب اسـت؟

این دوره برای چه کسانی مناسـب نیست؟

ویژگی های دوره

ما به کیفیت و اثربخشی محصول خود اعتقاد داریم و به همین منظور گارانتی بازگشت وجه یک ماهه به شما ارائه می دهیم تا خریدی بدون ریسک و بدون نگرانی داشته باشید.
هزینه‌ای که بابت دوره پرداخت می‌کنید تا 1 ماه در اختیار خودِ شماست. اگر پس از خرید دوره به‌صورت جامع، به هر دلیلی از شرکت در آن منصرف شدید تا ١ ماه پس از خريد امكان انصراف و بازگشت كامل وجه برای شما درنظر گرفته شده است. برای انصراف از دوره لازم است در بازه زمانی تعیین شده درخواست خود را با پشتیبانی مطرح کرده و حداکثر ۲۵% از دوره را مشاهده کرده باشید و با توجه به سرفصل های اعلام شده و توضیحات دوره مغایرت تعهدات و ویدئو های آموزشی را مطرح نمایید، بدیهی می باشد پس از بررسی توسط تیم کارشناسی مدرسه ما، درصورت صحت ادعای شما و اثبات مغایرت احتمالی هزینه به صورت کامل عودت داده خواهد شد. پس از انصراف همواره منتظر نظرات و پیشنهادات شما برای بهبود کیفیت دوره و نحوه ارائه آن‌ها هستیم و امیدواریم در حوزه موردنظر خود به موفقیت و فرصت‌های بزرگی دست پیدا کنید.

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

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

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

درصورتی که تمایل به دریافت مدرک مدرسه ما – واحد فرهنگی نشر دیجیتال داشته باشید، بعد از ثبت درخواست، از سوی تیم ارزیابی پروژه ای برای شما تعریف شده و پس از انجام پروژه و بررسی آن از سوی تیم ارزیابی در صورتی که حد نصاب نمره(70 از 100) را کسب کرده باشید، برای شما گواهی شرکت در دوره صادر خواهد شد.

مدرسه ما متعهد می باشد تا یک سال پس از خرید دوره به پشتیبانی خود از هنر آموزان دوره با توجه به شرایط و قوانینی که ذکر شد، بپردازد و در این راه هنر آموزان خود را تنها نگذارد.

مقایسه HTML با CSS و جاوا اسکریپت

با وجود اینکه HTML‌ زبان قدرتمندی است، اما برای ساخت یک وب‌سایت حرفه‌ای و کاملاً واکنش‌گرا کافی نیست. از زبان برنامه نویسی HTML (زبان نشانه‌گذاری HTML) تنها می‌توان برای اضافه کردن عنصرهای متنی استفاده و ساختار محتوا را ایجاد کرد. اما، HTML به همراه دو زبان فرانت‌اند دیگر به خوبی کار می‌کند.

این زبان‌ها CSS و جاوا اسکریپت هستند. با استفاده از CSS ، HTML و جاوا اسکریپت می‌توان به تجربه کاربری بسیار خوبی دست یافت و قابلیت‌های پیشرفته‌ای را پیاده‌سازی کرد.

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

جاوا اسکریپت امکان افزودن قابلیت‌های پویا همچون اسلايدرها، پاپ‌آپ‌ها و گالری تصاویر را پدید می‌آورد.

میتوان کاربرهای اصلی hTML  را شامل موارد زیر دانست:

  1. ساختاردهی محتوا: HTML برای ساختاردهی و نمایش محتوای وبسایت استفاده می‌شود. با استفاده از عناصر HTML مختلف، می‌توانید ساختار صفحات وب را تعریف کنید، مثلاً سرصفحه (header)، فوتر (footer)، ناوبری (navigation)، بخش‌های مختلف صفحه و متن‌ها.
  2. فرم‌ها: HTML حاوی عناصر فرم است که به کاربران امکان می‌دهد اطلاعات را وارد کنند و آنها را به سمت سرور ارسال کنند. این عناصر شامل فیلدهای متنی، دکمه‌ها، جعبه انتخاب، چک‌باکس، رادیوباتن و غیره هستند.
  3. لینک‌ها: عناصر HTML مانند `<a>` برای ایجاد لینک‌ها به صفحات دیگر یا منابع خارجی استفاده می‌شوند. با استفاده از لینک‌ها، کاربران می‌توانند به صفحات دیگر جابجا شوند و منابع را دریافت کنند.
  4. تصاویر: HTML امکان نمایش تصاویر در صفحات وب را فراهم می‌کند. عنصر `<img>` برای اضافه کردن تصاویر استفاده می‌شود و می‌توانید مسیر تصویر و متن جایگزین (alt text) را مشخص کنید.
  5. جداول و قالب‌بندی: با استفاده از عناصر HTML مانند `<table>` و `<div>`، می‌توانید جداول و قالب‌بندی‌های مختلف را در صفحات وب ایجاد کنید. این امکان به شما کمک می‌کند تا طرح صفحه خود را طبق نیازهای خود سفارشی کنید.
  6. عناصر چندرسانه‌ای: HTML امکان نمایش ویدیو، صدا، نقشه‌ها و اجزای چندرسانه‌ای دیگر را در صفحات وب فراهم می‌کند. با استفاده از عناصر HTML مختلف، می‌توانید این اجزا را به صفحات خود اضافه کنید.

جلسات دوره

آمورش مقدماتی

آموزش مقدماتی CSS3

Intro ویدئو

معرفی دوره

پیش نمایش
خصوصی
محتوای این درس خصوصی است. برای دسترسی کامل به محتوای دوره آن را خریداری کنید.

درس اول ویدئو

افزودن css به صفحات وب

خصوصی
محتوای این درس خصوصی است. برای دسترسی کامل به محتوای دوره آن را خریداری کنید.

درس دوم ویدئو

Selector in CSS

خصوصی
محتوای این درس خصوصی است. برای دسترسی کامل به محتوای دوره آن را خریداری کنید.

درس سوم ویدئو

Background

خصوصی
محتوای این درس خصوصی است. برای دسترسی کامل به محتوای دوره آن را خریداری کنید.

درس چهارم ویدئو

head & headings

خصوصی
محتوای این درس خصوصی است. برای دسترسی کامل به محتوای دوره آن را خریداری کنید.

درس پنجم ویدئو

Margin & Padding

خصوصی
محتوای این درس خصوصی است. برای دسترسی کامل به محتوای دوره آن را خریداری کنید.

درس ششم ویدئو

Height & width

خصوصی
محتوای این درس خصوصی است. برای دسترسی کامل به محتوای دوره آن را خریداری کنید.

درس هفتم ویدئو

رنگ و ترازبندی متون

خصوصی
محتوای این درس خصوصی است. برای دسترسی کامل به محتوای دوره آن را خریداری کنید.

درس هشتم ویدئو

Font in CSS

خصوصی
محتوای این درس خصوصی است. برای دسترسی کامل به محتوای دوره آن را خریداری کنید.

درس نهم ویدئو

فرمت دهی به لینک ها

خصوصی
محتوای این درس خصوصی است. برای دسترسی کامل به محتوای دوره آن را خریداری کنید.

درس دهم ویدئو

Table in CSS

خصوصی
محتوای این درس خصوصی است. برای دسترسی کامل به محتوای دوره آن را خریداری کنید.

درس یازدهم ویدئو

Display – block and inline

خصوصی
محتوای این درس خصوصی است. برای دسترسی کامل به محتوای دوره آن را خریداری کنید.

درس دوازدهم ویدئو

position

خصوصی
محتوای این درس خصوصی است. برای دسترسی کامل به محتوای دوره آن را خریداری کنید.

درس سیزدهم ویدئو

overflow

خصوصی
محتوای این درس خصوصی است. برای دسترسی کامل به محتوای دوره آن را خریداری کنید.

درس چهاردهم ویدئو

float & clear in CSS

خصوصی
محتوای این درس خصوصی است. برای دسترسی کامل به محتوای دوره آن را خریداری کنید.

پیوست فایل های ضمیمه

فایل های دوره

خصوصی
محتوای این درس خصوصی است. برای دسترسی کامل به محتوای دوره آن را خریداری کنید.

از چه کسی یاد میگیری؟

مهندس مهدی زبردست برزین
مهدی زبردست برزین

مدیر و موسس مدرسه ما

دانشجویان دوره

نظرات تعدادی از دانشجویان دوره سی شارپ بر پایه w3schools

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

همین الان ثبت نام کن

0 میلیون پرداخت کامل با تخفیف ویژه 100 درصد

این فرصت استثنایی رو از دست نده!

300000 تومان
0 میلیون تومان
نیاز به مشاوره تخصصی دارید؟
لوگوی CSS3 به رنگ آبی
CSS3
به جمع متخصصین بپیوندید ...