آموزش CSS (فصل اول-جلسه ۳) : گزینشگرهای CSS

آموزش CSS (فصل اول-جلسه ۳) : گزینشگرهای CSS 

در زبان  CSS از ۶ طریق می توان یک تگ را انتخاب کرد یا به عبارتی ۶ نوع گزینشگر وجود دارد :

1. گزینشگرهای برچسب  (Tag Selectors)
2. گزینشگرهای کلاس کاذب (Pseudo-Class Selectors)
3. گزینشگرهای کلاس (Class Selectors)
4. گزینشگرهای مفهومی (Contextual Selectors)
5. گزینشگرهای خصوصی (ID Selectors)
6. گزینشگر عمومی (Universal Selector)

حال به تشریح هر کدام از این گزینشگرها به همراه مثال می پردازیم :

۱٫  گزینشگرهای برچسب : این گزینشگرها همان نام تگ های HTML می باشند. در این حالت نام تگ را انتخاب می کنیم و استایل مورد نظرمان را برای آن تعریف می کنیم، در این روش استایل بر همه ی تگ های از این نوع در کل صفحه اعمال می شود. و بیشتر در مواقعی استفاده میشود که بخواهیم یک استایل پیشفرض برای تگ ها تعریف کنیم :

h1 , h2 , h3 , h4 , h5 , h6 {
color: #000;
font-family: Tahoma;
}

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

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

توجه داشته باشید که دو کلاس link  و visited فقط برای تگ های <a> استفاده می شوند و بقیه کلاسهای کاذب را می توان برای همه ی تگ ها استفاده کرد.

درضمن ترتیب قرارگیری این کلاسها نیز بسیار مهم است و اگر طبق ترتیبی در ادامه خواهیم گفت قرار نگیرند، استایل های تعریف شده به درستی کار نخواهند کرد. ترتیب آن ها به صورت زیر باید باشد:

Selector:link
Selector:visited
Selector:hover
Selector:active
Selector:focus

نکته : یک روش برای به خاطر سپردن ترتیب کلاسهای کاذب، به خاطر داشتن کلمه ی LoVe HAte است. (به ترتیب حروف بزرگ در کلمه دقت  کنید) این کلمه به آن معناس که اول link سپس visited پس از آن hover سپس active و در آخر نیز focus  قرار می گیرد.

به مثال زیر دقت کنید :

a:link { color: #0000ff; }
a:visited { color: #ff00ff; }
a:hover { color: #ff0000; }
a:active { color: #00ff00; }

3.  گزینشگرهای کلاس : تا به اینجا شما یاد گرفتید که چگونه برای هر تگی از تگ های HTML استایل مورد نظر را تعریف کنید، اما اگر خواستید به دو تگ یکسان دو استایل مختلف را اختصاص دهید باید چه کنید ؟؟؟؟؟؟ فرض کنید ما کد HTML زیر را داریم :

<p> 7Learn : </p>
<p> JavaScript and Web Design Tutorials </p>

حال می خواهیم ۷learn  به رنگ قرمز و javascript and web design tutorials به رنگ آبی باشد:

p { color: blue; }

اما این کد هر دو کلمه را به رنگ آبی در می آورد؛ اینجاست که باید از کلاس استفاده کرد تا بتوانیم به هر یک از تگ ها، حتی اگر یکسان باشند، استایل مختلفی را اختصاص داد. مانند کد زیر :

<p class="red"> 7Learn : </p>
<p class="blue"> JavaScript and Web Design Tutorials </p>

حال می توانیم برای هر یک از کلمه ها استایل مورد نظر را تعریف کرد :

.red { color: red; }
.blue { color: blue; }

نتیجه کد در مرورگر :

 ::. چند نکته در استفاده از کلاس ها :

1. در انتخاب نام کلاس ها باید دقت داشته باشید که اولین حرف نباید عدد یا نقطه و یا علامت ؟ باشد مثلا کلاس ۷learn اشتباه است و هنگام تعریف استایل کار نخواهد کرد.
2. هنگام نوشتن نام کلاس در زبان CSS قبل از نام باید یک . (نقطه) قرار دهید مانند مثالی که در بالا زده شد.
3.  شما می توانید بیش از یک کلاس برای یک تگ تعریف کنید به این صورت که بین هر نام یک فاصله (space) قرار دهید، مانند مثال زیر  از ۳ کلاس استفاده شده  :

<p class="red big right"> 7Learn.com </p>