نکاتی درباره طراحی سایت چند زبانه
نکاتی درباره طراحی سایت چند زبانه
04/12/1395
چینش افقی متن
چینش افقی متن
05/12/1395
نمایش همه

استایل دادن به لینک ها

استایل دادن به لینک ها

آموزش استایل دادن به لینک ها

کلیه ویژگی های لینک ها را میتوانید با استفاده از CSS تغییر دهید. درمثال زیر به تگ a استایل داده ایم و رنگ آن را هم به قرمز تغییر دادیم. شما میتوانید برای استایل دادن به لینک ها از دستورات زیر استفاده کنید. استفاده کردن از لینک ها هنگام طراحی سایت توصیه میشود زیرا کاربر میتواند فرق بین متن و لینک را متوجه شود و روی آن  کلیک کند.

</p>
<p style="text-align: left;">&lt;!DOCTYPE html&gt;<br />
&lt;html&gt;<br />
&lt;head&gt;<br />
&lt;style&gt;<br />
a {<br />
color: #FF0000;<br />
}<br />
&lt;/style&gt;<br />
&lt;/head&gt;<br />
&lt;body&gt;</p>
<p>&lt;p&gt;&lt;b&gt;&lt;a href="sinaksite.com" target="_blank"&gt;This is a link&lt;/a&gt;&lt;/b&gt;&lt;/p&gt;</p>
<p>&lt;/body&gt;<br />
&lt;/html&gt;</p>
<p>

استایل دادن به لینک ها

شما علاوه بر اینکه میتوانید لینک ها مثل متن کلیه استایل ها را بدهید، همچنین میتوانید از استایل های زی هم استفاده کنید :

لینک در حالت عادی a:link
لینک در حالت که موس روی آن قرار دارد ولی کلیک نکرده a:hover
لینک در لحظه کلیک a:active
لینک در صورتی که قبلا کلیک شده باشد a:visited

</p>
<p>&lt;!DOCTYPE html&gt;<br />
&lt;html&gt;<br />
&lt;head&gt;<br />
&lt;style&gt;<br />
/* unvisited link */<br />
a:link {<br />
color: #FF0000;<br />
}</p>
<p>/* visited link */<br />
a:visited {<br />
color: #00FF00;<br />
}</p>
<p>/* mouse over link */<br />
a:hover {<br />
color: #FF00FF;<br />
}</p>
<p>/* selected link */<br />
a:active {<br />
color: #0000FF;<br />
}<br />
&lt;/style&gt;<br />
&lt;/head&gt;<br />
&lt;body&gt;<br />
&lt;a href="sinaksite.com"&gt;link&lt;/a&gt;<br />
&lt;/body&gt;<br />
&lt;/html&gt;</p>
<p>

استایل دادن به لینک ها
دقت کنید که حالت hover باید بعد از link و حالت active باید بعد ازhover قرار بگیرد.
دیگر استایل های تعریف شده در CSS برای لینک ها :

text-decoration :

از این خاصیت اکثرا برای برداشتن زیر خط یعنی همان Underline تگ a استفاده می شود.

 

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

<p><b><a href=”sargonco.com” 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 استایل داده ایم :

 

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

a:visited {
background-color: #FFFF85;
}

a:hover {
background-color: #FF704D;
}

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

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