اسفند ۱۴, ۱۳۹۷ Mostafa بدون دیدگاه

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

توجه : درخواست افزونه ،قالب، اسکریپت و نرم افزار و ... و سوالات و مشکلات خود را در انجمن ارسال نمایید

واحد های شمارش در css  شامل واحدهای زیر میباشند.

  1. %   >>  درصد
  2. in >> اینچ
  3.  cm  >> سانتیمتر
  4. mm  >> میلیمتر
  5. em  
  6. ex 
  7. pt >>  برابر با ۱/۷۲ اینچ
  8. pc >> برابر با ۱۲ point
  9. px  >> پیکسل

مرجع انتخابگرها در CSS

.class

    .intro
    {
    background-color:yellow;
    }


این مثال تمامی عناصری که class=”intro”  هستند را  انتخاب و style مورد نظر را به آنها اعمال میکند.

#id

 

    #name
    {
    background-color:yellow;
    }

این مثال تمامی عناصری که “id=”name هستند را  انتخاب و style مورد نظر را به آنها اعمال میکند.

*

 

    *
    {
    background-color:yellow;
    }

این مثال تمامی عناصر را  انتخاب و style مورد نظر را به آنها اعمال میکند.

element

    p
    {
    background-color:yellow;
    }

 

این مثال تمامی تگ های <p> را  انتخاب و style مورد نظر را به آنها اعمال میکند.

element,element

 

    h1,p
    {
    background-color:yellow;
    }

این مثال تمامی تگ های <p> و h1  را  انتخاب و style مورد نظر را به آنها اعمال میکند.

element element

    div p
    {
    background-color:yellow;
    }

 

تمام تگ های <p> که در داخل تگ <div> قرار دارند را  انتخاب و style مورد نظر را به آنها اعمال میکند.

element>element

    div>p
    {
    background-color:yellow;
    }

تمام تگ های <p> که  والد (parent) آنها تگ <div> میباشد را  انتخاب و style مورد نظر را به آنها اعمال میکند.

element+element

 

    div+p
    {
    background-color:yellow;
    }

تمام تگ های <p> که بلافاصله بعد از  تگ <div> قرار دارند را  انتخاب و style مورد نظر را به آنها اعمال میکند.

 

[attribute]

 

    a[target]
    {
    background-color:yellow;
    }

تمام تگ های<a> که ویژگی target  را نیز دارند را  انتخاب و style مورد نظر را به آنها اعمال میکند.

    <a href="http://ctboard.com">ترفندهای رایانه</a>
    <a href="http://ctboard.com" target="_blank">ترفندهای رایانه</a>

 [attribute=value]

 

    a[target=_blank]
    {
    background-color:yellow;
    }

تمام تگ های<a> که ویژگی target=_blank  را دارند، انتخاب و style مورد نظر را به آنها اعمال میکند.

[attribute~=value]

 

    [title~=pars]
    {
    background-color:yellow;
    }

تمام تگ های<a> که ویژگی “title=pars”  را دارند، انتخاب و style مورد نظر را به آنها اعمال میکند.

[attribute|=value]

    [lang|=fa]
    {
    background-color:yellow;
    }

تمامی عناصری  که  ویژگی “lang”  آنها با “fa” آغاز میشود، انتخاب و style مورد نظر را به آنها اعمال میکند.

:link

    a:link
    {
    background-color:yellow;
    }

تمام تگ های<a> که روی آنها کلیک نشده است را، انتخاب و style مورد نظر را به آنها اعمال میکند.

:visited

 

    a:visited
    {
    background-color:yellow;
    }

تمام تگ های<a> که روی آنها کلیک شده است را، انتخاب و style مورد نظر را به آنها اعمال میکند.

:hover

 

    a:hover
    {
    background-color:yellow;
    }

تمام تگ های<a> را زمانی که با ماوس روی آنها میروید، انتخاب و style مورد نظر را به آنها اعمال میکند.

:focus

 

    input:focus
    {
    background-color:yellow;
    }

تمام تگ های input  را زمانی که انتخاب میکنید، style مورد نظر را به آنها اعمال میکند.

 

:first-letter

    p:first-letter
    {
    font-size:200%;
    color:#8A2BE2;
    }

اولین کلمه از تمام تگ های <p>  را  انتخاب و style مورد نظر را به آنها اعمال میکند.

ویژگی هایی که در first-letter  میتوانند مورد استفاده قرار بگیرند.

    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

 

 :first-line

    p:first-line
    {
    background-color:yellow;
    }

اولین خط از تمام تگ های <p>  را  انتخاب و style مورد نظر را به آنها اعمال میکند.

ویژگی هایی که در first-line  میتوانند مورد استفاده قرار بگیرند.

    font properties
    color properties
    background properties
    word-spacing
    letter-spacing
    text-decoration
    vertical-align
    text-transform
    line-height
    clear

 

:first-child

 

    p:first-child
    {
    background-color:yellow;
    }

تمام تگ های <p> که اولین فرزند (child) از پدر و مادر (parent) خود است را  انتخاب و style مورد نظر را به آنها اعمال میکند.

