آموزش صفر تا صد سی اس اس (فیلم فارسی+ جزوه pdf)

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

3 نکته مهم

• اگر با توضیحات نوشتاری بهتر یاد می گیرید، این جزوه ها را دانلود کنید (می توانید هم به عنوان مکمل فیلم های زیر استفاده کنید)
• اگر دوست دارید درس به درس با آموزش های نوشتاری ما یاد بگیرید از اینجا شروع کنید (میتوانید سوالات خود را نیز زیر هر درس مطرح کنید)
• برای یادگیری سریع تر و کامل تر نیز این چند ترفند کاربردی را که در هیج جای دیگری به شما یاد نمی دهند مطالعه کنید.

توضیحاتی درباره css و 9 نکته

CSS مخفف Cascading Style Sheets به معنای برگه های سبک آبشاری است. CSS یک زبان شیوه نامه استاندارد است که برای توصیف نمایش (یعنی طرح و قالب بندی) صفحات وب استفاده می شود.

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

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

برای حل این مشکل، CSS در سال ۱۹۹۶ توسط کنسرسیوم شبکه جهانی وب (W3C) معرفی شد که استاندارد آن را نیز حفظ می کند. CSS برای امکان تفکیک بین نمایش و محتوا طراحی شده است. اکنون طراحان وب می توانند اطلاعات قالب بندی صفحات وب را به یک شیوه نامه جداگانه منتقل کنند که در نتیجه آن نشانه گذاری HTML به طور قابل توجهی ساده تر و قابلیت نگهداری بهتر می شود.

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

• به راحتی می توانید قوانین سبک دهی مشابه را بر روی چندین عنصر اعمال کنید.
• می توانید نمایش چندین صفحه از یک وب سایت را با یک شیوه نامه کنترل کنید.
• می توانید یک صفحه را در دستگاه های مختلف به شیوه های متفاوت نمایش دهید.
• می توانید حالت های پویای عناصر مانند شناور بودن، تمرکز و … را سبک دهی کنید که با روش های دیگر امکان پذیر نیست.
• می توانید موقعیت یک عنصر را در صفحه وب تغییر دهید، بدون اینکه نشانه گذاری را تغییر دهید.
• می توانید نمایش عناصر HTML موجود را تغییر دهید.
• می توانید عناصر را در فضای ۲بعدی یا ۳بعدی تغییر شکل دهید؛ مانند تغییر اندازه، چرخش، کج کردن و ….
• می توانید انیمیشن و جلوه های حرکتی را بدون استفاده از جاوا اسکریپت ایجاد کنید.
• می توانید نسخه مناسب چاپ از صفحات وب خود بسازید.
• معرفی کامل سی اس اس در اینجا

موارد آموزش داده شده در این فیلم ها

• مجموعه آموزش های بک گراند
• مجموعه آموزش های تایپوگرافی
• آموزش text-shadow
• آموزش box-shadow
• آموزش float
• آموزش clear
• آموزش z-index
• آموزش position
• مجموعه آموزش border
• مجموعه آموزش استایل دهی به جداول
• و …

ویدیوی نمونه

ویدیوهای داخل پکیج از کیفیت بسیار بالاتری برخوردارند:

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

دانلود فیلم های این پکیج

 دانلود جزوه PDF

 حجم: ۷۵۰ مگابایت

 سطح: از صفر تا صد

 نسخه آموزش داده شده: مناسب برای همه نسخه ها

پک آموزش حرفه ای Css و HTML با هم! واقعیت این هست که هیچ اموزش رایگانی نمیتونه شما رو به حد حرفه ای و تسلط کامل برسونه! پک اموزشی زیر گلچین بهترین اموزشهای اچ تی ام ال و سی اس اس بازار برنامه نویسی ایران هست. یکبار برای همیشه html و Css رو در دو هفته کااامل استاد تمام شو! این دو بیس برنامه نویسی هستند و الفبای یادگیری برنامه نویسی:

CSS چگونه کار می‌کند؟

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

از نظر فنی، عناصر HTML اجزای مختلفی از یک صفحه وب مانند پاراگراف یا تیتر را نمایش می‌دهند. برای مثال، این یک تگ HTML است:

<p>This is a paragraph</p>

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

p {

  color: purple; 

  font-weight: bold; 

}

در CSS فوق:

•  p  به‌عنوان سلکتور عمل می‌کند و مشخص می‌کند که این استایل به تمام پاراگراف‌های HTML اعمال شود.
• کد داخل آکولادها اعلان (Declaration) نامیده می‌شود که شامل ویژگی‌ها (Properties) مانند رنگ و فونت و مقادیر (Values) مربوطه (مانند بنفش و ضخیم) است که به سلکتور اختصاص می‌یابد.

تغییر مقادیر برای دستیابی به استایل‌های مختلف

با تغییر مقادیر ویژگی‌ها، می‌توانید به استایل‌های گوناگونی دست پیدا کنید.

برای مثال:

• ویژگی background-color  می‌تواند مقادیری مانند red  یا blue  داشته باشد.
• ویژگی background-position  می‌تواند مقادیری مانند top  یا bottom  بگیرد.
• ویژگی text-align  می‌تواند مقادیری مانند center ، right  یا left  داشته باشد.

انواع CSS

یک طراح وب می‌تواند از یکی از سه نوع CSS برای استایل‌دهی و شخصی‌سازی یک وب‌سایت استفاده کند: درون‌خطی (Inline)، داخلی (Embedded/Internal) یا خارجی (External). در ادامه، هر یک از این روش‌ها را به‌صورت جزئی بررسی می‌کنیم:

CSS درون‌خطی (Inline CSS)

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

CSS داخلی (Embedded CSS)

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

CSS خارجی (External CSS)

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

خلاصه

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

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

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