CSS ﯽﮔﮋﯾﻭ

فهرست مطالب

Specificity ؟ﺖﺴﯿﭼ

ﺪﻨﻨﮐ ﯽﻣ ﻩﺭﺎﺷﺍ ﻥﺎﺴﮑﯾ ﻪﺑ ﻪﮐ ﺪﺷﺎﺑ ﻪﺘﺷﺍﺩ ﺩﻮﺟﻭ CSS ﻥﻮﻧﺎﻗ ﺪﻨﭼ ﺎﯾ ﻭﺩ ﺮﮔﺍ

ﺖﺳﺍ ﻪﯿﻧﺎﯿﺑ ﮏﺒﺳ ﻩﺪﻨﻨﮐ ﻦﯿﯿﻌﺗ ﻪﮐ ﺪﯾﺮﯿﮕﺑ ﺮﻈﻧ ﺭﺩ ﯼﺍ ﻪﺒﺗﺭ/ﺯﺎﯿﺘﻣﺍ ﻥﺍﻮﻨﻋ ﻪﺑ ﺍﺭ ﯽﮔﮋﯾﻭ

:ﺪﯿﻨﮐ ﻪﺟﻮﺗ ﺮﯾﺯ ﯼﺎﻫ ﻪﻧﻮﻤﻧ ﻪﺑ

1 ﻝﺎﺜﻣ

ﻢﯾﺍ ﻩﺩﺮﮐ ﺺﺨﺸﻣ ﺍﺭ ﺰﻣﺮﻗ ﮓﻧﺭ ﻭ ﻢﯾﺍ ﻩﺩﺮﮐ ﻩﺩﺎﻔﺘﺳﺍ ﺮﮕﺑﺎﺨﺘﻧﺍ ﻥﺍﻮﻨﻋ ﻪﺑ "p" ﺮﺼﻨﻋ ﺯﺍ ﻝﺎﺜ

 <html>
<head>
  <style>
    p {color: red;} 
  
  </style>
</head>
<body>
<p>Hello World!</p>
  
</body>
  </html>

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<head>
<style>
p {color: red;} 
</style>
</head>
<body>

<p>Hello World!</p>

</body>
</html>

:ﺪﯿﻨﮐ ﻩﺎﮕﻧ 2 ﻝﺎﺜﻣ ﻪﺑ ﻝﺎﺣ

2 ﻝﺎﺜﻣ

ﻭ ("test" ﻡﺎﻧ ﻪﺑ) ﺱﻼﮐ ﺮﮕﺑﺎﺨﺘﻧﺍ ﮏﯾ ﺎﻣ ،ﻝﺎﺜﻣ ﻦﯾﺍ ﺭﺩ

 <html>
<head>
  <style>
    .test {color: green;}
  
    p {color: red;} 
  </style>
</head>
<body>
  
<p class="test">Hello World!</p>
</body>
</html>

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<head>
<style>
.test {color: green;} 
p {color: red;} 
</style>
</head>
<body>

<p class="test">Hello World!</p>

</body>
</html>

:ﺪﯿﻨﮐ ﻩﺎﮕﻧ 3 ﻝﺎﺜﻣ ﻪﺑ ﻝﺎﺣ

3 ﻝﺎﺜﻣ

ﺩﻮﺑ ﺪﻫﺍﻮﺧ ﻥﻮﻨﮐﺍ ﻦﺘﻣ .ﻢﯾﺍ ﻩﺩﺮﮐ ﻪﻓﺎﺿﺍ ﺍﺭ (ﻮﻣﺩ ﻡﺎﻧ ﻪﺑ) id ﺮﮕﺑﺎﺨﺘﻧﺍ ﺎﻣ ،ﻝﺎﺜﻣ ﻦﯾﺍ ﺭ

 <html>
<head>
  <style>
    #demo {color: blue;}
    
  .test {color: green;} 
    p {color: red;} 
  
  </style>
</head>
<body>
<p id="demo" class="test">Hello 
  World!</p>
</body>
</html>

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<head>
<style>
#demo {color: blue;}
.test {color: green;} 
p {color: red;} 
</style>
</head>
<body>

<p id="demo" class="test">Hello World!</p>

</body>
</html>

:ﺪﯿﻨﮐ ﻩﺎﮕﻧ 4 ﻝﺎﺜﻣ ﻪﺑ ﻝﺎﺣ

4 ﻝﺎﺜﻣ

ﺍﺭ .ﻢﯾﺍ ﻩﺩﺮﮐ ﻪﻓﺎﺿﺍ "p" ﺮﺼﻨﻋ ﯼﺍﺮﺑ ﯽﻄﺧ ﻥﻭﺭﺩ ﻞﯾﺎﺘﺳﺍ ﮏﯾ ،ﻝﺎﺜﻣ ﻦﯾﺍ ﺭﺩ

 <html>
