لینک ها در CSS

( جمعه ، 10 فروردین سال 1403 )

حق کپی ویدئو

مجاز نمی باشد.

شما اینجا هستید :

جلسه پانزدهم

آموزگار :

آرزو محرابی

لینک‌ها یکی از مهم‌ترین بخش‌های سایت محسوب می‌شوند. در این جلسه با کمک علم CSS می‌خواهیم بدانیم که چطور می‌توان ظاهر لینک‌ها را تغییر داد و آن‌ها را جذاب‌تر کرد. ( ادامه مطلب … )

ابزار وردپرس بُزرگ ترین مرجع وردپرس ایران!

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

ابزار وردپرس بُزرگ ترین مرجع وردپرس ایران!

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

اورجینال

کیفیت

پشتیبانی

آپدیت

آرزو محرابی

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

آرزو محرابی

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

لینک ها در CSS

( جمعه ، 10 فروردین سال 1403 )

اولین کاری که می‌توانیم انجام دهیم این است که خطی که به صورت پیش فرض زیر لینک‌هاایجاد می‌شود را حذف کنیم. برای این کار از دستور زیر استفاده می‌کنیم:

text-decoration: none;

حال اگر به جای مقدار none از مقدار underline استفاده کنیم به حالت قبلی برمی‌گردد.

کار دیگری که ما می‌توانیم برای زیباتر کردن لینک‌ها انجام دهیم این است که با استفاده از دستور color رنگ متن لینک را تغییر دهیم. به شکل زیر:

a{

Color: red;

}

یا اینکه می‌توانیم یک رنگ پس زمینه ی زیبا برای لینک خود ایجاد کنیم:

a{

color: red;

background-color: purple;

}

رنگ دهی با توجه به وضعیت مختلف لینک ها در سایت با کمک CSS

نکته مهمی که وجود دارد این است که ما می‌توانیم برای وضعیت‌های مختلف لینک‌ها، خصوصیت‌های متفاوت تعریف کنیم. اما منظور از وضعیت‌های مختلف لینک‌ها چیست؟

لینک‌هامعمولا 4 وضعیت دارند:

  1. a : link
  2. a : visited
  3. a : hover
  4. a : active

که به ترتیب به این معنا هستند:

  1. لینکی که هنوز وارد آن نشده‌ایم
  2. لینکی که حداقل یکبار وارد آن شده‌ایم
  3. زمانی که ماوس خود را روی لینک می‌بریم اما کلیک نمی‌کنیم
  4. لحظه‌ای که در حال کلیک کردن روی لینک هستیم

اکنون فرض کنید می‌خواهیم رنگ پس زمینه یک لینک را در حالتی که حداقل یکبار روی آن کلیک شده است را به رنگ آبی کم رنگ در آوریم. پس به صورت زیر می‌نویسیم:

a:visited{

background-color: lightblue;

}

یا به عنوان مثال اگر بخواهیم لحظه ای که ماوس خود را روی لینک می‌بریم، رنگ متن صورتی شود، این گونه عمل می‌کنیم:

a:hover{

color: pink;

}

به این ترتیب می‌توانیم به حالت های مختلف، خصوصیت های متفاوت بدهیم. همچنین می‌توانیم به لینک های مان حاشیه های مختلف بدهیم و آن‌هارا به شکل دکمه دربیاوریم.

برای نوشتن دیدگاه باید وارد بشوید.
فهرست