تماس با ما

موبایل: 2565 038 0912

دفتر تهران: 2565 2842 021

دفتر گرگان: 2565 3233 017


در ادامه مباحث آموزشی استایل نویسی با css، نوبت به آشنایی با خواص کاربردی این زبان در نحوه تنظیم لینک های وب است، حتما در صفحات مختلف در اینترنت با اینگونه لینک ها آشنا هستید که با بردن نشانه گر(ماوس) روی آنها به فرض رنگ متن لینک تغییر می کند و یا پس از دیدن یک لینک، به رنگی دیگر نشان داده می شود، جالب است اگر بدانید تمام این ویژگی ها با کمک css خلق می شوند و این چیزی است که در ادامه آموزش به آن خواهیم پرداخت، یادآور می شویم که مطالب مطرح شده سلسله وار به هم مرتبط هستند، لذا اگر نکته ای به نظرتان مبهم است، لطفا قبل از طرح سوال، به آموزش های پیشین مراجعه کنید.
تعریف یک لینک در html


<a href="http://sefaresh.net" title="سفارش دات نت" target="_self" class="your-css-class" id="your-css-id">آموزش برنامه نویسی و مهارتهای وب</a>


همانطور که قبلا گفتیم، css به خودی خود کاربردی ندارد و در کنار تگ های html است که قدرت آن مشخص می شود، لذا وقتی صحبت از تنظیم لینک در css است، باید ابتدا ببینیم که اصلا لینک در html چگونه تعریف می شود؛ یک لینک (hyperlink) در html با تگ href و a تعریف می شود و با افزودن کلاس (class) یا آی دی (id) به آن، یا قرار دادن لینک، درون یک بلاک دیگر که از (class) و آی دی (id) در css پیروی می کند، با خواص ظاهری تنظیم می شود که در زیر نمونه ای از کاربرد آن را ملاحظه می کنید.

تعریف خواص لینک در css


<style type="text/css">
/*حالت عادی یک لینک*/
a:link{
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    color:#06C;
    text-decoration:none;
}
/*حالت یک لینک دیده شده*/
a:visited{
    color:#C30;
}
/*حالت یک لینک فعال*/
a:hover{
    color:#990;
}
/*حالت یک لینک در لحظه ای که روی آن کلیک می کنید*/
a:active{
    background-color:#999;
}
</style>


در css خواص لینک را درون کلاس ها یا آی دی ها تعریف می کنند، یک لینک در وب به طور معمول درچند حالت مختلف می تواند عملکرد مختلف داشته باشد، مثلا در حالت عادی که ماوس را روی آن نبرده اید، ممکن است رنگ آن به فرض آبی باشد، اما پس از اینکه ماوس را برای کلیک کردن روی آن می برید به رنگ دیگری درآید، یا پس از دیدن صفحه مربوط به آن لینک، رنگ آن به صورت ثابتی تغییر کند، همچنین در لحظه ای که بر روی یک لینک کلیک می کنید، ظاهری متفاوت داشته باشد، به هر صورت تمام این ویژگی ها در css با عناصر مربوط به لینک های به اصطلاح اینتراکتیو قابل ایجاد شدن هستند، این عناصر عبارتند از: a یا a:link برای حالت عادی، a:visited برای حالتی که صفحه مربوط به آن لینک دیده شده است، a:hover برای حالتی که ماوس را روی لینک می برید و a:active برای لحظه ای که روی آن لینک کلیک می کنید، به کاربرد این ویژگی ها در مثال زیر دقت کنید.
توضیح:
- دقت کنید که عناصر مربوط به لینک باید به ترتیب ذکر شده در مثال بالا پشت سر هم و به ترتیب تعریف شوند، در غیر اینصورت ویژگی های مورد نظر عمل نخواهند کرد.
- به جزء حالت a:link، استفاده از سایر ویژگی ها اختیاری است و بستگی به هدف و سلیقه شما دارد.
استفاده از text-decoration در تنظیم css لینک
اکثر مرورگرها در حالت پیش فرض، زیر لینک (hyperlink) های وب خطی افقی را ترسیم می کنند که شاید از لحاظ ظاهری جلوه خوبی نداشته باشد، خوشبختانه در css عنصری به نام text-decoration وجود دارد که به کمک آن و با افزودن مقادیر none، می توان لینک هایی با ظاهری بهتر ایجاد کرد، مقادیری که به text-decoration مربوط می شوند عبارتند از: blink برای لینک های چشمک زن، line-through برای ایجاد لینکی که روی آن خط کشیده شده یا خطی از وسط آن گذشته است، none برای حالت عادی، overline برای حالتی که خطی در قسمت بالای لینک ظاهر می شود و underline برای حالتی که خطی در زیر لینک وجود دارد، به مثال زیر توجه کنید.


