استایل لینک در CSS آموزش کامل link در CSS 

خرداد ۲, ۱۳۹۹
ارسال شده توسط:
138 بازدید
۰

استایل لینک در CSS آموزش کامل link در CSS

یکی از پرکاربردترین موارد در صفحات وب ، لینک ها هستند آموزش کامل link.
از اینرو در این مقاله به رابطه لینک ها و CSS و همچنین نحوه تنظیم استایل های CSS لینک ها می پردازیم.
چگونه می توان به لینک ها در طراحی صفحات وب ، استایل خاصی بخشید؟

آموزش کامل link

استایل لینک در CSS – آموزش کامل link در CSS

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

تعریف لینک (Link) در HTML

همانطور که قبلا گفتیم CSS به خودی خود کاربردی ندارد و در ترکیب با تگ های HTML نقش و قدرت آن مشخص می شود
به همین دلیل وقتی صحبت از تنظیم استایل لینک در CSS است باید ابتدا ببینیم که لینک در HTML چگونه تعریف می شود،
در آموزش مسیرها در HTML به صورت فیلم آموزشی (Hyperlink یا ابرپیوند) در HTML با تگ a و صفت href تعریف می شود.

آموزش کامل link

تنظیم استایل لینک در CSS

می توان لینک ها را به شیوه های مختلف سبک دهی (بندی)کرد .

لینک ها را می توان با هر خاصیت CSS ی سبک دهی کرد از جمله ی آن میتوان رنگ, نوع فونت و پس زمینه را نام برد .
در آموزش های css قبل دیدیم که برای اعمال خاصیت های CSS بر روی تگ های هدف در HTML از مفهومی
تحت عنوان سلکتور (Selector) بهره می بریم به فرض استایل زیر بر روی تمام تگ های p در صفحه اعمال خواهد شد:

عبارت p در این مثال یک سلکتور در CSS است که تمام تگ های p را در صفحه HTML جهت اعمال جلوه های ظاهری مورد نظر هدف قرار می دهد،
با این توضیح سلکتوری که برای لینک در CSS استفاده می شود مشابه با نمونه بالا سلکتور a است که بر روی تمام تگ های a در صفحه اعمال می شود،
البته این سلکتور بر حسب نیاز حالت ها و زیرمجموعه هایی دارد که در ادامه بررسی خواهیم کرد.

بیشتر بخوانید :
آموزش css در این جلسه ID و Class

بررسی برخی لینک‌ها در css

در بخش «ایجاد هایپرلینک در HTML — راهنمای کاربردی» با شیوه پیاده‌سازی لینک‌ها در HTML آشنا شدیم.
در این مقاله می‌خواهیم بر مبنای آن دانش، بهترین روش‌های استایل‌بندی لینک‌ها را مورد بررسی قرار دهیم.

آموزش لینک ها در css

استایل لینک در CSS

نخستین چیزی که باید درک کنیم، مفهوم حالت لینک است.

شما میتوانید رنگ(color)،فونت (font-family) ،و پس زمینه (background) را برای لینک ها در css شخصی سازی کنید.

همچنین میتوانید تنظیمات زیر را در بخش کدهای css روی لینک هایتان اعمال کنید. این تغییرات مربوط به ظاهر لینک و عملکرد آنها در هنگام حرکت و کلیک ماوس است.

لینک می‌تواند حالت‌های مختلفی داشته باشد که می‌توان با استفاده از شبه‌کلاس‌های مختلف آن را استایل‌بندی کرد:

  • Link (لینک بازدید نشده) – حالت پیش‌فرض لینک است و زمانی که حالت دیگری وجود نداشته باشد از این حالت استفاده می‌شود. این حالت را می‌توان به صورت اختصاصی با استفاده از شبه‌کلاس ‎:link استایل‌بندی کرد.
  • Visited (‌بازدید شده) – لینکی است که قبلاً از آن بازدید کرده‌ایم و سوابق آن در تاریخچه مرورگر وجود دارد. این حالت با استفاده از شبه‌کلاس ‎:visited استایل‌بندی می‌شود.
  • Hover‌ (قرار گرفتن ماوس روی لینک) – این حالت زمانی استفاده می‌شود که اشاره‌گر ماوس کاربر روی لینک برود و با استفاده از شبه‌کلاس ‎:hover استایل‌بندی می‌شود.
  • Focus (فوکوس) – حالتی است که لینک فوکوس صفحه وب را می‌گیرد. برای نمونه ممکن است کاربر با زدن کلید Tab یا هر کلید دیگری روی لینک برسد و یا به صورت برنامه‌نویسی‌شده با استفاده از دستور HTMLElement.focus()‎ فوکوس بگیرد. این حالت با استفاده از شبه‌کلاس ‎:focus استایل‌بندی می‌شود.
  • Active (فعال) – لینکی است که فعال شده، یعنی روی آن کلیک شده است و با استفاده از شبه‌کلاس ‎:active استایل‌بندی می‌شود.

