CSS ﯼﺎﻫﺮﮕﺑﺎﺨﺘﻧﺍ

فهرست مطالب

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

ﺪﻨﮐ ﯽﻣ ﺏﺎﺨﺘﻧﺍ ﺎﻤﺷ ﯼﺍﺮﺑ ﺍﺭ HTML (ﯼﺎﻫ)ﺮﺼﻨﻋ CSS ﺮﮕﺑﺎﺨﺘﻧﺍ

CSS ﯼﺎﻫﺮﮕﺑﺎﺨﺘﻧﺍ

ﺪﻧﺮﯿﮔ ﯽﻣ ﺭﺍﺮﻗ ﻩﺩﺎﻔﺘﺳﺍ ﺩﺭﻮﻣ HTML ﺮﺻﺎﻨﻋ (ﺏﺎﺨﺘﻧﺍ ﺎﯾ) "ﻦﺘﻓﺎﯾ" ﯼﺍﺮﺑ CSS ﯼﺎﻫﺮﮕﺑﺎﺨﺘﻧﺍ

:ﻢﯿﻨﮐ ﻢﯿﺴﻘﺗ ﻪﺘﺳﺩ ﺞﻨﭘ ﻪﺑ ﺍﺭ CSS ﯼﺎﻫﺮﮕﺑﺎﺨﺘﻧﺍ ﻢﯿﻧﺍﻮﺗ ﯽﻣ

  • (ﺱﻼﮐ ،ﻪﺳﺎﻨﺷ ،ﻡﺎﻧ ﺱﺎﺳﺍ ﺮﺑ ﺮﺻﺎﻨﻋ ﺏﺎﺨﺘﻧﺍ) ﻩﺩﺎﺳ ﯼﺎﻫﺮﮕﺑﺎﺨﺘﻧﺍ

  • ﺪﯿﻨﮐ ﺏﺎﺨﺘﻧﺍ) ﯽﺒﯿﮐﺮﺗ ﯼﺎﻫﺮﮕﺑﺎﺨﺘﻧﺍ

  • (ﺹﺎﺧ ﺖﻟﺎﺣ ﮏﯾ ﺱﺎﺳﺍ ﺮﺑ ﺮﺻﺎﻨﻋ ﺏﺎﺨﺘﻧﺍ) ﺱﻼﮐ ﻪﺒﺷ ﯼﺎﻫﺮﮕﺑﺎﺨﺘﻧﺍ

  • ﺪﯿﻨﮐ ﺏﺎﺨﺘﻧﺍ) ﺮﺻﺎﻨﻋ ﻪﺒﺷ ﯼﺎﻫﺮﮕﺑﺎﺨﺘﻧﺍ

  • ﺱﺎﺳﺍ ﺮﺑ ﺮﺻﺎﻨﻋ ﺏﺎﺨﺘﻧﺍ) ﯽﮔﮋﯾﻭ ﯼﺎﻫﺮﮕﺑﺎﺨﺘﻧﺍ

.ﺪﻫﺩ ﯽﻣ ﺢﯿﺿﻮﺗ ﺍﺭ CSS ﯼﺎﻫﺮﮕﺑﺎﺨﺘﻧﺍ ﻦﯾﺮﺗ ﯽﯾﺍﺪﺘﺑﺍ ﻪﺤﻔﺻ ﻦﯾﺍ

CSS ﺮﺼﻨﻋ ﺮﮕﺑﺎﺨﺘﻧﺍ

.ﺪﻨﮐ ﯽﻣ ﺏﺎﺨﺘﻧﺍ ﺮﺼﻨﻋ ﻡﺎﻧ ﺱﺎﺳﺍ ﺮﺑ ﺍﺭ HTML ﺮﺻﺎﻨﻋ ﺮﺼﻨﻋ ﺮﮕﺑﺎﺨﺘﻧﺍ

ﻝﺎﺜﻣ

ﺩﻮﺑ ﺪﻨﻫﺍﻮﺧ ﻪﺤﻔﺻ ﺭﺩ <p> ﺮﺻﺎﻨﻋ ﻡﺎﻤﺗ ،ﺎﺠﻨﯾﺍ ﺭﺩ

p
{
  text-align: center;
  color: red;
}

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

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

<p>Every paragraph will be affected by the style.</p>
<p id="para1">Me too!</p>
<p>And me!</p>

</body>
</html>

