لینک ها (Links)
«لینک ها (Links)» همان دکمه های رفتن به صفحه دیگرند. با CSS می توانیم ظاهرشان را عوض کنیم؛ مثل رنگ، پس زمینه و حالت ها. مثل دکمه های بازی که با لمس، رنگشان تغییر می کند.
استایل دهی لینک ها با CSS
می توانی برای لینک ها رنگ، پس زمینه و ضخامت فونت بگذاری.
a {
color: hotpink;
background-color: yellow;
font-weight: bold;
}
استایل بر اساس حالت لینک
هر لینک چهار «حالت (State)» دارد: :link، :visited، :hover و :active. ترتیب مهم است: اول :link و :visited، بعد :hover، سپس :active.
a:link {
color: red;
}
a:visited {
color: green;
}
a:hover {
color: hotpink;
}
a:active {
color: blue;
}
حذف زیرخط لینک ها
با ویژگی «تزئین متن (text-decoration)» می توان زیرخط را مدیریت کرد.
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: underline;
}
پس زمینه برای لینک ها
با «background-color» می توانی برای هر حالت رنگ پس زمینه جدا بدهی.
a:link {
background-color: yellow;
}
a:visited {
background-color: cyan;
}
a:hover {
background-color: lightgreen;
}
a:active {
background-color: hotpink;
}
ساخت دکمه از لینک ها
با چند ویژگی ساده، لینک را شبیه دکمه کن.
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;
}
نمونه دوم با کادر سبز و تغییر رنگ در هاور:
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;
}
نمونه های بیشتر
چند ایده سریع برای رنگ، اندازه فونت، پس زمینه و زیرخط:
a.one:link {
color: red;
}
a.one:visited {
color: blue;
}
a.one:hover {
color: orange;
}
a.two:link {
color: red;
}
a.two:visited {
color: blue;
}
a.two:hover {
font-size: 150%;
}
a.three:link {
color: red;
}
a.three:visited {
color: blue;
}
a.three:hover {
background: lightgreen;
}
a.four:link {
color: red;
}
a.four:visited {
color: blue;
}
a.four:hover {
font-family: monospace;
}
a.five:link {
color: red;
text-decoration: none;
}
a.five:visited {
color: blue;
text-decoration: none;
}
a.five:hover {
text-decoration: underline;
}
نمونه اشاره گر ماوس
گاهی «اشاره گر (cursor)» را هم تغییر بده تا کلیک پذیری روشن تر شود.
<span style="cursor: auto">auto<\/span><br>
<span style="cursor: crosshair">crosshair<\/span><br>
<span style="cursor: default">default<\/span><br>
<span style="cursor: e-resize">e-resize<\/span><br>
<span style="cursor: help">help<\/span><br>
<span style="cursor: move">move<\/span><br>
<span style="cursor: n-resize">n-resize<\/span><br>
<span style="cursor: ne-resize">ne-resize<\/span><br>
<span style="cursor: nw-resize">nw-resize<\/span><br>
<span style="cursor: pointer">pointer<\/span><br>
<span style="cursor: progress">progress<\/span><br>
<span style="cursor: s-resize">s-resize<\/span><br>
<span style="cursor: se-resize">se-resize<\/span><br>
<span style="cursor: sw-resize">sw-resize<\/span><br>
<span style="cursor: text">text<\/span><br>
<span style="cursor: w-resize">w-resize<\/span><br>
<span style="cursor: wait">wait<\/span>
گام های عملی
- منتخب لینک را بنویس.
- رنگ و زیرخط را تنظیم کن.
- حالت ها را به ترتیب درست بچین.
- برای دکمه، padding و پس زمینه بده.
نکته: ترتیب حالت ها را فراموش نکن. :hover باید بعد از :link و :visited بیاید؛ :active هم بعد از :hover.
جمع بندی سریع
- لینک ها قابل استایل هستند.
- ترتیب حالت ها بسیار مهم است.
- برای دکمه شدن، padding و display بده.
- زیرخط را کنترل کن؛ هاور را واضح کن.
آیکون ها را ببین؛ گاهی لینک با آیکون بهتر دیده می شود. همچنین صفحه کوتاه نویسی فونت برای هماهنگی تایپ مفید است.