آموزش شبه عناصر Pseudo-elements در css

بازدید: 398 بازدید

شبه عناصر Pseudo-elements به شما کمک می کنند یک عنصر را ایجاد کنید.

یک عنصر موجود را با افکت ها و جلوه های خاص، زیباتر و خاص تر کنید.

در آموزش امروز قصد داریم کار با شبه عناصر Pseudo-elements در css را با هم مرور کنیم.

در ادامه آموزش همراه ما باشید.

شبه عناصر Pseudo-elements به شما کمک می کنند یک عنصر را ایجاد کنید.

یک عنصر موجود را با افکت ها و جلوه های خاص، زیباتر و خاص تر کنید.

در آموزش امروز قصد داریم کار با شبه عناصر Pseudo-elements در css را با هم مرور کنیم.

 

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

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

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

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

برای مثال کارهای زیر را می توانید انجام دهید:

1- استایل دهی به اولین حرف یک کلمه، یا اولین خط یک متن

2- اضافه کردن کردن محتوای یک عنصر ، قبل یا بعد از آن

 

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

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

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

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

[php]
selector::pseudo-element {
property:value;
}
[/php]

 به نماد : : توجه کنید

در ss3، علامت” : : “جایگزین علامت” : “شد.

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

در css1 و css2 از نماد ” : ” برای هم شبه کلاس ها و هم شبه عناصر استفاده می شد.

برای سازگاری با نسخه های قدیمیتر، علامت ” : ” برای شبه عناصر در css1 و css2 قابل قبول است.

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

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

مثال زیر، اولین خط از تمام عناصر<p> موجود در صفحه را با مقادیر گفته شده در کد،  استایل دهی می کند:

مثال:

[php]
p::first-line {
color: #ff0000;
font-variant: small-caps;
}
[/php]

نتیجه را مشاهده کنید.

یک نکته خیلی مهم

شبه عناصر اولین خط فقط برای عناصری که دارای خاصیت block هستند قابل استفاده است.

شما میتوانید ویژگی های زیر را برای شبه عناصر اولین خط مقداردهی کنید:

  • font properties                     تنظیمات فونت
  • color properties                    تنظیمات رنگ
  • background properties          تنظیمات پس زمینه
  • word-spacing                       تنظیمات فواصل کلمات
  • letter-spacing                       تنظیمات فواصل حروف
  • text-decoration                     تنظیمات تزیین متن
  • vertical-align                        ترازبندی عمودی
  • text-transform                      تبدیل متن
  • line-height                            ارتفاع خظ
  • clear                                     پاکسازی

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

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

مثال زیر، اولین حرف از یک متن را در داخل عنصر <p> با مقادیر گفته شده، استایل دهی می کند.

مثال:

[php]
p::first-letter {
color: #ff0000;
font-size: xx-large;
}
[/php]
نتیجه را مشاهده کنید.

یک نکته خیلی مهم

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

شما میتوانید ویژگی های زیر را برای شبه عناصر اولین اولین حرف مقداردهی کنید:

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

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

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

به مثال زیر توجه کنید:

[php]
p.intro::first-letter {
color: #ff0000;
font-size:200%;
}
[/php]
نتیجه را مشاهده کنید.

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

شبه عناصر چندگانه

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

در مثال زیر، اولین حرف از پاراگراف به رنگ قرمز خواهد بود. و در اندازه دلخواه سایز متن را بزرگ نمایش خواهد داد.

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

باقی حروف موجود در پاراگراف در رنگ و سایز پیشفرض باقی خواهند ماند.

مثال:

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

p::first-line {
color: #0000ff;
font-variant: small-caps;
}
[/php]
نتیجه را ببینید.

:: شبه عنصر ماقبل

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

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

[php]
h1::before {
content: url(smiley.gif);
}
[/php]

نتیجه را مشاهده کنید.

شبه عنصر مابعد

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

کد زیر باعث می شود یک تصویر بعد از محتوای هر عنصر <h1> در عناصر وارد شود.

[php]
h1::after {
content: url(smiley.gif);
}
[/php]
نتیجه را مشاهده کنید.

شبه عنصر انتخاب

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

خصوصیات css که می توان در شبه عنصر انتخاب تنظیم کرد اینها هستند:

  • color              رنگ
  • background    پس زمینه
  • cursor            مکان نما
  • outline           خط خارجی

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

[php]
::selection {
color: red;
background: yellow;
}
[/php]

نتیجه را مشاهده کنید.

 

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

دسته بندی آموزش css
اشتراک گذاری
مقالات مرتبط

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

سبد خرید

هیچ محصولی در سبد خرید نیست.