با مقالات این سری آموزشی :
- آشنایی با CSS و شروع کار با آن
- آموزش انتخابگر ها (Selectors) در CSS
- روش های اضافه کردن CSS به سایت
- آموزش قرار دادن تصویر پس زمینه در 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>همچنین می توانید کلاس را به یک عنصر خاص اعمال کنید و در این صورت استایل فقط به عنصر خاصی که کلاس فوق را دارد اعمال خواهد شد
به این مثال دقت کنید :
<!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 به درستی نمایش نیابد
