CSS ﯼﺎﻫﺪﺣﺍﻭ

فهرست مطالب

CSS ﯼﺎﻫﺪﺣﺍﻭ

CSS ﺩﺭﺍﺩ ﻝﻮﻃ ﻥﺎﯿﺑ ﯼﺍﺮﺑ ﻒﻠﺘﺨﻣ ﺪﺣﺍﻭ ﻦﯾﺪﻨﭼ.

:ﺪﻨﻧﺎﻣ ،ﺪﻧﺮﯿﮔ ﯽﻣ ﺍﺭ "length" ﺮﯾﺩﺎﻘﻣ CSS ﯼﺎﻫ ﯽﮔﮋﯾﻭ ﺯﺍ ﯼﺭﺎﯿﺴﺑ

width, margin, padding, font-size

ﻝﻮﻃ ﯽﻣ ﻥﺁ ﻝﺎﺒﻧﺩ ﻪﺑ ﻝﻮﻃ ﺪﺣﺍﻭ ﮏﯾ ﻪﮐ ﺖﺳﺍ ﯼﺩﺪﻋﺪﻨﻧﺎﻣ ،ﺪﯾﺁ:

10px, 2em

ﻝﺎﺜﻣ

:ﺪﯿﻨﮐ ﻢﯿﻈﻨﺗ (ﻞﺴﮑﯿﭘ) px ﺯﺍ ﻩﺩﺎﻔﺘﺳﺍ ﺎﺑ ﺍﺭ ﻝﻮﻃ ﻒﻠﺘﺨﻣ ﺮﯾﺩﺎﻘﻣ

 h1 {
  font-size: 60px;
}
p {
  font-size: 25px;
  
  line-height: 50px;
}

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

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  font-size: 60px;
}

p {
  font-size: 25px;
  line-height: 50px;
}
</style>
</head>
<body>

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

</body>
</html>

ﻪﺟﻮﺗ: ﯽﻤﻧ ﻩﺩﺍﺩ ﺶﯾﺎﻤﻧ ﺪﺣﺍﻭ ﻭ ﺩﺪﻋ ﻦﯿﺑ ﯽﻟﺎﺧ ﯼﺎﻀﻓ ﮏﯾﺖﺳﺍ ﺵﺯﺭﺍ

.ﺖﺳﺍ ﺯﺎﺠﻣ ﯽﻔﻨﻣ ﯼﺎﻫ ﻝﻮﻃ ،CSS ﯼﺎﻫ ﯽﮔﮋﯾﻭ ﺯﺍ ﯽﺧﺮﺑ ﯼﺍﺮﺑ

.ﯽﺒﺴﻧ ﻭﻖﻠﻄﻣ :ﺩﺭﺍﺩ ﺩﻮﺟﻭ ﻝﻮﻃ ﺪﺣﺍﻭ ﻉﻮﻧ ﻭﺩ

ﻖﻠﻄﻣ ﯼﺎﻫ ﻝﻮﻃ

.ﺩﻮﺷ ﯽﻣ ﺮﻫﺎﻇ ﻩﺯﺍﺪﻧﺍ ﻥﺎﻤﻫ ﻪﺑ ﺎًﻘﯿﻗﺩ ﺎﻬﻨﯾﺍ ﺯﺍ ﮏﯾ ﺮﻫ ﺭﺩ ﻩﺪﺷ ﻥﺎﯿﺑ ﻝﻮﻃ ﻭ ﺪﻨﺘﺴﻫ ﺖﺑﺎﺛ

.ﺖﺳﺍ ﺕﻭﺎﻔﺘﻣ ﺭﺎﯿﺴﺑ ﺶﯾﺎﻤﻧ ﻪﺤﻔﺻ ﻩﺯﺍﺪﻧﺍ ﺍﺮﯾﺯ ،ﺪﻧﻮﺷ ﯽﻤﻧ ﻪﯿﺻﻮﺗ ﻪﺤﻔﺻ ﯼﻭﺭ ﻩﺩﺎﻔﺘﺳﺍ ﯼﺍﺮﺑ

cm

ﺕﺎﺤﯿﺿﻮﺗ: ﺮﺘﻣ ﯽﺘﻧﺎﺳ

ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ

<!DOCTYPE html>
<html>
<head>
<style>
h1 {font-size: 1.5cm;}
h2 {font-size: 1cm;}
p {
  font-size: 0.5cm;
  line-height: 1cm;
}
</style>
</head>
<body>

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

</body>
</html>

mm

ﺕﺎﺤﯿﺿﻮﺗ: ﺮﺘﻣ ﯽﻠﯿﻣ

ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ

<!DOCTYPE html>
<html>
<head>
<style>
h1 {font-size: 15mm;}
h2 {font-size: 10mm;}
p {
  font-size: 5mm;
  line-height: 10mm;
}
</style>
</head>
<body>

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

</body>
</html>

in

ﺕﺎﺤﯿﺿﻮﺗ: (ﺮﺘﻣ ﯽﺘﻧﺎﺳ 2.54=ﻞﺴﮑﯿﭘ 96=ﭻﻨﯾﺍ 1) ﭻﻨﯾﺍ

ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ

