لینک‌ها

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Css-menu.jpg
موارد آموزشی
۱خانه
۲مقدمه
۳شیوهٔ نوشتار
۴انتخابگرها
۵اضافه‌کردن CSS
۶نظرات
۷رنگ‌ها
۸پس‌زمینه‌ها
۹کادرها
۱۰حاشیه‌ها
۱۱Padding
۱۲ارتفاع/عرض
۱۳Box Model
۱۴Outline
۱۵متن
۱۶قلم‌ها
۱۷آیکن‌ها
۱۸لینک‌ها
۱۹لیست‌ها
۲۰جداول
۲۱ویژگی Display
۲۲ویژگی Max-Width
۲۳ویژگی Position
۲۴ویژگی Overflow
۲۵ویژگی Float
۲۶مقدار Inline-block
۲۷ترازکردن
۲۸ترکیب کننده‌ها
۲۹شبه کلاس
۳۰شبه عنصر
۳۱ویژگی Opacity
۳۲نوار Navigation
۳۳منو آبشاری
۳۴گالری تصویر
۳۵Image Sprites
۳۶انتخاب‌گرهای خاصیت
۳۷فرم‌ها
۳۸شمارنده‌ها
۳۹چیدمان وب‌سایت
۴۰واحدها
۴۱اولویت‌بندی
CSS پیشرفته
واکنش‌گرایی
Grid در CSS
مثال‌ها
مرجع‌ها

با CSS، لینک ها را می‌توان به روش‌های مختلفی استایل دهی کرد.[۱]

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

لینک‌ها را می‌توان به وسیله هر گونه ویژگی CSS (مانند: color ،font-family ،background و…) استایل دهی کرد.

مثال
a {
  color: hotpink;
}


به علاوه، لینک‌ها را می‌توان با توجه به وضعیتی که آنها در آن هستند استایل دهی کرد.

چهار وضعیت لینک‌ها عبارتند از:

  • a:link - یک لینک عادی کلیک نشده
  • a:visited - یک لینک کلیک شده توسط کاربر
  • a:hover - یک لینک هنگامی که کاربر نشانه‌گر موس را روی آن می‌برد
  • a:active - لینک در لحظه ای که روی آن کلیک می‌شود
مثال
 1 /* unvisited link */
 2 a:link {
 3   color: red;
 4 }
 5 
 6 /* visited link */
 7 a:visited {
 8   color: green;
 9 }
10 
11 /* mouse over link */
12 a:hover {
13   color: hotpink;
14 }
15 
16 /* selected link */
17 a:active {
18   color: blue;
19 }


هنگام تنظیم استایل برای وضعیت‌های گوناگون لینک، چند قانون وجود دارد:

  • a:hover می‌بایست بعد از a:link و a:visited بیاید
  • a:active می‌بایست بعد از a:hover بیاید

آراستگی متن

ویژگی text-decoration اغلب برای حذف خط زیرین لینک‌ها استفاده می‌شود:

مثال
 1 a:link {
 2   text-decoration: none;
 3 }
 4 
 5 a:visited {
 6   text-decoration: none;
 7 }
 8 
 9 a:hover {
10   text-decoration: underline;
11 }
12 
13 a:active {
14   text-decoration: underline;
15 }


رنگ پس زمینه

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

مثال
 1 a:link {
 2   background-color: yellow;
 3 }
 4 
 5 a:visited {
 6   background-color: cyan;
 7 }
 8 
 9 a:hover {
10   background-color: lightgreen;
11 }
12 
13 a:active {
14   background-color: hotpink;
15 }


لینک هایی به شکل کلید (به انگلیسی: Link Buttons)

این مثال مثال پیشرفته ترِ را نشان می‌دهد که در آن چندین ویژگی گوناگون CSS را ترکیب کرده‌ایم تا لینکها را به صورت جعبه‌ها / کلید‌ها نمایش دهیم:

مثال
 1 a:link, a:visited {
 2   background-color: #f44336;
 3   color: white;
 4   padding: 14px 25px;
 5   text-align: center;
 6   text-decoration: none;
 7   display: inline-block;
 8 }
 9 
10 a:hover, a:active {
11   background-color: red;
12 }


مثال های بیشتر

اضافه‌کردن استایل‌های گوناگون به hyperlinkها

این مثال نحوه اضافه‌کردن سایر استایلها را به hyperlinkها نمایش می‌دهد.

پیشرفته - ساخت یک لینک به شکل دکمه با کادر

مثال دیگری از نحوه ایجاد لینک‌ها به شکل جعبه/کلید.

تغییر نشانه‌گر موس

ویژگی cursor مشخص کننده نوع نشانه‌گری را تعیین می‌کند که می‌بایست نمایش داده شود. این مثال انواع مختلفی از نشانه‌گرها (که برای لینک‌ها مفید است) را نمایش می‌دهد.

خود را با تمرین‌ها امتحان کنید!


منابع آموزشی