٪۴۰ تخفیف تابستانه شروع شد! بزرگترین حراج سال ما

به ما بپیوندید

آموزش عناصر شبه CSS

عناصر شبه چیست؟ از عنصر شبه CSS برای سبک بخشیدن به قسمتهای مشخص شده از یک عنصر استفاده می شود. به عنوان مثال ، می توان از آن استفاده کرد: حرف اول یا خط یک عنصر را سبک کنید قبل…

محمد یوسفی

12 جولای 2021

عناصر شبه چیست؟

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

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

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

نحو

نحو عناصر شبه:

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

عنصر شبه :: خط اول

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

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

مثال

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

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

ویژگی های زیر برای ::first-line عنصر شبه اعمال می شود:

  • خصوصیات قلم
  • خواص رنگ
  • خواص پس زمینه
  • فاصله کلمات
  • فاصله بین حروف
  • دکوراسیون متن
  • عمودی تراز کردن
  • تبدیل متن
  • ارتفاع خط
  • روشن

به علامت گذاری کولون مضاعف توجه کنید – ::first-line در مقابل :first-line

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

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

برای سازگاری به عقب ، نحو تک کولون برای عناصر شبه CSS2 و CSS1 قابل قبول است.


عنصر شبه :: حرف اول

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

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

مثال

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

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

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

  • خصوصیات قلم
  • خواص رنگ
  • خواص پس زمینه
  • خواص حاشیه
  • خواص بالشتک
  • خواص مرزی
  • دکوراسیون متن
  • تراز کردن عمودی (فقط اگر “شناور” “هیچ” باشد)
  • تبدیل متن
  • ارتفاع خط
  • شناور
  • روشن

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

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

مثال

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

مثال بالا حرف اول پاراگراف ها را با کلاس = “intro” ، به رنگ قرمز و در اندازه بزرگتر نشان می دهد.


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

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

در مثال زیر ، حرف اول یک پاراگراف قرمز ، در اندازه قلم xx بزرگ است. بقیه خط اول آبی و با کلاه کوچک است. بقیه پاراگراف اندازه و رنگ قلم پیش فرض خواهد بود:

مثال

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

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

CSS – عنصر :: قبل از شبه

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

مثال زیر یک تصویر را قبل از محتوای هر عنصر <h1> درج می کند:

مثال

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

CSS – عنصر :: پس از شبه

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

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

مثال

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

CSS – عنصر شبه نشانگر ::

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

مثال زیر نشانگرهای موارد لیست را سبک می کند:

مثال

::marker {
  color: red;
  font-size: 23px;
}

CSS – عنصر شبه :: انتخاب

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

ویژگی های CSS زیر را می توان برای ::selectioncolor، background، cursor، و outline.

مثال زیر متن انتخاب شده را روی زمینه زرد قرمز می کند:

مثال

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

منبع

مطالب مرتبط

0 0 رای ها
امتیازدهی به مقاله
اشتراک در
اطلاع از
guest
0 نظرات
بازخورد (Feedback) های اینلاین
مشاهده همه دیدگاه ها