<!DOCTYPE html>
<html>
<head>
<style>
h1 {font-size: 1in;}
h2 {font-size: 0.5in;}
p {
  font-size: 0.2in;
  line-height: 0.5in;
}
</style>
</head>
<body>

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

</body>
</html>

px *

ﻞﺴﮑﯿﭘ :ﺕﺎﺤﯿﺿﻮﺗ (1px=1/96th 1 ﺯﺍin)

ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ

<!DOCTYPE html>
<html>
<head>
<style>
h1 {font-size: 50px;}
h2 {font-size: 30px;}
p {
  font-size: 15px;
  line-height: 20px;
}
</style>
</head>
<body>

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

</body>
</html>

pt

ﺕﺎﺤﯿﺿﻮﺗ: ﻁﺎﻘﻧ (1pt=1/72 1 ﺯﺍin)

ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ

<!DOCTYPE html>
<html>
<head>
<style>
h1 {font-size: 50pt;}
h2 {font-size: 25pt;}
p {
  font-size: 15pt;
  line-height: 25pt;
}
</style>
</head>
<body>

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

</body>
</html>

pc

ﺕﺎﺤﯿﺿﻮﺗ: picas (1pc=12 pt)

ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ

<!DOCTYPE html>
<html>
<head>
<style>
h1 {font-size: 4.5pc;}
h2 {font-size: 3pc;}
p {
  font-size: 1.5pc;
  line-height: 3pc;
}
</style>
</head>
<body>

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

</body>
</html>

ﻻﺎﺑ ﺡﻮﺿﻭ ﻭ ﺎﻫﺮﮕﭘﺎﭼ ﯼﺍﺮﺑ .ﺖﺳﺍ ﺮﮕﺸﯾﺎﻤﻧ (ﻪﻄﻘﻧ) ﻩﺎﮕﺘﺳﺩ ﻞﺴﮑﯿﭘ ﮏﯾ 1px ،ﻦﯿﯾﺎﭘ dpi ﺎﺑ

ﯽﺒﺴﻧ ﯼﺎﻫ ﻝﻮﻃ

.ﺪﻧﺭﺍﺩ ﯼﺮﺘﻬﺑ ﺱﺎﯿﻘﻣ ﻒﻠﺘﺨﻣ ﺭﺪﻧﺭ ﯼﺎﻫ ﻪﻧﺎﺳﺭ ﻦﯿﺑ ﯽﺒﺴﻧ ﻝﻮﻃ ﯼﺎﻫﺪﺣﺍﻭ .ﺪﻨﻨﮐ ﯽﻣ ﺺﺨﺸﻣ ﺮﮕﯾ

em

ﺕﺎﺤﯿﺿﻮﺗ: ﺮﺼﻨﻋ ﻢﻠﻗ ﻩﺯﺍﺪﻧﺍ ﻪﺑ ﺖﺒﺴﻧ (2em ﺖﺳﺍ ﯽﻠﻌﻓ ﺖﻧﻮﻓ ﻩﺯﺍﺪﻧﺍ ﺮﺑ

ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ

<!DOCTYPE html>
<html>
<head>
<style>
p {
  font-size: 16px;
  line-height: 2em;
}

div {
  font-size: 30px;
  border: 1px solid black;
}

span {
  font-size: 0.5em;
}
</style>
</head>
<body>

<p>These paragraphs have a calculated line-height of: 2x16px = 32px.</p>
<p>These paragraphs have a calculated line-height of: 2x16px = 32px.</p>
<p>These paragraphs have a calculated line-height of: 2x16px = 32px.</p>
<div>The font-size of the div element is set to 30px. <span>The span element inside the div element has a font-size of 0.5em, which equals to 0.5x30 = 15px</span>.</div>

</body>
</html>

ex

ﺕﺎﺤﯿﺿﻮﺗ: ﻉﺎﻔﺗﺭﺍ ﻪﺑ ﺖﺒﺴﻧ x (ﺩﻮﺷ ﯽﻣ ﻩﺩﺎﻔﺘﺳﺍ ﺕﺭﺪﻧ ﻪﺑ) ﯽﻠﻌﻓ ﺖﻧﻮﻓ

ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ

<!DOCTYPE html>
<html>
<head>
<style>
div {
  font-size: 30px;
  border: 1px solid black;
}

span {
  font-size: 1ex;
}
</style>
</head>
<body>

<div>The font-size of the div element is set to 30px. <span>The span element inside the div element has a font-size of 1ex</span>.</div>

</body>
</html>

ch

ﺕﺎﺤﯿﺿﻮﺗ: (ﺮﻔﺻ) "0" ﺽﺮﻋ ﻪﺑ ﺖﺒﺴﻧ

ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ

<!DOCTYPE html>
<html>
<head>
<style>
body {
 font-size:16px;
}

div {
  font-size: 3ch;
  border: 1px solid black;
}

</style>
</head>
<body>

<p>The font-size of this document is 16px.</p>

<div>The font-size of this div element is 3ch.</div>

<p>The ch unit sets the font-size relative to the width of the character "0".</p>

</body>
</html>

rem

ﺕﺎﺤﯿﺿﻮﺗ: ﻪﺸﯾﺭ ﺮﺼﻨﻋ ﺖﻧﻮﻓ ﻩﺯﺍﺪﻧﺍ ﻪﺑ ﺖﺒﺴﻧ

ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ

<!DOCTYPE html>
<html>
<head>
<style>
body {
 font-size:16px;
}

div {
  font-size: 2rem;
  border: 1px solid black;
}

</style>
</head>
<body>

<p>The font-size of this document is 16px.</p>

<div>The font-size of this div element is 2rem.</div>

<p>The rem unit sets the font-size relative to the browsers base font-size, and will not inherit from its parents.</p>

</body>
</html>

vw

ﺕﺎﺤﯿﺿﻮﺗ: ﺪﯾﺩ ﻩﺎﮔﺭﺩ ﺽﺮﻋ ﺯﺍ ٪1 ﻪﺑ ﺖﺒﺴﻧ*

ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  font-size: 20vw;
}
</style>
</head>
<body>

