🌷 آموزش html5 جلسه ی هجدهم
13 ) صفت عمومی id :
🌟 یکی از صفات بسیار پرکاربرد زبان html5 ، صفت id می باشد . اگر از ابتدای دروس ما را همراهی کرده باشید ، گفتیم که این صفت و صفت class برای نام گذاری المان به کار می رود و بعدها از این نام می شود استفاده های مختلفی کرد .
🌟 هم از id برای اضافه کردن کدهای جاوااسکریپت به المان استفاده می شود . هم برای اضافه کردن استایل های css در دو حالت external و internal استفاده می شود و هم برای اتصال دادن بعضی المان به المان های دیگر . لذا دامنه ی بزرگتری از صفت عمومی class دارد .
🌟 مقداری که صفت id می گیرد ، صرفا یک نام دلخواه است و معرف آن المان می باشد .
🌟 یک فرق مهم بین صفت class و صفت id اینست که نام کلاس لازم نیست اختصاصی باشد . یعنی می توانیم به ده المان ، نام کلاس یکسان دهیم . اما نام id فقط باید یکی باشد یعنی اختصاصی باشد و نمی توانیم یک نام را به بیش از یک المان اختصاص دهیم
🌟 این صفت توسط همه ی مرورگرها پشتیبانی می شود .
ویژگی های نامی که به عنوان id می دهیم :
1⃣ باید حداقل یک کاراکتر باشد .
2⃣ بین حروف نباید space باشد .
3⃣ این نام به حروف کوچک و بزرگ حساس نیست .
🌟 مثال عملی :
می خواهیم با استفاده از صفت عمومی id ، یک سری استایل های css را به صورت internal به المان body دهیم . استایل های ما شامل تغییر رنگ و اندازه فونت می باشد :
1 ) نوت پد را باز کنید . کدهای زیر را در آن تایپ کنید ! سپس فایل را با فرمت html. ذخیره کنید .
<html>
<head>
<style>
#exname{
color:red;
font-size:20px;
}
</style>
</head>
<body id="exname">
hello world !
</body>
</html>
همانطور که مشاهده می کنید ، ما برای اینکه رنگ متن و فونت خودمان را با استایل های css و روش internal اعمال کنیم . باید ابتدا یک نامی به المان بدهیم . این نام را می توانستیم هم با صفت class و هم با صفت id بدهیم . سپس باید کدهای css را درون المان style قرار دهیم . المان style را می توانیم در هرجای کدها استفاده کنیم ولی بهتر و معمول تر اینست که در المان head قرار دهیم . اکنون با فرض اینکه زبان css را می دانیم ، کدهای موردنظر را در این استایل قرار می دهیم . و همانطور که در کدهای css می بینید ما از id برای معرفی المان خودمان استفاده کردیم . علامت # هم نشان دهنده ی id بودن آن است . چنانچه در مورد کلاس از . استفاده می کردیم
اکنون فایل را با مرورگر ( ترجیحا فایر فاکس ) باز کنید . می بینید که کدهای css ما به درستی روی محتوای المان body اعمال شدند .
برای دریافت مطالب در تلگرام خود ، عضو کانال تلگرامی html5 شوید.
