CSS ﮏﺒﺳ ﯼﺎﻫﺪﻧﻮﯿﭘ

فهرست مطالب

.ﺩﺮﮐ ﻞﯾﺎﺘﺳﺍ ﻒﻠﺘﺨﻣ ﯼﺎﻫ ﺵﻭﺭ ﻪﺑ ﻥﺍﻮﺗ ﯽﻣ ﺍﺭ ﺎﻫ ﮏﻨﯿﻟ ،CSS ﺎﺑ

Text Link Text Link Link Button Link Button

ﻩﺪﺷ ﯽﺣﺍﺮﻃ ﺮﻫﺎﻇ ﮏﯾ ﯼﺎﻫﺪﻧﻮﯿﭘ

،ﺩﺮﮐ ﯽﻫﺩ ﻞﯾﺎﺘﺳﺍ ،، font-familyﮓﻧﺭ<"cod

`ﻝﺎﺜﻣ`

  a {
  color: hotpink;
}

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

<!DOCTYPE html>
<html>
<head>
<style>
a {
  color: hotpink;
}
</style>
</head>
<body>

<h2>Style a link with a color</h2>

<p><b><a href="default.asp" target="_blank">This is a link</a></b></p>

</body>
</html>

ﺩﺮﮐ ﯼﺪﻨﺑ ﻞﯾﺎﺘﺳﺍ ﻥﺍﻮﺗ ﯽﻣ ﺍﺭ ﺎﻫ ﮏﻨﯿﻟ ،ﻦﯾﺍ ﺮﺑ ﻩﻭﻼﻋ

:ﺯﺍ ﺪﻨﺗﺭﺎﺒﻋ ﺪﻧﻮﯿﭘ ﺖﻟﺎﺣ ﺭﺎﻬﭼ

a:link - ﻩﺪﺸﻧ ﺪﯾﺩﺯﺎﺑ ﻭ ﯼﺩﺎﻋ ﺪﻧﻮﯿﭘ ﮏﯾ
a:visited - ﺖﺳﺍ ﻩﺩﺮﮐ ﺪﯾﺩﺯﺎﺑ ﺮﺑﺭﺎﮐ ﻪﮐ ﯼﺪﻧﻮﯿﭘ
a:hover - ﺪﻫﺩ ﯽﻣ ﺭﺍﺮﻗ ﻥﺁ ﯼﻭﺭ ﺮﺑﺭﺎﮐ ﻪﮐ ﯼﺪﻧﻮﯿﭘ
a:active - ﺩﻮﺷ ﯽﻣ ﮏﯿﻠﮐ ﻥﺁ ﯼﻭﺭ ﻪﮐ ﯼﺍ ﻪﻈﺤﻟ ﺭﺩ ﯼ

`ﻝﺎﺜﻣ`

/* unvisited link */
a:link {
  color: red;
}
/* visited 
link */
a:visited {
  color: green;
}
/* mouse over link */
a:hover {
  color: hotpink;
}
/* selected link */
a:active {
   
color: blue;
}

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

<!DOCTYPE html>
<html>
<head>
<style>
/* unvisited link */
a:link {
  color: red;
}

/* visited link */
a:visited {
  color: green;
}

/* mouse over link */
a:hover {
  color: hotpink;
}

/* selected link */
a:active {
  color: blue;
}
</style>
</head>
<body>

<h2>Styling a link depending on state</h2>

<p><b><a href="default.asp" target="_blank">This is a link</a></b></p>
<p><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.</p>
<p><b>Note:</b> a:active MUST come after a:hover in the CSS definition in order to be effective.</p>

</body>
</html>

:ﺩﺭﺍﺩ ﺩﻮﺟﻭ ﺐﯿﺗﺮﺗ ﻥﻮﻧﺎﻗ ﺪﻨﭼ ،ﺪﻧﻮﯿﭘ ﺖﯿﻌﺿﻭ ﻦﯾﺪﻨﭼ ﯼﺍﺮﺑ ﻞﯾﺎﺘﺳﺍ ﻢﯿﻈﻨﺗ ﻡﺎﮕﻨﻫ

a:hover ﺯﺍ ﺪﻌﺑ ﺪﯾﺎﺑ a:link ﻭ a:visited ﺪﯾﺎﯿﺑ
a:active ﮏﯾ ﺯﺍ ﺪﻌﺑ ﺪﯾﺎﺑ:hover ﺪﯾﺎﯿﺑ

`ﻦﺘﻣ ﻦﯿﯾﺰﺗ`

:ﺩﻮﺷ ﯽﻣ ﻩﺩﺎﻔﺘﺳﺍ ﺎﻫﺪﻧﻮﯿﭘ ﺯﺍ ﺮﯾﺯ ﻁﻮﻄﺧ ﻑﺬﺣ ﯼﺍﺮﺑ ﺮﺘﺸﯿﺑ t

