شبه عناصر در CSS

شبه عناصر در CSS

شبه عناصر در CSS چه کاربردی دارند ؟

می توان با استفاده از شبه عناصر درCSSبخش های مختلف یک المان را سبک دهی کرد (styleدلخواه را به آن اعمال کرد) .

از شبه عنصر های برای انجام کارهایی همچون :

سبک دهی یا اعمال سبک به اولین خط یا حرف یک المان

محتوا مورد نظر را پیش یا پس از محتوای یک عنصر درج کرد.

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

شبه عناصر در CSS شبه عناصر در css شبه عناصر در CSS CSS pseudo element

شبه عناصر در CSS

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

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

ترکیب نحوی (syntax)

ترکیب نحوی شبه عناصر به ترتیب زیر می باشد :

 

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

سیستم حاشیه نویسی (notation) دو تا کاراکتر :: جایگزین یک دو نقطه در CSS گردید . این در واقع تلاشی بود از سوی کنسرسیوم وب جهان W3C که به منظور ایجاد وجه تمایز بینpseudo-classes (شبه کلاس ها) و pseudo-elements (شبه عناصر) صورت گرفت .

ترکیب نحوی تک دو نقطه ی در ویرایش های قدیمی تر CSS2 و CSS1 برای شبه کلاس ها و شبه عناصر بکار می رفت . 

برای ایجاد سازگاری با ورژن های قبلی (سازگاری عقبرو backward compatability)، دستور نحوی تک دونقطه ی را می توان برای CSS2 و CSS1 بکار برد .

شبه عنصر first-line:

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

در مثال زیر، خصوصیت color و font-variant روی اولین خط پاراگراف (عنصر p) اعمال می شود:

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

خصوصات زیر برای شبه عنصر first-line بکار برده می شوند:

  • font
  • float
  • color
  • background
  • word-spacing
  • letter-spacing
  • text-decoration
  • vertical-align
  • text-transform
  • line-height
  • clear
شبه عناصر در CSS شبه عناصر در css شبه عناصر در CSS Capture

شبه عناصر در CSS

::first-letter

شبه المان ::first-letter به منظور اعمال سبک یا style خاصی به اولین خط یک نوشته بکار می رود .

شبه المان ::first-letter را تنها می توان به المان های block اعمال کرد .

مثال :

تمامی حروف اول نوشته را در المان های <p> قالب دهی کنید :

تمامی خوصیت های ذیل به شبه المان ::first-letter اعمال می شوند :

font properties

font properties
color properties
background properties
margin properties (میزان حاشیه ی دور عناصر را تنظیم می کند)
padding properties (خصوصیت هایی که حاشیه ی درونی عنصر را تنظیم می کند)
border properties(خصوصیت مربوط به تنظیم خطوط حاشیه)
text-decoration
vertical-align ( داشته باشد”none”مقدار “float” فقط در صورتی که )
text-transform
line-height
float (شناور سازی عنصر به چپ یا راست)

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

شبه عنصر after:

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


تمام عناصر/شبه کلاس های CSS

انتخابگر نمونه توضیح نمونه
:link a:link تمام لینکهای مشاهده نشده را انتخاب می کند
:visited a:visited تمام لینکهای مشاهده شده را انتخاب می کند
:active a:active لینکهای فعال را انتخاب می کند
:hover a:hover لینکهای اشاره شده با ماوس را انتخاب می کند
:focus input:focus عنصر ورودی را که تمرکز دارد انتخاب می کند
:first-letter p:first-letter حرف اول هر عنصر <p> را انتخاب می کند
:first-line p:first-line سطر اول هر عنصر <p> را انتخاب می کند
:first-child p:first-child هر عنصر <p> را که اولین تولید عناصر مادر است انتخاب می کند
:before p:before محتوایی را قبل از هر عنصر <p> وارد می کند
:after p:after محتوایی را بعد از هر عنصر <p> وارد می کند
:lang(language) p:lang(it) هر عنصر <p> با مقدار خواص langکه با “it” آغاز می شود را انتخاب می کند
آموزش CSS آموزش طراحی وب

دیدگاه خود را بیان کنید