:before

 

    p:before
    {
    content:"http://ctboard.com ";
    }

به اول تمام تگ های <p> ، لینک  http://ctboard.com  را اضافه میکند.

:after

 

    p:after
    {
    content:"http://ctboard.com";
    }

بعد تمام تگ های <p> ، لینک  http://ctboard.com  را اضافه میکند.

:lang

    p:lang(it)
    {
    background:yellow;
    }

تمام تگ های <p> که با ویژگی  “lang=it” شروع میشوند را  انتخاب و style مورد نظر را به آنها اعمال میکند.

element1~element2

    p~ul
    {
    background:#ff0000;
    }

تمام تگ های <ul> که والد مشترکی با  تگ  <p> دارند را  انتخاب و style مورد نظر را به آنها اعمال میکند.

 [attribute^=value]

    div[class^="test"]
    {
    background:#ffff00;
    }

تمام تگ های div که با ویژگی  “class=test” شروع میشوند را  انتخاب و style مورد نظر را به آنها اعمال میکند.

[attribute$=value]

    div[class$="test"]
    {
    background:#ffff00;
    }

 

تمام تگ های div که با ویژگی  “class=test” تمام میشوند را  انتخاب و style مورد نظر را به آنها اعمال میکند.

[attribute*=value]

    div[class*="test"]
    {
    background:#ffff00;
    }

تمام تگ های div که  ویژگی  “class=test” را شامل میشوند را  انتخاب و style مورد نظر را به آنها اعمال میکند.

:first-of-type

 

    p:first-of-type
    {
    background:#ff0000;
    }

اولین  تگ <p>  را  انتخاب و style مورد نظر را به آنها اعمال میکند.

:last-of-type

    p:last-of-type
    {
    background:#ff0000;
    }

آخرین تگ <p>  را  انتخاب و style مورد نظر را به آنها اعمال میکند.

 :only-of-type

   p:only-of-type
    {
    background:#ff0000;
    }

هر تگ <p>  که تک فرزند (only child) والد (parent) خود باشد را  انتخاب و style مورد نظر را به آنها اعمال میکند.

 :nth-child()

 

    p:nth-child(2)
    {
    background:#ff0000;
    }

هر تگ <p>  که دومین فرزند (only child) والد (parent) خود باشد را  انتخاب و style مورد نظر را به آنها اعمال میکند.

:nth-last-child()

 

    p:nth-last-child(2)
    {
    background:#ff0000;
    }

هر تگ <p>  که دومین فرزند (only child) والد (parent) خود از آخر باشد را  انتخاب و style مورد نظر را به آنها اعمال میکند.

:nth-of-type()

    p:nth-of-type(2)
    {
    background:#ff0000;
    }

هر تگ <p>  که دومین تگ <p> از والد (parent) خود  باشد را  انتخاب و style مورد نظر را به آنها اعمال میکند.

:nth-last-of-type()

    p:nth-last-of-type(2)
    {
    background:#ff0000;
    }

هر تگ <p>  که دومین تگ <p> از والد (parent) خود از آخر باشد را  انتخاب و style مورد نظر را به آنها اعمال میکند.

 :last-child

 

    p:last-child
    {
    background:#ff0000;
    }

برای هر تگ <p>  که آخرین فرزند (child) از والد (parent) خود  باشد را  انتخاب و style مورد نظر را به آنها اعمال میکند.

:root

    :root
    {
    background:#ff0000;
    }

 

تگ HTML  ، را  انتخاب و style مورد نظر را به آنها اعمال میکند.

:empty

 

    p:empty
    {
    background:#ff0000;
    }

هر تگ <p>  که محتوایی نداشته باشد را  انتخاب و style مورد نظر را به آنها اعمال میکند.

 :enabled

 

    input[type="text"]:enabled
    {
    background:#ffff00;
    }

تمام تگ های <input>  که  “type=”text باشند و فعال باشند را  انتخاب و style مورد نظر را به آنها اعمال میکند.

:disabled

 

    input[type="text"]:disabled
    {
    background:#dddddd;
    }

تمام تگ های <input>  که  “type=”text باشند وغیر فعال باشند را  انتخاب و style مورد نظر را به آنها اعمال میکند.

:checked

    input:checked
    {
    background:#ff0000;
    }

تمام تگ های <input>  که  “type=”checked باشند را  انتخاب و style مورد نظر را به آنها اعمال میکند.

:not

    :not(p)
    {
    background:#ff0000;
    }

تمامی تگ ها جز  تگ <p>  را  انتخاب و style مورد نظر را به آنها اعمال میکند.

::selection

 

    ::selection
    {
    color:#ff0000;
    }
    ::-moz-selection
    {
    color:#ff0000;
    }

متن هایی که با دوبار کلیک کردن بر آنها انتخاب میشوند ، style مورد نظر را به آنها اعمال میکند

 


برچسب ها
نظرات

توجه : لطفاً فقط نظرات خود را از این طریق ارسال نمایید و سوالات و مشکلات خود را در انجمن سایت مطرح نمایید.