`ﻝﺎﺜﻣ`

a:link {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

a:active {
  text-decoration: underline;
}

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

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

a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

a:active {
  text-decoration: underline;
}
</style>
</head>
<body>

<h2>Styling a link with text-decoration property</h2>

<p><b><a href="default.asp" target="_blank">This is a link</a></b></p>
<p><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.</p>
<p><b>Note:</b> a:active MUST come after a:hover in the CSS definition in order to be effective.</p>

</body>
</html>

`ﻪﻨﯿﻣﺯ ﺲﭘ ﮓﻧﺭ`

:ﺩﺮﮐ ﻩﺩﺎﻔﺘﺳﺍ ﺎﻫﺪﻧﻮﯿﭘ ﯼﺍﺮﺑ ﻪﻨﯿﻣﺯ ﺲﭘ ﮓﻧﺭ ﻦﯿﯿﻌﺗ ﯼﺍﺮﺑ ﻥﺍﻮﺗ ﯽﻣ ﺍﺭ

`ﻝﺎﺜﻣ`

a:link {
  background-color: yellow;
}

a:visited {
  background-color: cyan;
}

a:hover {
  background-color: lightgreen;
}

a:active {
  background-color: hotpink;
}

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

<!DOCTYPE html>
<html>
<head>
<style>
a:link {
  background-color: yellow;
}

a:visited {
  background-color: cyan;
}

a:hover {
  background-color: lightgreen;
}

a:active {
  background-color: hotpink;
} 
</style>
</head>
<body>

<h2>Styling a link with background-color property</h2>

<p><b><a href="default.asp" target="_blank">This is a link</a></b></p>
<p><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.</p>
<p><b>Note:</b> a:active MUST come after a:hover in the CSS definition in order to be effective.</p>

</body>
</html>

`ﺪﻧﻮﯿﭘ ﯼﺎﻫ ﻪﻤﮐﺩ`

:ﻢﯿﻨﮐﯽﻣ ﺐﯿﮐﺮﺗ ﻪﻤﮐﺩ/ﻪﺒﻌﺟ ﻥﺍﻮﻨﻋ ﻪﺑ ﺎﻫﺪﻧﻮﯿﭘ ﺶﯾﺎﻤﻧ ﯼﺍﺮﺑ ﺍﺭ CSS ﯽﮔﮋﯾﻭ ﻦﯾﺪﻨﭼ ﺎﻣ

`ﻝﺎﺜﻣ`

a:link, a:visited {
  background-color: #f44336;
  
color: white;
  padding: 14px 25px;
  text-align: center; 
  text-decoration: none;
  display: inline-block;
}
a:hover, a:active {
  background-color: red;
}

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

<!DOCTYPE html>
<html>
<head>
<style>
a:link, a:visited {
  background-color: #f44336;
  color: white;
  padding: 14px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

a:hover, a:active {
  background-color: red;
}
</style>
</head>
<body>

<h2>Link Button</h2>

<p>A link styled as a button:</p>
<a href="default.asp" target="_blank">This is a link</a>

</body>
</html>

`ﺮﺘﺸﯿﺑ ﯼﺎﻫ ﻪﻧﻮﻤﻧ`

`ﻝﺎﺜﻣ`

:ﺪﻫﺩ ﯽﻣ ﻥﺎﺸﻧ ﺍﺭ ﺎﻫ ﮏﻨﯿﻟ ﻪﺑ ﺮﮕﯾﺩ ﯼﺎﻫ ﮏﺒﺳ ﻥﺩﺮﮐ ﻪﻓﺎﺿﺍ ﻩﻮﺤﻧ ﻝﺎﺜﻣ ﻦﯾﺍ

 a.one:link {color: #ff0000;}
a.one:visited {color: #0000ff;}
a.one:hover 
  {color: #ffcc00;}
a.two:link {color: #ff0000;}
a.two:visited {color: 
  #0000ff;}
a.two:hover {font-size: 150%;}
a.three:link {color: 
  #ff0000;}
a.three:visited {color: #0000ff;}
a.three:hover {background: 
  #66ff66;}
a.four:link {color: #ff0000;}
a.four:visited {color: 
  #0000ff;}
a.four:hover {font-family: monospace;}
a.five:link {color: 
  #ff0000; text-decoration: none;}
a.five:visited {color: #0000ff; 
  text-decoration: none;}
a.five:hover {text-decoration: underline;}

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

<!DOCTYPE html>
<html>
<head>
<style>
a.one:link {color:#ff0000;}
a.one:visited {color:#0000ff;}
a.one:hover {color:#ffcc00;}

a.two:link {color:#ff0000;}
a.two:visited {color:#0000ff;}
a.two:hover {font-size:150%;}

a.three:link {color:#ff0000;}
a.three:visited {color:#0000ff;}
a.three:hover {background:#66ff66;}

a.four:link {color:#ff0000;}
a.four:visited {color:#0000ff;}
a.four:hover {font-family:monospace;}

a.five:link {color:#ff0000;text-decoration:none;}
a.five:visited {color:#0000ff;text-decoration:none;}
a.five:hover {text-decoration:underline;}
</style>
</head>
<body>

<h2>Styling Links</h2>

<p>Mouse over the links and watch them change layout:</p>

<p><b><a class="one" href="default.asp" target="_blank">This link changes color</a></b></p>
<p><b><a class="two" href="default.asp" target="_blank">This link changes font-size</a></b></p>
<p><b><a class="three" href="default.asp" target="_blank">This link changes background-color</a></b></p>
<p><b><a class="four" href="default.asp" target="_blank">This link changes font-family</a></b></p>
<p><b><a class="five" href="default.asp" target="_blank">This link changes text-decoration</a></b></p>

</body>
</html>

`ﻝﺎﺜﻣ`

:ﺪﻧﻮﯿﭘ ﻪﻤﮐﺩ/ﻪﺒﻌﺟ ﺩﺎﺠﯾﺍ ﻩﻮﺤﻧ ﺯﺍ ﯼﺮﮕﯾﺩ ﻝﺎﺜﻣ

 a:link, a:visited {
  background-color: white;
  color: black;
  
  border: 2px solid green;
  padding: 10px 20px;
  text-align: 
  center;
  text-decoration: none;
  display: inline-block;
}
a:hover, a:active 
  {
  background-color: green;
  color: white;
}

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

<!DOCTYPE html>
<html>
<head>
<style>
a:link, a:visited {
  background-color: white;
  color: black;
  border: 2px solid green;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

a:hover, a:active {
  background-color: green;
  color: white;
}
</style>
</head>
<body>

<h2>Link Button</h2>

<a href="default.asp" target="_blank">This is a link</a>

</body>
</html>

`ﻝﺎﺜﻣ`

:(ﺪﺷﺎﺑ ﺪﯿﻔﻣ ﺎﻫﺪﻧﻮﯿﭘ ﯼﺍﺮﺑ ﺪﻧﺍﻮﺗ ﯽﻣ) ﺪﻫﺩ ﯽﻣ ﻥﺎﺸﻧ ﺍﺭ ﺎﻤﻧ ﻥﺎﮑﻣ ﻒﻠﺘﺨﻣ ﻉﺍﻮﻧﺍ ﻝﺎﺜﻣ ﻦﯾ

 <span style="cursor: auto">auto</span><br>
<span style="cursor: 
  crosshair">crosshair</span><br>
<span style="cursor: 
  default">default</span><br>
<span style="cursor: e-resize">e-resize</span><br>
  <span style="cursor: help">help</span><br>
<span style="cursor: 
  move">move</span><br>
<span style="cursor: n-resize">n-resize</span><br>
  <span style="cursor: ne-resize">ne-resize</span><br>
<span style="cursor: 
  nw-resize">nw-resize</span><br>
<span style="cursor: 
  pointer">pointer</span><br>
<span style="cursor: progress">progress</span><br>
  <span style="cursor: s-resize">s-resize</span><br>
<span style="cursor: 
  se-resize">se-resize</span><br>
<span style="cursor: sw-resize">sw-resize</span><br>
  <span style="cursor: text">text</span><br>
<span style="cursor: 
  w-resize">w-resize</span><br>
<span style="cursor: wait">wait</span>

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

<!DOCTYPE html>
<html>
<body>

<h2>The cursor Property</h2>

<p>Mouse over the words to change the cursor.</p>
<span style="cursor:auto">auto</span><br>
<span style="cursor:crosshair">crosshair</span><br>
<span style="cursor:default">default</span><br>
<span style="cursor:e-resize">e-resize</span><br>
<span style="cursor:help">help</span><br>
<span style="cursor:move">move</span><br>
<span style="cursor:n-resize">n-resize</span><br>
<span style="cursor:ne-resize">ne-resize</span><br>
<span style="cursor:nw-resize">nw-resize</span><br>
<span style="cursor:pointer">pointer</span><br>
<span style="cursor:progress">progress</span><br>
<span style="cursor:s-resize">s-resize</span><br>
<span style="cursor:se-resize">se-resize</span><br>
<span style="cursor:sw-resize">sw-resize</span><br>
<span style="cursor:text">text</span><br>
<span style="cursor:w-resize">w-resize</span><br>
<span style="cursor:wait">wait</span><br>

</body>
</html>


  
    
      ← صفحه قبلی
    
    
      صفحه بعد →