بخش Vip سئو نود

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

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

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

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

استفاده از سلکتور visited برای استایل نویسی بهتر لینک‌ها در طراحی پروژه های وب ! درست ترین حالت برای تغییر استایل لینک ها در حالت visited .

2 112
آموزش سلکتور visited: در css

یکی از انتخابگرهایی که در مورد تگ a بسیار کاربردی است ( خصوصا در مورد فهرست بندی مطالب ) انتخابگر visited است . همانطور که از اسم آن نیز مشخص است ، visited به معنی بازدید شده است . در حقیقت زمانی که کاربر شما بروی یک لینک کلیک کرده و از محتوای داخل صفحه آن بازدید کند ، داخل مرورگر شما ، وضعیت این لینک به visited تغییر خواهد کرد ( در پشت پرده ) .

زمانی که این تغییر وضعیت رخ داد ، می‌توان با کمک سلکتور visited ، استایلی را به این تگ اعمال کرد . قبلا در مورد حالت های link و any-link ( در دو مقاله قبلی ) صحبت کردیم و اگر در مورد این سلکتورها نیاز به اطلاعات دارید ، می‌توانید از این مقالات نیز بازدید کنید .

حالت visited یکی از مشهورترین حالاتی است که برای تگ a و همچنین تگ area که دراصل دارای صفت href هستند اتفاق خواهد افتاد . یکی از اصلی ترین قسمت‌ها که می‌توان برای حالت visited تگ‌های a در سایت استایل نویسی کرد ، قسمت فهرست بندی مطالب است .

زمانی که شما در حال مطالعه یک مطلب هستید ، در ابتدای آن مطلب یک فهرست موضوعی ممکن است وجود داشته باشد که شما با کلیک روی هریک از آنها ، به بخش از صفحه ( همان صفحه ) منتقل شوید ، در اینصورت زمانی که به ابتدای صفحه منتقل شوید ، می‌توان استایل تگ های a را برای وضعیت visited تغییر داد تا مخاطب متوجه باشد که از کدام لینک‌ها دیدن کرده است .

البته برای لینک‌های اصلی صفحه برای مثال در منو سایت نیز می‌توان این کار را انجام داد و هرلینکی از سایت که توسط کاربر مشاهده شد ، استایل بخش visited را بخود بگیرد .

چگونه از انتخابگر visited استفاده کنیم ؟

برای اینکه تگ های a زمانی که در وضعیت visited قرار گرفتند یک استایل مجزا و منحصربفرد داشته باشند ، باید به شکل زیر آنها را انتخاب کرده و استایل مدنظر را به آنها اعمال کنیم :

a:visited {
  background-color: yellow;
  border-color: hotpink;
  color: hotpink;
}

البته تغییرات اسایلی باید ریز و محسوس باشد که در این مثال برای روشن شدن موضوع ، روی پس زمینه یک استایل اعمال کردیم . کار با انتخابگرهای visited یا link و hover و … بسیار ساده است و شما باید کمی مهارت در مورد استایل‌دهی های دقیق و همچنین محل درست استفاده از هر دستور داشته باشید در اینصورت کار برای شما بسیار ساده خواهد بود .

شاید حالت link و any-link برای استایل دهی اهمیت زیادی نداشته باشد اما حالت visited در برخی پروژه‌ها که نیاز به راهنمایی بیشتر کاربر وجود دارد ، اهمیت بالایی را شامل شده است و باید با نحوه کار این انتخابگر که بسیار هم ساده بود آشنایی داشته باشید .

این انتخابگر یکی از قدیمی‌ترین سلکتورها در طراحی با css است و از این جهت بروی تمامی مروگرها حتی نسخه‌های بسیار قبل‌تر نیز بدون مشکل قابل استفاده است !

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

خیلی از موارد ممکن است در طول پروسه کاری شما اصلا کاربردی نداشته باشد اما اطلاع از این موارد در برخی پروژه‌ها ممکن است نجات‌رسان باشد . حتما سایر مقالات درمورد سلکتورهای : و :: در سایت و بخش ” مقالات طراحی سایت ” را مطالعه کنید . پذیرای نظرات و سئوالات شما در قسمت دیدگاه‌ها هستیم .

امید قدیمی

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

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

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

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

چگونه میتوانیم با پرداخت فقط 500 هزار تومان یک وب سایت برای کسب و کار خودمان داشته باشیم ؟ برای طراحی سایت 500 هزار تومان کافیست یا نه ؟ سیر تا پیاز طراحی سایت های ارزان را در این مقاله مطالعه کنید !

4 491

اگر برای شما نیز سئوال است که چگونه با یادگیری حداقل زبان‌های لازم جهت طراحی وب ، یک سایت داشته باشیم ، این مقاله بسیار کوتاه را تا انتها مطالعه کنید !

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

دیدگاه های شما
محمد قاسمی ۰۴ / ۱۴۰۳

استاد این قسمت چرا روی برخی جاها درست نشون داده نمیشه؟من کدشو ساعت ها تست کردم روی موزیلا اصلا نشون نمیده برام ممنون میشم راهنمایی کنید

امید قدیمی ۰۴ / ۱۴۰۳

سلام برای این قسمت باید یک استایل درست بنویسید تا بخوبی قابل نمایش باشه

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