آموزش CSS - جلسه بیست و هشتم
تاریخ انتشار:۱۲:۳۴ ۱۴۰۰/۵/۱۳

آموزش CSS - جلسه بیست و هشتم


شبه عنصر



از شبه عنصر ها(Pseudo-elements) برای فرمت بندی قسمتی مشخص از یک عنصر استفاده میشود. در این فصل با انواع شبه عنصر آشنا خواهیم شد.




 از شبه عنصر ها(Pseudo-elements) برای فرمت بندی قسمتی مشخص از یک عنصر استفاده میشود.


برای مثال، شبه عنصر ها در موارد زیر میتوانند استفاده شوند :


  • فرمت بندی اولین حرف، یا خط از یک عنصر
  • اضافه کردن محتوا به قبل، یا بعد از محتوای یک عنصر


سینتکس(نحو)


سینتکس شبه عنصر ها به صورت زیر است :


 }  selector ::pseudo-element
; property :value
{


به جفت دو نقطه در سینتکس شبه عناصر دقت کنید برای مثال first-line:: در مقابل first-line:


در CSS۳ جفت دو نقطه برای شبه عنصرها جایگزین دو نقطه تکی شده است. به این طریق میتوان شبه عنصر ها را از شبه کلاس ها تشخیص داد.



در گذشته در CSS۱ و CSS۲ از دو نقطه ی تکی برای هر دوی شبه عناصر و شبه کلاس ها استفاده میشد.


شبه عنصر first-line::


شبه عنصر first-line:: برای اضافه کردن یک استایل خاص به اولین خط از یک متن استفاده میشود.


نمونه مثال زیر اولین خط از یک متن در یک عنصر <p> را فرمت بندی میکند:


 }   p ::first-line
; color : #ff0000
; font-variant : small-caps
{


نکته : شبه عنصر first-line:: تنها میتواند برای عناصر سطح block استفاده شود.


صفات ذکر شده در پایین را میتوان به شبه عنصر first-line:: اعمال کرد:


  • صفات font
  • صفات color
  • صفات background
  • word-spacing
  • letter-spacing
  • text-decoration
  • vertical-align
  • text-transform
  • line-height
  • clear


شبه عنصر first-letter::


شبه عنصر first-letter:: برای اضافه کردن یک استایل خاص به اولین حرف از یک متن استفاده میشود.


نمونه مثال زیر اولین حرف از متون داخل عناصر <p> را فرمت بندی میکند :


 }  p ::first-letter
; color : #ff0000
; font-size : xx-large
{


نکته : شبه عنصر first-letter:: تنها میتواند برای عناصر سطح block استفاده شود.


صفات ذکر شده در پایین را میتوان به شبه عنصر first-letter:: اعمال کرد:


  • صفات font
  • صفات color
  • صفات background
  • صفات margin
  • صفات padding
  • صفات border
  • text-decoration
  • vertical-align(تنها اگر مقدار float برابر با none باشد)
  • text-transform
  • line-height
  • float
  • clear


شبه عنصر ها و کلاس ها در CSS


شبه عنصر ها میتوانند با کلاس ها در CSS ترکیب شوند :


 }  p .intro ::first-letter
; color : #ff0000
;% font-size : 200
{


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


ترکیب چندین شبه عنصر


چندین شبه عنصر میتوانند با هم ترکیب شوند.


در نمونه مثال زیر، اولین حرف از یک پاراگراف به رنگ قرمز خواهد شد و اندازه ی فونت آن با xx-large مقدار دهی میشود.


باقی مانده ی خط اول به رنگ آبی و به شکل small-caps در خواهد آمد. باقی مانده ی پاراگراف نیز دارای رنگ و اندازه ی فونت پیشفرض است :


 }   p ::first-letter
; color : #ff0000
; font-size : xx-large
{

} p ::first-line
; color : #0000ff
; font-variant : small-caps
{

شبه عنصر before::


از شبه عنصر before:: برای اضافه کردن مقداری محتوا به قبل از محتوای یک عنصر میتوان استفاده کرد.


نمونه مثال زیر یک تصویر را به قبل از محتوای هر عنصر <h۱> اضافه میکند :


 }   h1 ::before
; content : url (smiley.gif )
{

شبه عنصر after::


از شبه عنصر ::after برای اضافه کردن مقداری محتوا به بعد از محتوای یک عنصر میتوان استفاده کرد.


نمونه مثال زیر یک تصویر را به بعد از محتوای هر عنصر <h۱> اضافه میکند :


 }   h1 ::after
; content : url (smiley.gif )
{


شبه عنصر selection::


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


صفات ذکر شده در پایین را میتوان به شبه عنصر ::selection اعمال کرد:


  • color 
  • background
  • cursor
  • outline


در نمونه مثال زیر وقتی کاربر متن را انتخاب میکند رنگ متن به رنگ قرمز و رنگ پس زمینه ی آن به رنگ زرد در خواهد آمد :


  }   selection::
; color : red
; background : yellow

{









منبع:learnsource


نظر به مطلب
نام:  
ایمیل:
متن:  500 حرف دیگر میتوانید تایپ کنید
کد امنیتی: 28260