گزینشگرهای css

گزینشگرهای css

گزینشگرهای css

در دستورات css دو بخش وجود دارد:  گزینشگرهای css و خصوصیات.

  • گزینشگرهای css: برچسبی است که می‌خواهیم سبکی را روی آن اعمال کنیم.

  • خصوسیات(prppertise): سبکی که باید اعمال شود را مشخص می‌کند. خصوصیات ما بین {} قرار می‌گیرد. مواردی مثل نوع فونت، رنگ، بک گراند، سایز و … خصوصیاتی هستند که ما روی گزینشگرهای css اعمال می‌کنیم.

در کد زیر h1 گزینشگر (selector) و font family: sans–serif و color: #3366cc خصوصیات هستند.

 } H1

;font family: sans–serif

;color: #3366cc

{

همچنین در کد بالا، color خصوصیت است و 3366cc# مقدار آن.

گزینشگر برچسب

Tag selectors ساده‌ترین شکل گزینشگرهای css است. در این حالت ما به یک برچسب، سبک خاصی را نسبت می‌دهیم. عمدتا در مواقعی استفاده می‌کنیم که بخواهیم سبک خاصی را در کل سایت اعمال کنیم. برای مثال می‌خواهیم فونت خاصی را روی کل سایت اعمال کنیم:

 } Body, p, td, th, div, blockquote, dl, ul, ol

;Font-family: tahoma, verdada, arial, helvetica, sans-serif

{

گزینشگرهای کلاس کاذب

Pseudo-class selectors شکل دیگری از گزینشگرهای css است. برای برچسبی مانند a موارد زیر گزینشگرهای کاذب هستند.

   {A:link {color: #0000ff

{A:visited { color: #ff00ff

{A:hover { color: #00ccff

اولی: تمام لینک‌ها را به رنگ آبی نمایش می‌دهد.

دومی: لینک‌هایی که بازدید شده‌اند به رنگ بنفش در می‌آید.

سومی: وقتی موس روی لینک قرار می‌گیرد آن را به رنگ آبی روشن نمایش می‌دهد.

گزینشگرهای کلاس

اگر ما سبکی را به یکی از برچسب‌های html اعمال کردیم ولی بعد تصمیم گرفتیم فقط در مواردی، سبک دیگری به آن برچسب اعمال شود، می‌توانیم از کلاس استفاده کنیم. برای مثال ما رنگ پارگراف‌ها را آبی تعریف کرده‌ایم. می‌خواهیم در صفحه‌ای که رنگ پس زمینه آبی است،رنگ آن متفاوت باشد. یک کلاس با نام testforp تعریف می‌کنیم:

{P { color: #0000ff

{testforp { color: #ffffff.

برای اینکه این کلاس روی پارگراف خاص اعمال شود باید به صورت زیر عمل کنیم:

 <p/>متن پارگراف<“p class=” testforp>

گزینشگرهای مفهومی

در مثال بالا فرض کنید می‌خواهید به تمام لینک‌هایی که در پارگراف بالا است سبکی را اعمال کنیم. به جای تعریف کلاس برای هر کدام از لینک‌ها از گزینشگرهای مفهومی استفاده می‌کنیم. در مثال زیر روی لینک‌هایی که در پارگراف با کلاس testforp هستند، سبکی اعمال می‌شود.

{P{ color: #0000ff

{testforp { color: #ffffff.

 } P.testforp a:link, p.visited

;Font-weight: bold

;Color: #ffffff

{

گزینشگرهای خصوصی

Id selectors شکلی دیگر در گزینشگرهای css است. این گزینشگر برای یک برچسب خاص استفاده می‌شود. به صورت زیر:

{testforp { color:#ffffff#

این سبک روی برچسب p که id مربوطه را دارد اعمال می‌شود.

 <p/>متن پارگراف<“p id=” testforp>

بازدیدها: 7

درباره نویسنده

مطالب مرتبط

نظر بدهید

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