دوره آنلاین و رایگان اموزش Css (مقدماتی)

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

اموزش Css

CSS مخفف Cascading Style Sheets به معنی الگو های آبشاری می باشد. پس از یادگیری این زبان میتوانید مفهوم این عبارت را متوجه شوید.با استفاده از CSS میتوان تگ های html را به راحتی به استایل های مختلف در آورد. رنگ بندی و تعیین پس زمینه ، تعیین مکان و عرض و طول ، فرمت دهی font و … همگی کارهایی است که با آموزش Css می توان به راحتی آنها را برای صفحات وب سایت هایمان انجام دهیمf.

برخی از مزایای CSS بصورت خلاصه:

1.سرفه جویی در وقت افزایش روند توسعه.
2.تغییر مجدد استایل تگ های Html به سادگی.
3.طراحی صفحه بدون نیاز به تگ های قالب بندی HTML .
4.طراحی صفحات دینامیک به کمک javascript
5.افزودن انیمیشن به صفحات وب.
6.ایجاد صفحات واکنش گرا (ریسپانسیو)
7.کنترل ظاهر بخش های مختلف سایت در هنگام کلیک.
8.تنظیم قلم و فونت مدنظر برای محتوای وب سایت.
9.و کلی امکانات دیگر که در طول دوره آموزش آنلاین و رایگان Css &Css3  با آن آشنا خواهیم شد.

مزایای دوره آنلاین و رایگان اموزش Css (مقدماتی) کدفرند:

1. 6 ساعت اموزش Css کاملا رایگان
2.آموزش قدم به قدم همراه با توضیحات و مثال
3.آموزش بصورت اصولی و کاربردی و در سریع ترین زمان
4.کار با بخش های مختلف  سی اس اس
5.آشنایی و کار با Css3
6.کار کردن در قالب پروژه های کوچک برای یادگیری بهتر
7.دانلود آموزش به صورت کامل در قالب پکیج
8.بروز رسانی دائمی

شروع دوره آنلاین و رایگان اموزش Css (مقدماتی):

