چگونه برای وردپرس پوسته بسازیم؟(بخش ۱۵)

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

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

wp-php-theme

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

این تنظیمات از یک کد شانزده تایی (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;
}

style-links

این کدها برای چه هستند؟
در ابتدا شما با کد 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;
}

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

معرفی نویسنده


وبلاگنویس، طراح وب سایت و علاقه مند به مباحث IT ...

۱۱ نظر برای این مطلب

  1. ای بابا بعد از این همه مدت ……….

    حداقل تنظیمات فابل فانکشن (تنظیمات اضافه) رو بگو تا من کارمو تموم کنم.

    ممنون

  2. مثل درس های قبلی عالی بود و بی نقص.دست مریزاد و خسته نباشی مهدی جان :)

  3. شکیبا باش…

  4. سلام شاد باشید
    این آموزش چند مرحله دیگه داره ؟
    خواهش می کنم دست آخر همه را پی دف اف کنید و برای دانلود بگذارید
    سپاس

  5. همین قصد رو هم دارم دوست من…

  6. سلام آقا مهدی .
    من تمام آموزش هاتون رو تا اینجا پیگیری کردم . واقعا خیلی عالی بودن .
    فقط طبق گفته ی خودتون فکر می کردم ۱۵ جلسه ای همه چی تموم میشه … واسه همین همش سعی می کردم به این جلسه برسم اما امشب که درس پانزدهم رو خوندم دیدم هنوز خیلی چیزا باقی مونده که توضیح بدید . مثل فارسی سازی و ادامه مبحث استایل . البته به نظرم با FrontPage میشه آدم با استایل ها ور بره و بفهمه که چجوریه . بنابراین اگه زودتر مبحث فارسی سازی رو مطرح کنید ، فکر کنم منطقی تر باشه .
    راستی یه سوال داشتم :
    من چطوری می تونم یه مستطیل طراحی کنم که زاویه هاش خمیده باشه ؟
    آیا XHTML یا PHP همچین امکانی داره یا باید از عکس استفاده کنم ؟
    ممنون .

  7. محمد جان، اتفاقاً قصد دارم بعد از اتمام دوره مقدماتی، یکسری درس دیگه بگذارم که نکاتی مثله همین سوالهایی که پرسیدی رو داخلش بگم…
    ولی چون همین الان پرسیدین جوابش رو به شما می گم…. برای انجام اینکار می تونید از دستورات css3 کمک بگیرید متاسفانه css3 بروی مرورگرهای فایرفاکس ، سافاری و… فقط کار می کنه و اینترنت اکسپلورری هنوز اون رو پوشش نمیده… یک راه دیگه هم داره که البته یکم سخته، استفاده از Jquery هست و در آخر بهترین راه که بروی همه مرورگرها کار میکنه همون استفاده از عکس هست….
    از طریق Xhtml و php هم نمیشه اینکارو کرد چون وظیفه شون چیزه دیگه ای هست.
    موفق باشید…..

  8. […] چگونه برای وردپرس پوسته بسازیم؟(بخش ۱۵) […]

  9. […] چگونه برای وردپرس پوسته بسازیم؟(بخش ۱۵) Add to del.icio.us […]

  10. […] چگونه برای وردپرس پوسته بسازیم؟(بخش ۱۵) Add to del.icio.us Rating 3.00 out of 5 [?] No Comments Posted by admin in پراکنده […]

  11. رنگ قهوه ای چه کدی دارد؟

یک نظر بگذارید