طراحی سایت | طراحی اسلایدر | خدمات سئو | سئو وبسایت | خدمات طراحی وبسایت | پشتیبانی وبسایت |
0 محصولات نمایش سبد خرید

هیچ محصولی در سبد خرید نیست.

اموزش تگ div

تگ div چیست | اموزش تگ div | کاربرد تگ div | نحوه استفاده از تگ div

تگ div چیست

اموزش تگ div یک بخش کلی در یک صفحه HTML را نشان می دهد. تگ div شما را قادر می سازد تا بخش های عناصر HTML را با هم گروه بندی کرده و آنها را با CSS قالب بندی کنید.

تگ div شبیه به تگ span است ، اما تگ span با عناصر درون خطی استفاده می شود ، در حالی که تگ div با عناصر سطح بلوک استفاده می شود. تگ div فقط در صورت عدم وجود تگ های HTML مناسب برای استفاده ، باید به عنوان آخرین راه حل مورد استفاده قرار گیرد. HTML5 تعدادی از عناصر جدید را معرفی کرده است که می توانند (و باید) به جای div مورد استفاده قرار گیرند. اینها شامل <article> ، <aside> ، <header> و <Footer> و دیگران است. برای اطلاعات بیشتر در مورد این زیر به زیر “تفاوت بین HTML 4 و HTML 5” مراجعه کنید.

Syntax هایه تگ div

اموزش تگ div با عنوان عمومی که بین برچسب های شروع و پایان درج شده است به عنوان <div> </div> نوشته شده است.
<div>
محتوای شما .....
</div>

مثال ها

مثال ساده از تگ div

همانطور که میبینید ، صرفاً قرار دادن محتوا درون یک تگ div در واقع کاری انجام نمی دهد یا ظاهر محتوا را تغییر نمی دهد.

این به سادگی به عنوان ظروف عمل می کند که محتوای محصور شده را نگه می دارد.

<div>
<p>یک متن در اینجا ...</p>
</div>

استفاده از css در تگ div

اموزش تگ div , یکی از مهمترین دلایل استفاده از تگ div اعمال سبک ها است. شما می توانید css را به خود عنصر یا هر عنصر محصور شده درون آن اعمال کنید. css درون خطی می توانید یک عنصر را با استفاده از style داخل کد به آن شکل دهید ، جایی که css را از طریق style اعمال می کنید.

<div style="width:200px;background:#F9EECF;border:1px dotted black;text-align:center">
<p>Generic content...</p>
</div>

css های خارجی

همچنین می توانید یک عنصر را با استفاده ازcss تعبیه شده در یک فایل style شکل دهید. در اینجا مثالی از استفاده ازcss تعبیه شده و استفاده از آنها از طریق ویژگی کلاس در تگ div آورده شده است:

<!DOCTYPE html>
<title>Example</title>
<style>
    div.generic {
        width: 200px;
        background: #D8FBD6;
        border: 1px dotted black;
        padding: 8px;
    }

    div.generic ul {
        color: green;
    }
</style>
<div class="generic">
    <p>Generic content...</p>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</div>

عناصر تودرتو در HTML

می توانید تگ div را داخل هم دیگه بنویسید. هر یک از اینها می توانند دارای سبک های مختلفی باشند.

<!DOCTYPE html>
<title>Example</title>
<style>
    div.generic {
        width: 200px;
        background: #D8FBD6;
        border: 1px dotted black;
        padding: 8px;
    }

    div.generic div {
        width: 50%;
        background: #75CE6F;
        color: white;
        border: 1px dotted green;
        text-align: left;
        padding: 3px;
    }
</style>
<div class="generic">
    <p>Generic content...</p>
    <div>
        <p>Nested div content...</p>
    </div>
</div>

تگ div هیج کونه ویژگی ای ندارد.

دیدگاه‌های نوشته

Share via
ارسال این به یک دوست