معرفی و کار با کلاس های ساختگی

1396/3/26 عباس حبیبی 1126

معرفی و کار با کلاس های ساختگی

آموزش HTML5 – جلسه ششم   : معرفی و کار با کلاس های ساختگی  

معرفی :

با عرض سلام ادب و احترام ، خدمت شما کاربران محترم سایت دوست داشتنی ilikephp.ir  سال 96 رو به خدمت همه ی شما عزیزان تبریک عرض می کنم و آرزو میکنم که در این سال جدید به بهترین ها دست پیدا کنید ، به جلسه ششم  Html5 خوش آمدید .

 

هدف جلسه :

در این جلسه در ادامه مباحث CSS جلسه گذشته وارد مباحث کلاس های ساختگی می شویم و بررسی می کنیم که این کلاسها در چه مراحلی از بحث کد نویسی می توانند به ما کمک کنند . با ما همراه باشید ...

 

شروع آموزش :

خب دوستان خیلی خوش آمدید به این جلسه از آموزشهای HTML5 بدون اتلاف وقت بریم سراغ بحث های اصلی .

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

 

اگر در یک تگ Div مادر چند عدد پارگراف وارد بکنیم مانند شکل زیر :

<div id="mother">

<p class="sakhtegi">Ali</p>

<p class="sakhtegi">Mohsen</p>

<p class="sakhtegi">Reza</p>

<p class="sakhtegi">Abbas</p>

<p class="sakhtegi">Alireza</p>

</div>

می توانیم کلاسهای مختلفی برای آنها تعریف کنیم ، اگر دقت کنید مشاهده می کنید که 5 تگ پاراگراف برای یک تگ مادر ساخته شده است که اگر پروژه را ذخیره کنید و  یک خروجی تا به این لحظه گرفته باشید اسامی باید به صورت لیست شده و به زیر هم قرار بگیرند .

 

 

خب حالا اگر وارد فایل CSS (که از قبل ساخته ایم) شویم ، با استفاده از کد زیر می توانیم بگوییم که پاراگراف هایی که فرزندان دارای شماره ی خاصی هستند را با رنگ قرمز نمایش دهد به کد زیر دقت کنید :

P:nth-child(3){color:red;}

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

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

 

اما زمانی که تعداد پاراگراف های شما زیاد شده باشد می توانید با استفاده از کد زیر اعلام کنید که فقط پاراگراف های فرد را به رنگ قرمز در آورد یا هر تغییری که مد نظر شماست به کد زیر دقت کنید :

P:nth-child(odd){color:red;}

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

همانطور که مشاهده کردید با کد بالا می توانید پاراگراف های فرد را به رنگ قرمز در آورید .

 

خب حالا برویم برای اینکه عددهای زوج را به رنگ سبز در بیاوریم برای اینکار تنها کافیست که کد بالا را کمی تغییر دهیم به شکل زیر :

P:nth-child(even){color:green;}

اگر خروجی این تگ را نیز مشاهده کنید همانند خروجی بالا می توانید عددهای زوجی را ببینید که دارای رنگ سبز هستند .

 

به این نوع فعالیت ها در کدنویسی HTML5,CSS3 کلاسهای ساختگی می گویند که می توانند در اکثر مواقع به داد برنامه نویس ها برسند . البته کلاسهای ساختگی فقط در طراحی وب کاربرد ندارند بلکه در تمامی زبانهای برنامه نویسی می توانید از آنها استفاده کنید . 

 

در جلسات آتی کمی بیشتر وارد مباحث کلاسهای ساختگی می شویم و حرفه ای تر عمل خواهیم کرد .

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

 

ممنون از اینکه همراه ما بودید

دوره های مارو به دوستانتان معرفی کنید

دوستدار شما : عباس حبیبی

سوالات خود را از ما بپرسید ... 

عباس حبیبی
کارشناس سئو و بازاریابی اینترنتی
متخصص سئو و بهینه سازی سایت
بازاریابی اینترنتی
مشاور راه اندازی کسب و کار اینترنتی
برنامه نویسی و طراحی وب