Donya IT

دنیا آی تی - donyait

دنیایی متفاوت از آی‌تی را با دنیا آی‌تی تجربه کنید

استایل‌دهی به لینک ها در CSS

۹۶/۰۵/۰۶

لینک ها در CSS می‌توانند ویژگی های مختلفی از جمله color, font-family, background و ... را داشته باشند. در ادامه با این ویژگی ها آشنا خواهیم شد...

 

همچنین لینک ها می‌توانند براساس حالتی که در آن هستند استایل های مختلفی به خود بگیرند. چهار حالت که لینک ها از آنها پیروی می‌کنن عبارتند از:

a:link لینک در حالت عادی و مشاهده‌نشده.

a:visited  لینکی که کابر مشاهده کرده است.

a:hover لینکی که کابر ماوس را بر روی ان برده است.

a:active  لینک در لحظه‌ای که بر روی آن کلیک می‌شود.

 

مثال:

<style>
/* حالت عادی */
a:link {
    color: red;
}

/* لینک مشاهده شده */
a:visited {
    color: green;
}

/* ماوس روی لینک */
a:hover {
    color: hotpink;
}

/* لینک در لحظه کلیک */
a:active {
    color: blue;
}
</style>

مشاهده نمونه کد بالا

هنگامی که می‌خواهید چند حالت را برای لینک تنظیم کنید باید چند نکته را راعایت کنید، در غیر این صورت کد ها کار نخواهند کرد:

a:hover باید بعد از a:link و a:visited نوشته شود.
a:active حتما باید بعد از a:hover نوشته شود.

 

ویزگی Text Decoration

این ویژگی بیشتر برای حذف underline (زیرخط ؟!) از لینک ها استفاده می‌شود.

<style>
a:link {
    text-decoration: none;
}
a:visited {
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
a:active {
    text-decoration: underline;
}
</style>

مشاهده نمونه کد بالا

 

ویژگی Background Color

با استفاده از این ویژگی می‌توان رنگ پس‌زمینه لینک ها را تغییر داد.

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

 

مشاهده نمونه کد بالا

 

تا اینجا با روش استایل دادن به لینک ها به صورت ساده آشنا شدیم. حالا چند تا ویژگی رو با هم مخلوط میکنیم!

 

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

مشاهده نمونه کد بالا

 

حالا یکم پیچیده تر!

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

مشاهده نمونه کد بالا

 

اینم یه نمونه دیگه:

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

مشاهده نمونه کد بالا

 

نظرات (۰)

هیچ نظری هنوز ثبت نشده است
ارسال نظر آزاد است، اما اگر قبلا در بیان ثبت نام کرده اید می توانید ابتدا وارد شوید.
شما میتوانید از این تگهای html استفاده کنید:
<b> یا <strong>، <em> یا <i>، <u>، <strike> یا <s>، <sup>، <sub>، <blockquote>، <code>، <pre>، <hr>، <br>، <p>، <a href="" title="">، <span style="">، <div align="">