آموزش انتخابگر ها (Selectors) در CSS

بدون دیدگاه

مقالات این سری آموزشی :

  1. آشنایی با CSS و شروع کار با آن
  2. آموزش انتخابگر ها (Selectors) در CSS
  3. روش های اضافه کردن CSS به سایت
  4. آموزش قرار دادن تصویر پس زمینه در CSS

برای اعمال استایل به تگ ها و عناصر HTML ، باید بوسیله انتخابگر ها معین کنید که می خواهید سبک تان به کدوم تگ یا تگ ها اعمال شود . علاوه بر تعیین سبک برای عناصر HTML و تگ ها ، CSS به شما اجازه می دهد انتخابگر خود را به دو صورت Class و Id بنویسید .

 

انتخابگر ID

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

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

برای مثال استایل زیر به عنصری اعمال می شود که id=”para1″ دارد :

<!DOCTYPE html>
<html>
<head>
<style>
#para1
{
text-align:center;
color:red;
} 
</style>
</head>

<body>
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>

نکته : id را هیچ گاه با عدد شروع نکنید چون در فایرفاکس ممکنه کار نکنه

 

انتخابگر Class

انتخابگر class برای اعمال استایل به عناصر html  به صورت دسته جمعی بکار میره .

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

انتخابگر کلاس هم با علامت نقطه “.” شروع می شه

در مثال پایین مشاهده می کنید که همه عناصری که خصیصه class=”center” دارن به وسط صفحه منتقل می شوند :

<!DOCTYPE html>
<html>
<head>
<style>
.center
{
text-align:center;
}
</style>
</head>

<body>
<h1 class="center">Center-aligned heading</h1>
<p class="center">Center-aligned paragraph.</p> 
</body>
</html>

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

در همین رابطه :   چگونه : از Mixin ها در SASS استفاده کنیم؟!

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

<!DOCTYPE html>
<html>
<head>
<style>
p.center
{
text-align:center;
}
</style>
</head>

<body>
<h1 class="center">This heading will not be affected</h1>
<p class="center">This paragraph will be center-aligned.</p> 
</body>
</html>

نکته : class را هیچگاه با عدد شروع نکنید . ممکن هست در internet explorer  به درستی نمایش نیابد

 

دسته بندی : CSS

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

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