درس پانزدهم : کدهای Hex و استایل دهی لینکها

با نام خدا درس جدید رو شروع می کنیم. درس امروز کوتاه است و چون این روزها کمی سرم شلوغ است، از همین جهت خواهشاً زیاد اعتراض نکنید. قرار شد در این جلسه کدهای Hex را مورد بررسی قرار بدهیم. ما در این جلسه می خواهیم رنگ آمیزی بیشتری را برای اجزای صفحه انجام دهیم. پس چیزهای بیشتری را در مورد کدهای شانزده تایی (Hex Codes) خواهید آموخت .

برای خواندن کامل متن به ادامه مطلب بروید…

این تنظیمات از یک کد شانزده تایی (hexadecimal) که مخفف آن hex است، پیروی می کند. مثلاً برای رنگ نوشته ها کد body { color: #000000;} این معنی را می دهد که تمامی نوشته ها در بدنه ی سایت، به رنگ سیاه در خواهند آمد.

همچنین شما می توانید رنگ پس زمینه ی سایت خود را به رنگ های مختلفی در بیاورید. برای مثال کد body{ background: #ffffff; } به این معنی است که پس زمینه ی صفحه ی شما سفید خواهد بود.

◊ حال توضیح و نحوه ی عملکرد کدهای شانزده تایی (Hexadecimal Codes):

تمامی کدهای Hex شش رقمی هستند، همچنین قبل از این کدها یک علامت # می آید. رنج این کدها از شماره #ffffff که رنگ سفید است تا #۰۰۰۰۰۰ که رنگ سیاه است، ادامه دارد.
#ffffff, #eeeeee, #dddddd, #cccccc, #bbbbbb, #aaaaaa, #999999, #888888, #777777, #666666, #555555, #444444, #333333. #222222, #111111, #000000

۲ رقم اول کدهای Hex نماینده رنگ قرمز هستند، رقم های سوم و چهارم نماینده رنگ سبز و ۲ رقم آخر نیز نماینده ی رنگ آبی می باشند. پس با این اوصاف کد #ff0000 به شما رنگ قرمز را می دهد، همچنین کد #۵۵۰۰۰۰ رنگ قرمز کدر را به شما خواهد داد. کد #۲۲۰۰۰۰ نیز قابل پیش بینی است که رنگ قرمز کدرتری را به شما می دهد. حال کد #۰۰ff00 رنگ سبز را به شما خواهد داد و در آخر کد #۰۰۰۰ff رنگ آبی را می دهد. پس منظور این کدها را متوجه شده اید و متوجه شده اید که ترکیب این کدها رنگهای مختلفی را خواهد داد.

• مرحله ی اول:

کدهای زیر را در زیر سلکتور body{ } تایپ کنید:

a:link, a:visited{
text-decoration: underline;
color: #336699;
}

◊ این کدها برای چه هستند؟
در ابتدا شما با کد text-decoration: underline; مطمئن می شوید که تمامی لینک های موجود در وب سایت خط زیرین(Underline) خواهند داشت و همچنین چون کد color: #336699; را اضافه کرده اید، تمامی رنگ لینک هایتان به رنگ آبی در خواهد آمد. این رنگ آبی هست چون دو رقم آخر دارنده ی  بالاترین شماره می باشد (دو رقم آخر مربوط به رنگ آبی می شود).

◊ حالا معرفی سلکتور ها:

» a:link – این کد برای استایل یا صفحه آرایی لینکها بکار می رود. وقتی شما می خواهید یک نوشته را به لینک تبدیل کنید مسلماً از تگهای <a> و </a> استفاده می کنید. بنابراین این سلکتور تمامی نوشته هایی که داخل اینگونه تگها قرار می گیرند را استایل دهی می کنند.

» a:visited – این کد برای استایل یا صفحه آرایی لینکهایی که قبلاً کلیک شده است (صفحه های دیده شده)، بکار برده می شود، بنابراین Visited داخل a:visited نوشته شده است.

اگر دقت کرده باشید ما دو سلکتور را با هم استایل داده ام، هنگامی که شما اینکار را انجام دهید تمامی مشخصات برای هر دو سلکتور اعمال می شود. برای اینکار باید بین سلکتور ها باید علامت ( , ) قرار دهید. این عملی که ما انجام دادیم تنها برای کوتاهی و خلاصه کردن کار است وگرنه شما می توانید کد زیر را که دقیقاً کار کد بالا را انجام می دهد را استفاده کنید.

a:link{
text-decoration: underline;
color: #336699;
}
a:visited{
text-decoration: underline;
color: #336699;
}

• مرحله دوم :

کد های زیر را زیر سکلتورهای a:link, a:visited{ } تایپ کنید:

a:hover{
text-decoration: none;
}

◊ حال این کد برای چیست؟
سلکتور a:hover برای زمانی مورد استفاده قرار می گیرد که شما کرسر موس را بروی لینکها می برید. و چون ما کد text-decoration: none; را برای این سکلتور قرار داده ایم، کاری کردیم که هرگاه کرسر موس بروی لینکی قرار گرفت، خط زیرین آن ناپدید شود.
اگر شما می خواهید که هنگام قرار گرفتن کرسر بروی لینکها رنگ آنها نیز تغییر کند، می توانید از کد زیر استفاده کنید، کاملاً همه چیز مشخص است و فکر نکنم که نیازی به توضیح داشته باشد:

a:hover{
text-decoration: none;
color: #ff0000;
}

این درس خیلی کوتاه بود، منتظر درسهای بعدی باشید….. ناراحت نباشید چون  مطلب طولانی نشانه ی ننوشتن است….. (ضرب المثل گرفته شده از فرهنگستان وبلاگستان)