CSS ﻥﺩﺮﮐ ﻪﻓﺎﺿﺍ ﻩﻮﺤﻧ

فهرست مطالب

نمایش فهرست مطالب

ﺪﻨﮐ ﯽﻣ ﯼﺪﻨﺑ ﺐﻟﺎﻗ ﻥﺁ ﺱﺎﺳﺍ ﺮﺑ ﺍﺭ HTML ﺪﻨﺳ ،ﺪﻧﺍﻮﺧ ﯽﻣ ﺍﺭ ﻪﻣﺎﻧ ﻩﻮﯿﺷ ﮏﯾ ﺮﮔﺭﻭﺮﻣ ﯽﺘﻗﻭ

CSS ﺝﺭﺩ ﯼﺍﺮﺑ ﻩﺍﺭ ﻪﺳ

:ﺩﺭﺍﺩ ﺩﻮﺟﻭ ﻪﻣﺎﻧ ﻩﻮﯿﺷ ﮏﯾ ﺝﺭﺩ ﯼﺍﺮﺑ ﻩﺍﺭ ﻪﺳ

CSS ﯽﺟﺭﺎﺧ
CSS ﯽﻠﺧﺍﺩ
CSS ﯽﻄﺧ ﻥﻭﺭﺩ

CSS ﯽﺟﺭﺎﺧ

ﮏﯾ ﺎﺑ

ﺪﺷﺎﺑ ﻞﺧﺍﺩ ﺭﺩ ﯽﺟﺭﺎﺧ ﻪﻣﺎﻧ ﻩﻮﯿﺷ ﻞﯾﺎﻓ ﻪﺑ ﻊﺟﺮﻣ ﮏﯾ ﻞﻣﺎﺷ ﺪﯾﺎﺑ HTML ﻪﺤﻔﺻ ﺮﻫ

ﻝﺎﺜﻣ

:ﺪﻧﻮﺷ ﯽﻣ ﻒﯾﺮﻌﺗ HTML ﻪﺤﻔﺻ <head> ﺶﺨﺑ ﻞﺧﺍﺩ ﺭﺩ ﺮﺼﻨﻋ ﺭﺩ ﯽﺟﺭﺎﺧ ﯼﺎﻫ ﻞﯾﺎﺘﺳﺍ

 <!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
  <p>This is a paragraph.</p>
</body>
</html>

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

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

.ﺩﻮﺷ ﻩﺮﯿﺧﺫ .css ﺪﻧﻮﺴﭘ ﺎﺑ ﺪﯾﺎﺑ ﻭ ﺖﺷﻮﻧ ﯽﻨﺘﻣ ﺮﮕﺸﯾﺍﺮﯾﻭ ﺮﻫ ﺭﺩ ﻥﺍﻮﺗ ﯽﻣ ﺍﺭ ﯽﺟﺭﺎﺧ ﻪﻣﺎﻧ

.ﺪﺷﺎﺑ HTML ﮓﺗ ﭻﯿﻫ ﯼﻭﺎﺣ ﺪﯾﺎﺒﻧ ﯽﺟﺭﺎﺧ css ﻞﯾﺎﻓ

:ﺖﺳﺍ "mystyle.css" ﻞﯾﺎﻓ ﺮﻫﺎﻇ ﻩﻮﺤﻧ ﺎﺠﻨﯾﺍ ﺭﺩ

"mystyle.css"

body {
  background-color: lightblue;
}
h1 {
  color: navy;
  margin-left: 20px;
}

ﻪﺟﻮﺗ: ﺪﯿﻨﮑﻧ ﻪﻓﺎﺿﺍ ﻪﻠﺻﺎﻓ ﺪﺣﺍﻭ ﻭ (20) ﯽﮔﮋﯾﻭ ﺭﺍﺪﻘﻣ ﻦﯿﺑ

:(ﻪﻠﺻﺎﻓ) ﺖﺳﺭﺩﺎﻧ

margin-left: 20 px;

:(ﻪﻠﺻﺎﻓ ﻥﻭﺪﺑ) ﺢﯿﺤﺻ

margin-left: 20px;

CSS ﯽﻠﺧﺍﺩ

.ﺩﻮﺷ ﻩﺩﺎﻔﺘﺳﺍ ﯽﻠﺧﺍﺩ ﻪﻣﺎﻧ ﻩﻮﯿﺷ ﮏﯾ ﺯﺍ ﺖﺳﺍ ﻦﮑﻤﻣ ،ﺪﺷﺎﺑ ﺩﺮﻓ ﻪﺑ ﺮﺼﺤﻨﻣ ﮏﺒﺳ ﮏﯾ ﯼﺍﺭﺍﺩ HT

