وسم Div في HTML: ما هو وكيفية تنسيقه باستخدام CSS

ما هو وسم Div في HTML؟

يُعد وسم div من أكثر العناصر استخدامًا في تطوير الواجهات الأمامية، وهو اختصار لكلمة division. وظيفته الأساسية هي تجميع مجموعة من العناصر أو المحتوى المتشابه داخل حاوية واحدة، بحيث يصبح التعامل معها أسهل من حيث التنسيق عبر CSS أو التفاعل عبر JavaScript.

ورغم ظهور العناصر الدلالية مثل header وsection وarticle وfooter، لا يزال div عنصرًا محوريًا في بناء الصفحات. السبب في ذلك هو مرونته الكبيرة وقدرته على احتواء أي نوع من المحتوى تقريبًا دون قيود بنيوية صارمة.

متى تستخدم وسم Div؟

يمكن استخدام div في عدة سيناريوهات عملية، لكنه يبرز بشكل خاص في حالتين أساسيتين:

• تنظيم تخطيط الصفحة وتجميع الأقسام المتشابهة.
• إنشاء أشكال مرئية وتطبيق أفكار CSS Art.

1) استخدام Div في تخطيط الصفحات

الوظيفة الأشهر لوسم div هي جمع أجزاء الصفحة داخل حاويات مستقلة لتسهيل تنسيقها. على سبيل المثال، يمكنك وضع الشريط العلوي، قائمة التنقل، المحتوى الرئيسي، والتذييل داخل عناصر div منفصلة، ثم تخصيص نمط لكل جزء بسهولة.

من المهم الانتباه إلى أن div وحده لا يغيّر مظهر المحتوى بصريًا. التأثير الحقيقي يظهر فقط بعد ربطه بأنماط CSS.

2) استخدام Div في CSS Art

بفضل مرونته العالية، يمكن استغلال div لصناعة أشكال هندسية وعناصر مرئية متعددة. يكفي تحديد أبعاد العنصر ولونه وبعض الخصائص الإضافية مثل border-radius أو box-shadow للحصول على نتائج لافتة.

كيفية إنشاء أشكال باستخدام وسم Div

إنشاء مربع باستخدام Div

لرسم مربع، نحتاج إلى عنصر div فارغ في ملف HTML، ثم نمنحه عرضًا وارتفاعًا متساويين في CSS.

<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

لتحويل المربع إلى دائرة، نستخدم الخاصية border-radius بالقيمة 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

يمكنك أيضًا بناء أشكال أكثر تركيبًا، مثل الأعلام أو البطاقات أو المكونات الرسومية البسيطة. في المثال التالي، يتم تكوين علم نيجيريا من ثلاثة عناصر div داخل حاوية رئيسية.

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

كيفية تنسيق وسم Div باستخدام CSS

من أبرز مزايا div أنه يقبل معظم خصائص CSS دون تعقيد، ما يجعله مثاليًا لإنشاء حاويات مرنة قابلة لإعادة الاستخدام. فيما يلي أمثلة عملية على أبرز أنماط التنسيق الممكنة.

1) تطبيق خصائص الخط على محتوى داخل Div

يمكنك تنسيق النصوص الموجودة داخل div باستخدام خصائص مثل font-size وfont-family وfont-weight وfont-style.

<div class="font-properties">
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate quo ullam modi alias assumenda, itaque libero? Quas quidem sint illo.</p>
  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Necessitatibus ipsam eaque rem dicta, quos quas ipsum.</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;
}

2) تطبيق الألوان باستخدام Div

بإمكانك تغيير لون النص والخلفية لكل المحتوى الموجود داخل الحاوية بسهولة عبر الخاصيتين color وbackground-color.

<div class="color-properties">
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate quo ullam modi alias assumenda, itaque libero? Quas quidem sint illo.</p>
  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Necessitatibus ipsam eaque rem dicta, quos quas ipsum.</p>
</div>

.color-properties {
  color: white;
  background-color: #2ecc71;
}

3) تنسيق النصوص داخل Div

يمكن استخدام خصائص مثل text-transform وtext-decoration للتحكم في شكل ظهور النصوص.

<div class="text-properties">
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate quo ullam modi alias assumenda, itaque libero? Quas quidem sint illo.</p>
  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Necessitatibus ipsam eaque rem dicta, quos quas ipsum.</p>
</div>

.text-properties {
  text-transform: uppercase;
  text-decoration: underline;
}

4) إنشاء تأثير الظل باستخدام Div

يمكنك إضافة عمق بصري جميل عبر الخاصية box-shadow، وهي من أكثر الخصائص استخدامًا في تصميم البطاقات والحاويات الحديثة.

<div class="box-shadow">
  <p>Before paying to learn programming, checkout freeCodeCamp.org <br /> The HTML, CSS, and JavaScript curricula would take you from zero to hero in web development.</p>
  <p>There is a Python curriculum that will get you a considerable knowledge in Python <br /> And an upcoming Data Science curriculum.</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;
}

في السطر الخاص بـ box-shadow، تعبّر القيم عن التالي:

• 2px: الإزاحة الأفقية offset-x.
• 2px: الإزاحة العمودية offset-y.
• 20px: درجة الضبابية blur-radius.
• 23px: مدى انتشار الظل spread-radius.
• #7fecad: لون الظل.

