انتخابگرها در css- قسمت اول

در css برای اینکه بر روی عنصر و با عنصر هایی ، خصوصیت مورد نظر خود را اعمال کنیم ابتدا باید عناصر مورد نظر را انتخاب کرد و بعد خصوصیات مورد نظر بر روی آنها اعمال خواهد شد .

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

انواع انتخابگر ها :

- انتخابگر های سراسری (Universal Selectors)

- انتخابگر های نوع (Type Selectors)

- انتخابگرهای کلاس (Class Selectors)

- انتخابگرهای نام (ID Selecttors)

شکل کلی نوشتن دستورات css :

 

انتخابگرهای سراسری (Universal Selectors):

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

مثال :

*

{

Color:blue;

}

 

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

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

کاربرد این المان در مواقعی می باشد که بخواهیم یک خصوصیت را بر روی همه عناصر صفحه وب اعمال کنیم .

در بکاربردن این انتخابگر دقت لازم را بکار ببرید .

انتخابگرهای نوع (Type Selectors) :

در بخش انتخابگر این نوع انتخابگرها ، شناسه تگ های html قرار می گیرد.

li

{

Color:red;

}

 

رنگ تمامی li های داخل سند html به رنگ قرمز تبدیل خواهند شد .

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

می توانید چند نوع را بنوسید و آنها را با , از هم جدا کنید :

P,a,span

{

Color:green;

}

 رنگ تمام تگ های p,a,span به  رنگ سبز تغییر میکند .

em

{

Color:blue;

}

 

انتخابگرهای نوع

رنگ تمام  تگ های em به آبی تغییر میکند .

 

انتخابگرهای کلاس:

هر المان می تواند دارای خصوصیتی به نام class باشد .

<p class=”para1”>…</p>

 

نام کلاس یک اسم دلخواه می باشد که دسته عناصر را برای اعمال css مشخص میکند .

به طور مثال با استفاده از class ها میتوانیم عناصر خود را در دسته های مختلفی داشته باشیم .

 

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

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

می توان به هر عنصر بیش از یک class دارد،برای اینکار کافیست بین اسم کلاس ها یک کاراکتر فاصله قرار دهیم  :

<p class=”para1 alert”>…</p>

مثال :

.blue

{

Color:blue;

}

 

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

<span class=”blue”>Hello</span> 

مثال :

 

<body>

<p class="big">This is some <em>text</em></p>

<p>This is some text</p>

<ul>

<li class="big">List item</li>

<li>List item</li>

<li>List <em>item</em></li>

</ul>

</body>

دستورات css :

.big {

font-size: 30px;

font-weight: bold;

}

 

 

 انتخابگر کلاس

تمام عناصری که کلاس big را داشته باشند (p,li) اندازه فونت آنها 30px و ضخیم می شوند .

المان ها محدودیتی در استفاده از یک نام کلاس ندارد و چند المان می توانند خاصیت class مشترکی داشته باشند مانند مثال بالا که دو تگ p,li در خاصیت class خود دارای مقدار مشترک big  باشند .

انتخابگر ID :

هر المان در html می تواند دارای یک خاصیت به اسم ID باشد ، مقداری که برای خاصیت المان ها در نظر گرفته می شود باید منحصر بفرد باشد و هر المان را از سایر المان های دیگر متمایز کند .

دو المان نباید دارای مقداری یکسان در خصوصیت id باشند ، این محدودیت برای انتخابگر class وجود ندارد .

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

<p id=”line1”>…</p>

<a id=”Link2”>…</a>

تفاوت بین ID و Class یک المان مانند هویت شما و  دسته هایی است که شما در آن قرار دارید مانند "دسته دانشجو " .

انتخابگر ID با # شروع میشود و خصوصیات مورد نظر را روی المانی اعمال میکند که دارای ID مورد نظر باشد .

مثال :

#rightmenu

{

Color:#ccc;

Background:lightblue;

}

 همانند class ها می توان خصوصیاتی را به طور مشترک برای چند انتخابگر ID در نظر گرفت مانند :

#leftmenu,#rightmenu,#myid

{

Line-height:25px;

Text-indent:4px;

}

 

خصوصیات مورد نظر روی سه المانی که ID های مورد نظر را داشته باشند اعمال خواهند شد .

گروه سازی انتخابگرها :

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

در گروه سازی انتخابگرها میتوانید انتخابگرهای مختلفی را کنار هم بنویسید به طور مثال میتواند هم انتخابگر کلاس و ID و نوع را کنار هم بنویسید مثال :

P,a.link,#mylink,.book

{

Color:red;

}

 در مثال گروه سازی انتخابگرهای بالا کل تگ های p و کل تگ های a که خاصیت class آنها دارای link باشد و عنصری که خاصیت IDآن mylink باشد و کل المان هایی که خاصیت class آنها book باشد رنگ آنها به قرمز تغییر خواهد کرد .

برای آشنایی بیشتر با انتخابگرها پیشنهاد میکنم پروژه زیر را که نمونه مثال های عملی در آن قرار داده شده است را دانلود نمایید .

پروژه انتخابگرها


توسط : عثمان رحیمی  2 ماه قبل ، سه شنبه 4 شهریور 1393 ساعت 13:21  0  1685

نظر شما برای ما مهم است و به ما در بهبود سایت کمک میکند.


ارسال نظر
  • نام (اختیاری ) :
  • پست الکترونیک :
  • توضیحات :

مطالب مرتبط