ﺖﺳﺍ ﻩﺪﺷ ﻒﯾﺮﻌﺗ head ﻞﺧﺍﺩ ﺭﺩ <style> ﺮﺼﻨﻋ ﻞﺧﺍﺩ ﺭﺩ ﯽﻠﺧﺍﺩ ﻞﯾﺎﺘﺳﺍ

ﻝﺎﺜﻣ

:ﺪﻧﻮﺷﯽﻣ ﻒﯾﺮﻌﺗ HTML ﻪﺤﻔﺻ <head> ﺶﺨﺑ ﻞﺧﺍﺩ ﺭﺩ <style> ﺮﺼﻨﻋ ﺭﺩ ﯽﻠﺧﺍﺩ ﯼﺎﻫ

 <!DOCTYPE html>
<html>
<head>
<style>
body {
  
  background-color: linen;
}
h1 {
  color: maroon;
  
  margin-left: 40px;
} 
</style>
</head>
<body>
<h1>This is a 
  heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

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

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: linen;
}

h1 {
  color: maroon;
  margin-left: 40px;
} 
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

CSS ﯽﻄﺧ ﻥﻭﺭﺩ

.ﺩﻮﺷ ﻩﺩﺎﻔﺘﺳﺍ ﺮﺼﻨﻋ ﮏﯾ ﯼﺍﺮﺑ ﺩﺮﻓ ﻪﺑ ﺮﺼﺤﻨﻣ ﮏﺒﺳ ﮏﯾ ﻝﺎﻤﻋﺍ ﯼﺍﺮﺑ ﺖﺳﺍ ﻦﮑﻤﻣ ﯽﻄﺧ ﻥﻭﺭﺩ ﮏﺒﺳ

ﺍﺭ .ﺪﯿﻨﮐ ﻪﻓﺎﺿﺍ ﻪﻃﻮﺑﺮﻣ ﺮﺼﻨﻋ ﻪﺑ ﺍﺭ style ﯽﮔﮋﯾﻭ ،ﯽﻄﺧ ﻥﻭﺭﺩ ﯼﺎﻫ ﮏﺒﺳ ﺯﺍ ﻩﺩﺎﻔﺘﺳﺍ ﯼﺍﺮﺑ

ﻝﺎﺜﻣ

ﺪﻧﻮﺷ ﯽﻣ ﻒﯾﺮﻌﺗ ﻪﻃﻮﺑﺮﻣ "style" ﯽﮔﮋﯾﻭ ﺭﺩ ﯽﻄﺧ ﻥﻭﺭﺩ ﯼﺎﻫ ﮏﺒﺳ

 <!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">This 
  is a heading</h1>
<p style="color:red;">This is a paragraph.</p>

  </body>
</html>

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

<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>

</body>
</html>

ﻪﺘﮑﻧ: ﻥﺩﺮﮐ ﻁﻮﻠﺨﻣ ﺎﺑ) ﺪﻫﺩ ﯽﻣ ﺖﺳﺩ ﺯﺍ ﺍﺭ ﻪﻣﺎﻧ ﻩﻮﯿﺷ ﮏﯾ ﯼﺎﯾﺍﺰﻣ ﺯﺍ

ﻪﻧﺎﮔﺪﻨﭼ ﮏﺒﺳ ﯼﺎﻫ ﻪﮔﺮﺑ

،ﺪﺷﺎﺑ ﻩﺪﺷ ﻒﯾﺮﻌﺗ ﻒﻠﺘﺨﻣ ﯼﺎﻫ ﻪﻣﺎﻧ ﻩﻮﯿﺷ ﺭﺩ ﻥﺎﺴﮑﯾ (ﺮﺼﻨﻋ) ﺮﮕﺑﺎﺨﺘﻧﺍ ﯼﺍﺮﺑ ﺕﺎﯿﺻﻮﺼﺧ ﺯﺍ ﯽ

:ﺖﺳﺍ <h1> ﺮﺼﻨﻋ ﯼﺍﺮﺑ ﺮﯾﺯ ﮏﺒﺳ ﯼﺍﺭﺍﺩ ﯽﺟﺭﺎﺧ ﻪﮔﺮﺑ ﮏﺒﺳ ﮏﯾ ﻪﮐ ﺪﯿﻨﮐ ﺽ

