parsgreen.com
article

نحوه تنظیم لینک (link) در استایل css

css-link-style

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

تعریف یک لینک در html


همانطور که قبلا گفتیم، css به خودی خود کاربردی ندارد و در کنار تگ های html است که قدرت آن مشخص می شود، لذا وقتی صحبت از تنظیم لینک در css است، باید ابتدا ببینیم که اصلا لینک در html چگونه تعریف می شود؛ یک لینک (hyperlink) در html با تگ href و a تعریف می شود و با افزودن کلاس (class) یا آی دی (id) به آن، یا قرار دادن لینک، درون یک بلاک دیگر که از (class) و آی دی (id) در css پیروی می کند، با خواص ظاهری تنظیم می شود که در زیر نمونه ای از کاربرد آن را ملاحظه می کنید.
<a href="http://webgoo.ir" title="وبگو" target="_self" class="your-css-class" id="your-css-id">وبگو | آموزش برنامه نویسی و مهارتهای وب</a>

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


در css خواص لینک را درون کلاس ها یا آی دی ها تعریف می کنند، یک لینک در وب به طور معمول درچند حالت مختلف می تواند عملکرد مختلف داشته باشد، مثلا در حالت عادی که ماوس را روی آن نبرده اید، ممکن است رنگ آن به فرض آبی باشد، اما پس از اینکه ماوس را برای کلیک کردن روی آن می برید به رنگ دیگری درآید، یا پس از دیدن صفحه مربوط به آن لینک، رنگ آن به صورت ثابتی تغییر کند، همچنین در لحظه ای که بر روی یک لینک کلیک می کنید، ظاهری متفاوت داشته باشد، به هر صورت تمام این ویژگی ها در css با عناصر مربوط به لینک های به اصطلاح اینتراکتیو قابل ایجاد شدن هستند، این عناصر عبارتند از: a یا a:link برای حالت عادی، a:visited برای حالتی که صفحه مربوط به آن لینک دیده شده است، a:hover برای حالتی که ماوس را روی لینک می برید و a:active برای لحظه ای که روی آن لینک کلیک می کنید، به کاربرد این ویژگی ها در مثال زیر دقت کنید.
<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>
توضیح:
- دقت کنید که عناصر مربوط به لینک باید به ترتیب ذکر شده در مثال بالا پشت سر هم و به ترتیب تعریف شوند، در غیر اینصورت ویژگی های مورد نظر عمل نخواهند کرد.
- به جزء حالت 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://webgoo.ir" title="وبگو" target="_self">وبگو | آموزش برنامه نویسی و مهارتهای وب</a>
</div>
با این کار لینک های موجود در این بلاک از کلاس آن پیروی کرده و ویژگی های آن را به خود می گیرند.

پیش نمایش آنلاین


