آموزش Link ها در CSS

در این جلسه به آموزش Link ها در CSS خواهیم پرداخت, لطفا قبل از مشاهده این جلسه ابتدا جلسه ی قبل را از این لینک مشاهده کنید.

قبل از هر چیز اجازه دهید مروری داشته باشیم بر اینکه تگ a در html چیست و چگونه مورد استفاده قرار می گیرد؟ سپس وارد مبحث آموزشی این جلسه خواهیم شد.

تگ a در HTML

تگ a که از کلمه ( Anchor ) گرفته شده است، تگی است که ما با استفاده از آن میتوانیم یک لینک را در یک صفحه ی وب ایجاد نماییم. و این لینک میتواند کاربر را از یک صفحه به صفحه ی دیگر در یک وبسایت یا در کل فضای اینترنت منتقل نماید.

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

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

لینک ها را می توان با هر خاصیت CSS ی سبک دهی کرد از جمله ی آن میتوان رنگ, نوع فونت و پس زمینه را نام برد .

مثال

a {
 color: #FF0000;
}

به علاوه این امکان وجود دارد که لینک ها را بسته به state (حالتی) که در آن قرار دارند, به گونه ای متفاوت سبک دهی کرد .

چهار حالت مختلف برای لینک در زیر فهرست شده

• alink – لینکی معمولی که هنوز مورد بازدید قرار نگرفته است.
• avisited – لینکی که کاربر از آن بازدید کرده است.
• ahover – حالتی که در آن مکان نمای موس روی لینک قرار گرفته است.
• aactive – در این حالت کاربر روی لینک مورد نظر کلیک کرده.

مثال

/* unvisited link */
alink {
 color: #FF0000;
}
/* visited link */
avisited {
 color: #00FF00;
}
/* mouse over link */
ahover {
 color: #FF00FF;
}
/* selected link */
aactive {
 color: #0000FF;
}

زمانی که سبک دلخواه را برای چندین حالت متعدد لینک انتخاب می کنید, قوانینی در رابطه با ترتیب وجود دارد که باید از آن ها پیروی کنید

• ahover باید حتما پس از alink و avisited قرار گیرد.
• aactive باید پس از ahover بیاید

سبک های معمول لینک

در مثال فوق لینک مربوطه بسته به حالت (state) که در آن قرار دارد, رنگ عوض می کند . در این بخش به دیگر شیوه های معمول در سبک دهی به لینک ها خواهیم پرداخت افزودن جلوه های بصری به لینک ها (decoration Text) خاصیت decoration-text غالبا به منظور حذف زیرخط ها (underline) از لینک ها مورد استفاده قرارمی گیرد.

مثال

alink {
 text-decoration:none;
}
avisited {
 text-decoration: none;
}
ahover {
 text-decoration: underline;
}
aactive {
 text-decoration: underline;
}

آموزش Link ها در CSS

رنگ پس زمینه (background color)

خاصیت background-color رنگ پس زمینه ی لینک ها را تعیین می کند

مثال

alink {
 background-color: #B2FF99;
}
avisited {
 background-color: #FFFF85;
}
ahover {
 background-color: #FF704D;
}
aactive {
 background-color: #FF704D;
}

آموزش Link ها در CSS

ممنون که در این جلسه هم با ما همراه بودید. در این جلسه به یادگیری آموزش Link ها در CSS پرداخته شد. در جلسه ی آینده نیز به نکات کلیدی و پرکاربردی خواهیم پرداخت. پس حتما با ما همراه باشید و جلسات آینده را از دست ندهید! برای تمرین هر جلسه میتوانید به وبسایت جهانی W3C مراجعه نمایید. تمرین مستمر همواره تاثیر بسیار خوب و مهمی در یادگیری و تقویت مهارت های شما دارد پس حتما آن را جدی بگیرید