گزینشگرهای CSS
در زبان CSS از 6 طریق می توان یک تگ را انتخاب کرد یا به عبارتی 6 نوع گزینشگر وجود دارد :
- گزینشگرهای برچسب (Tag Selectors)
- گزینشگرهای کلاس کاذب (Pseudo-Class Selectors)
- گزینشگرهای کلاس (Class Selectors)
- گزینشگرهای مفهومی (Contextual Selectors)
- گزینشگرهای خصوصی (ID Selectors)
- گزینشگر عمومی (Universal Selector)
حال به تشریح هر کدام از این گزینشگرها به همراه مثال می پردازیم :
1. گزینشگرهای برچسب : این گزینشگرها همان نام تگ های HTML می باشند. در این حالت نام تگ را انتخاب می کنیم و استایل مورد نظرمان را برای آن تعریف می کنیم، در این روش استایل بر همه ی تگ های از این نوع در کل صفحه اعمال می شود. و بیشتر در مواقعی استفاده میشود که بخواهیم یک استایل پیشفرض برای تگ ها تعریف کنیم :
2. گزینشگرهای کلاس کاذب : این سیلکتورها برای نمایش رویدادهای پویا مورد استفاده قرار می گیرند ؛ این رویدادها می توانند مثل حرکت موس یا کلیک بر روی عنصر باشند. کلاس های کاذب به طراح، آزادی عمل می دهند که چگونگی رفتار عنصر در شرایط مختلف را تعیین کند.
طریقه استفاده از کلاس های کاذب به اینگونه است که پس از نام گزینشگر یک علامت : (دو نقطه) و سپس نام یکی از کلاس های کاذب می آید. کلاس های کاذب مختلف به همراه توضیحاتشان را می توانید در تصویر زیر مشاهده کنید:
توجه داشته باشید که دو کلاس link و visited فقط برای تگ های <a> استفاده می شوند و بقیه کلاسهای کاذب را می توان برای همه ی تگ ها استفاده کرد.
درضمن ترتیب قرارگیری این کلاسها نیز بسیار مهم است و اگر طبق ترتیبی در ادامه خواهیم گفت قرار نگیرند، استایل های تعریف شده به درستی کار نخواهند کرد. ترتیب آن ها به صورت زیر باید باشد:
به مثال زیر دقت کنید :
3. گزینشگرهای کلاس : تا به اینجا شما یاد گرفتید که چگونه برای هر تگی از تگ های HTML استایل مورد نظر را تعریف کنید، اما اگر خواستید به دو تگ یکسان دو استایل مختلف را اختصاص دهید باید چه کنید ؟؟؟؟؟؟ فرض کنید ما کد HTML زیر را داریم :
حال می خواهیم 7learn به رنگ قرمز و javascript and web design tutorials به رنگ آبی باشد:
اما این کد هر دو کلمه را به رنگ آبی در می آورد؛ اینجاست که باید از کلاس استفاده کرد تا بتوانیم به هر یک از تگ ها، حتی اگر یکسان باشند، استایل مختلفی را اختصاص داد. مانند کد زیر :
حال می توانیم برای هر یک از کلمه ها استایل مورد نظر را تعریف کرد :
نتیجه کد در مرورگر :
::. چند نکته در استفاده از کلاس ها :
- در انتخاب نام کلاس ها باید دقت داشته باشید که اولین حرف نباید عدد یا نقطه و یا علامت ؟ باشد مثلا کلاس 7learn اشتباه است و هنگام تعریف استایل کار نخواهد کرد.
- هنگام نوشتن نام کلاس در زبان CSS قبل از نام باید یک . (نقطه) قرار دهید مانند مثالی که در بالا زده شد.
- شما می توانید بیش از یک کلاس برای یک تگ تعریف کنید به این صورت که بین هر نام یک فاصله (space) قرار دهید، مانند مثال زیر از 3 کلاس استفاده شده :
|
1
|
<p class="red big right"> 7Learn.com </p>
|
4.گزینشگرهای مفهومی : هنگام تعریف یک کلاس برای یک تگ، اگر تگ دیگری ( همسان یا غیر همسان) همان نام کلاس را نیز داشته باشد استایل تعریف شده به آن تگ نیز اختصاص داده خواهد شد. به مثال زیر دقت کنید :
فرض کنید استایل زیر را نیز برای آن ها تعریف کرده باشیم :
همانطور که می بینید اینکار بسیار خسته کننده خواهد بود اگر تعداد زیادی لینک را داشته باشیم و بخواهیم به همه ی آنها کلاس sidebar را اضافه کنیم. برای صرفه جویی هم در وقت و هم در کدنویسی می توان کدهای بالا را به شکل زیر تغییر داد:
سپس در CSS از این گزینشگر استفاده کرد.
این گزینشگر به آن معناس که همه ی تگ های a که در divی با کلاس sidebar هستند را انتخاب کن.
به اینگونه گزینشگر ها، گزینشگرهای مفهومی گفته می شود.
5. گزینشگرهای خصوصی : اینگونه گزینشگرها همانند گزینشگرهای کلاس هستند با این تفاوت که برای تعریف آنها باید از صفت id در html استفاده کرد. مانند زیر:
و در هنگام تعریف استایل برای انتخاب نام id که تعریف شده، قبل از نام id باید یک علامت # قرار داده شود:
6 . گزینشگر عمومی : این گزیشگر موقعی استفاده می شود که بخواهید همه ی تگ های صفحه html تان دارای خصوصیت هایی مشابه باشند، به طور مثال اگر زبان صفحه html ما فارسی و راست باشد، و بخواهیم فونت همه ی تگ ها Tahoma باشد بجهی اینکه نام تک تک تگ ها را بنویسیم از این گزینشگر استفاده می کنیم که علامت آن * (ستاره) می باشد :
این کد باعث می شود که فونت همه ی تگ ها Tahoma و رنگ متن همه ی تگ ها نیز سیاه باشد.
بسیار خب، تا اینجا با طریقه ی انتخاب یک تگ با استفاده از این 6 گزینشگر ، آشنا شدید در جلسه بعدی که فصل دو خواهد بود ، شما را با خصوصیت های قالب بندی متن آشنا خواهیم کرد.