CSSطراحی سایتگوناگون

۲۲-شبه عناصر در CSS

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

شبه عناصر در CSS

 

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

  • از شبه عناصر می توان برای استایل دهی اولین کاراکتر (first-letter) و یا اولین خط (first-line) یک پاراگراف استفاده کرد.
  • می توان از آن برای اضافه کردن یک محتوای دلخواه قبل (before) و یا بعد (after) از یک عنصر استفاده کرد.

آموزش css

نحوه استفاده کردن از شبه عناصر

 

شبه عنصر first-line

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

در خط زیر خصوصیت color و font-variant روی خط اول اعمال میشود.

  • تصویر قطعه کد بالا به شکل زیر است:

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

 


 

شبه عنصر first-letter

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

  • تصویر قطعه کدبالا به شکل زیر است:

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


 

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

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

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


 

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

 

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

در مثال زیر، اولین حرف تمام پاراگراف ها با رنگ قرمز و اندازه آن با مقدار “xx-large” تنظیم شده است، همچنین باقیمانده خط اول، نیز با رنگ آبی و خصوصیت font-variant آنها با مقدار “small-caps” تنظیم شده میباشد:

  • تصویر قطعه کد بالا به شکل زیر است:


 

شبه عنصر before:

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

  • تصویر قطعه کد بالا به شکل زیر است:


 

شبه عنصر after:

 

برای اضافه کردن محتوا به انتهای متن اسفاده میشود.

 


 

شبه عنصر selection :

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

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

  • color
  • background
  • cursor
  • outline
در مثال بالا، زمانی که کاربران قسمتی از متن را انتخاب می کنند، رنک پس زمینه و فونت قسمت انتخاب شده، بترتیب زرد و قرمز خواهد شد.

 

 

 


بخش بعدی

بخش قبلی

به این پست امتیاز دهید.
برچسب ها
مشاهده بیشتر

رضااسدزاده

رضااسدزاده هستم مهندس نرم افزار علاقه مند به فضای وب از تاریخ 12شهریور سال96 سایت تیچ وب رو راه اندازی کردیم با هدف گسترش اطلاعات نرم افزاری و زبان های برنامه نویسی . امیدوارم با حمایت شما دوستان بتونیم به این هدف بزرگ دست پیدا کنیم.

نوشته های مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

بستن