ﺪﻨﮐ ﯽﻣ ﺏﺎﺨﺘﻧﺍ ﺎﻤﺷ ﯼﺍﺮﺑ ﺍﺭ HTML (ﯼﺎﻫ)ﺮﺼﻨﻋ CSS ﺮﮕﺑﺎﺨﺘﻧﺍ
ﺪﻧﺮﯿﮔ ﯽﻣ ﺭﺍﺮﻗ ﻩﺩﺎﻔﺘﺳﺍ ﺩﺭﻮﻣ HTML ﺮﺻﺎﻨﻋ (ﺏﺎﺨﺘﻧﺍ ﺎﯾ) "ﻦﺘﻓﺎﯾ" ﯼﺍﺮﺑ 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>
.ﺪﻨﮐ ﯽﻣ ﻩﺩﺎﻔﺘﺳﺍ ﺹﺎﺧ ﺮﺼﻨﻋ ﮏﯾ ﺏﺎﺨﺘﻧﺍ ﯼﺍﺮﺑ 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>
ﻪﺟﻮﺗ: ﺩﻮﺷ ﻉﻭﺮﺷ ﺩﺪﻋ ﺎﺑ ﺪﻧﺍﻮﺗ ﯽﻤﻧ ﻪﺳﺎﻨﺷ ﻡﺎﻧ!
.ﺪﻨﮐ ﯽﻣ ﺏﺎﺨﺘﻧﺍ ﺹﺎﺧ ﺱﻼﮐ ﯽﮔﮋﯾﻭ ﺎﺑ ﺍﺭ 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>
ﻪﺟﻮﺗ: ﺩﻮﺷ ﻉﻭﺮﺷ ﺩﺪﻋ ﺎﺑ ﺪﻧﺍﻮﺗ ﯽﻤﻧ ﺱﻼﮐ ﻡﺎﻧ!
ﺪﻨﮐ ﯽﻣ ﺏﺎﺨﺘﻧﺍ ﺍﺭ 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>
ﺪﻨﮐ ﯽﻣ ﺏﺎﺨﺘﻧﺍ ﮏﺒﺳ ﮏﯾ ﺎﺑ ﺍﺭ 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>
ﻩﺪﻨﻨﮐ ﺏﺎﺨﺘﻧﺍ:
#id
ﻝﺎﺜﻣ:
#firstname
ﻝﺎﺜﻣ ﺢﯿﺿﻮﺗ: ﺎﺑ ﺍﺭ ﺮﺼﻨﻋ id="firstname" ﯽﻣ ﺏﺎﺨﺘﻧﺍﺪﻨﮐ
ﻩﺪﻨﻨﮐ ﺏﺎﺨﺘﻧﺍ:
.class
ﻝﺎﺜﻣ:
.intro
ﻝﺎﺜﻣ ﺡﺮﺷ: ﺎﺑ ﺍﺭ ﺮﺻﺎﻨﻋ ﻪﻤﻫ class="intro" ﺪﻨﮐ ﯽﻣ ﺏﺎﺨﺘﻧﺍ
ﻩﺪﻨﻨﮐ ﺏﺎﺨﺘﻧﺍ:
element.class
ﻝﺎﺜﻣ:
p.intro
ﻝﺎﺜﻣ ﺡﺮﺷ: ﺮﺻﺎﻨﻋ ﻂﻘﻓ <p> ﺎﺑ ﺍﺭ class="intro" ﯽﻣ ﺏﺎﺨﺘﻧﺍﺪﻨﮐ
ﻩﺪﻨﻨﮐ ﺏﺎﺨﺘﻧﺍ:
*
ﻝﺎﺜﻣ:
*
ﻝﺎﺜﻣ ﺡﺮﺷ: ﺪﻨﮐ ﯽﻣ ﺏﺎﺨﺘﻧﺍ ﺍﺭ ﺮﺻﺎﻨﻋ ﻪﻤﻫ
ﻩﺪﻨﻨﮐ ﺏﺎﺨﺘﻧﺍ:
element
ﻝﺎﺜﻣ:
p
ﻝﺎﺜﻣ ﺡﺮﺷ: ﺮﺻﺎﻨﻋ ﻪﻤﻫ <p> ﺪﻨﮐ ﯽﻣ ﺏﺎﺨﺘﻧﺍ ﺍﺭ
ﻩﺪﻨﻨﮐ ﺏﺎﺨﺘﻧﺍ:
element,element,..
ﻝﺎﺜﻣ:
div, p
ﻝﺎﺜﻣ ﺡﺮﺷ: ﺮﺻﺎﻨﻋ ﻪﻤﻫ <div> ﺮﺻﺎﻨﻋ ﻪﻤﻫ ﻭ <p> ﺪﻨﮐ ﯽﻣ ﺏﺎﺨﺘﻧﺍ ﺍﺭ