آشنایی با انواع سلکتورها یا انتخابگرها در CSS

با نام و یاد خدای مهربون. سلام خدمت تمام کاربران عزیز
در این جلسه می خواهیم ابتدا با انواع سلکتورها در CSS که در جلسه سوم به صورت مختصر به آن پرداختیم، آشنا شویم . سپس با الویت دهی استایل ها و کدهای CSS Reset به صورت مختصر و مفید آشنا خواهیم شد.

در آموزش زیر به سوالات زیر پاسخ می دهیم:

  • انواع انتخابگر ها در css به چه شکلی می باشند؟
  •  انتخابگرها را ترکیب کنیم؟
  •  الویت استایل دهی در css به چه شکل می باشد؟
  • چگونه الویت یک استایل را تغییر دهیم؟
  • و…

با ما همراه باشین  ;-) 

در جلسه سوم گفتیم در مورد روش های انتخاب یک عناصر از سند html و استایل دهی به آن ها در فایل css صحبت کردیم .

انتخابگرها

در ادامه با چندین روش انتخاب المان یا selectorها آشنا می شویم:

  1. element
  2. class
  3. id

سلکتور element

 که بسیار ساده است وتا الان با آن کار کردیم. در واقع از طریق نام المان آن را فراخوانی می کنیم مثلا در کد زیر تمام المان های a موجود در سند html با رنگ #ff33ff نمایش داده شوند:

a{
          color : #ff33ff;
}

سلکتور class.

برای اینکه از روش دوم استفاده کنیم لازم است در سند html، یک صفت برای المانی که می خواهیم استایل بدهیم ، تعریف کنیم به نام class و هر مقدار دلخواهی که می خواهیم به آن بدهیم . سپس در فایل css، المان را با نام کلاس اش صدا می زنیم ، علامت . (نقطه) قبل از نوشتن مقدار class مهم است.

در سند HTML :فرضا تگ a با کلاس link داریم:

<a   class=”link”   href=”#”>تگ لینک</a>

در فایل CSS : یعنی تمام المان ها  باکلاس link با رنگ #ff33ff نمایش داده شوند:

.link{
       color : #ff33ff;
}

ممکن است المان های دیگری با همین کلاس link در سند html وجود داشته باشد. که همگی این استایل را به خود می گیرند.

نکته: یک عنصر می تواند در چندین کلاس قرار بگیرد .مثلا دو کلاس داریم با استایل های مختلف به نام های link و txt . در این صورت باید در سند html به صورت زیر به class مقدار بدهیم. هر دو کلاس را با فاصله کنار هم می نویسیم.این طور استایل دادن پرکاربرد است.

<a   class=”link  txt”   href=”#”>تگ لینک</a>

سلکتور id#

برای اینکه از روش سوم استفاده کنیم لازم است در سند html، یک صفت برای المان مورد نظر تعریف کنیم به نام id و مقدار منحصر به فرد به آن بدهیم. سپس در فایل css، المان را با آی دی اش صدا بزنیم ، علامت # (شارپ) قبل از نوشتن مقدار id مهم است.توجه داشته باشید که مقدار id نباید تکراری باشد و هیچگاه با عدد آغاز نمی شود.در تصویر زیر می توانید هر سه روش را ببینید:

مثال:

در سند HTML :فرضا تگ a با id =link داریم:

<a   id=”link”   href=”#”>تگ لینک</a>

در فایل CSS : یعنی المان با آی دی link با رنگ #ff33ff نمایش داده شود:

#link{
       color : #ff33ff;
}

چون id منحصر به فرد است فقط یک المان با کلاس link در سند html وجود دارد که این استایل را به خود می گیرد.


ترکیب انتخابگرها

  1. element , element
  2. element element
  3. و ….(سلکتورهای دیگه ای از نوع ترکیبی داریم که مربوط به css3 می شوند و ان شالله در آینده با آن ها آشنا خواهیم شد.)

 

سلکتور element , element

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

مثال:

در سند HTML :کدی به شکل زیر داریم:

<a  href=”#”>تگ لینک</a>
<p>پاراگراف</p>

در فایل CSS : یعنی تمام المان های a و p در سند html با رنگ #ff33ff نمایش داده شود:

p,a {
       color : #ff33ff;
}

سلکتور element  element

قبل از توضیح در مورد این سلکتور باید بدانیم تگ والد و فرزند چیست؟ به تگی که در دل تگ دیگر قرار بگیرد فرزند و به تگی که تگ دیگر را در برگرفته والد می گویند.
کد زیر را در جلسه قبل کار کردیم به یاد بیاورید: تگ ul پدر یا والد تگ li و فرزند تگ body می باشد.

