آموزش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

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

(منتشر شده: 0 | در انتظار تایید: 0)

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