CSS یکی از تکنولوژی های اصلی برای طراحی صفحات و اپلیکیشن های وب می باشد. مهم نیست قصد ساخت چه سایت و اپلیکیشنی را داشته باشید, باید در ساخت آن از CSS استفاده کنید. اگر با HTML آشنایی داشته باشید می دانید که HTML ساختار یک صفحه را شکل می دهد. با CSS می توان بوسیله اعمال رنگ ها و فونت های مختلف, تنظیم فاصله های بین عناصر و مرتب سازی چیدمان صفحه, آن ساختار را زیباسازی کرد.
برای اعمال CSS بر یک سند وب یا به بیان دیگر برای زیباسازی صفحه و یا صفحات وب توسط CSS چندین راه وجود دارد. هر کدام از این راه ها برتری و ضعف مخصوص به خود را دارند و بنا به موقعیت های متفاوت مورد استفاده قرار می گیرند. که در ادامه تک تک روش ها را بررسی می کنیم.
هر زبانی نحو یا سینتکس مربوط به خود را دارد. ویکی پدیا نحو را به صورت زیر تعریف می کند:نحو یا جمله‌شناسی به دانش مطالعهٔ قواعد مربوط به نحوهٔ ترکیب و در کنار هم آمدن واژه‌ها به‌منظور ایجاد و درک جملات در یک زبان اطلاق می‌شود.برای اینکه بتوانیم به زبان CSS کار کنیم باید اجزا مختلف آن و نحوه ترکیب آن اجزا را باهم بشناسیم.
انتخابگرها یکی از مهمترین و قدرتمندترین قسمت های CSS هستند. یک انتخابگر الگویی است که به ما اجازه می دهد تا از طریق آن عناصر HTML را انتخاب کنیم تا بتوانیم استایل بر روی آن عناصر اعمال کنیم. به بیان دیگر از طریق انتخابگرها می توانیم عناصر HTML را برای استایل دهی هدف قرار دهیم.
در این ویدئو با انتخابگرها در سی اس اس کار خواهیم کرد.
گروه بندی انتخابگرها به این معنی است که اگر برای دو یا چند انتخابگر استایل های یکسان وجود دارند می توان آن انتخابگرها را گروه بندی کرد تا از نوشتن کد تکراری جلوگیری شود.
هر عنصر HTML می تواند یک یا چند Attribute یا ویژگی داشته باشد. هر ویژگی با یک نام و یک ارزش مشخص می شود.
pseudo-classها کلمات کلیدی هستند که به انتخابگرها برای تعیین یک حالت خاص از عنصر انتخاب شده, اضافه می شوند.
pseudo-classها کلمات کلیدی هستند که به انتخابگرها برای تعیین یک حالت خاص از عنصر انتخاب شده, اضافه می شوند.
pseudo-elementها کلمات کلیدی هستند که به انتخابگرها برای انتخاب قسمتی از محتوای عنصر اضافه می شوند. با برخی از این انتخابگرها می توان محتوای مجازی برای عناصر بوجود آورد و آنها را در CSS هدف قرار داد.
انتخابگر target: از انتخابگرهای نوع pseudo-class می باشد و این امکان را به ما می دهد تا بتوانیم زمانی که بر روی لینک داخلی کلیک شد, CSS آن قسمتی که هدف لینک هست را تغییر دهیم.
focus یک pseudo-class می باشد که برای انتخاب و استایل دهی به عناصری که در معرض تمرکز عملکرد کاربر قرار می گیرند, می باشد. حال این تمرکز می تواند با استفاده از کلیک کردن و یا با استفاده از صفحه کلید (زدن دکمه tab) باشد. عناصری که حالت focus را دارند معمولا لینک ها و عناصر فرم مثل input , textarea و غیره هستند.
hover یک pseudo-class می باشد که برای انتخاب و استایل دهی به عنصری که کاربر نشانه گر موس و یا وسیله دیگر را بر روی آن نگه داشته است, استفاده می شود. active: یک pseudo-class می باشد که با استفاده از آن می توان در CSS حالت فعال (active) یک عنصر را انتخاب, و بر روی آن عنصر در حالت فعالش استایل خاصی اعمال کرد.
()dir یک pseudo-class است که برای انتخاب و استایل دهی به عناصر بر اساس جهت تعریف شده برای آنها استفاده می شود. جهت سند HTML یا همان صفحه وب بصورت پیشفرض از چپ به راست (LTR: Left to Right) است و نیازی به مشخص کردن آن نیست اما برای فارسی زبان ها نیاز است تا جهت صفحه را بوسیله ویژگی dir تبدیل به راست به چپ (RTL) کنیم.
enabled یک pseudo-class می باشد که به وسیله آن می توان در یک صفحه عناصری (معمولا عناصر مربوط به فرم) که فعال هستند را انتخاب کرد.
disabledیک pseudo-class می باشد که به وسیله آن می توان در یک صفحه عناصری (معمولا عناصر مربوط به فرم) که غیرفعال هستند را انتخاب کرد.
checked یک pseudo-class می باشد که حالت فعال عناصری مثل چکباکس رادیو باتن را بیان می کند و با استفاده از آن ما می توانیم استایل خاصی برای این عناصر در حالت فعالشان در نظر بگیریم. این انتخابگر همینطور بر روی گزینه های داخل تگ select که option نام دارند هم اعمال می شود.
valid یک pseudo-class می باشد که برای انتخاب و استایل دهی به عنصر input در یک فرم, زمانی که آن عنصر با توجه به نوع مشخص شده (type) مقدار صحیح و معتبر گرفته باشد.
invalid یک pseudo-class می باشد که برای انتخاب و استایل دهی به عنصر input در یک فرم, زمانی که آن عنصر با توجه به نوع مشخص شده (type) مقدار نادرست گرفته باشد.
in-range یک انتخابگر از نوع pseudo-class است که می توان از طریق آن عناصری که محدودیت دامنه مقادیرشان رعایت شده باشد را انتخاب کرد. out-of-range یک انتخابگر از نوع pseudo-class است که می توان از طریق آن عناصری که محدودیت دامنه مقادیرشان رعایت نشده باشد را انتخاب کرد.
root: یک pseudo-class می باشد که برای انتخاب عنصر ریشه (root) سند HTML استفاده می شود.
first-child یک pseudo-class می باشد که عنصری که اولین فرزند یک عنصر دیگر است را انتخاب می کند. last-child یک pseudo-class می باشد که عنصری که آخرین فرزند یک عنصر دیگر است را انتخاب می کند.
()nth-child: یک pseudo-class می باشد که به ما این امکان را می دهد تا فرزندان یک عنصر را بر اساس ترتیبشان انتخاب کنیم.
()nth-last-child: یک pseudo-class می باشد که به ما این امکان را می دهد تا فرزندان یک عنصر را بر اساس ترتیبشان از آخر به اول انتخاب کنیم یعنی از نظر این انتخابگر اولین عنصر, فرزند آخر می باشد.
first-of-type یک pseudo-class می باشد که از هر نوع خاص عناصر در یک سطح اولین آن را انتخاب می کند. یعنی اگر مثلا در یک سطح یک عنوان و پنج پاراگراف و دو عنصر تصویر داشته باشیم می توان با استفاده از این انتخابگر از هر کدام از این نوع عناصر اولینشان را انتخاب کرد.
last-of-type یک pseudo-class می باشد که از هر نوع خاص عناصر در یک سطح, آخرین آن را انتخاب می کند. یعنی اگر مثلا در یک سطح یک عنوان و پنج پاراگراف و دو عنصر تصویر داشته باشیم می توان با استفاده از این انتخابگر از هر کدام از این نوع عناصر آخرینشان را انتخاب کرد.
()nth-last-of-type: یک pseudo-class می باشد که به ما این امکان را می دهد تا فرزندان یک نوع عنصر خاص را بر اساس ترتیبشان از آخر به اول انتخاب کنیم.
after:: یک pseudo-element است که به ما اجازه می دهد تا بدون هیچ تغییری در HTML محتوایی از طریق CSS در یک صفحه قرار دهیم. before:: یک pseudo-element است که به ما اجازه می دهد تا بدون هیچ تغییری در HTML محتوایی از طریق CSS در یک صفحه قرار دهیم.
first-letter یک pseudo-element می باشد که اولین حرف از اولین خط در یک عنصر از نوع بلاک را انتخاب می کند.
first-line یک pseudo-element می باشد که اولین خط در یک عنصر از نوع بلاک را انتخاب می کند. با این انتخابگر خط اول یک عنصری که ویژگی display آن مقدار inline دارد را نمی توان انتخاب کرد بلکه عنصر مورد نظر حتما باید از نوع بلاک باشد یا به عبارت دیگر مقدار ویژگی display آن عنصر, یکی از مقادیر block, inline-block,list-item ,table-cell, table-caption باشد مثل عنصر پاراگراف.
غالبا در مرورگرها زمانی که متنی توسط کاربر انتخاب می شود, آن قسمت انتخاب شده پس زمینه آبی به خود می گیرد یا به عبارت دیگر Highlight می شود. انتخابگر selection:: این امکان را در CSS به ما می دهد تا بتوانیم استایل قسمت Highlight شده را تغییر دهیم. این تغییرات تنها شامل رنگ پس زمینه و رنگ خود متن و سایه متن خواهد بود.
در این ویدئو با واحد های اندازه گیری مطلق در سی اس اس آشنا می شویم.
در این ویدئو با واحد های اندازه گیری مطلق در سی اس اس کار خواهیم کرد.
در این ویدئو با واحد های اندازه گیری نسبی در سی اس اس کار خواهیم کرد.
اگر برای ویژگی یک عنصر به جای مقدار از کلمه کلیدی inherit استفاده شود, آن ویژگی مقدار محاسبه شده همان ویژگی مربوط به پدر عنصر را خواهد گرفت.
در طراحی صفحات وب رنگ ها نقشی اساسی بازی می کنند. تعداد زیادی از ویژگی های سی اس اس وابسته به رنگ ها می باشند و مقادیر رنگی می پذیرند.در این ویدئو با نوع داده ای رنگ و همینطور فرمت های مختلف رنگی در سی اس اس آشنا خواهیم شد.
با استفاده از ویژگی text-align می توان تصمیم گرفت که چیدمان محتوای خطی (مثل متن یا تصویر) داخل یک عنصر بلاک به چه صورت باشد.
ویژگی text-overflow به ما اجازه می دهد تا زمانی که متن از نگهدارنده اش سر ریز می کند کاربر را از این موضوع باخبر کنیم.
ویژگی text-overflow به ما اجازه می دهد تا زمانی که متن از نگهدارنده اش سر ریز می کند کاربر را از این موضوع باخبر کنیم. ویژگی white-space وظیفه اداره کردن فضاهای خالی متن در یک عنصر را به عهده دارد.
ویژگی overflow تعیین می کند که محتوایی که از مرزهای عنصر خارج می شود, نمایش داده شود یا نه. و همچنین چگونگی نمایش را نیز تعیین می کند.
ویژگی font-family فونت مورد استفاده برای محتوای عناصر را مشخص می کند.
با استفاده از دستور @font-face می توانیم فونت سفارشی خود را تعریف کنیم تا در یک صفحه وب از آن استفاده کنیم که این کار باعث می شود تا از فونت های دیگری علاوه بر فونت های نصب شده بر روی سیستم بهره ببریم.
در این ویدئو با نحوه کار با font-face در سی اس اس آشنا خواهیم شد.
در این ویدئو با نحوه وارد کردن فونت از یک آدرس اینترنتی به پروژه در سی اس اس آشنا خواهیم شد.
ویژگی font-stretch این امکان را به ما می دهد تا صورت های مختلف یک فونت را بر اساس عرض کاراکتر انتخاب کنیم.
ویژگی list-style-type ظاهر و نوع علامت هایی که در پشت آیتم های یک لیست قرار می گیرند را مشخص می کند.
در ای ویدئو با نحوه کار کردن با List-Style-type در سی اس اس آشنا می شویم.
با استفاده از ویژگی list-style-image می توان برای نشانه گر آیتم های یک لیست تصویر قرار داد.
ویژگی list-style-position تعیین می کند که نشانه گر آیتم های یک لیست بیرون از باکس اصلی عنصر یا داخل آن باشد.
در این بخش با نحوه کار کردن با متن ها در سی اس اس آشنا می شویم.
بخش دوم کار کردن با متن در سی اس اس.
در این ویدئو با نحوه عملکرد رنگ ها در سی اس اس آشنا خواهیم شد.

دانلود پکیج آموزش Css &Css3 (مقدماتی)

کدفرند

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

همه مطالب این نویسنده

تعداد نظرات 19