آموزش CSS – نحوه اختصاص id و class به برخی تگ های اچ تی ام ال (HTML) (جلسه ۸)

اگر نیاز داشته باشیم تا id یا class یی که ایجاد کرده ایم فقط به برخی تگ های خاص در اچ تی ام ال (HTML) اختصاص یابند، می بایست کد سی اس اس (CSS) خود را به صورت زیر بازنویسی کنیم:

p.myClass {
   background-color:#333;
   color:#fff;
   width:300px;
   font-size:20px;
}

همانطور که در کد فوق ملاحظه می شود ابتدا نام Selector یی تحت عنوان p را نوشته سپس نام Selector خود تحت عنوان myClass را می نویسیم (نیاز به توضیح نیست که همواره از نقطه برای Selector هایی از جنس class استفاده می کنیم). از این پس این class فقط در مورد کلیه تگ های <p> اعمال خواهد شد. برای روشن شدن این مطلب کدهای اچ تی ام ال (HTML) زیر را وارد ویرایشگر متن خود می کنیم:

<!DOCTYPE html>
<html>
     
    <head>
        <meta charset="utf-8">
        <title>asrefonon</title>
        <link type="text/css" rel="stylesheet" href="css/main.css">
    </head>
     
    <body>
        <p class="myClass">استفاده از کلاس در کدهای اچ تی ام ال</p>
        <br/>
        <h1 class="myClass">استفاده از کلاس قبلی در یک تگ دیگر</h1>
    </body>
</html>

در کد فوق class را هم به تگ <p> و هم به تگ <h1> ضمیمه کرده ایم اما از آنجا که در سی اس اس (CSS) دستور داده ایم که این class فقط در مورد تگ های <p> اعمال شود انتظار می رود تغییری در تگ <h1> نبینیم. برای تست کردن این کد فایل خود را در مرورگر باز می کنیم:

xusing_class_selectors_and_id_selectors_together

می بینیم که تاثیر class خود تحت عنوان myClass فقط روی تگ <p> اعمال شده است. این قانون در مورد Selector هایی از جنس id هم صدق می کند با این تفاوت که به جای نقطه می بایست از علامت # استفاده کنیم. برای روشن شدن این مطلب کد فوق را به صورت زیر بازنویسی می کنیم:

p#myClass {
   background-color:#333;
   color:#fff;
   width:300px;
   font-size:20px;
}

با ویرایش کردن کدهای اچ تی ام ال (HTML) خود و نوشتن دستور id به جای کلید واژه class این تغییرات را می توان اعمال نمود. به خاطر داشته باشیم که مابین class یا id و selector نمی بایست Space وجود داشته باشد.

221

اسماعیلی هستم مدیر عصر فنون. فارغ التحصیل مقطع کارشناسی ارشد رشته مهندسی فناوری اطلاعات (IT)

پیشنهاد لحظه ای
ارسال دیدگاه

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

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.

توسط
تومان