آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

آموزش Pseudo-elements در CSS

دوره های مرتبط با این مقاله

سیتنکس pseudo-elements:

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

در کلاس های CSS را می توان از pseudo-elements نیز استفاده کرد:

                
                    selector.class:pseudo-element {property:value;}‎ 
                

: first-line Pseudo-element

از first-line" pseudo-element برای اضافه کردن استایل ویژه به اولین خط متن استفاده می شود.

first-letter Pseudo-element:

از "حرف اول pseudo-element برای اضافه کردن استایلی ویژه به اولین حرف متن استفاده می شود.

در مثال زیر، مرورگر خط اول متن را در عنصر p، مطابق با استایل "خط اول pseudo-element " آرایش می کند.

نمونه یک

        p:first-letter {
            color: red;
            font-size: xx-large;
        }
امتحان کنید
نکته:

خط اول 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
                

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 اضافه می کند.
2
Before
قبل از عنصر ، Contrnt اضافه می کند.
2
First-Letter
یک استایل به اولین کاراکتر متن اضافه می کند.
1
First-Line
یک استایل به اولین خط متن اضافه می کند.
1
  • 3563
  •    2082
  • تاریخ ارسال :   1394/07/27

دانلود PDF دانلود سورس کد دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .