آموزش Css و برنامه نوسی وب

انجمن برنامه نویسی آموزش CSS

شبه عنصر (Pseudo-Elements) در Css

شبه عنصر (Pseudo-Elements) در Css

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

یک شبه عنصر (Pseudo-Elements) در CSS برای نامیدن بخش مشخصی از یک عنصر استفاده می‌شود. برای مثال در طراحی سایت از یک شبه عنصر برای استایل اولین کلمه و یا خط یک عنصر استفاده می‌شود. محتوا را قبل و یا بعد از محتوای عنصر اضافه کنید.

ترکیب (Syntax)

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

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

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

این شبه عنصر برای اضافه کردن یک سبک مشخص به اولین خط متن استفاده می‌شود. توجه داشته باشید که این ویژگی فقط بر روی عناصر block-level اعمال می‌شود. در مثال زیر، اولین خط متن در تمام عناصر <p> را قالب بندی می‌کند.

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

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

• ویژگی های فونت (font)
• ویژگی های رنگ (color)
• ویژگی های پس زمینه (background)
• ویژگی word-spacing
• خاصیت letter-spacing
• ویژگی text-decoration
• ویژگی vertical-align
• ویژگی text-transform
• ویژگی line-height
• ویژگی clear

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

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

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

Print

نظرات بسته شده است.

x
دی ان ان