آموزش سلکتور link: در css
مقالات طراحی سایتکاربرد انتخابگر link در استایل دهی بهتر به تگ های a و همچنین المان هایی که دارای صفت target در صفحه وب شما هستند ! استایل دهی اصولی به فهرست های سایت به کمک سلکتورهای قسمت target .
انتخاب کننده link یکی از سلکتورهایی است که شما شاید در دوره های مقدماتی آموزش css با آن روبرو شد باشید . این انتخابگر برای کار روی تگ های a یا اصطلاحا لینک در طراحی با css کاربرد دارد . اکثر شما دوستان که در زمینه طراحی با زبان سی اس اس فعال هستید به احتمال زیاد با نحوه کار این سلکتور آشنایی دارید . تگ های a داخل وب سایت نقش بسیار مهمی دارند و در صورت نبودن آنها ، عملا جابجایی از یک صفحه به صفحه دیگر ، از داخل همان صفحه غیر ممکن است لذا یک نقش اساسی در گردش کاربر داخل سایت دارند . در مورد خصوصیات و ویژگیهای تگ a نیاز به توضیح زیادی نیست و تمامی کسانی که با html حتی در سطح مبتدی کار کرده باشند ، به نحوه کار این تگ آشنایی دارند .
همچنین باید اضافه کرد که علاوه بر گردش بین صفحات مختلف سایت ، میتوان از تگ های لینک برای گردش داخل یک صفحه واحد نیز کمک گرفت . زمانی که شما یک تگ a داخل سایت قرار دهید ، این تگ لینک 4 حالت کلی خواهد داشت که بیشتر با آنها سروکار داریم ، این 4 حالت به شرح زیر است :
- حالت اول حالت link است یعنی لینک داخل صفحه وجود دارد اما هنوز کاربر روی آن کلیک نکرده و از آن بازدید نکرده است
- حالت دوم حالت hover است و زمانی اتفاق خواهد افتاد که کاربر با موس روی لینک رفته اما روی آن کلیک نکند
- حالت سوم حالت focus است که کاربر روی لینک کلیک کرده است و درلحظه اتفاق خواهد افتاد
- حالت چهارم زمانی است که کاربر از لینک شما بازدید کرده و وارد صفحه مربوط به لینک شده است ک به آن حالت visited گفته میشود
محتوای این بخش در رابطه با حالت link است یعنی زمانی که شما لینک هایی داخل صفحه دارید ( در حالت درستتر باید گفت هر المانی که صفت href دارد چراکه تگ area در html نیز ممکن است دارای صفت href باشد ) و هنوز کاربر هیچ تعاملی با این لینکها نکرده است و روی آن کلیکی نشده و وارد صفحات این لینک ها نشده است . به نوعی حالت استیبل و سکون در لینک !
چگونه از سلکتور link استفاده کنیم ؟
برای اینکه به تگ های a که خاصیت link را دارند استایل اعمال کنید ، کافیست تا دستورات مدنظر خود را به شکل زیربنویسید :
a:link {
color: blue;
text-decoration-color: #919191;
}شما میتوانید از این حالت برای تگ های area نیز استفاده کنید . در کل وجود صفت href در یک تگ مسب ایجاد لینک در آن خواهد شد اما در اصول کدنویسی ، صفت href مختص تگ a و تگ area است . در کل حالت link برای تمامی تگ های دارای صفت href بشرط کلیک نشدن روی آنها تعریف شده است . یعنی حالت های focus و visited از طرف کاربر سایت شما بروی تگ اعمال نشده و در همان حالت نمایش داده میشود .
کاربرد حالت link بیشتر برای زمانی است که شما وب سایتی متشکل از لینک های بسیار دارید یا در داخل صفحه ، قسمت فهرست موضوعی دارید و در این بخش قصد دارید تا کاربر شما متوجه باشد که روی کدام لینکهای فهرست کلیک کرده ، از کدام فهرست ها بازدید نموده و کدام لینکها بدون بازدید است . در این حالت میتوان با ایجاد یک وجه تمایز بین حالت های visited و همچنین link ، این بخش را بخوبی نمایش داد . در مقالات بعدی دررابطه با حالت visited نیز صحبت خواهیم کرد که البته در این مقاله تا حدودی با آن آشنا شدید . بسته به طرح و محتوای صفحه خودتان میتوانید حالت های link و visited و خصوصا hover را برای تگ های a سایت طراحی و استایل دهی کنید . این سلکتور در تمامی مرورگرها به شکل درست پشتیبانی میشود . امیدواریم این مقاله کوتاه برای شما کاربردی باشد .