<style type="text/css">
/*حالت عادی یک لینک*/
a:link{
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    color:#06C;
    text-decoration:underline;
}
/*حالت یک لینک دیده شده*/
a:visited{
    color:#C30;
}
/*حالت یک لینک فعال*/
a:hover{
    color:#990;
    text-decoration:blink;
}
/*حالت یک لینک در لحظه ای که روی آن کلیک می کنید*/
a:active{
    background-color:#999;
}
</style>


توضیح:
- اگر از استایل بالا در صفحه خود استفاده کنید، با نگه داشتن ماوس روی لینک، علاوه بر اینکه رنگ آن تغییر می کند، پس از اندک زمانی شروع به چشمک زدن می نماید.
- همانطور که ملاحظه می کنید، برخی خواص لینک ها در قسمت اول یعنی a:link تعریف می شوند و در عناصر بعدی نیازی به تعریف مجدد آنها نیست (و از همان تنظیمات پیروی می کنند)، مانند font-family یا font-size در مثال بالا.
استفاده از color و background-color در تنظیم css لینک

مثل کلاس ها و آی دی ها در css، تگ های خاصی مانند a و href نیز می توانند با ویژگی های مربوط به رنگ و پس زمینه تنظیم شوند و این نمودی از انعطاف پذیری بالای css است، به دلیل اینکه در این رابطه پیش تر و در آموزش های گذشته به طور مفصل صحبت کرده ایم، در اینجا به ذکر یک مثال بسنده می کنیم.


<style type="text/css">
/*حالت عادی یک لینک*/
a:link{
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    color:#06C;
    text-decoration:none;
    background-color:#F90;
    padding:4px;
}
/*حالت یک لینک دیده شده*/
a:visited{
    color:#C30;
}
/*حالت یک لینک فعال*/
a:hover{
    color:#FFF;
    text-decoration:blink;
    background-color:#999;
}
/*حالت یک لینک در لحظه ای که روی آن کلیک می کنید*/
a:active{
    background-color:#999;
}
</style>


استفاده از (class) یا آی دی (id) در تنظیم لینک در css

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


<style type="text/css">
/*حالت عادی یک لینک*/
.link a:link{
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    color:#06C;
    text-decoration:none;
    background-color:#F90;
    padding:4px;
}
/*حالت یک لینک دیده شده*/
.link a:visited{
    color:#C30;
}
/*حالت یک لینک فعال*/
.link a:hover{
    color:#FFF;
    text-decoration:blink;
    background-color:#999;
}
/*حالت یک لینک در لحظه ای که روی آن کلیک می کنید*/
.link a:active{
    background-color:#999;
}
</style>


سپس آن کلاس را به بلاکی نسبت داده و لینک را درون آن قرار می دهیم:


<div class="link">
<a href="http://sefaresh.net" title="سفارش دات نت" target="_self">سفارش دات نت| آموزش برنامه نویسی و مهارتهای وب</a>
</div>

با این کار لینک های موجود در این بلاک از کلاس آن پیروی کرده و ویژگی های آن را به خود می گیرند.


سفارش طراحی سایت

سفارش طراحی سایت

google
yahoo
alexa
ebook
Baidu.com
Wikipedia
Blogger.com
Windows Live
Amazon.com
eBay
Bing
Ask
استانداری گلستان
f shdj, sefaresh, sefaresh .net, sefaresh.net, sthva, sthva nhj kj, sthva.kj, stthva.kj, xvhpd, آیفون, استفاده, اندروید, اپل, اپلیکیشن, اینترنت, باتری, بازار, دستگاه, دوربین, سامسونگ, سفارش, سفارش دات نت, سفارش دات نت sefaresh.net, سفارش.نت, سیستم, طراح وب, طراحي وب سايت, طراحی, طراحی وب سایت, فناوری, فیسبوک, مایکروسافت, موبایل, هوشمند, کاربران, کمپانی, گلکسی, گوشی, گوشی هوشمند, گوگل

نمایش تمامی تگ ها
بسته ویژه مدارس مدارس
بسته ویژه پزشکان پزشکان
بسته ویژه مهندسین مهندسین