CSS ﻦﺘﻣ ﻦﯿﯾﺰﺗ

فهرست مطالب

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

ﻦﺘﻣ ﻦﯿﯾﺰﺗ

:ﺪﺷ ﺪﯿﻫﺍﻮﺧ ﺎﻨﺷﺁ ﺮﯾﺯ ﺹﺍﻮﺧ ﺎﺑ ﻞﺼﻓ ﻦﯾﺍ ﺭﺩ

  • text-decoration-line
  • text-decoration-color
  • text-decoration-style
  • text-decoration-thickness
  • text-decoration

ﺪﯿﻨﮐ ﻪﻓﺎﺿﺍ ﻦﺘﻣ ﻪﺑ ﯽﻨﯿﺋﺰﺗ ﻂﺧ ﮏﯾ

ﺩﻮﺷ ﯽﻣ ﻩﺩﺎﻔﺘﺳﺍ ﻥﺩﻭﺰﻓﺍ ﯼﺍﺮﺑ text-decoration-line

ﻪﺘﮑﻧ: ﯽﻣﺪﻨﻧﺎﻣ ،ﺪﯿﻨﮐ ﺐﯿﮐﺮﺗ ﺍﺭ ﺭﺍﺪﻘﻣ ﮏﯾ ﺯﺍ ﺶﯿﺑ ﺪﯿﻧﺍﻮﺗ over

ﻝﺎﺜﻣ

h1 {
  text-decoration-line: overline;
}

h2 {
  text-decoration-line: line-through;
}

h3 {
  text-decoration-line: underline;
}
p {
  text-decoration-line: 
  overline underline;
}

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

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  text-decoration: overline;
}

h2 {
  text-decoration: line-through;
}

h3 {
  text-decoration: underline;
}

p.ex {
  text-decoration: overline underline;
}
</style>
</head>
<body>

<h1>Overline text decoration</h1>
<h2>Line-through text decoration</h2>
<h3>Underline text decoration</h3>
<p class="ex">Overline and underline text decoration.</p>

<p><strong>Note:</strong> It is not recommended to underline text that is not a link, as this often confuses 
the reader.</p>

</body>
</html>

ﻪﺟﻮﺗ: ﯽﻤﻧ ﻪﯿﺻﻮﺗﯽﻣ ﻢﮔﺭﺩﺮﺳ ﺍﺭ ﻩﺪﻨﻧﺍﻮﺧ ﺐﻠﻏﺍ ﺍﺮﯾﺯ ،ﺪﯿﺸﮑﺑ ﻂﺧ

ﺪﯿﻨﮐ ﺺﺨﺸﻣ ﻥﻮﯿﺳﺍﺭﻮﮐﺩ ﻂﺧ ﯼﺍﺮﺑ ﮓﻧﺭ ﮏﯾ

ﯼﺍﺮﺑ text-decoration-color ﯽﮔﮋﯾﻭ

ﻝﺎﺜﻣ

h1 {
  text-decoration-line: overline;
  text-decoration-color: 
  red;
}

h2 {
  text-decoration-line: line-through;
  text-decoration-color: 
  blue;
}

h3 {
  text-decoration-line: underline;
  text-decoration-color: 
  green;
}
p {
  text-decoration-line: 
  overline underline;
  text-decoration-color: purple;
}

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

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  text-decoration-line: overline;
  text-decoration-color: red;
}

h2 {
  text-decoration-line: line-through;
  text-decoration-color: blue;
}

h3 {
  text-decoration-line: underline;
  text-decoration-color: green;  
}

p {
  text-decoration-line: overline underline;
  text-decoration-color: purple;  
}
</style>
</head>
<body>

<h1>Overline text decoration</h1>
<h2>Line-through text decoration</h2>
<h3>Underline text decoration</h3>
<p>Overline and underline text decoration.</p>

</body>
</html>

ﺪﯿﻨﮐ ﺺﺨﺸﻣ ﻥﻮﯿﺳﺍﺭﻮﮐﺩ ﻂﺧ ﯼﺍﺮﺑ ﮏﺒﺳ ﮏﯾ

ﯼﺍﺮﺑ text-decoration-style ﯽﮔﮋﯾﻭ

ﻝﺎﺜﻣ

 h1 {
  text-decoration-line: underline;
  text-decoration-style: 
  solid;
}
  
h2 {
  text-decoration-line: underline;
  
  text-decoration-style: double;
}
  
h3 {
  text-decoration-line: underline;
  
  text-decoration-style: dotted; 
}
p.ex1 {
  text-decoration-line: underline;
  
  text-decoration-style: dashed; 
}
p.ex2 {
  text-decoration-line: underline;
  
  text-decoration-style: wavy; 
}
p.ex3 {
  text-decoration-line: 
  underline;
  text-decoration-color: red; 
  
  text-decoration-style: wavy; 
}

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

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  text-decoration-line: underline;
  text-decoration-style: solid; /* this is default */
}

h2 {
  text-decoration-line: underline;
  text-decoration-style: double;
}

h3 {
  text-decoration-line: underline;
  text-decoration-style: dotted;  
}

p.ex1 {
  text-decoration-line: underline;
  text-decoration-style: dashed;  
}

p.ex2 {
  text-decoration-line: underline;
  text-decoration-style: wavy;  
}

