دنیای برنامه نویسی و اپلیکیشن

baner-telegram
شما اینجا هستید : صفحه اول » طراحی سایت » آموزش CSS » فیلم آموزش CSS – شبه عناصر ( Pseudo Element )

فیلم آموزش CSS – شبه عناصر ( Pseudo Element )

در این قسمت از فیلم آموزش CSS شبه عناصر یا Pseudo Element را آموزش خواهیم داد ، جلسه قبل هم که در مورد شبه کلاس ها آموزش داده بودیم .

شبه عناصر ( Pseudo Element ) :

با استفاده از این شبه عناصر می توانیم یک عنصر ایجاد کنیم و افکت یا جلوه های خاصی به عناصر HTML بدهیم . سینتکس شبه عناصر هم به صورت زیر است :

شبه عنصر first-line

این شبه عنصر خط اول متن رو انتخاب می کند و به آن استایل می دهد . مانند سورس کد زیر :

کد CSS :

کد HTML :

شبه عنصر first-letter

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

شبه عنصر Before

این شبه عنصر میاد به اون عنصری که انتخاب کردیم ، قبل از آن استایلی که دادیم رو اعمال می کند . مهم ترین خاصیتی که در Before و After وجود دارد Content هستش ، داخل Content اگر بین تک کوتیشن و یا دابل کوتیشن هر چیری بنویسید به همان صورت قبل از عنصر مورد نظر نمایش داده می شود .

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

شبه عنصر After

شبه عنصر after میاد به بعد از اون عنصری که انتخاب کردید استایل می دهد و اگر خواستید متنی هم بنویسید باید آن را داخل Content بنویسید و آن متن بعد از عنصر مورد نظر نمایش داده می شود .
در before و after می تونید از عکس هم استفاده کنید مانند سورس زیر :

نکات مهم در  مورد before  و after :

مهم ترین نکته این است که ویژگی content فقط بر روی شبه عناصر before و after کاربرد دارد و بر روی عناصر دیگر کاربردی ندارد .
اگر از Content در before و after استفاده نکنید کدهایی که داخل اون ها می نویسید پنهان می شوند و اعمال نمی شوند پس اگر از before و after می خواهید استفاده کنید حتما باید از Content استفاده کنید .
حالا اگر با Content کاری نداشتید یعنی عکس و متن نمی خواستید قرار بدید باید Content را بنویسید و  داخل کوتیشن هیچ چیزی ننویسید ، مانند ‘ ‘ :Content 

شبه عنصر Selection

با استفاده از شبه عنصر selection می تونیم یک استایل خاصی به متنی که کاربر انتخاب می کند بدهیم یعنی زمانی که کلیک چپ را نگه می دارد و متن را انتخاب می کند .

در selection نمی تونیم از همه ویژگی های CSS استفاده کنیم بلکه باید از این ویژگی هایی استفاده کنیم که در سورس کد زیر استفاده شده است :

نکته مهم : شاید براتون سوال پیش بیاد که در جایی کدهای مربوط به before و after را که دیده باشید یدونه دو نقطه ( before: ) ولی اینجا چرا دوتا دونقطه ( before:: ) است ؟؟

چون در نسخه دوم CSS از شبه عناصر به این صورت استفاده می کردند before: و همان طور که در جلسه پیش دیدید در شبه کلاس ها هم از یدونه دونقطه استفاده می کردیم مثلاً  hover: در شبه عناصر و شبه کلاس ها یدونه دونقطه بود ، در CSS3 برای این که تمایزی بین شبه کلاس ها و شبه عناصر به وجود بیارن اومدن از دوتا دو نقطه استفاده کردند .

فیلم آموزش CSS را می توانید از لینک زیر دانلود کنید .

پیشنهاد می کنیم حتما بخوانید :

درباره : رضا طوماری

عاشق برنامه نویسی

نظرات کاربران :



جواب سوال چیه ؟ *