به کاربرد این سلکتورها در مثال زیر دقت کنیم:

میتوانید نمونه ها را از اینجا مشاهده کنید.

بیشتر بخوانید :
آموزش ویژگی border-radius در css

اگر بخواهید از چند استایل به طور همزمان برای یک لینک استفاده کنید. باید این قوانین را رعایت کنید:

  • ۱- a: hover باید بعد از a:link و a:visited کدنویسی شود.
  • ۲- a:active باید بعد از a:hover کدنویسی شود.

به کاربرد این سلکتورها

سلکتورهای مربوط به لینک باید به صورت ذکر شده در مثال بالا به ترتیب تعریف شوند در غیر اینصورت برخی ویژگی های مورد نظر عمل نخواهند کرد.

در اغلب موارد به جزء حالت a یا a:link و a:hover استفاده از سایر سلکتورها اختیاری است و بستگی به هدف و سلیقه برنامه نویس دارد.

نکته: در حالت عادی صرفا خاصیت های سلکتور a:visited برای لینکی که محتوای آن قبلا دیده شده باشد اعمال می شود،
در صورتی که این سلکتور تعریف نشده یا محتوایی نداشته باشد، خاصیت های سلکتور a یا a:link اعمال خواهند شد.

لینک در CSS

استفاده از خاصیت text-decoration در تنظیم استایل CSS لینک

اکثر مرورگرها در حالت پیش فرض عبارات متنی لینک شده را به صورت زیرخط نمایش می دهند که شاید از لحاظ ظاهری جلوه خوبی نداشته باشد،
خوشبختانه در CSS خاصیتی تحت عنوان text-decoration وجود دارد که به کمک آن و با افزودن مقادیر می توانیم لینک هایی با ظاهری بهتر و سفارشی شده تعریف کنیم،
مقادیر اصلی که برای خاصیت text-decoration قابل استفاده هستند عبارتند از:

  •  none: برای حالت عادی (بدون خط).
  • overline: برای حالتی که خط در قسمت بالای لینک ترسیم می شود.
  • underline: برای حالتی که خط در زیر لینک ترسیم می شود.
  •  line-through: برای ایجاد لینکی که روی آن خط کشیده شده یا خطی از وسط آن گذشته است.

صفت background-color

از صفت background-color برای مشخص کردن رنگ پس زمینه ی یک لینک استفاده میشود :

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

استفاده از آی دی (ID) و (Class) در تنظیم استایل لینک در CSS

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

بیشتر بخوانید :
آموزش کار با ویژگی margin و padding در CSS

با این کار لینک های موجود در بلاک div فرضی link-7reply از سلکتور ترکیبی کلاس تعیین شده پیروی کرده
و ویژگی های آن را به خود می گیرند اما سایر لینک های موجود در صفحه صرفا از خاصیت های سلکتور کلی a و زیرمجموعه های آن پیروی می کنند.

سخن پایانی

امیدواریم در این مقاله هر آن چه برای یادگیری استایل‌بندی لینک‌ها لازم است را آموخته باشید.

اشتراک گذاری:

حتما" بخوانید پیشنهاد سون ریپلای

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

نماد های اعتماد

سون ریپلای به استناد نماد های زیر ، دارای مجوز رسمی از مراجع مربوطه در جمهوری اسلامی ایران می باشد !

درگاه سامان
درگاه به پرداخت

تمامی حقوق برای سون ریپلای محفوظ است | طراحی شده با در سون ریپلای