آموزش pseudo classes در CSS

آموزش pseudo classes در CSS

 

در سایت ها میبینید در حین بردن موس بر روی اجزای صفحه وب سایت تغییراتی اعمال میشود. برای مثال رنگ تغییر میکند یا محو تر میشود یا بزرگ.

برای این کار نمونه کدی را به حالت زیر بنویسید.

 

<!DOCTYPE html>
<html>
<head>
  <title>lesson 5</title>
  <link rel="stylesheet" type="text/css" href="lesson5.css">
</head>
<body>
<p>1-farkiantech => info@farkiantech.com</p>
<p>i am a student</p>

<div>
  <p>p in div</p>
  <div>
    <span>
    <p>p in 2 div <a href="">click here</a></p>
    </span>
  </div>
</div>
<a href="">click here</a>

</body>
</html> 

 

div p{
  color: #ffffff; 
  font-size: 200%; 
  background-color: rgba(100,0,0,0.5);
}

div p a{
  color: white;
}

a{
  color: pink;
}

آموزش pseudo classess

برای اینکه دستور دهیم هر divی که موس بر روی آن رفت، تنظیماتی اعمال شود. برای اینکار مینویسیم div:hover{ }

 

div p{
  color: #ffffff; 
  font-size: 200%; 
  background-color: rgba(100,0,0,0.5);
}

div p a{
  color: white;
}

a{
  color: pink;
}

div:hover{
  background-color: yellow;
}

 

همچنین میتوانیم بر روی تگ آخر a تغییراتی اعمال کنیم.

در اول لینک به رنگ زرد تبدیل می شود، اگر بر روی لینک click کرده باشد.

 

a:visited{
  color: yellow;
}

 

اگر فقط موس را روی لینک ببرید بدون انجام click لینک به رنگ قرمز میشود.

 

a:hover{
  color: red;
}

 

و اگر میخواهید با موس روی لینک به حالت کلیک نگه دارید به رنگ سبز میشود.

 

a:active{
  color: green;
}

 

 

برای دیدن آموزش های بیشتر جزوات CSS را دنبال کنید.

 

قسمت قبل آموزش (آموزش Selectors در CSS)

ارسال دیدگاه

نشانی ایمیل شما منتشر نخواهد شد.