<head>
  <style>
    #demo {color: blue;}
    
  .test {color: green;} 
    p {color: red;} 
  
  </style>
</head>
<body>
<p id="demo" class="test" 
  style="color: pink;">Hello World!</p>
</body>
</html>

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<head>
<style>
#demo {color: blue;}
.test {color: green;} 
p {color: red;} 
</style>
</head>
<body>

<p id="demo" class="test" style="color: pink;">Hello World!</p>

</body>
</html>

ﺹﺎﺧ ﺐﺗﺍﺮﻣ ﻪﻠﺴﻠﺳ

.ﺩﺭﺍﺩ ﯽﮔﮋﯾﻭ ﺐﺗﺍﺮﻣ ﻪﻠﺴﻠﺳ ﺭﺩ ﺍﺭ ﺩﻮﺧ ﻩﺎﮕﯾﺎﺟ CSS ﺮﮕﺑﺎﺨﺘﻧﺍ ﺮﻫ

:ﺪﻨﮐ ﯽﻣ ﻒﯾﺮﻌﺗ ﺍﺭ ﺮﮕﺑﺎﺨﺘﻧﺍ ﯽﮔﮋﯾﻭ ﺢﻄﺳ ﻪﮐ ﺩﺭﺍﺩ ﺩﻮﺟﻭ ﻪﺘﺳﺩ ﺭﺎﻬﭼ

1. ﯽﻄﺧ ﻥﻭﺭﺩ ﯼﺎﻫ ﮏﺒﺳ - ﻝﺎﺜﻣ:

<h1 style="color: pink;">

2. ﻪﺳﺎﻨﺷﺎﻫ - ﻝﺎﺜﻣ:

#navbar

3. ﺱﻼﮐﺱﻼﮐ ﻪﺒﺷ ،ﺎﻫﯽﮔﮋﯾﻭ ﯼﺎﻫﺮﮕﺑﺎﺨﺘﻧﺍ ،ﺎﻫ - ﻝﺎﺜﻣ:

.test, :hover, [href]

4. ﺮﺻﺎﻨﻋ ﻪﺒﺷ ﻭ ﺮﺻﺎﻨﻋ - ﻝﺎﺜﻣ:

h1, ::before

؟ﻢﯿﻨﮐ ﻪﺒﺳﺎﺤﻣ ﺍﺭ ﯽﮔﮋﯾﻭ ﻪﻧﻮﮕﭼ

!ﺪﯾﺭﺎﭙﺴﺑ ﺮﻃﺎﺧ ﻪﺑ ﺍﺭ ﯽﮔﮋﯾﻭ ﻪﺒﺳﺎﺤﻣ ﻩﻮﺤﻧ

ﺪﯿﻨﮐ ﻪﻓﺎﺿﺍ 10 ﻡﺍﺪﮐ ﺮﻫ ﯼﺍﺮﺑ ،ﺪﯿﻨﮐ ﻪﻓﺎﺿﺍ ID 100 ﺮﻫ ﯼﺍﺮﺑ ،ﺪﯿﻨﮐ ﻉﻭﺮﺷ 0 ﺯﺍ

ﻪﺟﻮﺗ: ﯽﻣ ﺖﻓﺎﯾﺭﺩ ﺍﺭ 1000 ﯽﮔﮋﯾﻭ ﺭﺍﺪﻘﻣ ﯽﻄﺧ ﻥﻭﺭﺩ ﮏﺒﺳﯽﻣ ﻭ ﺪﻨﮐ

2 ﻪﺘﮑﻧ: ﺩﺭﺍﺩ ﺩﻮﺟﻭ ﯽﮑﯾ

:ﺪﻫﺩ ﯽﻣ ﻥﺎﺸﻧ ﺍﺭ ﯽﺻﺎﺼﺘﺧﺍ ﺮﯾﺩﺎﻘﻣ ﻪﺒﺳﺎﺤﻣ ﻩﻮﺤﻧ ﺯﺍ ﻪﻧﻮﻤﻧ ﺪﻨﭼ ﺮﯾﺯ ﻝﻭﺪﺟ

Selector	Specificity Value	Calculation
p	1	1
p.test	11	1 + 10
p#demo	101	1 + 100
<p style="color: pink;">	1000	1000
#demo	100	100
.test	10	10
p.test1.test2	21	1 + 10 + 10
#navbar p#demo	201	100 + 1 + 100
*	0	0 (the universal selector is ignored)

ﺩﻮﺷ ﯽﻣ ﻝﺎﻤﻋﺍ ﻭ ﺪﺷ ﺪﻫﺍﻮﺧ ﻩﺪﻧﺮﺑ ﯽﮔﮋﯾﻭ ﺭﺍﺪﻘﻣ ﻦﯾﺮﺗﻻﺎﺑ ﺎﺑ ﻩﺪﻨﻨﮐ ﺏﺎﺨﺘﻧﺍ!

