آموزش طراحی وب

مدرسه مجازی ایرانیان

دسته بندی موضوعات
سفارش تبلیغات

لینک ها در CSS

Link-icon

فصل چهارم : Properties در CSS

جلسه بیست و دوم  : لینک ها در CSS

سلام به همراهان همیشگی مدرسه مجازی ایرانیان

فکر می کنم این مبحث رو خیلی دیر آموزش دادم ، اما باز هم مشکلی نداره ماهی رو هروقت از آب بگیری تازست 🙂 مهم اینه که تا قبل از شروع پروژه ی عملی تمامی مباحث رو یاد گرفته باشید .

خوب دوستان تو این جلسه در رابطه با لینک ها و حالت های مختلف یک لینک صحبت می کنیم .

مسلما میدونید که لینک ها چه عناصری هستند چون تو فصل html در جلسه ی “ لینک ها در HTML ” بطور کامل توضیح دادم که لینک ها چه عناصری هستند و چه کاربردی دارن . در این مبحث آموزشی میخوایم حالت های مختلف یک لینک رو خدمتتون آموزش بدیم .

 

زمانی که شما یک لینک در صفحه تعریف می کنید ، شامل ۴ حالت میشه .

 

۱-      حالت عادی یا همون حالت link که لینک در حال نمایش هست که به دو صورت میتونید در css این حالت رو تعریف کنید:

یا

 

۲-      حالت hover زمانیه که موس روی لینک قرار میگیره . مثلا در مثال زیر گفتیم زمانی که موس روی لینک قرار گرفت رنگ عبارت به طوسی تغییر پیدا کنه.

 

۳-      حالت active که با کلیک روی لینک این حالت اتفاق میوفته . یعنی زمانی که شما دکمه موس رو فشار میدید تا کلیک انجام بشه حالت active به حساب میاد ، زمانی که دکمه رو رها کنید، حالت active هم از بین میره.

این حالت زمانی بیشترین کاربرد رو داره که شما قصد رسپانسیو کردن قالب رو دارید. در دستگاه هایی مثل موبایل و تبلت، حالت hover رو نمیتونید پیاده کنید مگر اینکه انگشت رو از یه نقطه تا یه نقطه ی دیگه بکشید و از روی لینک رد کنید که گاهی اوقات حالت hover روی لینک اتفاق میوفته اما این کار اصلا اصولی نیست ، ولی active رو میتونید به راحتی اعمال کنید. چون در این دستگاه ها کاربر با قرار دادن انگشت روی لینک اون رو انتخاب میکنه و در اون حالت active اتفاق میوفته. زمانی که شما یک استایل به hover لینکتون میدید به active هم میدید که در مانیتور hover اجرا بشه و در موبایل و تبلت active اجرا بشه .

active

 

۴-      حالت visited زمانیه که شما روی لینک کلیک کردید و لینک رو باز کردید .

حالتی که مدنظرتون هست رو کافیه با دو نقطه : بعد از عنصر a قرار بدید و بعد استایل دلخواهتون رو تعریف کنید .

 

خط زیر لینک ها

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

none : با این مقدار خط زیر لینک حذف میشه .

underline : با این مقدار زیر لینک خط نمایان میشه .

overline : با این مقدار یک خط بالای لینک نمایان میشه .

line-through : یک خط رو لینک دقیقا روی عبارت نمایان میشه .

مثال :

البته خاصیت text-decoration برای عناصر دیگه هم استفاده میشه ، مثلا عناصر h1 , h2 و … .

 

در اینجا این جلسه ی آموزشی هم به اتمام میرسه ، امیدوارم مفید بوده باشه .

موفق و پاینده باشید 🙂

تهیه شده در مدرسه مجازی ایرانیان

<<

>>

اگر این آموزش برای شما مفید بود با دوستان خود به اشتراک بگذارید



سفارش تبلیغات

گردآوری و تالیف : میترا رحیمی

بنیانگذار و نوسنده در مدرسه مجازی ایرانیان و سردبیر ماهنامه طراحی وب همچنین مدرس و مسلط به برنامه نویسی سمت سرور با PHP MVC و برنامه نویسی سمت کلاینت با html 5 , css3 , jquery , مبانی سئو و سیستم مدیریت محتوای وردپرس

خوراک خوشمزه و علمی روزانه
با وارد کردن ایمیلتون در فیلد روبرو آموزش های جذاب و vip دریافت نمایید

آموزش های مرتبط با این مطلب

دیدگاه های مخاطبین

لطفا تنها دیدگاه خود را در رابطه با این مطلب ارسال نمایید، سوالات را از طریق سامانه پرسش و پاسخ مطرح نمایید. سوالات در دیدگاه ها تایید نخواهد شد.

  • امیرحسام

    خانم رحیمی ممنون از این آموزشتون نمیدونید من چقدر دنبال این آموزش بودم مخصوص قسمت کلیک بر روی لینک واقعا ازتون ممنونم
    خیلی خیلی ممنونم

  • hassany

    ممنون از آموزشتون بخصوص اون قسمت a:active و کاربردش در حالت ریسپانسیو و نمایش در موبایل.

وبلاگ مدرسه

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

مدرسین مدرسه

  • حسین همت یار

    حسین همت یار

    مدرس ، طراح رابط کاربری وب و موبایل با 8 سال سابقه ی فعالیت حرفه ای

سوابق کامل

آخرین پرسش و پاسخ ها

آخرین پرسش و پاسخ ها
شما هم سوالی دارید ؟