در یکی از مقاله های آموزشی، صفت ها در html را توضیح داده ایم. نوع خاص و پرکاربردی از مشخه ها در html، مربوط به دو نوع از آن هاست.
صفت های class و id در html، این امکان را در طول فرآیند طراحی صفحات وب به شما می دهند تا نامگذاری و رده بندی مناسبی برای عناصر مختلف صفحات سایت داشته باشید.
وقتی عناصر به وسیله ی صفت های class و id نامگذاری می شوند؛ این قابلیت را خواهیم داشت تا بتوانیم عناصر html را انتخاب کنیم تا به وسیله ی جاوااسکریپت کنترل کرده و یا به وسیله ی سی اس اس سبک دهی کنیم.
صفت id
اگر در هر صفحه، یک عنصر با نام مورد نظرتان دارید، می توانید از صفت ی id برای نامگذاری آن استفاده کنید. مثلا در طراحی سایت، به طور منطقی در هر صفحه تنها یک لوگو وجود دارد. یعنی صفحات دارای چند لوگو نیستند! بنابر این می توانید برای نام گذاری عنصر مربوط به لوگو، از صفت id استفاده کنید:
[html]<a id="logo" href="https://onliner.co">web design</a>[/html]
صفت class
اگر در هر صفحه، این احتمال وجود داشته باشد که یک یا چند عنصر با یک نام وجود داشته باشند، از صفت class برای نامگذاری آن استفاده می کنیم. مثال ممکن است یک بخش با آی دی gallery داشته باشیم که ممکن است در آن چندین آیتم وجود داشته باشند (در یک گالری چند تصویر وجود دارد). در این صورت مثال زیر گزینه ی خوبی است:
[html]<div id="gallery">
<img src="#" alt="#" />
<img src="#" alt="#" />
<img src="#" alt="#" />
<img src="#" alt="#" />
</div>[/html]
ترفند:
برای مشخص کردن تگ های پایانی برای هر کدام از عناصری که با آی دی و یا کلاس نامگذاری شده اند، با استفاده از توضیحات اچ تی ام ال (html comments)، می توانید مانند کد روبرو استفاده کنید:
[html]<div id="content">
<ul>
<li><a href="#">html</a></li>
<li><a href="#">css</a></li>
<li><a href="#">php</a></li>
</ul><!– .nav –>
</div><!– #content –>[/html]
در این روش علاوه بر نوشتن نام هر عنصر، نوع آن را نیز مشخص می کنیم. این کار با قرار دادن # قبل از نام عنصری که نام آن با آی دی مشخص شده است و همچنین با قرار دادن . قبل از نام عنصری که نام آن با کلاس مشخص شده است، انجام می شود. استفاده از این تکنیک به خوانایی کدها خیلی کمک می کند.
نکته:
علت انتخاب # و . برای مشخص کردن آیدی ها و کلاس ها این است که در جاوااسکریپت و سی اس اس، آیدی ها و کلاس ها با همین نشان ها انتخاب می شوند.
عالی بود
ممنون
مطلب کاربردی و خوبیه، فقط ب نظر من بهتر بود ب جای کلمات صفت و عنصر و…. از همون کلمات انگلیسی استفاده میکردید.
سلام و درود
ممنون از نظر شما.
بررسی و لحاظ می گردد.
موفق و شاد باشید
سلام خدمت شما وخسته نباشید
در بخش کلاس بیشتر توضیح بدید لطفا
خصوصا در بخش ترفند کلاس منتظر جواب هستم
با عرض سلام و احترام خدمت شما
لطفا اگر سوالی برای تان پیش آمده است، به صورتی دقیق تری بپرسید تا بتوانیم در خدمت تان باشیم. مثلا آیا در طراحی و کدنویسی یک صفحه ی وب با مشکلی یا سوال خاصی مواجه شده اید؟
خیلی ممنون از این پستی که گذاشتین خیلی بدردم خرد!