CSS ﻪﺳﺎﻨﺷ ﺮﮕﺑﺎﺨﺘﻧﺍ

.ﺪﻨﮐ ﯽﻣ ﻩﺩﺎﻔﺘﺳﺍ ﺹﺎﺧ ﺮﺼﻨﻋ ﮏﯾ ﺏﺎﺨﺘﻧﺍ ﯼﺍﺮﺑ HTML ﺮﺼﻨﻋ ﮏﯾ id ﯽﮔﮋﯾﻭ ﺯﺍ id ﺮﮕﺑﺎﺨﺘﻧﺍ

ﺖﺳﺍ ﺩﺮﻓ ﻪﺑ ﺮﺼﺤﻨﻣ ﺰﯿﻧ ﻪﺳﺎﻨﺷ ﺮﮕﺑﺎﺨﺘﻧﺍ ﻦﯾﺍﺮﺑﺎﻨﺑ ،ﺖﺳﺍ ﺩﺮﻓ ﻪﺑ ﺮﺼﺤﻨﻣ ﻪﺤﻔﺻ ﮏﯾ ﺭﺩ ﺮﺼﻨﻋ

ﺪﯿﺴﯾﻮﻨﺑ ﻥﺁ ﻝﺎﺒﻧﺩ ﻪﺑ ﻭ (#) ﺶﻫ ﺮﺘﮐﺍﺭﺎﮐ ﮏﯾ ،ﺹﺎﺧ ﻪﺳﺎﻨﺷ ﮏﯾ ﺎﺑ ﺮﺼﻨﻋ ﮏﯾ ﺏﺎﺨﺘﻧﺍ ﯼﺍﺮﺑ

ﻝﺎﺜﻣ

:ﺪﺷ ﺪﻫﺍﻮﺧ ﻝﺎﻤﻋﺍ "id="para1 ﺎﺑ HTML ﺮﺼﻨﻋ ﯼﺍﺮﺑ ﺮﯾﺯ CSS ﻥﻮﻧﺎﻗ

#para1
{
  text-align: center;
  color: red;
}

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

<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
  text-align: center;
  color: red;
}
</style>
</head>
<body>

<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>

</body>
</html>

ﻪﺟﻮﺗ: ﺩﻮﺷ ﻉﻭﺮﺷ ﺩﺪﻋ ﺎﺑ ﺪﻧﺍﻮﺗ ﯽﻤﻧ ﻪﺳﺎﻨﺷ ﻡﺎﻧ!

CSS ﺱﻼﮐ ﺮﮕﺑﺎﺨﺘﻧﺍ

.ﺪﻨﮐ ﯽﻣ ﺏﺎﺨﺘﻧﺍ ﺹﺎﺧ ﺱﻼﮐ ﯽﮔﮋﯾﻭ ﺎﺑ ﺍﺭ HTML ﺮﺻﺎﻨﻋ ﺱﻼﮐ ﺮﮕﺑﺎﺨﺘﻧﺍ

ﺪﯿﺴﯾﻮﻨﺑ ﺖﻣﻼﻋ ﻥﺁ ﻝﺎﺒﻧﺩ ﻪﺑ ﻭ (.) ﻪﻄﻘﻧ ﺮﺘﮐﺍﺭﺎﮐ ﮏﯾ ،ﺹﺎﺧ ﺱﻼﮐ ﮏﯾ ﺎﺑ ﺮﺻﺎﻨﻋ ﺏﺎﺨﺘﻧﺍ ﯼﺍﺮ

ﻝﺎﺜﻣ

:ﺩﻮﺑ ﺪﻨﻫﺍﻮﺧ ﻂﺳﻭ ﺯﺍﺮﺗ ﻭ ﺰﻣﺮﻗ "class="center ﺎﺑ HTML ﺮﺻﺎﻨﻋ ﻡﺎﻤﺗ ﻝﺎﺜﻣ ﻦﯾﺍ ﺭﺩ

.center {
  text-align: center;
  color: red;
}

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

<!DOCTYPE html>
<html>
<head>
<style>
.center {
  text-align: center;
  color: red;
}
</style>
</head>
<body>

<h1 class="center">Red and center-aligned heading</h1>
<p class="center">Red and center-aligned paragraph.</p> 

</body>
</html>

