آموزش CSS

آموزش CSS - لینک ها

لینک یا هایپرلینک ارتباطی از یک منبع وب به منبع دیگر است.

سبک دهی لینک ها به کمک CSS:

خوب همانطور که می دانید هر لینکی چهار حالت مختلف دارد:

  • link( لینک)
  • visited( بازدید شده)
  • Active( فعال)
  • Hover

این چهار حالت لینک یا هایپرلینک را می توان از طریق خصوصیت ها CSS و به کمک pseudo-classes المان انکر بسته به حالتی که در آن قرار دارند سبک دهی کرد. برای تعریف سبک های مختلف حالت های هایپرلینک می توانید از موارد زیر استفاده کنید:

  • a:link- سبک لینک های معمولی یا بازدید نشده را تنظیم می کند که هنوز نشانگر موس بر روی آن قرار نگرفته است.
  • a:visited- سبک لینک هایی را تعریف می کند که مورد بازدید کاربر قرار گرفته اما نشانگر موس بر روی آن نیست.
  • a:hover- این گزینه نیز زمانی مورد استفاده قرار می گیرد که کاربر نشانگر موس را بر روی لینک نگه داشته است.
  • a:active- سبک لینک هایی را تعریف می کند که در فرایند کلیک شدن بر روی آن قرار دارند.

شما می توانید هر کدام از خصوصیت های CSS همچون رنگ، خانواده فونت و بک گراند را برای هر کدام از این انتخابگرها تنظیم کنید.

a:link {    /* unvisited link */
    color: #FF0000;
    text-decoration: none;
}
a:visited {    /* visited link */
    color: #00FF00;
}
a:hover {    /* mouse over link */
    color: #FF00FF;
    text-decoration: underline;
}
a:active {    /* active link */
    color: #0000FF;
}

به خاطر داشته باشید که ترتیب تنظیم سبک برای حالت های متعدد لینک از اهمیت بسیار بالایی برخوردار است.

نکته: ترتیب pseudo classes باید به صورت زیر باشد تا بتواند به درستی کار کند:
:link, :visited, :hover, :active, :focus

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

در بیشتر مرورگرهای وب، اگر سبک خاصی برای لینک ها انتخاب نشده باشد، لینک هایی که بر روی صفحات وب وجود دارند زیر خط دار هستند و از رنگ پیش فرض مرورگر استفاده می کنند. به عنوان مثال،رنگ پیش فرض لینک برای مرورگرهایی همچون فایرفاکس آبی برای لینک های بازدید نشده، بنفش برای لینک های بازدید شده و قرمز برای لینک های فعال است.

تنظیم رنگ برای لینک ها:

به مثالی که در ادامه بیان می شود دقت کنید:

a:link {    /* unvisited link */
    color: #FF0000;
}
a:visited {    /* visited link */
    color: #00FF00;
}
a:hover {    /* mouse over link */
    color: #FF00FF;
}
a:active {    /* active link */
    color: #0000FF;
}

حذف زیر خط پیش فرض از لینک ها:

خصوصیت text-decoration در زبان برنامه نویسی CSS به طور کلی برای حذف زیرخط از لینک مورد استفاده قرار می گیرد. نمونه زیر نحوه حذف این خط ها را به کمک خصوصیت text-decoration نشان می دهد:

a:link {    /* unvisited link */
    color: #FF0000;
    text-decoration: none;
}
a:visited {    /* visited link */
    color: #00FF00;
    text-decoration: none;
}
a:hover {    /* mouse over link */
    color: #FF00FF;
    text-decoration: underline;
}
a:active {    /* active link */
    color: #0000FF;
    text-decoration: underline;
}
در صورتی که سوال و یا نظری دارید، از بخش نظرات با ما در میان بگذارید.

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد

شما چه نظر و یا سوالی درباره این نوشته دارید؟

مبحث آموزشی

آموزش CSS

Learn CSS

پرســیدن سؤال جدید

سؤال های تخصصی خود را از ما بپرسید

دنبال کردن تلگرام کانال سافت اسکیل

https://telegram.me/softskill_ir

عملیات کاربران

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد

کلیک کنید و سوالات خود را از ما بپرسید
لطفا فرم سوال را پر کنید

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

لطفا چند لحظه منتظر بمانید ...