اگر شما به برنامه نویسی تحت وب علاقه مند هستید حتما با زبان HTML آشنایی دارید در این مطلب می خواهیم تا با یکی دیگر از تگ های کاربردی زبان HTML یعنی تگ DIV آشنا شویم. کارشناسان وب سایت آموزش برنامه نویسی صعود در این مطلب به طور کلی در مورد تگ DIV توضیح خواهند داد، پس اگر شما هم مایل هستید نسبت به این تگ <DIV> </DIV>  شناخت پیدا کنید این  مطلب را دنبال کنید.

آموزش تگ DIV در زبان HTML

تگ div به تگ Division معروف است. تگ div در HTML برای تقسیم بندی محتوا در صفحه وب مانند (متن، تصاویر، هدر، پاورقی، نوار ناوبری و غیره) استفاده می شود. تگ Div دارای هر دو تگ open(<div>) و closing (</div>) است و بستن تگ الزامی است.تگ Div یکی از پرکاربردترین تگ در برنامه نویسی وب است. زیرا این امکان را به ما می دهد تا اطلاعات را در صفحات وب سازماندهی و بخش بندی کنیم و می توانیم یک بخش خاص برای داده ها یا عملکردهای خاص در صفحات وب ایجاد کنیم.

چه زمانی از تگ div استفاده میکنیم

از این تگ برای گروهی از تگ های مختلف HTML استفاده می شود، تا بتوان بخش هایی را ایجاد کرده و به آنها استایل اعمال کند. تگ div چند منظوره است و شما می توانید از آن برای انجام چندین کار در یک صفحه وب استفاده کنید. شما بیشتر از آن در طرح‌بندی‌های وب و هنر CSS استفاده خواهید کرد، و  باید بدانید تگ div بسیار انعطاف‌پذیر است.

استفاده از تگ div در صفحات وب

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

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

با تگ div می توانید اشکال مختلفی بسازید و هر چیزی را بکشید زیرا سبک دادن به آن آسان است.  چگونه با تگ div مربع بسازیم . برای ایجاد یک مربع با تگ div، ابتدا باید یک تگ div خالی تعریف کنید و یک ویژگی کلاس را در HTML به آن متصل کنید. در CSS، div را با ویژگی class انتخاب کنید، سپس ارتفاع و عرض مساوی برای آن تعیین کنید مانند مثال زیر:

<div class="square"></div>

 body {

      display: flex;

      align-items: center;

      justify-content: center;

      margin: 0 auto;

      height: 100vh;

      background-color: #f1f1f1;

    }

.square {

      background-color: #2ecc71;

      width: 200px;

     height: 200px;

    }

آموزش تگ DIV و CSS

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

شما می توانید با کد div خالی در HTML یک دایره با تگ div ایجاد کنید، ارتفاع و عرض مساوی برای آن در CSS تعیین کنید، سپس شعاع مرزی 50٪ را تعیین کنید. درست مانند مثال زیر:

<div class="circle"></div>

  body {

      display: flex;

      align-items: center;

      justify-content: center;

      margin: 0 auto;

      height: 100vh;

      background-color: #f1f1f1;

    }

 

    .circle {

      background-color: #2ecc71;

      width: 200px;

      height: 200px;

      border-radius: 50%;

    }

 

 

چگونه با استفاده از کد css پرچم نیجریه را طراحی کنیم

ساختن پرچم نیجریه با تگ div چندان سخت نیست. پرچم به شکل مستطیل با رنگ های سبز، سفید و سبز است. برای ساختن آن، 3 تگ div تعریف کنید و کلاس‌های مختلف را ضمیمه کنید، سپس به آنها در CSS استایل دهید. مانند قطعه کد زیر:

<div class="naija-flag">

    <div class="first-green"></div>

    <div class="white"></div>

    <div class="second-green"></div>

</div>

.naija-flag {

  display: flex;

}

.first-green {

  height: 100px;

  width: 60px;

  background-color: green;

}

.white {

  height: 100px;

  width: 60px;

  background-color: white;

}

.second-green {

  height: 100px;

  width: 60px;

  background-color: green;

}

 

 آموزش CSS و تگ DIV

نحوه استایل دادن با تگ دایو

همانطور که در بالا توضیح دادیم، استایل دادن با تگ div بسیار آسان است. این یکی از دلایلی است که بسیاری از توسعه دهندگان از آن برای گروه بندی محتوای مشابه استفاده می کنند.

تگ div تقریباً تمام خصوصیات CSS را بدون مشکل می پذیرد. اکنون به چند نمونه از آن نگاه می کنیم.

نحوه حالت دادن به فونت با تگ div