.ﺪﻧﺮﯿﮔ ﺭﺍﺮﻗ ﺱﻼﮐ ﮏﯾ ﺮﯿﺛﺄﺗ ﺖﺤﺗ ﺪﯾﺎﺑ ﺹﺎﺧ HTML ﺮﺻﺎﻨﻋ ﻂﻘﻓ ﻪﮐ ﺪﯿﻨﮐ ﺺﺨﺸﻣ ﺪﯿﻧﺍﻮﺗ ﯽﻣ ﻦﯿ

ﻝﺎﺜﻣ

ﺩﻮﺑ ﺪﻨﻫﺍﻮﺧ "class="center ﺎﺑ <p> ﺮﺻﺎﻨﻋ ﻂﻘﻓ ﻝﺎﺜﻣ ﻦﯾﺍ ﺭﺩ

p.center {
  text-align: center;
  color: red;
}

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

<!DOCTYPE html>
<html>
<head>
<style>
p.center {
  text-align: center;
  color: red;
}
</style>
</head>
<body>

<h1 class="center">This heading will not be affected</h1>
<p class="center">This paragraph will be red and center-aligned.</p> 

</body>
</html>

HTML ﺮﺻﺎﻨﻋ

ﻝﺎﺜﻣ

.ﺩﻮﺷ ﯽﻣ ﯼﺪﻨﺑ ﻞﯾﺎﺘﺳﺍ "class="center ﺱﺎﺳﺍ ﺮﺑ <p> ﺮﺼﻨﻋ ﻝﺎﺜﻣ ﻦﯾﺍ ﺭﺩ

<p class="center large">This paragraph refers to two classes.</p>

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

<!DOCTYPE html>
<html>
<head>
<style>
p.center {
  text-align: center;
  color: red;
}

p.large {
  font-size: 300%;
}
</style>
</head>
<body>

<h1 class="center">This heading will not be affected</h1>
<p class="center">This paragraph will be red and center-aligned.</p>
<p class="center large">This paragraph will be red, center-aligned, and in a large font-size.</p> 

</body>
</html>

ﻪﺟﻮﺗ: ﺩﻮﺷ ﻉﻭﺮﺷ ﺩﺪﻋ ﺎﺑ ﺪﻧﺍﻮﺗ ﯽﻤﻧ ﺱﻼﮐ ﻡﺎﻧ!

CSS ﯽﻧﺎﻬﺟ ﺮﮕﺑﺎﺨﺘﻧﺍ

ﺪﻨﮐ ﯽﻣ ﺏﺎﺨﺘﻧﺍ ﺍﺭ HTML ﻡﺎﻤﺗ (*) ﯽﻧﺎﻬﺟ ﺮﮕﺑﺎﺨﺘﻧﺍ

ﻝﺎﺜﻣ

:ﺩﺭﺍﺬﮔ ﯽﻣ ﺮﯿﺛﺄﺗ ﻪﺤﻔﺻ ﺭﺩ HTML ﺮﺼﻨﻋ ﺮﻫ ﺮﺑ ﺮﯾﺯ CSS ﻥﻮﻧﺎﻗ

 *
{
  text-align: center;
  color: blue;
}

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

<!DOCTYPE html>
<html>
<head>
<style>
* {
  text-align: center;
  color: blue;
}
</style>
</head>
<body>

<h1>Hello world!</h1>

<p>Every element on the page will be affected by the style.</p>
<p id="para1">Me too!</p>
<p>And me!</p>

</body>
</html>

CSS ﯼﺪﻨﺑ ﻩﻭﺮﮔ ﺮﮕﺑﺎﺨﺘﻧﺍ

ﺪﻨﮐ ﯽﻣ ﺏﺎﺨﺘﻧﺍ ﮏﺒﺳ ﮏﯾ ﺎﺑ ﺍﺭ HTML ﺮﺻﺎﻨﻋ ﻡﺎﻤﺗ ﯼﺪﻨﺑ ﻩﻭﺮﮔ ﺮﮕﺑﺎﺨﺘﻧﺍ

ﺪﻨﺘﺴﻫ ﻥﺎﺴﮑﯾ p ﻭ h1، h2 ﺮﺻﺎﻨﻋ) ﺪﯿﻨﮐ ﻩﺎﮕﻧ ﺮﯾﺯ CSS ﺪﮐ ﻪﺑ

h1
{
  text-align: center;
  color: red;
}

h2
{
   
text-align: center;
  color: red;
}

p
{
  text-align: center;
  color: red;
}

