با سلام دوستان عزیز ، امیدوارم که حال شماخوب باشه و شاد باشیددرمورد سیتنکس pseudo-elements امروز مطلبی را خواستم اموزش بدم .
سیتنکس pseudo-elements
selector:pseudo-element {property:value;}
در کلاس های CSS را می توان از pseudo-elements نیز استفاده کرد:
selector.class:pseudo-element {property:value;}
: first-line Pseudo-element
از first-line” pseudo-element برای اضافه کردن استایل ویژه به اولین خط متن استفاده می شود.
در مثال زیر، مرورگر خط اول متن را در عنصر p، مطابق با استایل “خط اول pseudo-element ” آرایش می کند.
نکته مهم: “خط اول pseudo-element ” را فقط می توان با عنصرهای block-level
استفاده کرد.
نکته مهم : پراپرتی های زیر به خط اول pseudo-element اعمال می شوند:
font properties
color properties
background properties
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
clear
first-letter Pseudo-element:
از “حرف اول pseudo-element برای اضافه کردن استایلی ویژه به اولین حرف متن استفاده می شود.
نمونه یک
?
۱
۲
۳
۴
p:first-letter {
color: red;
font-size: xx-large;
}
نکته مهم: حرف اول pseudo-element را فقط می توان با عنصرهای block-level
استفاده کرد.
نکته مهم پراپرتی های زیر به حرف اول pseudo-element ” اعمال می شوند:
font properties
color properties
background properties
margin properties
padding properties
border properties
text-decoration
vertical-align (only if “float” is “none”)
text-transform
line-height
float
clear
Pseudo-elements و کلاس های CSS
Pseudo-elements را می توان با کلاس های CSS ترکیب کرد:
نمونه دو
?
۱
۲
۳
p.article:first-letter {
color: #ff0000;
}
مثلا بالا حرف اول همه پاراگراف ها با class=article را قرمز نشان می دهد.
Pseudo-elements چندگانه
می توان چندین pseudo-elements را نیز با هم ترکیب کرد.
در مثال زیر، حرف اول پاراگراف قرمز خواهد شد، با سایز فونت xx-large. بقیه خط اول، آبی و بصورت حروف کوچک خواهد بود. بقیه پاراگراف دارای اندازه فونت و رنگ پیش فرض خواهد بود.
نمونه سه
?
۱
۲
۳
۴
۵
۶
۷
۸
p:first-letter{
color: #ff0000;
font-size: xx-large;
}
p:first-line{
color: #0000ff;
font-variant: small-caps;
}
:before Pseudo-element
before pseudo-element را می توان برای insert کردن مقدار یک content قبل از content یک عنصر استفاده کرد.
مثلا زیر، تصویری را قبل از هر عنصردرج کرد.
نمونه چهار
?
۱
۲
۳
h1:before{
content: url(smiley.gif);
}
Pseudo-elements
ستون CSS نشان می دهد پراپرتی در کدام ورژن CSS تعریف می شود (CSS1 یا CSS2).
نام Pseudo
شرح
CSS
After
بعد از عنصر ، Contrnt اضافه می کند.
۲
Befor
قبل از عنصر ، Contrnt اضافه می کند.
۲
First-Letter
یک استایل به اولین کاراکتر متن اضافه می کند.
۱
First-Line
یک استایل به اولین خط متن اضافه می کند.