p.ex3 {
  text-decoration-line: underline;
  text-decoration-color: red;  
  text-decoration-style: wavy;  
}
</style>
</head>
<body>

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<p class="ex1">A paragraph.</p>
<p class="ex2">Another paragraph.</p>
<p class="ex3">Another paragraph.</p>

</body>
</html>

ﺪﯿﻨﮐ ﺺﺨﺸﻣ ﺍﺭ ﻦﯿﺋﺰﺗ ﻂﺧ ﺖﻣﺎﺨﺿ

ﯼﺍﺮﺑ text-decoration-thickness ﯽﮔﮋﯾﻭ

ﻝﺎﺜﻣ

 h1 {
  text-decoration-line: underline;
  
  text-decoration-thickness: auto;
}
h2 {
  text-decoration-line: 
  underline;
  text-decoration-thickness: 5px;
}
h3 {
  
  text-decoration-line: underline;
  text-decoration-thickness: 25%;
  }
p {
  
  text-decoration-line: underline;
  text-decoration-color: red; 
  
  text-decoration-style: double;
  text-decoration-thickness: 5px; 
}

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

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  text-decoration-line: underline;
  text-decoration-thickness: auto;  /* this is default */
}

h2 {
  text-decoration-line: underline;
  text-decoration-thickness: 5px;
}

h3 {
  text-decoration-line: underline;
  text-decoration-thickness: 25%;
}

p {
  text-decoration-line: underline;
  text-decoration-color: red;  
  text-decoration-style: double;
  text-decoration-thickness: 5px;  
}
</style>
</head>
<body>

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<p>A paragraph.</p>

</body>
</html>

ﯽﺴﯾﻮﻧ ﻩﺎﺗﻮﮐ ﻝﺎﻣ

ﺖﺳﺍ ﺮﺼﺘﺨﻣ text-decoration ﯽﮔﮋﯾﻭ

  • text-decoration-line (ﯽﻣﺍﺰﻟﺍ)

  • text-decoration-color (ﯼﺭﺎﯿﺘﺧﺍ)

  • text-decoration-style (ﯼﺭﺎﯿﺘﺧﺍ)

  • ﻦﺘﻣ ﺕﺎﻨﯿﺋﺰﺗ ﺖﻣﺎﺨﺿ (ﯼﺭﺎﯿﺘﺧﺍ)

ﻝﺎﺜﻣ

 h1 {
  text-decoration: underline;
}
h2 {
  
  text-decoration: underline red;
}
h3 {
  text-decoration: underline 
  red double;
}
p {
  
  text-decoration: underline red double 5px;
}

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

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  text-decoration: underline;
}

h2 {
  text-decoration: underline red;
}

h3 {
  text-decoration: underline red double;
}

p {
  text-decoration: underline red double 5px;
}
</style>
</head>
<body>

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<p>A paragraph.</p>

</body>
</html>

ﮏﭼﻮﮐ ﻪﺘﮑﻧ ﮏﯾ

ﻮﺗ ﯽﻫﺎﮔ .ﺪﻧﺍ ﻩﺪﺷ ﻩﺪﯿﺸﮐ ﻂﺧ ﺮﯾﺯ ﺽﺮﻓ ﺶﯿﭘ ﺭﻮﻃ ﻪﺑ HTML ﺭﺩ ﺎﻫﺪﻧﻮﯿﭘ ﻪﻤﻫ

ﻝﺎﺜﻣ

a {
  text-decoration: none;
}

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

<!DOCTYPE html>
<html>
<head>
<style>
a {
  text-decoration: none;
}
</style>
</head>
<body>

<h1>Using text-decoration: none</h1>

<p>A link with no underline: <a href="https://www.w3schools.com">W3Schools.com</a></p>

</body>
</html>

CSS ﻦﺘﻣ ﻦﯿﺋﺰﺗ ﯼﺎﻫ ﯽﮔﮋﯾﻭ ﻡﺎﻤﺗ

text-decoration

ﺪﻨﮐ ﯽﻣ ﻢﯿﻈﻨﺗ ﻥﻼﻋﺍ ﮏﯾ ﺭﺩ ﺍﺭ ﻦﺘﻣ ﻦﯿﺋﺰﺗ ﯼﺎﻫ ﯽﮔﮋﯾﻭ ﻡﺎﻤﺗ

text-decoration-color

ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ ﺍﺭ ﻦﺘﻣ ﻥﻮﯿﺳﺍﺭﻮﮐﺩ ﮓﻧﺭ

text-decoration-line

،ﻂﺧ ،ﻂﺧ ﺮﯾﺯ) ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ ﺍﺭ ﻩﺩﺎﻔﺘﺳﺍ ﺩﺭﻮﻣ ﻦﺘﻣ ﻦﯿﯾﺰﺗ ﻉﻮﻧ

text-decoration-style

(ﻩﺮﯿﻏ ﻭ ﻦﯿﭼ ﻪﻄﻘﻧ ،ﻪﭼﺭﺎﭙﮑﯾ) ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ ﺍﺭ ﻦﺘﻣ ﻥﻮﯿﺳﺍﺭﻮﮐﺩ ﮏﺒﺳ

text-decoration-thickness

ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ ﺍﺭ ﻦﺘﻣ ﻦﯿﺋﺰﺗ ﻂﺧ ﺖﻣﺎﺨﺿ