آموزش سی اس اس CSS

با کمک سی اس اس میتوانیم لینک ها را به صورت های مختلف استایل بدهیم.

Styling Links

با کمک پراپرتی های سی اس اس میتوان لینک ها را استایل داد مانند color، font-family، background، و ...

 
a {
    color: hotpink;
}
 

علاوه براین، میتوان براساس حالت لینکها، به آنها استایل داد.

لینک ها چهار حالت دارند:

• 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;
}
 

زمانی که به حالتهای لینک استایل میدهید باید یکسری قوانین را رعایت کنید:

• a:hover باید بعد از a:link و a:visited بیاید
• a:active باید بعد از a:hover بیاید

Text Decoration

پراپرتی text-decoration بیشتر برای حذف آندرلاین لینک استفاده میشود:

 
a:link {
    text-decoration: none;
}
a:visited {
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
a:active {
    text-decoration: underline;
}
 

Background Color

پراپرتی background-color میتواند برای تعیین رنگ پس زمینه لینک مورد استفاده قرار گیرد:

 
a:link {
    background-color: yellow;
}
a:visited {
    background-color: cyan;
}
a:hover {
    background-color: lightgreen;
}
a:active {
    background-color: hotpink;
}
 

Advanced - Link Buttons

در مثال زیر پراپرتی های مختلف سی اس اس را با هم ترکیب کردیم تا لینک را شبیه به دکمه نمایش بدهیم:

 
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;
}
 

This is a link