پیش نیاز:
به عنوان پیش نیاز شما باید تنظیمات ابتدایی لینک ها را یاد گرفته باشید بریم؟
باز کردن لینک در صفحه ی جدید
اگر میخواهید هنگامی که کاربر روی لینک شما کلیک میکند به صفحه ای جدا از صفحه وب شما برود میتوانید از این دستور استفاده کنید .برای بازشدن لینک در صفحه ی جدید لینک دهی را به صورت زیر انجام دهید.
<a herf="http://exprogramming.blog.ir" target=_blank">
مقدار blank باعث میشود که به صفحه دیگری منتقل شود
استایل دهی به لینک ها
به کمک css میتوانید لینک های خود را شخصی سازی کنید.
برای اینکار در فایل css خود تغییرات را اعمال می کنیم ، شما میتوانید از تمامی خاصیت های css برای لینک هم استفاده کنید ، پس همه چیز به شما و خلاقیت شما بستگی دارد.
a {
خاصیت مورد نظر
}
به عنوان مثال ، برای تغییر رنگ لینک ها میتوانید به صورت زیر عمل کنید
a {
color: red;
}
اگر این کار را انجام دهید لینک شما به رنگ زرد در می آید
تنظیمات وضعیت لینک ها
چهار وضعیت در لینک ها وجود دارد:
- a:link - یک لینک مشاهده نشده.
- a:visited - لینکی که قبلا توسط کاربر مشاهده شده.
- a:hover - حالتی از لینک زمانی که ماوس روی آن باشد.
- a:active - حالتی از لینک در لحظه کلیک شدن.
/* unvisited link */
a:link {
color: blue;
}
/* visited link */
a:visited {
color: hotpink;
}
/* mouse over link */
a:hover {
color: green;
}
/* selected link */
a:active {
color: red;
}
اما برای این موارد ترتیبی وجود دارد که باید رعایت کنید :
- a:hover باید بعد از a:link و a:visited قرار گیرد.
- a:active باید بعد از a:hover قرار گیرد.
حذف کردن خط زیر لینک
برای اینکار از دستور زیر استفاده کنید، این خاصیت را میتوان برای همه ی لینک ها یا برای لینک هایی مشخص تعیین کرد
a {
text-decoration: none;
}
برای اینکه خط زیرلینک باشد به جای none از underline استفاده کنید
تنظیم رنگ پس زمینه لینک ها
برای اینکار از خاصیت background-color استفاده می کنیم
a:link {
background-color: pink;
}
a:visited {
background-color: cyan;
}
a:hover {
background-color: lightgreen;
}
a:active {
background-color: lightblue;
}
ممنون از اینکه در این آموزش هم همراه با ما بودید پیگیر مطالب بعدی ما باشید، اگر سوال ، نظر یا انتقادی دارید لطفا از طریق نظرات به ما اعلام کنید
مطالب مرتبط با این موضوع:
