بخش Vip سئو نود

بهترین فرصت برای یادگیری در قسمت Vip سئو نود هم اکنون برای دانشجوبان عزیز فراهم شده است

جزئیات بیشتر
آموزش یکبار برای همیشه
بزودی دوره جدید در روی سایت چگونه در سئو شکست بخوریم !

آموزش سلکتور link: در css

مقالات طراحی سایت

کاربرد انتخابگر link در استایل دهی بهتر به تگ های a و همچنین المان هایی که دارای صفت target در صفحه وب شما هستند ! استایل دهی اصولی به فهرست های سایت به کمک سلکتورهای قسمت target .

0 66
آموزش سلکتور link: در css

انتخاب کننده 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 سایت طراحی و استایل دهی کنید . این سلکتور در تمامی مرورگرها به شکل درست پشتیبانی می‌شود . امیدواریم این مقاله کوتاه برای شما کاربردی باشد .

امید قدیمی

امید قدیمی هستم ، 8 سال است که در زمینه طراحی و برنامه نویسی وب سایت فعالیت می کنم . توسعه دهنده فرانت اند ، طراح و برنامه نویس انواع وب سایت های وردپرسی ، فعال در زمینه تولید محتوا و سئو وب سایت

نقشه راه فرانت

اگر قصد دارید تا یک طراح ماهر باشید ، ما درست ترین مسیر را برای شما فراهم کردیم و فقط کافیست همراه ما باشید

شاید این مطالب نیز برای شما جالب باشد

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

0 1,128

انتخابگر lang ، امکان انجام طراحی‌های متفاوت برای زبان‌های مختلف همچون انگلیسی و فارسی و آلمانی و .... را به شکل همزمان در یک پروژه فراهم خواهد کرد .

0 63
دیدگاه ها و نظرات
توجه کامنت های انگلیسی تایید نخواهند شد در صورت داشتن مشکل ، قبل از ارسال دیدگاه نظرات سایر دوستان را نیز مطالعه فرمائید برای مشاهده پاسخ دیدگاه ها بر روی علامت " " کلیک کنید
اشتراک دیدگاه
captcha
تکمیل تمامی فیلد ها الزامی است

آموزش های رایگان بیشتر در آپارات و یوتیوب سئو نود
کانال آپارات سئو نود چنل یوتیوب سئو نود