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

7 دیدگاه
  • استایل لینک در 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 در 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 و زیر مجموعه های مورد نیاز آن را اضافه کنیم،
    مثال زیر گویا است.

    دوست عزیز پیشنهاد میشه این مطلب را هم ببینید
    آموزش پس زمینه در css

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

    سخن پایانی

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

    میانگین امتیازات ۴ از ۵
    از مجموع ۶ رای
    اشتراک گذاری:

    مطالب مرتبط برای شما

    نظر یا سوال شما در این مورد چیست؟

      پژوهشگر

      سلام من میخواهم کلاس navigation رو وقتی یک url مشخص لود شده تغییر بدم.
      مثلا محتوای navigation در صفحه ی index.php نمایش داده نشه !
      خیلی تو اینترنت گشتم چیزی پیدا نکردم.

        زمان الله ابراهیمی

        سلام خدمت شما دوست گرامی برای این کار گه از زبان html استفاده می کنید از جاوا اسکریپت کمک بگیرید
        در غیر این صورت اگه از php استفاده می کنید از کد های شرطی php استفاده نمایید موفق باشید

          پژوهشگر

          سلام شما خیلی راحت میگین که همچین کدی نداریم و با css نمیشه
          اما من خیلی سخت بهش رسیدم و با اینکه برنامه نویس نیستم راحش رو پیدا کردم
          فقط کافیه تو صفحه ای که نمی خواهیم اون المنت یا بلوک نمایش داده بشه و در قسمت این کد رو بذاریم :

          .navigation {display: none;}

          مثال در مورد کلاس navigation در صفحه ی index.php

          {$mybb->settings[‘bbname’]}
          {$headerinclude}

          no_new_posts}”;
          lang.click_mark_read = “{$lang->click_mark_read}”;
          // –>

          .navigation {display: none;}

          {$header}
          {$boardstats}
          {$quicksearch}
          {$forums}
          {$sidebar}

          {$footer}

            پژوهشگر

            من کد css رو در قسمت head نوشتم ولی بعد از ارسال پاسخ نمی دونم چرا ادیتور سایت شما اون رو این شکلی نوشته ؟!
            فقط کافیه کلاس مورد نظر رو در قسمت head بنویسید.
            style شروع
            .navigation display: none; کلاس یا آیدی مورد نظر
            style پایان

      zhr

      من روی لینکم ک کلیک میکنم رنگش تغییر میکنه چیکار کنم تغییر نکنه یعنی همون رنگ اول خودشو داشته باشه

      ftmlh

      وقتی روی لینکم کلیک میکنم رنگش تغییر میکنه چیکار کنم تا تغییر نکنه