دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)



  • ۲۰
  • مهر

جلسه ۱۸ : ویژگی های Block و Inline در html

  • دسته‌بندی‌ها :
جلسه ۱۸ : ویژگی های Block و Inline در html
    • جزئیات
    • نوع محتواآموزش تصویری

      مقدمه

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

      مقدار پیش فرض display ، برای اغلب عناصر html ، معمولا با  Block یا Inline ، مقدار دهی می شود.

      در ادامه این آموزش ، به بررسی هر کدام از ویژگی های Block و Inline ، در عناصر html ، می پردازیم.

       

      block

      block

      آشنایی با ویژگی های Block و Inline در عناصر html

      ابتدا به بررسی و توضیح ویژگی Block ، در عناصر html می پردازیم:

      ویژگی Block در عناصر html

      ویژگی Block ، در عناصرhtml ، همیشه باعث می شوند که همیشه عنصر html، در خط جدیدی شروع شده و بیشترین عرض ( width ) قابل دسترس را اشغال کند. (و تا آنجا که ممکن است سمت چپ و راست را اشغال می کند).

       

      مثال: تگ <div> ، از نمونه تگ های نوع Block ، است:

      مثال : سطح block
      خودتان امتحان کنید »

      تگ هایی که دارای ویژگی پیش فرض block هستند:

      • <address>
      • <article>
      • <aside>
      • <blockquote>
      • <canvas>
      • <dd>
      • <div>
      • <dl>
      • <dt>
      • <fieldset>
      • <figcaption>
      • <figure>
      • <footer>
      • <form>
      • <h1>-<h6>
      • <header>
      • <hr>
      • <li>
      • <main>
      • <nav>
      • <noscript>
      • <ol>
      • <output>
      • <p>
      • <pre>
      • <section>
      • <table>
      • <tfoot>
      • <ul>
      • <video>

       

      ویژگی inline در عناصر html

      عناصر html که از نوع inline ، هستند ، در یه خط جدید شروع شده و عرض ( width ) آن ها به اندازه ای که برای  محتوای آن ها مورد نیاز است ، تنظیم می شود.

      مثال: تگ <span> از نوع تگ هایی با ویژگی پیش فرض inline است:

      مثال : عناصر سطح span
      خودتان امتحان کنید »

      تگ هایی که دارای ویژگی پیش فرض inline هستند:

      • <a>
      • <abbr>
      • <acronym>
      • <b>
      • <bdo>
      • <big>
      • <br>
      • <button>
      • <cite>
      • <code>
      • <dfn>
      • <em>
      • <i>
      • <img>
      • <input>
      • <kbd>
      • <label>
      • <map>
      • <object>
      • <q>
      • <samp>
      • <script>
      • <select>
      • <small>
      • <span>
      • <strong>
      • <sub>
      • <sup>
      • <textarea>
      • <time>
      • <tt>

      عنصر <div>

      در html ،تگ <div> ، معمولا به عنوان یک ظرف برای سایر عناصر استفاده می شود. تگ <div> ، به صفات احتایج ندارد، اما معمولا با ویژگی style ، class و id ، توصیف می شود.

      زمانیکه از کد های css همراه با صفاتی که گفته شد، استفاده کنید ، محتوای تگ <div> ، نیز می تواند ویژگی block داشته باشد.

      مثال:

      مثال : عنصر div
      خودتان امتحان کنید »

      عنصر <span>

      عنصر <span> اغلب بعنوان یک ظرف برای برخی از متن ها استفاده می شود.

      عنصر <span> دارای صفات مورد نیاز نیست، اما می توان از style، class و id استفاده کرد.

      هنگامی که با CSS مورد استفاده قرار می گیرد، عنصر <span> می تواند برای style کردن قسمت های متن استفاده شود:

      مثال : عنصر span
      خودتان امتحان کنید »

      تگ های گروه بندی در HTML

      تگتوضیحات
      <div>(block-level)یک بخش را در صفحه وب تعریف می کند
      <span>یک بخش را در صفحه وب تعریف می کند(inline)

      کلام آخر

      تمام عناصر HTML که تاکنون ارائه شده عموما شامل یکی از ویژگی های Block و Inline در html می باشند، به طور خلاصه ویژگی block باعث اشغال حداکثر فضای عنصر والد و ویژگی Inline بلعکس عمل می کند.

      QR:  جلسه ۱۸ : ویژگی های Block و Inline در html
      به اشتراک بگذارید