h1
{
  color: navy;
}

:ﺪﺷﺎﺑ <h1> ﺮﺼﻨﻋ ﯼﺍﺮﺑ ﺮﯾﺯ ﮏﺒﺳ ﯼﺍﺭﺍﺩ ﺰﯿﻧ ﯽﻠﺧﺍﺩ ﻪﮔﺮﺑ ﮏﺒﺳ ﮏﯾ ﻪﮐ ﺪ

h1
{
  color: orange;   
}

ﻝﺎﺜﻣ

ﺩﻮﺑ ﺪﻨﻫﺍﻮﺧ <h1> ﺮﺻﺎﻨﻋ ،ﺩﻮﺷ ﻒﯾﺮﻌﺗ ﯽﺟﺭﺎﺧ ﻪﻣﺎﻧ ﻩﻮﯿﺷ ﻪﺑ ﺪﻧﻮﯿﭘ ﺯﺍ ﺲﭘ

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
  color: orange;
}
</style>
</head>

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

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
  color: orange;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>The style of this document is a combination of an external stylesheet, and internal style</p>

</body>
</html>

ﻝﺎﺜﻣ

ﺩﻮﺑ ﺪﻨﻫﺍﻮﺧ <h1> ﺮﺻﺎﻨﻋ ،ﺪﺷﺎﺑ ﻩﺪﺷ ﻒﯾﺮﻌﺗ ﯽﺟﺭﺎﺧ ﻪﻣﺎﻧ ﻩﻮﯿﺷ ﻪﺑ ﺪﻧﻮﯿﭘ ﺯﺍ ﻞﺒﻗ

<head>
<style>
h1 {
  color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

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

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>

<h1>This is a heading</h1>
<p>The style of this document is a combination of an external stylesheet, and internal style</p>

</body>
</html>

ﯼﺭﺎﺸﺑﺁ ﻢﻈﻧ

؟ﺪﺷ ﺪﻫﺍﻮﺧ ﻩﺩﺎﻔﺘﺳﺍ ﯽﮑﺒﺳ ﻪﭼ ،ﺪﺷﺎﺑ ﻩﺪﺷ ﺺﺨﺸﻣ HTML ﺮﺼﻨﻋ ﮏﯾ ﯼﺍﺮﺑ ﮏﺒﺳ ﮏﯾ ﺯﺍ ﺶﯿﺑ ﻪﮐ ﯽﻣ

ﺪﻧﻮﺷﯽﻣ ﻞﯾﺪﺒﺗ «ﯼﺯﺎﺠﻣ» ﺪﯾﺪﺟ ﮏﺒﺳ ﮏﯾ ﻪﺑ ﻪﺤﻔﺻ ﮏﯾ ﯼﺎﻫﻞﯾﺎﺘﺳﺍ ﻡﺎﻤﺗ

(HTML ﺮﺼﻨﻋ ﻞﺧﺍﺩ) ﯽﻄﺧ ﻥﻭﺭﺩ ﮏﺒﺳ
(ﺮﺳ ﺖﻤﺴﻗ ﺭﺩ) ﯽﻠﺧﺍﺩ ﻭ ﯽﺟﺭﺎﺧ ﯼﺎﻫ ﺖﯿﺷ ﻞﯾﺎﺘﺳﺍ
ﺮﮔﺭﻭﺮﻣ ﺽﺮﻓ ﺶﯿﭘ

ﺩﺮﯿﮔ ﯽﻣ ﻩﺪﯾﺩﺎﻧ ﺍﺭ ﻭ ﯽﺟﺭﺎﺧ ﻭ ﺩﺭﺍﺩ ﺍﺭ ﺖﯾﻮﻟﻭﺍ ﻦﯾﺮﺗﻻﺎﺑ ﯽﻄﺧ ﻥﻭﺭﺩ ﻞﯾﺎﺘﺳﺍ ،ﻦﯾﺍﺮﺑﺎﻨﺑ

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

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
body {background-color: linen;}
</style>
</head>
<body style="background-color: lavender">

<h1>Multiple Styles Will Cascade into One</h1>
<p>Here, the background color of the page is set with inline CSS, and also with an internal CSS, and also with an external CSS.</p>
<p>Try experimenting by removing styles to see how the cascading stylesheets work (try removing the inline CSS first, then the internal, then the external).</p>

</body>
</html>