در زیر، کدی جهت نمونه و پیش نمایشی از آن را می توانید به صورت آنلاین مشاهده کنید.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>وبگو | تعریف استایل برای لینک در وب</title>
<!-- http://webgoo.ir -->
<style type="text/css">
body{
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    color:#666;
    direction:rtl;
}
/*حالت عادی یک لینک*/
.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>
</head>
<body>
<div class="link">
<a href="http://webgoo.ir" title="وبگو" target="_self">وبگو | آموزش برنامه نویسی و مهارتهای وب</a>
</div>
<br />
&radic; برای آشنایی با نحوه تغییر لینک، ماوس را روی آن برده و اندکی صبر کنید.
</body>
</html>
پیش نمایش
sectionدسته بندی: آموزش مقدماتی » CSS
related مطالب بیشتر:
» آشنایی با کلاس (class) و آی دی (id) در css
» کاربرد خاصیت height و width در css
» کار با ویژگی position و float در CSS
» نحوه تنظیم لیست با تگ ul li در css
» کار با border و outline در css
commentنظرات (۱۸ یادداشت برای این مطلب ارسال شده است)
نویسنده: رضا
زمان: ۰۲:۲۶:۰۴ - تاریخ: ۱۳۹۱/۰۳/۱۸
خیلی مردی دمت گرم
نویسنده: اسدی
زمان: ۰۱:۰۵:۰۳ - تاریخ: ۱۳۹۱/۱۰/۱۴
عالی بود
نویسنده: حسنلو
زمان: ۱۰:۵۴:۰۵ - تاریخ: ۱۳۹۱/۱۲/۱۵
با سلام
میخواستم کناره هایه صفحه سایتم رو مثل سایت شما درست کنم می تونید راهنماییم کنید چطور انجامش بدم
پاسخ: 
سلام
آموزش انجام این کار را در این قسمت نمی توان ارائه کرد، باید از مقدمات با css آشنا شوید و تکنیک های طراحی وب با فتوشاپ را نیز فرابگیرید.
نویسنده: محمود
زمان: ۱۳:۱۹:۵۱ - تاریخ: ۱۳۹۲/۰۴/۱۰
سلام خسته نباشید
برای اینکه در استایل تگ <li> رو به صورت کامل لینک دار کنیم باید چه کاری انجام داد؟
چون زمانی که به تگ a خاصیت padding می دهم به هم می ریزد.
با تشکر
پاسخ: 
سلام
برای ایجاد لینک در تگ li کافی است از تگ a درون آن استفاده کنید، منتها برای تنظیم استایل CSS بنا بر هدف خود می توانید از مواردی مانند display با مقدار block یا سایر خاصیت های CSS استفاده کنید.
در واقع اینکه چگونه نحوه نمایش ظاهری عنصر را تنظیم کنید، به میزان آشنایی شما با CSS و آزمایش و خطای خاصیت های مختلف برمی گردد.
نویسنده: محمود
زمان: ۱۷:۰۲:۵۴ - تاریخ: ۱۳۹۲/۰۴/۱۰
تشکر از پاسخ. اما منظورم کل li لینک دار شود که برعکس گفته ی شما تگ li را درون a قرار دهیم.
صورت کامل سوال بنده:
ببینید در وردپرس با نوشتن این کد:
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('left')): ?>
<?php endif; ?>
ابزارک مورد نظر فراخوانی میشه. به صورت مشخص ما استایل ها را می نویسیم، اما دسترسی به کد اصلی نداریم که بتوانیم تگ li را در a قرار دهیم. در اینصورت باید چه کاری انجام داد؟
با تشکر
پاسخ: 
چه تگ a را درون li قرار دهید و چه برعکس، در نهایت نیاز به تنظیم استایل CSS آنها خواد بود، اما مشکل در اینجا این نیست! همان طور که اشاره کردید، مشکل عدم دسترسی به قسمت ایجاد خروجی است، یعنی خروجی توسط یک تابع تولید می شود، لذا ویرایش هم باید درون آن تابع صورت گیرد، به عبارت دیگر سورس اصلی کدها در جای دیگری قرار دارد، متاسفانه CMS وردپرس جهت تست در سیستم ما نصب نیست، باید خودتان فایل های مربوط به این تابع را پیدا و آنها را ویرایش کنید.
نویسنده: reyhaneh
زمان: ۱۴:۳۸:۰۹ - تاریخ: ۱۳۹۲/۰۶/۱۶
سلام واقعا ممنون از سایت خوبتون... فقط چه جوری در حال کلیک کردن روی لینک چجوری رنگ متن تغییر کنه؟؟ این رنگ کادر رو تغییر میده
پاسخ: 
سلام
استایل CSS ذکر شده صرفا یک نمونه است، می توانید از خاصیت background-color استفاده نکنید.
نویسنده: هما
زمان: ۱۷:۵۲:۲۵ - تاریخ: ۱۳۹۳/۰۲/۱۳
سلام
می خواستم ببینم چطوری چند تا لینک را با فاصله در ردیف می تونیم استفاده کنیم . من هر کاری کردم نشد.
مرسی
پاسخ: 
سلام
سعی کنید CSS را یاد بگیرید، اینگونه موارد با استفاده از تعریف استایل قابل انجام است، برای نمونه می توانید عبارت "منو" را در قسمت جستجو وارد کرده و آموزش "ایجاد منوهای زیبا برای سایت یا وبلاگ با استفاده از تکنیک CSS" را مشاهده کنید.
نویسنده: مهسا
زمان: ۱۳:۲۰:۵۶ - تاریخ: ۱۳۹۳/۰۴/۱۵
سلام خسته نباشید تشکر میکنم بابت سایت خیلی خوبتون واقعا عالیه.
یک سوال هم داشتم ممنون میشم خیلی زود جواب بدین
میخواستم بدونم چطور اطلاعات وارد شده در فرم به زبان html رو در پایگاه داده ای مثل excel ذخیره کرد و لینک داد
متشکرم
پاسخ: 
سلام
ساده نیست! ابتدا باید محتوا را از طریق متد POST به یک فایل PHP ارسال و در این فایل یا با استفاده از ODBC و اکستنشن PDO به دیتابیس access متصل شوید (سپس می توانید از دیتابیس access خروجی CSV بگیرید)، روش دیگر استفاده از MySQL و دریافت خروجی CSV است، برای ایجاد فایل یا لینک به فایل اکسل نیز لطفا در وب عبارت "make excel download php mysql" را جستجو کنید، توضیح مختصری وجود ندارد!
نویسنده: سالار
زمان: ۱۳:۰۹:۵۷ - تاریخ: ۱۳۹۴/۰۱/۰۱
ممنون از سایت خوبتون
نویسنده: elshan
زمان: ۰۰:۰۱:۵۷ - تاریخ: ۱۳۹۴/۰۳/۰۶
مرسی به دردم خورد خیلی خوب توضیح دادی
نویسنده: داوود
زمان: ۱۸:۵۲:۱۸ - تاریخ: ۱۳۹۴/۰۵/۲۶
سلام آقای مهندس، میخواستم ببینم آیا در مرورگرهای امروزی خاصیت
text-decoration:blink;
پشتیبانی می شود؟؟ چون من برای نمونه که نوشتم نه در فایرفاکس و نه در کروم هیچکدومش جواب نمیداد. فکر نمی کنید مثل خاصیت marquee دیگه از دستورات رایج css خارج شده؟؟
پاسخ: 
سلام
بله این خاصیت ها جزء مواردی هستند که با قابلیت های CSS3 جایگزین شده اند:
@-webkit-keyframes blink {
from {
opacity: 1.0;
}
to {
opacity: 0.0;
}
}
blink {
-webkit-animation-name: blink;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: cubic-bezier(1.0, 0, 0, 1.0);
-webkit-animation-duration: 1s;
}
هر چند پشتیبانی مرورگرها در نسخه های قدیمی تر از CSS3 کامل نیست، اما آینده وب به این سمت در حرکت است!
نویسنده: داوود
زمان: ۱۰:۲۴:۰۴ - تاریخ: ۱۳۹۴/۰۶/۰۲
با سلام؛
ممنون آقای مهندس؛ فقط جهت اطلاع سایر دوستان این رو هم اضافه کنم که؛ دیگه اینجوری ننویسیم:
p{
text-decoration:blink;
}
چون خود blink تبدیل به یه تگ شده و اینجوری باید نوشته بشه:
<blink> this is a title for test</blink>
همچنین اگه بخوایم کد بالا برای Firefox هم جواب بده به جای همه کلمات webkit از moz استفاده میکنیم.
(اگه اشتباه دارم، لطفا شما اصلاح کنید آقای مهندس).
پاسخ: 
سلام
خیر!، حتی این تگ نیز در آینده حذف خواهد شد، لذا تنها راه صحیح استفاده از CSS است!
نویسنده: داوود
زمان: ۰۹:۲۲:۰۶ - تاریخ: ۱۳۹۴/۰۶/۰۹
سلام آقای مهندس، صبحتون بخیر و خوشی
استاد فکر کنم رایج ترین کاری که طراحان برای اینکه منوها در کنار همدیگه و بصورت افقی قرار بگیره انجام میدن استفاده از خاصیت float هستش! درست میگم؟؟ اونوقت بعدش میان و با استفاده از خاصیت display مقادیر inline یا inline-block رو اعمال می کنن. آیا بطور کل برای اینکه یه منو بصورت افقی قرار بگیره استاندارد خاصی وجود داره یا نه سلیقه ای عمل میشه بیشتر؟؟
پاسخ: 
سلام
خیر، برای این موارد استاندار بخصوصی وجود ندارد، اما به تجربه روش هایی بین طراحان متداول شده که خارج از خاصیت های عادی CSS نیست، از جمله استفاده از display با مقادیر inline-block، استفاده از float هم بسته به نیاز و ضرورت است!
نکته: در رابطه با منوهای تعاملی (آبشاری، افقی و...) خاصیت پر کاربرد دیگر position است.
نویسنده: داوود
زمان: ۱۲:۴۹:۴۶ - تاریخ: ۱۳۹۴/۰۶/۰۹
سلام؛ ممنونم آقای مهندس بخاطر پاسخی که بهم دادین. استاد یه سوال دیگه هم داشتم. ببینید یه خاصیت دیگه هم ما برای لینکها داریم که من کمتر دیدم جایی توضیح بده و اونهم focus هستش؛ چرا این مورد رو زیاد نمیارن توی موارد مربوط به توضیحات لینکها؟؟ خودم یه تعریف اینجوری درست کردم براش درسته: این خاصیت تا زمانی فعال هستش که ما روی لینک دیگه ای از همون گروه کلیک نکنیم، یعنی به نوعی تا زمانی Hover هستش که ما گزینه دیگه ای رو از گزینه های همگروهش انتخاب نکنیم.
حالا کاربردش رو تو اینجا میخوام نشون بدم و یه سوال هم داشتم؛ شما این سایت رو ببینید استاد:
http://oxdemo.ow-visuals.com/index?layout=flatty#
حالا بخشی هست در سایدبار چپ صفحه که شامل بخشهایی مثل Slideshow ؛ Users ؛ Video و ... هستش. هر کدومشون آیتمهایی دارن که من اومدم و اونها رو میخواستم پیاده سازی کنم. تقریبا همه چیز Ok هستش و پیش فرض رو هم تو item اول تونستم Hover کنم ولی چیکار کنم که زمانی که کاربر روی گزینه بعدیش کلیک میکنه؛ hover شدن از لینک اول برداشته بشه؟؟ امیدوارم منظورم رو درست فهمونده باشم. مثلا در حالت پیش فرض latest انتخاب شده هستش، حالا اگه یه آیتم دیگه مثل online رو انتخاب کنیم؛ این اولی دیگه از حالت انتخاب در میاد. من همین رو سوال دارم. آیا با jquery این کار رو کرده ؟؟ اگه مثبت هستش من چون این مورد رو بلد نیستم پس باید برم بیشتر کار کنم.
اینهم حاصل کار من:
http://jsfiddle.net/n5w9tdcm/
پاسخ: 
سلام
- سلکتور focus مربوط به تگ هایی است که این قابلیت را دارند، به طور مثال تگ a زمانی در حالت focus قرار می گیرد که کاربر بر روی لینک در حال کلیک کردن است (فاصله بین فشردن تا برداشتن نشانه گر، در واقع زمان بسیار ناچیز!)، اما در مورد تگ هایی مانند textarea امکان focus بارزتر است، به طور مثال یک فیلد textarea بسازید و استایل زیر را به آن نسبت دهید، سپس در داخل و خارج از فیلد کلیک کنید:
textarea:focus{
background:#E9E9E9;
}
- تکنولوژی های وب به هم پیوسته هستند و خیلی از قابلیت ها در تعامل زبان های سمت کاربر و سمت سرور شکل می گیرند، در اینجا نیز اگر به سورس صفحه دقت کنید:
<div class="ow_box_menu">
<a href="javascript://" id="base_users_widget_10353947_users_widget_menu_latest" class="active"><span>Latest</span></a>
<a href="javascript://" id="base_users_widget_10353947_users_widget_menu_online"><span>Online</span></a>
<a href="javascript://" id="base_users_widget_10353947_users_widget_menu_featured"><span>Featured</span></a>
</div>
سایت مذکور در اولین بارگذاری، کلاس آیتم انتخاب شده را به طور پیش فرض چاپ می کند:
class="active"
سایر تغییراتی که با کلیک بر روی سربرگ ها ایجاد می شود، توسط کدهای جاوا اسکریپت مدیریت می شوند (کلاس تگ ها با کدهای جاوا اسکریپت تغییر می کند)!، نمونه آموزش مرتبط با این موضوع در سایت وجود دارد که شاید به درک مطلب کمک کند، می توانید در وب عبارت "ساخت منوی هوشمند" را جستجو کنید!
نکته: نمونه آموزش مبتنی بر PHP است، اما مطالعه آن ضرری نخواهد داشت!
نویسنده: داوود
زمان: ۰۹:۱۵:۰۴ - تاریخ: ۱۳۹۴/۰۸/۲۶
سلام و صبح بخیر خدمت آقای مهندس نازنین؛
استاد یه سوالی برام پیش اومده؛ ببنید تو یه کتاب نوشته بودی برای اینکه بخوایم استایل لینکهای نوشته شده بدرستی اثر خودشون رو بذارن باید دقیقا مثل تعریف شما نوشته بشه؛ یعنی اینجوری "دقت کنید که عناصر مربوط به لینک باید به ترتیب ذکر شده در مثال بالا پشت سر هم و به ترتیب تعریف شوند، در غیر اینصورت ویژگی های مورد نظر عمل نخواهند کرد." و برای اینکه تو ذهنمون بره میگفت 2 تا کلمه LoVe و HAte رو به یاد داشته باشین، عشق و نفرت و حروف بزرگ نشون دهنده ترتیب اونهاست. حالا من میبینم بعضی جاها به این ترتیب هم مینویسن.
link
hover
active
visited
بعدشم فکر کنم focus رو میذارن در انتها.
الان واقعا کدوم درسته و طبق کدوم روش همیشه بریم جلو، چون شما هم دقیقا گفته کتاب رو تایید کردین.
مرسی و ممنونم از لطفت همیشگیتون.
موفق و سرافراز باشین انشاالله.
پاسخ: 
سلام
قبلا به این سوال شما پاسخ داده شده!:
قانون مذکور صرفا یک کلید واژه برای یادآوری ترتیب اعمال سلکتورها بر روی تگ a است که البته برای افراد حرفه ای چندان ضرورتی ندارد و حتی جای حالت focus در آن خالی است!، خیلی از مواقع نیز برخی حالات مانند visited یا active تنظیم نمی شوند و از ویژگی های پیش فرض مرورگر استفاده می شود، به صورت خلاصه سلکتورهایی که می توان به یک تگ a (از مرحله مشاهده تا کلیک و رها کردن ماوس) نسبت داد به صورت زیر است:
a:link
a:visited
a:hover
a:active
a:focus
نکته: سلکتور visited هیچ جایگاه ترتیبی مشخصی ندارد، چون به مواردی تعلق می گیرد که قبلا (کلیک) شده باشند و اهمیتی ندارد که در حین کلیک این اتفاق بیفتد یا بعد از مراجعه مجدد به صفحه! اما برخی سلکتورها به هم مرتبط و ترتیبی هستند، مانند link و hover.
paged صفحه 1 از 2




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

6 × 2
 refresh
آگهی
seonab.com
طراحی نرم افزار اندروید
رنگین کمان عکس
Ranginkamaan.com

آرشیو عکس های باکیفیت با موضوعات متنوع...