یکی از پرکاربردترین موارد در صفحات وب ، لینک ها هستند.از اینرو در این مقاله به رابطه لینک ها و CSS و همچنین نحوه تنظیم استایل های CSS لینک ها می پردازیم.چگونه می توان به لینک ها در صفحات وب ، استایل خاصی بخشید؟
استایل دهی به لینک ها با CSS
از آنجا که لینک ها هم نوعی متن هستند،از خصوصیات معرفی شده برای متون در CSS ، می توان برای لینک ها هم استفاده کرد.همچنین چون آشنایی با لینک ها در آموزش CSSاهمیت ویژه ای دارند سعی کنید به خوبی آشنا شوید با این مبحث ، به عنوان مثال:
- font-size
- color
- font-family
با دستورات فوق می توان در CSS ، لینک ها را رنگ خاصی بخشید یا اینکه اندازه متن آنها را تغییر داد و یا اینکه فونت خاصی را به لینک ها اختصاص داد.برای هر لینک در CSS چندین وضعیت (state) وجود دارد از جمله:
a:link
a:visited
a:hover
a:active
توضیح اینکه: حالت اول مربوط به تمام لینک های صفحه می شود.یعنی تمام آن تگ های a که لینک دار هستند.می توان با این سلکتور دستورات CSS را اضافه نمود.حالت دوم مربوط به لینک هایی است که کاربر روی آنها کلیک کرده و در CSS با عنوان visited مشخص می وشند.حالت سوم مربوط به لینک هایی است که کاربر ماوس را روی آنها نگه داشته است.ان حالت را در CSS ،با عنوان hover می شناسند.مورد چهارم در CSS ،مربوطه به لینک هایی است که کاربر دکمه ماوس را روی انها فشار داده و نگه داشته است.در CSS به این حالت active گویند.
a:link { color: green; } /* visited link */ a:visited { color: red; }
در مثال بالا به لینک هایی که بازدید نشده اند با دستور color در CSS ، رنگ سبز داده شده و لینک های بازدید شده رنگ قرمز دارند.توجه نمایید که در CSS ،حتما باید دستور active بعد از دستور hover باشد.برای اینکه زیرخط برای لینک ها ایجاد کنیم یا آن را حذف کنیم از دستور text-decoration استفاده می کنیم.
a:hover { text-decoration: underline; }
در این مثال،زمانی که ماوس روی یک لینک قرار گیرد،یک زیر خط برای آن ظاهر می شود.اینها همه نکات مهم در CSS هستند که هرچند ریز،اما پرکاربرد و بسیار ضروری هستند.برای هر لینک می توانیم حتی رنگ پس زمینه هم انتخاب کنیم.این کار را می توان با دستور background-color انجام داد.می توان با استفاده از استایل های CSS ، یک لینک را به صورت یک دکمه تبدیل کرد.این آموزش در آموزش تصویری CSS در کلیک سایت مطرح شده است. جهت دریافت اطلاعات و آموزشهای دقیقتر و مثال های بیشتر می توانید از آموزش تصویری CSS در سایت استفاده نمایید.جهت دریافت آموزش وردپرس کلیک کنید.
سایت بزرگ کلیک سایت،بهترین مرجع در ضمینه آموزش طراحی سایت و آموزش html و آموزش css میباشد.تمامی فیلم های آموزشی این سایت توسط استادان کاردان و بسیار با تجربه تهیه شده که تضمینی بر کیفیت بالای تمامی آن ها است.قیمت محصولات نیز کاملا رقابتی بوده و با مقایسه آن با سایر سایت ها میتوان به خوبی متوجه این موضوع شد.