.ﺪﯿﻧﺎﺳﺮﺑ ﻞﻗﺍﺪﺣ ﻪﺑ ﺍﺭ ﺪﮐ ﺎﺗ ﺪﯿﻨﮐ ﯼﺪﻨﺑ ﻩﻭﺮﮔ ﺍﺭ ﺎﻫﺮﮕﺑﺎﺨﺘﻧﺍ ﺖﺳﺍ ﺮﺘﻬﺑ

.ﺪﯿﻨﮐ ﺍﺪﺟ ﺎﻣﺎﮐ ﺎﺑ ﺍﺭ ﺮﮕﺑﺎﺨﺘﻧﺍ ﺮﻫ ،ﺎﻫﺮﮕﺑﺎﺨﺘﻧﺍ ﯼﺪﻨﺑ ﻩﻭﺮﮔ ﯼﺍﺮﺑ

ﻝﺎﺜﻣ

:ﻢﯾﺍ ﻩﺩﺮﮐ ﯼﺪﻨﺑ ﻩﻭﺮﮔ ﻻﺎﺑ ﺪﮐ ﺯﺍ ﺍﺭ ﺎﻫﺮﮕﺑﺎﺨﺘﻧﺍ ﺎﻣ ﻝﺎﺜﻣ ﻦﯾﺍ ﺭﺩ

h1, h2, p
{
   
text-align: center;
  color: red;
}

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

<!DOCTYPE html>
<html>
<head>
<style>
h1, h2, p {
  text-align: center;
  color: red;
}
</style>
</head>
<body>

<h1>Hello World!</h1>
<h2>Smaller heading!</h2>
<p>This is a paragraph.</p>

</body>
</html>

CSS ﻩﺩﺎﺳ ﯼﺎﻫﺮﮕﺑﺎﺨﺘﻧﺍ ﻪﻤﻫ

ﻩﺪﻨﻨﮐ ﺏﺎﺨﺘﻧﺍ:

#id

ﻝﺎﺜﻣ:

#firstname

ﻝﺎﺜﻣ ﺢﯿﺿﻮﺗ: ﺎﺑ ﺍﺭ ﺮﺼﻨﻋ id="firstname" ﯽﻣ ﺏﺎﺨﺘﻧﺍﺪﻨﮐ

ﻩﺪﻨﻨﮐ ﺏﺎﺨﺘﻧﺍ:

.class

ﻝﺎﺜﻣ:

.intro

ﻝﺎﺜﻣ ﺡﺮﺷ: ﺎﺑ ﺍﺭ ﺮﺻﺎﻨﻋ ﻪﻤﻫ class="intro" ﺪﻨﮐ ﯽﻣ ﺏﺎﺨﺘﻧﺍ

ﻩﺪﻨﻨﮐ ﺏﺎﺨﺘﻧﺍ:

element.class

ﻝﺎﺜﻣ:

p.intro

ﻝﺎﺜﻣ ﺡﺮﺷ: ﺮﺻﺎﻨﻋ ﻂﻘﻓ <p> ﺎﺑ ﺍﺭ class="intro" ﯽﻣ ﺏﺎﺨﺘﻧﺍﺪﻨﮐ

ﻩﺪﻨﻨﮐ ﺏﺎﺨﺘﻧﺍ:

*

ﻝﺎﺜﻣ:

*

ﻝﺎﺜﻣ ﺡﺮﺷ: ﺪﻨﮐ ﯽﻣ ﺏﺎﺨﺘﻧﺍ ﺍﺭ ﺮﺻﺎﻨﻋ ﻪﻤﻫ

ﻩﺪﻨﻨﮐ ﺏﺎﺨﺘﻧﺍ:

element

ﻝﺎﺜﻣ:

p

ﻝﺎﺜﻣ ﺡﺮﺷ: ﺮﺻﺎﻨﻋ ﻪﻤﻫ <p> ﺪﻨﮐ ﯽﻣ ﺏﺎﺨﺘﻧﺍ ﺍﺭ

ﻩﺪﻨﻨﮐ ﺏﺎﺨﺘﻧﺍ:

element,element,..

ﻝﺎﺜﻣ:

div, p

ﻝﺎﺜﻣ ﺡﺮﺷ: ﺮﺻﺎﻨﻋ ﻪﻤﻫ <div> ﺮﺻﺎﻨﻋ ﻪﻤﻫ ﻭ <p> ﺪﻨﮐ ﯽﻣ ﺏﺎﺨﺘﻧﺍ ﺍﺭ