آموزش CSS – آشنایی با مفهوم DOM در سی اس اس (CSS) (جلسه ۱۰)

اصطلاح DOM مخفف واژگان Document Object Model است. این اصطلاح به نمود خارجی کلیه تگ های اچ تی ام ال گفته می شود که به همان ترتیبی که نوشته می شوند در مرورگر به نمایش در خواهند آمد. در چنین شرایطی به راحتی می توان با هدف قرار دادن هر یک از تگ های اچ تی ام ال (HTML) از طریق کدهای سی اس اس (CSS)، استایل خاصی را در مورد آن ها اعمال کرد. اما گاهی اوقات برای برنامه نویس پیش می آید که می خواهد عناصری را با کدهای سی اس اس (CSS) هدف قرار دهد که داخل DOM قرار نمی گیرند. به طور مثال ممکن است طراحی بخواهد استایل های مختلفی برای حالات مختلف لینک در نظر بگیرد. به عبارت دیگر زمانیکه نشانگر موس را روی آن قرار می دهیم یک استایل داشته باشد و زمانیکه روی آن کلیک کردیم استایل دیگری در مورد آن اعمال شود. به عنوان مثال دیگر می توان به دکمه ها اشاره کرد. فرض کنیم قصد داریم زمانیکه نشانگر موس خود روی دکمه قرار داد، رنگ دکمه عوض شود. در چنین مواقعی می بایست از مفهومی تحت عنوان Pseudo Selector استفاده کرد. در واقع از این نوع Selector ها برای عناصری که خارج از DOM قرار می گیرند استفاده می شود.
برای آشنایی بیشتر با Pseudo Selector ها کدهای اچ تی ام ال (HTML) زیر را وارد ویرایشگر متن خود می کنیم:

<!DOCTYPE html>
<html>
   
   <head>
       <meta charset="utf-8">
       <title>asrefonon</title>
       <link type="text/css" rel="stylesheet" href="css/main.css">
   </head>
   
   <body>
       <p>
           <a href="http://www.asrefonon.ir/">Go to asrefonon</a>
       </p>
   </body>
</html>

همانطور که در کد فوق مشخص است یک تگ پاراگراف را به یک لینک تبدیل کرده ایم. حال اقدام به نوشتن کدهای سی اس اس (CSS) می نماییم:

a:link {
   color:black;
}
a:visited {
   color:orange;
}
a:hover {
   color:red;
}
a:active {
   color:green;
}

همانطور که در کد فوق مشخص است، ابتدا Selector یی تحت عنوان a را نوشته سپس یک علامت : قرار می دهیم. حال برای آنکه رنگ لینک در حالت عادی را مد نظر قرار دهیم می بایست از کلیدواژه link استفاده کنیم. همانطور که می بینیم رنگ لینک در شرایط عادی مشکی خواهد بود. حال برای آنکه رنگ لینک هایی که حداقل یک بار روی آن ها کلیک شده باشند را مشخص کنیم، در ادامه کد از کلید واژه visited استفاده می کنیم. از این پس اگر حتی یک بار هم روی لینکی کلیک شود، رنگ آن لینک به نارنجی تبدیل خواهد شد. برای آنکه با قرار دادن نشانگر موس روی لینک ها رنگ آن ها تغییر یابد از دستور hover استفاده می کنیم. از این پس به محض آنکه نشانگر موس روی لینک قرار گیرد رنگ آن لینک به قرمز تغییر خواهد یافت. در نهایت اگر بخواهیم زمانیکه کاربر روی لینک کلیک کرد رنگ آن تغییر یابد، از دستور active استفاده می کنیم که در این مثال رنگ سبز برای چنین حالتی در نظر گرفته شده است. برای مشخص شدن تاثیر کدهای فوق، فایل اچ تی ام ال (HTML) را داخل مرورگر اجرا می کنیم:

pseudo_selectors

همانطور که می بینیم، رنگ لینک در حالت عادی مشکی است، به محض آن که نشانگر موس خود را روی لینک قرار دهیم به رنگ قرمز در خواهد آمد، به محض آنکه دکمه موس را فشار دهیم رنگ لینک به سبز تغییر خواهد یافت و به صفحه مد نظر ارجاع داده خواهیم شد  و در نهایت پس از بازگشت مجدد به صفحه فوق، از آن پس رنگ لینک به صورت نارنجی باقی خواهد ماند چرا که این لینک یک بار مشاهده شده است.
همواره به خاطر داشته باشیم که مابین حرف a علامت : و کلیدواژه های link، visiteded، hover و active به هیچ وجه نمی بایست فاصله ای وجود داشته باشد. علاوه بر این ترتیب این کلید واژه ها بسیار مهم است و همواره ابتدا می بایست link نوشته شود، سپس visited و پس از آن hover و در نهایت active قرار گیرد.

221

اسماعیلی هستم مدیر عصر فنون. فارغ التحصیل مقطع کارشناسی ارشد رشته مهندسی فناوری اطلاعات (IT)

پیشنهاد لحظه ای
ارسال دیدگاه

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.

توسط
تومان