<body>
<ul>
  <li>شماره 1</li>
  <li>شماره 2</li>
  <li>شماره 3</li>
</ul>
</body>

در جلسه قبل برای حذف bullet ها از تک تک عناصر li داخل تگ ul از سلکتور element element استفاده کردیم:

ul li {
                list-style: none;
}

پس به صورت کلی برای استایل دهی به عناصر فرزند یک والد خاص می توانیم به صورت سلسله مراتبی از این سلکتور استفاده کنیم.(یه تستی بزنید و نتیجه رو ببینید)


الویت استایل دهی در CSS

در صورتی که به المانی از سه روش برای استایل دهی استفاده کنیم و به فرض مثال استایل color را بدهیم ،رنگی اعمال می شود که در روش inline  تعریف شده است پس الویت با روش inline می باشد.

  • در فایل CSS اگر به المانی دوبار استایل داده باشیم، استایلی اعمال می شود که در خط پایین تری قرار گرفته باشد.
  • همیشه سلکتور Class الویت بالاتری نسبت به نام المان دارد.
  • همیشه سلکتور Class الویت پایین تری نسبت به ID دارد هر چند در خط پایین تری قرار گرفته باشد. مثلا المانی داریم که هم Class دارد هم ID. استایلی که در ID قرار گرفته اعمال می شود.

مثال: زیر را در نظر بگیرد که به روش internal استایل داده ایم. بین استایل هایی که به h1 داده شده استایل id یعنی int# اعمال خواهد شد. هر چند استایل class و نام المان در خط های پایین تری قرار دارند. پس رنگ هدر آبی خواهد شد.

<!DOCTYPE html>
<html>
 <head>
  <style>
    #int{background-color: blue;}
    .intro {background-color: yellow;}
    h1 {background-color: red;}
  </style>
 </head>
 <body>
    <h1 id=”int” class=”intro“>This is a heading</h1>
</body>
</html>

تغییر الویت استایل دهی با important!

در صورتی که بخواهیم یک استایلی بر تمام استایل های دیگر الویت داشته باشد و همه ی استایل های دیگر را کنار بزند از کلمه کلیدی important! استفاده می کنیم.

مثال: در سند HTML کدی به شکل زیر داریم، که یک استایل inline دارد، id و دوتا class هم دارد.

<h  id=”int” class=”intro intro2”  style=”background-color: yellow”>This is a heading</p>

به صورت اکسترنال هم یک فایل css به شکل زیر داریم:

<style>
h { background-color: red; }
.intro { background-color: green !important; }
#int { background-color: blue; }
.intro2{ background-color: orange; }
</style>

با وجود کلمه کلیدی important! استایل رنگ سبز اعمال می شود بدون حتی فکر کردن در مورد استایل های دیگر!


انتخابگر *

یکی از انتخابگرهای پرکاربرد که در هیچ کدام از دست های بالا قرار نگرفت، * می باشد. برای اینکه تمام المان های موجود در سند html را صدا بزنیم تا به آنها استایل بدهیم از علامت * استفاده می کنیم. در مثال زیر تمام المان های موجود در سند html با رنگ #ff33ff نمایش داده می شوند:

*{
color : #ff33ff;
}

CSS Reset

یکی از کارهای مهمی که در طراحی سایت باید در نظر بگیریم این است که باید چنان طراحی شود که با اکثر مرورگر ها سازگار باشد یعنی نمایش یکسانی در همه مرورگر ها داشته باشد. برای همین در پروژه های جدی باید حتما یک سری کد css به نام  CSS Reset را در ابتدای فایل CSS خود قرار دهیم.

CSS Reset چیست؟

 CSS Reset ها به ما این امکان را می دهد که استایل های پیشفرضی که مرورگرها روی تگ های مختلف اعمال می کنند را از بین ببریم. اضافه کردن این کدها به فایل css باعث می شود که صفحه‌ی وبی که طراحی می کنیم در تمام مرورگرها، به یک شکل نمایش داده شوند.(از این  منبع می توانید کد reset مورد نظر را کپی کنید البته در حال حاضر و در این مقطع از آموزش ما احتیاجی به این کدها نداریم )

 

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

 

باز هم تاکید می کنم اگر خودتون دست به کار نشین و کد نزنید، خوندن این مطالب هیچ فایده ای نداره! اگر سوال یا نظری دارین میتونید از طریق دیدگاه زیر همین پست با ما در ارتباط باشین. شاد باشید  ;-) 

به این مقاله چند تا ستاره میدی؟
[تعداد رای: 6 امتیاز: 5]