:ﺪﯾﺮﯿﮕﺑ ﺮﻈﻧ ﺭﺩ ﺍﺭ ﺪﮐ ﻪﻌﻄﻗ ﻪﺳ ﻦﯾﺍ

ﻝﺎﺜﻣ

A: h1
B: h1#content
C: <h1 id="content" style="color: 
  pink;">Heading</h1>

ﺖﺳﺍ B ﯽﮔﮋﯾﻭ
(ﺮﺼﻨﻋ ﮏﯾ ﺮﮕﺑﺎﺨﺘﻧﺍ) ﺖﺳﺍ A 1 ﯽﮔﮋﯾﻭ

ﮏﺒﺳ ﻦﯾﺍ ،ﺖﺳﺍ (1000) ﯽﮔﮋﯾﻭ ﺭﺍﺪﻘﻣ ﻦﯾﺮﺗﻻﺎﺑ ﯼﺍﺭﺍﺩ (C) ﻡﻮﺳ ﻥﻮﻧﺎﻗ ﻪﮐ ﯽﯾﺎﺠﻧﺁ ﺯﺍ

ﺮﺗﺹﺎﺧ ﻦﯿﻧﺍﻮﻗ ﺯﺍ ﯽﯾﺎﻫﻪﻧﻮﻤﻧ

ﺖﺳﺍ ﻩﺪﻧﺮﺑ ﻥﻮﻧﺎﻗ ﻦﯾﺮﺧﺁ :ﺮﺑﺍﺮﺑ ﯽﮔﮋﯾﻭ -

ﻝﺎﺜﻣ

h1 {background-color: yellow;}
h1 {background-color: red;}

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<head>
<style>
h1 {background-color: yellow;}
h1 {background-color: red;}
</style>
</head>
<body>

<h1>This is heading 1</h1>

</body>
</html>

ﯼﺎﻫﺮﮕﺑﺎﺨﺘﻧﺍ ID ﺪﻧﺭﺍﺩ ﯽﮔﮋﯾﻭ ﯼﺎﻫﺮﮕﺑﺎﺨﺘﻧﺍ ﻪﺑ ﺖﺒﺴﻧ ﯼﺮﺗﻻﺎﺑ ﯽﮔﮋﯾﻭ

ﻝﺎﺜﻣ

div#a {background-color: green;}
#a {background-color: yellow;}
div[id=a] {background-color: blue;}

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<head>
<style>
div#a {background-color: green;}
#a {background-color: yellow;}
div[id=a] {background-color: blue;}
</style>
</head>
<body>

<div id="a">This is a div</div>

</body>
</html>

.ﺪﺷ ﺪﻫﺍﻮﺧ ﻝﺎﻤﻋﺍ ﻦﯾﺍﺮﺑﺎﻨﺑ ﻭ ﺖﺳﺍ ﺮﺗ ﺹﺎﺧ ﺮﮕﯾﺩ ﻥﻮﻧﺎﻗ ﻭﺩ ﺯﺍ ﻝﻭﺍ ﻥﻮﻧﺎﻗ

ﺏﺎﺨﺘﻧﺍﺹﺎﺧ ﺮﺼﻨﻋ ﮏﯾ ﺯﺍ ﯽﻨﺘﻣ ﻥﺎﮔﺪﻨﻨﮐﺪﻨﺘﺴﻫ ﺮﺗ

ﻝﺎﺜﻣ

From external CSS file:
#content h1 {background-color: red;}

In HTML file:
<style>
#content h1 {background-color: 
yellow;}
</style>

.ﺪﺷ ﺪﻫﺍﻮﺧ ﻝﺎﻤﻋﺍ ﺮﯿﺧﺍ ﻥﻮﻧﺎﻗ

ﺪﻫﺩ ﯽﻣ ﺖﺴﮑﺷ ﺍﺭ ﺮﺼﻨﻋ ﯼﺎﻫﺮﮕﺑﺎﺨﺘﻧﺍ ﺯﺍ ﺩﺍﺪﻌﺗ ﺮﻫ ﺱﻼﮐ ﺮﮕﺑﺎﺨﺘﻧﺍ ﮏﯾ -

ﻝﺎﺜﻣ

 .intro {background-color: yellow;}
h1 {background-color: 
  red;}

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<head>
<style>
.intro {background-color: yellow;}
h1 {background-color: red;}
</style>
</head>
<body>

<h1 class="intro">This is a heading</h1>

</body>
</html>

ﺪﻨﺘﺴﻫ 0 ﯽﮔﮋﯾﻭ ﯼﺍﺭﺍﺩ ﯽﺛﺭﺍ ﺮﯾﺩﺎﻘﻣ ﻭ (*) ﯽﻧﺎﻬﺟ ﻩﺪﻨﻨﮐ ﺏﺎﺨﺘﻧﺍ -