می‌توانید ویژگی‌های CSS مانند اندازه فونت، خانواده فونت، وزن فونت و سبک فونت را روی محتوای گروه‌بندی شده با تگ div اعمال کنید مانند قطعه کد زیر:

<div class="font-properties">

      <p>

وب سایت آموزش برنامه نویسی سعود

      </p>

      <p>

وب سایت آموزش برنامه نویسی صعود

وب سایت آموزش برنامه نویسی صعود

      </p>

</div>

body {

      max-width: 900px;

      display: flex;

      align-items: center;

      justify-content: center;

      margin: 0 auto;

      height: 100vh;

      background-color: #f1f1f1;

    }

 

.font-properties {

      font-family: cursive, sans-serif;

      font-size: 1.3rem;

      font-weight: bolder;

      font-style: italic;

    }

نحوه اعمال رنگ با تگ Div

می‌توانید ویژگی‌های رنگ CSS و رنگ پس‌زمینه را روی محتوای گروه‌بندی شده با تگ div اعمال کنید. مانند قطعه کد زیر:

<div class="color-properties">

  <p>

وب سایت آموزش برنامه نویسی صعود

  </p>

  <p>

وب سایت آموزش برنامه نویسی صعود

  </p>

</div>

.color-properties {

  color: white;

  background-color: #2ecc71;

}

 

نحوه استایل دادن به متون با تگ Div

می‌توانید ویژگی‌های CSS text-transform و text-decoration را روی یک تگ div مانند قطعه کد زیر اعمال کنید:

<div class="text-properties">

  <p>

وب سایت آموزش برنامه نویسی صعود

  </p>

  <p>

    وب سایت آموزش برنامه نویسی صعود

   </p>

</div>

.text-properties {

    text-transform: uppercase;

    text-decoration: underline;

  }

 آمورزش تگ DIV در زبان HTML

 

نحوه ایجاد افکت سایه با تگ Div

شما می توانید با استفاده از تگ دایو div یک افکت سایه با ویژگی box-shadow ایجاد کنید مانند قطعه کد زیر:

<div class="box-shadow">

      <p>

وب سایت آموزش برنامه نویسی صعود

        <br />

وب سایت آموزش برنامه نویسی صعود

      </p>

      <p>

وب سایت آموزش برنامه نویسی صعود

<br />

وب سایت آموزش برنامه نویسی صعود

      </p>

</div>

.box-shadow {

      font-family: cursive, sans-serif;

      background-color: #2ecc71;

      color: white;

      padding: 10px;

      border-radius: 4px;

      box-shadow: 2px 2px 20px 23px #7fecad;

    }

آموزش تگ DIV در زبان HTML

در قطعه کد css بالا با استفاده از تگ div چه اتفاقی می افتد ؟

 در قطعه کد بالا توانستیم یک افکت سایه را با ویژگی CSS box-shadow ایجاد کنیم.

اولین مقدار (2px) نشان دهنده افست روی محور x (offset-x) است.

دومی (2px دیگر) نشان دهنده افست روی محور y (offset-y) است.

20 پیکسل بعدی مربوط به شعاع تاری است، یعنی چقدر می خواهید سایه تار باشد.

مقدار 23px شعاع گسترش است (مشخص می کنید که تا چه اندازه سایه پخش شود).

آخرین مقدار رنگ سایه است، #7fecad.

 

چگونه از یک عنصر Div بدون گیج شدن استفاده کنیم

تگ های Div معمولا برای گروه بندی مطالب مشابه با هم استفاده می شوند. از آنجایی که تگ‌های div بسیار رایج هستند، توصیه می‌کنیم از ویژگی‌های کلاس و id برای آن‌ها استفاده کنید تا بتوانید عناصر div را با آن ویژگی‌ها دستکاری کنید.

در این مطلب در مورد تگ div و کاربرد تگ div در زبان HTML با ذکر چند مثال به طور کلی توضیح دادیم و فهمیدیم که تگ دایو یک تگ بسیار مهم و کاربردی است و همین طور که در مثال ها مشاهده کردید ترکیب شدن آن با زبان CSS قابلیت های زیادی به توسعه دهندگان و کد نویسان می دهد. همچنین شما می توانید سوالات خود را در مورد تگ دایو و کاربرد تگ DIV در قسمت نظرات با کارشناسان ما در میان بگذارید.

 

 

 

 

 

 

 

 

 

 

 

 

امتیاز دهی به مقاله

  • خیلی بد
  • بد
  • متوسط
  • خوب
  • خیلی خوب

5 امتیاز از 1 رای

امتیاز ثبت شد ممنون از همکاریتون برای بهبود سایت :)

نوشتن یک نظر

برای ثبت نظر ابتدا باید وارد حساب کاربری خود شوید

نظرات کاربران

ما را در شبکه های اجتماعی دنبال کنید