آموزشcss – درس سوم – ID و Class

[ آخرین بازنگری ۲۰ آبان ۱۳۹۵ ] [ نسخه چاپی ]

در درس گذشته با انتخابگر(selector) و نحوه استفاده از آن آشنا شدیم ، در این درس نیز با انواع انتخابگر های css آشنا میشویم.علاوه بر عناصر html، در css میتوانید انتخابگری با نام دلخواه خود ایجاد نمایید و از آنها با عنوان id و class استفاده نمایید.
ID : این نوع انتخابگر ها زمانی استفاده می شوند که قصد داشته باشید یک شیوه را به یک عنصر منحصر به فرد اعمال کنید.برای اینکه مشخص کنید یک انتخابگر از نوع ID می باشد در ابتدای آن کاراکتر # را اضافه می کنیم و برای اینکه این مشخصه در تگ html مورد استفاده قرار گیرد ، در تگ html نیز از مشخصه ی id استفاده میکنیم.به مثال زیر توجه کنید:

#MyId{
Color:red;
Font-wight:bold;
}

حال برای فراخوانی انتخابگر از نوع id با نام MyId در تگ html خود اینگونه عمل میکنیم:

<h1 id="MyId"> … </h1>

به این ترتیب تگ h1 معرف هایی که ما تعریف کردیم را دریافت می کند
Class : انتخابگر از نوع کلاس نیز مانند id است با این تفاوت که می توانید از این نوع برای گروه عناصر استفاده کنید و تنها منحصر به یک گروه خاص نمی باشد(برخلاف id).این به شما اجازه می دهد از یک کلاس برای چندین عنصر html که شبیه هم هستند از یک کلاس استفاده نمایید.

جزوه آموزشی css

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

.post{
Font-family:Tahoma,verdana,arial;
Font-size:12px;
}

و در تگ html اینگونه خواهیم داشت:

<p class="post">…</p>

همچنین میتوانید یک عنصر html را توسط یک کلاس تحت تاثیر قرار دهید.در مثال زیر تمام تگ های <p> که مقدار calss آنها برابر Center باشد وسط چین نمایش داده میشوند:

p.center{
text-align:center;
}

نکته : هیچگاه نام دلخواهی که برای ID و Class انتخاب می کنید با یک عدد شروع نشود!چرا که در مرورگر Mozilla/firefox پشتیبانی نخواهد شد.

احتمالا این مطالب برای شما جالب هستند

ایجاد منوی افقی ساده با تکنیکهای css
آموزشcss – درس پنجم – تصویر زمینه
آموزش css – درس ششم – ویرایش متن
استایل بندی لیست‌ها و آشنایی با مفاهیم آن در CSS
آموزش جامع ایجاد منوی آبشاری با استفاده از CSS در طراحی سایت
آموزش css – درس دوم-دستورات

گفتگو پیرامون آموزشcss – درس سوم – ID و Class

(منتشر شده: 1 | در انتظار تایید: 0)
بهنام باقرپوز

درود خدمت یکایک اساتید محترم:
مطالب و تاپیک های جامع و روانی رو اراعه دادین
ممنون و پاینده باشید…!

پاسخ دهید

مرام‌نامه‌ی ارسال دیدگاه را رعایت کرده‌ام! (»نمایش مرام‌نامه)