آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

آموزش لینک های CSS

دوره های مرتبط با این مقاله

آموزش Link

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

سبک دهی به لینک ها

لینک ها را می توان با هر خاصیت CSS ی سبک دهی کرد از جمله ی آن میتوان رنگ, نوع فونت و پس زمینه را نام برد .

مثال:

نمونه یک

  a {
            color: #FF0000;
        }
امتحان کنید

به علاوه این امکان وجود دارد که لینک ها را بسته به state (حالتی) که در آن قرار دارند, به گونه ای متفاوت سبک دهی کرد .

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

  • a:link – لینکی معمولی که هنوز مورد بازدید قرار نگرفته است.
  • a:visited – لینکی که کاربر از آن بازدید کرده است.
  • a:hover – حالتی که در آن مکان نمای موس روی لینک قرار گرفته است.
  • a:active – در این حالت کاربر روی لینک مورد نظر کلیک کرده.

مثال:

نمونه دو

        a:link {
            color: #FF0000;
        }

        a:visited {
            color: #00FF00;
        }

        a:hover {
            color: #FF00FF;
        }

  
        a:active {
            color: #0000FF;
        }
امتحان کنید

زمانی که سبک دلخواه را برای چندین حالت متعدد لینک انتخاب می کنید, قوانینی در رابطه با ترتیب وجود دارد که باید از آن ها پیروی کنید :

a:hover باید حتماً پس از a:link و a:visited قرار گیرد.

a:active باید پس از a:hover بیاید.

سبک های معمول لینک

در مثال فوق لینک مربوطه بسته به حالت (state) که در آن قرار دارد, رنگ عوض می کند .

در این بخش به دیگر شیوه های معمول در سبک دهی به لینک ها خواهیم پرداخت :

افزودن جلوه های بصری به لینک ها (Text decoration)

خاصیت text-decoration غالباً به منظور حذف زیرخط ها (underline) از لینک ها مورد استفاده قرارمی گیرد :

مثال:

نمونه سه

        a:link {
            text-decoration: none;
        }

        a:visited {
            text-decoration: none;
        }

        a:hover {
            text-decoration: underline;
        }

        a:active {
            text-decoration: underline;
        }
امتحان کنید

رنگ پس زمینه (background color)

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

مثال:

نمونه چهار

        a:link {
            background-color: #B2FF99;
        }

        a:visited {
            background-color: #FFFF85;
        }

        a:hover {
            background-color: #FF704D;
        }

        a:active {
            background-color: #FF704D;
        } 
امتحان کنید
  • 4818
  •    2010
  • تاریخ ارسال :   1394/07/27

دانلود PDF دانلود سورس کد دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .