گروه آموزش طراحی سایت ۲۹ شهریور ۱۳۹۰ ۶ 4764 بازدید مطالب عمومی

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

صفت های class و id در html، این امکان را در طول فرآیند طراحی صفحات وب به شما می دهند تا نامگذاری و رده بندی مناسبی برای عناصر مختلف صفحات سایت داشته باشید.

وقتی عناصر به وسیله ی صفت های class و id نامگذاری می شوند؛ این قابلیت را خواهیم داشت تا بتوانیم عناصر html را انتخاب کنیم تا به وسیله ی جاوااسکریپت کنترل کرده و یا به وسیله ی سی اس اس سبک دهی کنیم.

صفت id

اگر در هر صفحه، یک عنصر با نام مورد نظرتان دارید، می توانید از صفت ی id برای نامگذاری آن استفاده کنید. مثلا در طراحی سایت، به طور منطقی در هر صفحه تنها یک لوگو وجود دارد. یعنی صفحات دارای چند لوگو نیستند! بنابر این می توانید برای نام گذاری عنصر مربوط به لوگو، از صفت id استفاده کنید:

<a id="logo" href="https://onliner.ir">web design</a>

صفت class

اگر در هر صفحه، این احتمال وجود داشته باشد که یک یا چند عنصر با یک نام وجود داشته باشند، از صفت class برای نامگذاری آن استفاده می کنیم. مثال ممکن است یک بخش با آی دی gallery داشته باشیم که ممکن است در آن چندین آیتم وجود داشته باشند (در یک گالری چند تصویر وجود دارد). در این صورت مثال زیر گزینه ی خوبی است:

<div id="gallery">
<img src="#" alt="#" />
<img src="#" alt="#" />
<img src="#" alt="#" />
<img src="#" alt="#" />
</div>

ترفند:

برای مشخص کردن تگ های پایانی برای هر کدام از عناصری که با آی دی و یا کلاس نامگذاری شده اند، با استفاده از توضیحات اچ تی ام ال (html comments)، می توانید مانند کد روبرو استفاده کنید:

<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 -->

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

نکته:

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

لطفا به این مطلب رای دهید
[تعداد: 0    میانگین: 0/5]

نظرات کاربران (۶)



  1. محمد

    عالی بود
    ممنون

  2. Me

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


    • سلام و درود

      ممنون از نظر شما.

      بررسی و لحاظ می گردد.

      موفق و شاد باشید

  3. میرزایی

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

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

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

  4. hadi

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