مطالب عمومی

صفت های class و id در html

مشاوره رایگان

برای مشاوره در زمینه
سایت و سئو
با ما تماس بگیرید.

شبکه های اجتماعی ما
دوره سئو مقدماتی

یک دوره مقدماتی و رایگان سئو که بسیار پربار و سرشار از تجربه مدرس و با کیفیت بالا تهیه شده تا بتوانید در زمان کمتری وب سایت را سئو کنید.

5528 نفر
3 دقیقه
گروه آموزش طراحی سایت
بروزرسانی در: آبان 6, 1390

فهرست مطالب

در یکی از مقاله های آموزشی، صفت ها در 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]

در این روش علاوه بر نوشتن نام هر عنصر، نوع آن را نیز مشخص می کنیم. این کار با قرار دادن # قبل از نام عنصری که نام آن با آی دی مشخص شده است و همچنین با قرار دادن . قبل از نام عنصری که نام آن با کلاس مشخص شده است، انجام می شود. استفاده از این تکنیک به خوانایی کدها خیلی کمک می کند.

نکته:

علت انتخاب # و . برای مشخص کردن آیدی ها و کلاس ها این است که در جاوااسکریپت و سی اس اس، آیدی ها و کلاس ها با همین نشان ها انتخاب می شوند.

به این صفحه رتبه دهید
7 دیدگاه
انتشار: شهریور 29, 1390
طراحی سایت خود را به ما بسپارید!
همین حالا برای مشاوره رایگان اقدام کنید.
طراحی سایت خود را به ما بسپارید!
همین حالا برای مشاوره رایگان اقدام کنید.
گروه آموزش طراحی سایت
  • عالی بود
    ممنون

  • مطلب کاربردی و خوبیه، فقط ب نظر من بهتر بود ب جای کلمات صفت و عنصر و…. از همون کلمات انگلیسی استفاده میکردید.

  • سلام خدمت شما وخسته نباشید
    در بخش کلاس بیشتر توضیح بدید لطفا
    خصوصا در بخش ترفند کلاس منتظر جواب هستم

    • Avatar photo گروه آموزش طراحی سایت :

      با عرض سلام و احترام خدمت شما
      لطفا اگر سوالی برای تان پیش آمده است، به صورتی دقیق تری بپرسید تا بتوانیم در خدمت تان باشیم. مثلا آیا در طراحی و کدنویسی یک صفحه ی وب با مشکلی یا سوال خاصی مواجه شده اید؟

  • خیلی ممنون از این پستی که گذاشتین خیلی بدردم خرد!

آیا نیازمند راهنمایی هستید؟
همین حالا برای مشاوره رایگان اقدام کنید
با پر کردن فرم، یک قدم به رشد آنلاین نزدیک‌تر شوید!
فرم درخواست مشاوره

برای راحتی شما عزیزان می‌توانید اطلاعات خود را در کادر زیر وارد کنید تا کارشناسان ما با شما تماس بگیرند

مشاوره رایگان
پیمایش به بالا