آموزش تغییر استایل متن انتخاب شده

در این پست از یک لرن نیز با یک آموزش جذاب در خدمت وبمستران و علاقه مندان به سی اس اس هستیم

بار ها شاید پیش آمده بخواهید استایل پیش فرض متن انتخاب شده را تغییر دهید اما همچنان به خاطر عدم اطلاع داشتن درباره آن , از ویرایش آن دست برداشته اید

در این پست نحوه کامل ویرایش را برای شما خواهیم گفت پس در ادامه همراه ما باشید ! 

آموزش تغییر استایل متن انتخاب شده

اما برای شروع این کار شما باید کمی با استایل دهی آشنا باشید

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

<style type="text/css">
استایل های شما
</style>

سپس باید با استفاده از انتخاب گر مخصوص , متن انتخاب شده را انتخاب کنیم تا بتوانیم به آن استایل دهیم
انتخاب گری که باید ان را انتخاب کنیم selection:: میباشد اما چرا ؟ چون این گونه استایل دهی ها ( مثال دیگر : استایل دهی به اسکرول بار ) جزو استایل دهی های رزرو شده یا به اصطلاح خاص هستند که برای آن ها باید از سلکتور ( انتخاب گر ) خاص استفاده کنیم پس از استفاده از انتخاب گر کد ما این چنین خواهد شد .

<style type="text/css">
::selection {}
</style>

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

<style type="text/css">
::selection{
    color:#F00;
    background:#FF0;
}
</style>

در استایل دهی بالا در خط 3 کدی نوشتیم تا رنگ متن را پس از انتخاب به رنگ قرمز نغییر دهد
و همچنین در خط 4 کدی نوشتیم که رنگ پس زمینه متن را پس از انتخاب به رنگ زرد تبدیل کند . شما میتوانید به سلیقه خود رنگ هارا تغییر دهید اما هم اکنون نیاز است تا این کد را با تمام مرورگر ها سازگار کنیم یعنی باید پیشوند هر مرورگر را به کد خود اضافه کنیم که پیشوند مرورگر ها را برایتان اماده کرده ایم .

-moz- // فایرفاکس
-webkit- // سافاری و کروم
-ms- //اینترنت اکسپلورر
-o- // اپرا

که باید کد های بالا را به سلکتور خود اضافه کنیم که در نهایت چنین میشود که برای جلوگیری از شلوغی کد را وارد یک خط میکنیم .

<style type="text/css">
::selection{color:#F00; background:#FF0; }
::-moz-selection {color:#F00; background:#FF0;}
::-webkit-selection {color:#F00; background:#FF0;}
::-ms-selection {color:#F00; background:#FF0;}
::-khtml-selection {color:#F00; background:#FF0;}
::-o-selection {color:#F00; background:#FF0;}
</style>

خب الان کد ما اماده است و در پنج مرورگر محبوب کار خواهد کرد فقط کافیست قبل از تگ </head>کد بالا را قرار دهیم

منتظر نظرات شما هستیم …

فرادرس

برچسب ها : ، ، ، ، ، ، ،