جلسه9، Pseudo Class ها، Counter CSS ساخت اسلایدر با HTML CSS، مهدیار منصوری

جلسه 9 دوره طراحی سایت - بخش اول سرفصل های ویدیو جلسه نهم : Pseudo Classes Like ____Hover ____Active ____Visited ____Link ____Focus ____Target ____Root ____First Child ____Last Child ____Nth Child ____Last Of Type ____Not ____Empty Pseudo Elements Like ____Before ____After ____First Line ____First Letter ____Selection CSS Counters Combinator Selectors Slider Using ONLY Html And CSS ==================================== سلام و عرض خسته نباشید، توی این جلسه مطالب مهمی آموزش داده شده و پاسخ بسیاری از سوالات پرتکرار دوستان توی این ویدیو دیده میشه من جمله این سوال ها : + چگونه وقتی موس روی عنصر HTML قرار گرفت ظاهر آن را تغییر دهیم؟ + چگونه رنگ پیش فرض ناحیه متنی انتخاب شده توسط کاربر را تغییر دهیم؟ + آیا میتوان تنها با HTML و CSS ِیک اسلایدر ساخت؟ + چگونه Float را بهتر مدیریت کنیم؟ + چگونه در CSS از شمارنده ها استفاده کنیم ؟ اگر این سوالات سوالات شما هم هست پیشنهاد میکنم ویدیو این جلسه رو مشاهده کنید، توی این جلسه ابتدا بحث Pseudo Class ها یا همون شِبه کلاس ها مطرح میشه، و دو دسته کلی شبه کلاس ها توضیح داده میشن (انتخابگر و مدیریت کننده)، نوع اول که اونهارو انتخابگر نامیدیم، کارشون اینه که به ما در انتخاب مجموعه ای از عناصر کمک کنن مثلا first-child میتونه عنصری که اولین فرزند پدرش باشه (فرزند ارشد!) رو انتخاب کنه، یا مثلا last-child میگه تگی که آخرین فرزند پدرش باشه(ته تغاری!)، به سلکتور زیر دقت کنید : p:last-child این سلکتور میگه تگ P ای رو انتخاب کن که ته تغاری هممم باشه... همچنین میتونیم nامین فرزند یک عنصر بودن رو با nth-child تعیین کنیم البته لزومی نداره برای انتخاب خودمون رو به روابط پدر و فرزندی محدود کنیم بلکه میتونیم بر اساس نوع یک تگ هم انتخاب کنیم مثلا p:last-of-type این سلکتور میگه تگ P ای رو انتخاب کن که آخرییین تگ P موجود باشه... همچنین میتونیم با استفاده از شبه کلاس های not و is بگیم فلان تگ هایی رو انتخاب کن که این ویژگی یا این اسم کلاس رو مثلا نداشته باشن... p:not(.test) این سلکتور میگه تگ P ای رو انتخاب کن که کلاس تست "نداشته" باشه، is هم که برعکسش عمل میکنه... اما نوع دوم شبه کلاس ها شبه کلاس های مدیریت کننده نام گرفتن، این شبه کلاس ها به ما کمک میکنن با استفاده از CSS یک رویداد روی صفحه رو مقداری مدیریت کنیم، مثلا چه رویدادی؟ مثلا رویداد وارد شدن موس به یک عنصر؛ با استفاده از این شبه کلاس ها میتونیم : وارد شدن موس به یک عنصر، کلیک روی یک لینک، Target شدن عنصری رو صفحه و Focus کردن یا تمرکز کردن روی یک عنصر رو تشخیص بدیم و با CSS مدیریتشون کنیم، مثلا اگر بخوایم وقتی کاربر با موس روی یک لینک رفت رنگ اون لینک مشکی بشه میتونیم بنویسیم : a:hover{ color:black } توی ویدیو به شکل کامل شبه کلاس ها توضیح داده شدن و با استفاده از شبه کلاس Target یاد میگیریم چطور بدون استفاده از JS یک اسلایدر بسازیم! بحث بعدی بحث Pseudo Element ها یا شبه عناصر هست، مقادیری که ما با CSS به صفحه اصلی اضافه میکنیم و اونهارو مدیریت میکنیم، مانند Before After و... که توی ویدیو کامل توضیح داده شدن، در خلال همین مطلب هست که CSS Counter ها هم توضیح داده شدن و یاد میگیریم چطور با استفاده از CSS یک شمارنده ایجاد کنیم در بخش های انتهایی کلاس بحث Combinator ها و نحوه ترکیب دوتا Selector با هم بر اساس روابط خویشاوندی اونها رو یادمیگیریم که به ما کمک میکنه Selector ها و آیدی و کلاس های کمتری بنویسیم و راحت تر عناصرمون رو انتخاب کنیم مثلا اگر بگیم div+a یعنی تگ لینکی که بلافاصله بعد از div قرار گرفته یا اگر بگیم p img یعنی تگ عکسی که یا مستقیم و یا غیر مستقیم(با واسطه) فرزند تگ p هست و آخرین مطلب هم که آموزش نحوه ایجاد یک اسلایدر با استفاده از HTML و CSS هست که از target و position ها در کنار خیلی ویژگی های دیگه توی اون استفاده میشه امیدوارم از این جلسه استفاده کافی رو ببرید، کیفیت صدا و تصویر انشالله از دوره های آتی بهتر و بهتر خواهد شد این ویدیو ها چون از قبل ضبط شده متاسفانه خیلی امکان بهبود کیفیتشون وجود نداره؛ ارادتمند شما، مهدیار منصوری.

• #تحصیلات_و_یادگیری
• #مجتمع_فنی_تهران
• #html
• #html_slider
• #css
• #hover