كيفية استخدام عدة عناصر Div دون فوضى

عند العمل على صفحات أكبر، قد تجد عددًا كبيرًا من عناصر div داخل الملف نفسه. في هذه الحالة، يصبح التنظيم أمرًا ضروريًا لتفادي التشويش وصعوبة الصيانة لاحقًا. أفضل ممارسة هنا هي تسمية العناصر بوضوح عبر class وid بحيث يمكنك استهداف كل جزء بدقة.

لنطبق ذلك عمليًا من خلال بناء تخطيط صفحة بسيط.

إنشاء قسم Header يحتوي على الشعار وقائمة التنقل

<div class="header">
  <h2 class="logo">freeCodeCamp</h2>
  <ul class="nav">
    <li><a href="">Home</a></li>
    <li><a href="">About</a></li>
    <li><a href="">Serices</a></li>
    <li><a href="">Contact</a></li>
  </ul>
</div>

قبل البدء في التنسيق، من الشائع إضافة بعض إعدادات إعادة الضبط CSS Reset لضمان محاذاة العناصر بشكل متناسق:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.hero,
.about,
.services,
.contact {
  max-width: 1000px;
  margin: 0 auto;
  margin-bottom: 20px;
}

ما الذي تفعله هذه القواعد؟

• إزالة الهوامش والمسافات الداخلية الافتراضية من العناصر.
• تحديد عرض أقصى للأقسام الرئيسية لتحسين تجربة القراءة.
• إضافة مسافة سفلية بين الأقسام.
• توسيط الأقسام أفقيًا باستخدام margin: 0 auto.

تنسيق Header وNavbar باستخدام Flexbox

.header {
  padding: 0 70px;
  display: flex;
  align-content: center;
  justify-content: space-between;
  margin-top: 20px;
  margin-bottom: 20px;
}

.nav {
  display: flex;
  align-content: center;
  justify-content: center;
  gap: 60px;
  list-style-type: none;
}

.nav li a {
  text-decoration: none;
  color: black;
  font-size: 1.2rem;
}

هنا تم استخدام Flexbox لتوزيع الشعار وروابط التنقل بشكل أفقي ومنظم، مع إضافة مسافات واضحة بين العناصر لرفع مستوى سهولة الاستخدام.

بناء الأقسام الأخرى من الصفحة

<div class="hero">
  <h1>Hero Section</h1>
</div>

<div class="about">
  <h1>About Us</h1>
</div>

<div class="services">
  <h1>Our Services</h1>
</div>

<div class="contact">
  <h1>Contact Us</h1>
</div>

<div class="footer">
  <p>&copy; 2021 All Rights Reserved</p>
</div>

.hero {
  background-color: #eee;
  height: 200px;
}

.hero h1 {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 6;
}

.about {
  background-color: #eee;
  height: 200px;
}

.about h1 {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 6;
}

.services {
  background-color: #eee;
  height: 200px;
}

.services h1 {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 6;
}

.contact {
  background-color: #eee;
  height: 200px;
}

.contact h1 {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 6;
}

.footer {
  background-color: #777;
  height: 40px;
}

.footer p {
  margin: 0 auto;
  line-height: 1.7;
}

في هذا المثال، تم إعطاء كل قسم لون خلفية رمادي فاتح وارتفاعًا ثابتًا. بعد ذلك، جرى توسيط العناوين داخله باستخدام Flexbox. أما قسم footer فقد حصل على لون أغمق حتى يبدو منفصلًا بصريًا عن بقية الصفحة.

أفضل الممارسات عند استخدام Div

• استخدم div عندما تحتاج إلى حاوية عامة لا يوفرها عنصر دلالي مناسب.
• فضّل العناصر الدلالية مثل header وmain وsection عندما يكون معناها مناسبًا للمحتوى.
• اختر أسماء class واضحة ومنطقية لتسهيل الصيانة لاحقًا.
• تجنب تداخل عدد كبير من عناصر div دون حاجة حقيقية، لأن ذلك يصعّب قراءة الشفرة.
• استخدم div كأداة تنظيم وتنسيق، لا كبديل دائم لكل عناصر HTML.

لماذا العناصر الدلالية أفضل أحيانًا من Div؟

رغم أهمية div، فإن العناصر الدلالية تمنح المتصفح ومحركات البحث وتقنيات الوصول فهمًا أوضح لبنية الصفحة. لذلك، عندما يكون هناك عنصر دلالي مناسب، فمن الأفضل استخدامه بدلًا من div. هذه الممارسة تساعد في تحسين Accessibility وتدعم SEO بشكل أفضل.

الخلاصة التقنية

يبقى وسم div عنصرًا أساسيًا في تطوير الواجهات، لأنه يوفر حاوية مرنة وسهلة التخصيص لمختلف أجزاء الصفحة. لكن الاستخدام الاحترافي له لا يعني الاعتماد عليه في كل شيء، بل الموازنة بينه وبين العناصر الدلالية الحديثة. من الناحية التقنية، أفضل نهج هو استخدام div عندما تحتاج إلى تجميع عام أو تحكم بصري مرن، مع الحفاظ على بنية HTML واضحة وقابلة للفهم من قبل المستخدم والمتصفح ومحركات البحث في آنٍ واحد.