استفاده از (class) یا آی دی (id) در تنظیم لینک در css
گاهی مواقع در طراحی و برنامه نویسی صفحات وب، نیاز به این داریم که لینک های یک بخش و بلاک را از سایر بخش ها متمایز کنیم،
مثلا قسمت لینکدونی یا قسمت لینک دوستان را به رنگی متفاوت نشان دهیم،
در این مواقع تعریف لینک ها در حالت عادی و با تگ کلی a و href کاربرد ندارد،
چون این تگ ها فقط حالتی کلی و پیش فرض برای لینک هایی که هیچ کلاس یا آی دی برایشان تعریف نشده است را نشان می دهند،
لذا برای هر کلاس یا آی دی در css باید عناصر مربوط به a:link و زیر مجموعه آن را اضافه کنیم،
در زیر با مثالی می توانید به نحوه انجام این کار پی ببرید.
ابتدا استایلی برای کلاس تعریف می کنیم:
HTML:
<style type="text/css">
/*حالت عادی یک لینک*/
.link a:link{
font-family:Tahoma, Geneva, sans-serif;
font-size:12px;
color:[URL=http://www.iranjoman.com/usertag.php?do=list&action=hash&hash=06C]#06C[/URL]
text-decoration:none;
background-color:[URL=http://www.iranjoman.com/usertag.php?do=list&action=hash&hash=F90]#F90[/URL]
padding:4px;
}
/*حالت یک لینک دیده شده*/
.link a:visited{
color:[URL=http://www.iranjoman.com/usertag.php?do=list&action=hash&hash=C30]#C30[/URL]
}
/*حالت یک لینک فعال*/
.link a:hover{
color:[URL=http://www.iranjoman.com/usertag.php?do=list&action=hash&hash=FFF]#FFF[/URL]
text-decoration:blink;
background-color:[URL=http://www.iranjoman.com/usertag.php?do=list&action=hash&hash=999]#999[/URL]
}
/*حالت یک لینک در لحظه ای که روی آن کلیک می کنید*/
.link a:active{
background-color:[URL=http://www.iranjoman.com/usertag.php?do=list&action=hash&hash=999]#999[/URL]
}
</style>سپس آن کلاس را به بلاکی نسبت داده و لینک را درون آن قرار می دهیم:
HTML:
<div class="link">
<a href="http://www.iranjoman.com" title="skyboy" target="_self">آموزش css</a>
</div>با این کار لینک های موجود در این بلاک از کلاس آن پیروی کرده و ویژگی های آن را به خود می گیرند.
در زیر، کدی جهت نمونه گذاشتم که میتونید ذخیره کنید و ببینیدش.
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> تعریف استایل برای لینک در وب</title>
<style type="text/css">
body{
font-family:Tahoma, Geneva, sans-serif;
font-size:12px;
color:[URL=http://www.iranjoman.com/usertag.php?do=list&action=hash&hash=666]#666[/URL]
direction:rtl;
}
/*حالت عادی یک لینک*/
.link a:link{
font-family:Tahoma, Geneva, sans-serif;
font-size:12px;
color:[URL=http://www.iranjoman.com/usertag.php?do=list&action=hash&hash=06C]#06C[/URL]
text-decoration:none;
background-color:[URL=http://www.iranjoman.com/usertag.php?do=list&action=hash&hash=F90]#F90[/URL]
padding:4px;
}
/*حالت یک لینک دیده شده*/
.link a:visited{
color:[URL=http://www.iranjoman.com/usertag.php?do=list&action=hash&hash=C30]#C30[/URL]
}
/*حالت یک لینک فعال*/
.link a:hover{
color:[URL=http://www.iranjoman.com/usertag.php?do=list&action=hash&hash=FFF]#FFF[/URL]
text-decoration:blink;
background-color:[URL=http://www.iranjoman.com/usertag.php?do=list&action=hash&hash=999]#999[/URL]
}
/*حالت یک لینک در لحظه ای که روی آن کلیک می کنید*/
.link a:active{
background-color:[URL=http://www.iranjoman.com/usertag.php?do=list&action=hash&hash=999]#999[/URL]
}
</style>
</head>
<body>
<div class="link">
<a href="http://www.iranjoman.com" title="skyboy" target="_self">آموزشcss</a>
</div>
<br />
√ برای آشنایی با نحوه تغییر لینک، ماوس را روی آن برده و اندکی صبر کنید.
</body>
</html>