facebook شماره تماس09331377032
خدمات طراحی سایت
طراحی و اجرای شبکه های کامپیوتری در کرمانشاه و شهرستانهای تابعه
انجام پروژه های دانشجویی
آموزش های طراحی وب
آموزشهای شبکه

CSS Id and Class

کلاس class و آی دی id در css
یکی از قابلیتهای css امکان استفاده از class و id در تعریف style برای عناصر موجود در صفحات html است، class و id الگوهایی کلی را تعریف می کنند که از آن الگوها در شکل دهی ظاهری و ایجاد قابلیتهای تگ های html استفاده می شود.
The id and class Selectors
تعریف class و id در css
id و class با علائم خاصی در کدهای css شناخته می شوند، برای id از علامت # و برای class از علامت نقطه استفاده می کنیم.
The id Selector
انتخابگر id
این انتخابگر جهت تعیین سبک برای فقط یک عنصر به کار می رود.
id بایستی در صفحه یکتا باشد .
انتخابگر id از صفت id عنصر HTML استفاده کرده و با علامت # تعریف می شود.
سبک زیر برای عنصری که صفت id آن برابر para1 است (id="para1″) به کار می رود

مثال برای css id

پیش نمایش
نکته :از id برای عناصر یکتا استفاده می شود (یعنی هر id مخصوص تنها یک تگ است) و استفاده از چند id هم نام در یک صفحه مجاز نیست
نکته : نام ID را با عدد شروع نکنید. چون در Mozilla/Firefox به درستی عمل نمی کند..
The class Selector
انتخاب گر CLASS
انتخابگر class برای تعین سبک گروهی از عناصر HTML به کار می رود. برخلاف انتخابگر id، انتخابگر class بیشتر اوقات در چندین عنصر به کار می رود.
این کار به شما اجازه می دهد که یک سبک خاص را به تعداد زیادی عنصر HTML با همان class اعمال کنید.
انتخابگر class از صفت class عنصر HTML استفاده کرده و با علامت نقطه ( . ) تعریف می شود.
در مثال زیر همه عناصر HTML با class="center" وسط چین شده اند.

نکته : نام یک class را با یک عدد آغاز نکنید زیرا فقط توسط مرورگر IE پشتیبانی می شود.
مثال برای The class Selector

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

Element – انتخاب یک عنصر: کد نمونه زیر تمامی عناصر p موجود در صفحاتی که استایل زیر را اضافه نموده باشند را انتخاب و رنگ پس زمینه آنها را قرمز می نماید .

element,element- انتخاب چند عنصر با هم : کد نمونه زیر تمامی عناصر p و h1موجود در صفحاتی که استایل زیر را اضافه نموده باشند را انتخاب و رنگ پس زمینه آنها را قرمز می نماید .

element element – انتخاب عناصر تو در تو : کد نمونه زیر تمامی عناصر p که در داخل تگ divموجود در صفحاتی که استایل زیر را اضافه نموده باشند را انتخاب و رنگ پس زمینه آنها را قرمز می نماید .

element>element- انتخاب فرزند یک عنصر : کد نمونه زیر تمامی عناصر p که تگ والد آنها تگ div باشد موجود در صفحاتی که استایل زیر را اضافه نموده باشند را انتخاب و رنگ پس زمینه آنها را قرمز می نماید .

element+element- انتخاب عناصر متوالی یا پشت سر هم : کد نمونه زیر تمامی عناصر p که بلافاصله بعد از تگ divموجود در صفحاتی که استایل زیر را اضافه نموده باشند را انتخاب و رنگ پس زمینه آنها را قرمز می نماید .


برچسب مطالب :
css چیست| قواعد نوشتاری زبان css | کلاس و id در css| چگونگی عملکرد css| تنظیم پس زمینه background در css | متن در css| فونت در css | لینک ها در css | لیستها در css | جداول در css| باکس Box Model در css | ویژگی css border | ویژگی css outline| ویژگی css margin | ویژگی css padding | گزینشگرهای گروهی در Css | خاصیت css dimension | خاصیت css display | خاصیت css position | خاصیت css floating | خاصیت css align | شبه کلاسها در css | شبه عناصر در css | نوار هدایت در css | گالری تصاویر در css| ایجاد تصاویر شفاف در css| خاصیت image sprites در css | انواع رسانه ها در css | انتخاب گرها در css| معرفی css3| حاشیه در css3| پس زمینه در css3| خاصیت css3 gradients| جلوه های متن در Css3| فونت در css3| تغییر شکل های 2 بعدی در css3| ترنسفرم های سه بعدی در css3 | خاصیت css3 transitions | انیمیشن در css3 | ستونهای چند گانه در css3 | رابط کاربری css3 |
css چیست
قواعد نوشتاری زبان css
کلاس و id در css
چگونگی عملکرد css
تنظیم پس زمینه background در css
متن در css
فونت در css
لینک ها در css
لیستها در css
جداول در css
باکس Box Model در css
ویژگی css border
ویژگی css outline
ویژگی css margin
ویژگی css padding
گزینشگرهای گروهی در Css
خاصیت css dimension
خاصیت css display
خاصیت css position
خاصیت css floating
خاصیت css align
شبه کلاسها در css
شبه عناصر در css
نوار هدایت در css
گالری تصاویر در css
ایجاد تصاویر شفاف در css
خاصیت image sprites در css
انواع رسانه ها در css
انتخاب گرها در css
معرفی css3
حاشیه در css3
پس زمینه در css3
خاصیت css3 gradients
جلوه های متن در Css3
فونت در css3
تغییر شکل های 2 بعدی در css3
ترنسفرم های سه بعدی در css3
خاصیت css3 transitions
انیمیشن در css3
ستونهای چند گانه در css3
رابط کاربری css3