مرجع امکانات CSS

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

امیدواریم این بخش کاربردی ، مورد استفاده شما قرار گیرید :

مرجع نام و شماره رنگ ها در CSS

در این بخش از آموزش css به توضیح ویژگی مرجع نام و شماره رنگ ها در CSS میپردازیم.

  Colors Value 

رنگ ها در css  با روش های زیر مقدار دهی میشوند.

1. Hexadecimal colors
2. RGB colors
3. RGBA colors
4. HSL colors
5. HSLA colors
6. color names

Color Name

.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://www.pars-soft.ir">گروه نرم افزار ی پارس سافت</a>
<a href="http://www.pars-soft.ir" 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  میتوانند مورد استفاده قرار بگیرند.

1. font properties
2. color properties
3. background properties
4. margin properties
5. padding properties
6. border properties
7. text-decoration
8. vertical-align (only if float is 'none')
9. text-transform
10. line-height
11. float
12. clear

 :first-line

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

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

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

1. font properties
2. color properties
3. background properties
4. word-spacing
5. letter-spacing
6. text-decoration
7. vertical-align
8. text-transform
9. line-height
10. clear

:first-child

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

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

:before

p:before
{ 
content:"http://pars-soft.ir ";
}

به اول تمام تگ های <p> ، لینک  http://pars-soft.ir  را اضافه میکند.

:after

p:after
{ 
content:"http://pars-soft.ir";
}

بعد تمام تگ های <p> ، لینک  http://pars-soft.ir  را اضافه میکند. 

: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 مورد نظر را به آنها اعمال میکند