<h1>Hello</h1>

<p>Resize the width of the browser window to see how the font-size of h1 changes.</p>
<p>1vw = 1% of viewport width.</p>

</body>
</html>

vh

ﺕﺎﺤﯿﺿﻮﺗ: ﺪﯾﺩ ﻩﺎﮔﺭﺩ ﻉﺎﻔﺗﺭﺍ ﺯﺍ ٪1 ﻪﺑ ﺖﺒﺴﻧ*

ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  font-size: 20vh;
}
</style>
</head>
<body>

<h1>Hello</h1>

<p>Resize the height of the browser window to see how the font-size of h1 changes.</p>
<p>1vh = 1% of viewport height.</p>

</body>
</html>

vmin

ﺕﺎﺤﯿﺿﻮﺗ: ﯼﺎﻤﻧ ﺮﺘﮑﭼﻮﮐ ﺩﺎﻌﺑﺍ ﺯﺍ ٪1 ﻪﺑ ﺖﺒﺴﻧ*

ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  font-size: 15vmin;
}
</style>
</head>
<body>

<h1>Hello</h1>

<p>Resize the browser window (both width and height) to see how the font-size of h1 changes.</p>
<p>1vmin = 1vw or 1vh, whichever is smaller.</p>

</body>
</html>

vmax

ﺕﺎﺤﯿﺿﻮﺗ: ﯼﺎﻤﻧ ﺮﺘﮔﺭﺰﺑ ﺩﺎﻌﺑﺍ ﺯﺍ ٪1 ﻪﺑ ﺖﺒﺴﻧ*

ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  font-size: 15vmax;
}
</style>
</head>
<body>

<h1>Hello</h1>

<p>Resize the browser window (both width and height) to see how the font-size of h1 changes.</p>
<p>1vmax = 1vw or 1vh, whichever is larger.</p>
<p>The vmax unit is not supported in Internet Explorer or Safari 6.1 and earlier versions.</p>

</body>
</html>

ﺕﺎﺤﯿﺿﻮﺗ: ﺪﻟﺍﻭ ﺮﺼﻨﻋ ﻪﺑ ﺖﺒﺴﻧ

ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ

<!DOCTYPE html>
<html>
<head>
<style>
body {
 font-size:16px;
}

div {
  font-size: 150%;
  border: 1px solid black;
}

</style>
</head>
<body>

<p>The font-size of this document is 16px.</p>

<div>The font-size of this div element is 150%.</div>

<p>The % unit sets the font-size relative to the current font-size.</p>

</body>
</html>

ﻪﺘﮑﻧ: ﯼﺎﻫﺪﺣﺍﻭ em ﻭ rem ﺪﻨﺘﺴﻫ ﯽﻠﻤﻋ ﯽﻟﺎﻋ ﺩﺎﺠﯾﺍ ﺭﺩ

ﺮﮔﺭﻭﺮﻣ ﯽﻧﺎﺒﯿﺘﺸﭘ

ﺪﻨﮐ ﯽﻣ ﯽﻧﺎﺒﯿﺘﺸﭘ ﻥﺁ ﺯﺍ ﻞﻣﺎﮐ ﺭﻮﻃ ﻪﺑ ﻪﮐ ﺪﻨﻨﮐ ﯽﻣ ﺺﺨﺸﻣ ﺍﺭ ﺮﮔﺭﻭﺮﻣ ﻪﺨﺴﻧ ﻦﯿﻟﻭﺍ ﻝﻭﺪﺟ ﺭﺩ

Length Unit
em, ex, %, px, cm, mm, in, pt, pc	1.0	3.0	1.0	1.0	3.5
ch	27.0	9.0	1.0	7.0	20.0
rem	4.0	9.0	3.6	4.1	11.6
vh, vw	20.0	9.0	19.0	6.0	20.0
vmin	20.0	12.0	19.0	6.0	20.0
vmax	26.0	16.0	19.0	7.0	20.0