البرمجة

تنسيق div باستخدام CSS

اخر تحديث 15/05/2025
18 تمت قراءة 3 دقيقة

كيفية تنسيق عنصر div في HTML باستخدام CSS

يُعد عنصر

أحد أهم العناصر في لغة HTML وأكثرها استخدامًا في تصميم وتطوير صفحات الويب، حيث يُستخدم كمُحتوٍ عام يمكن أن يحتوي على عناصر أخرى، مثل النصوص، الصور، الأزرار، النماذج، وغيرها. تكمن قوّة هذا العنصر في قابليته العالية للتخصيص من خلال CSS، ما يتيح للمطور تحكمًا كاملاً بشكل وتصميم المكونات داخل الصفحة.

مواضيع ذات صلة

في هذا المقال، سيتم تناول تنسيق عنصر

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

.

1. الأساسيات: ما هو عنصر

؟

عنصر

هو اختصار لكلمة “division”، أي “قسم”، ويُستخدم لتقسيم الصفحة إلى مناطق قابلة للتحكم والتخصيص. لا يحمل هذا العنصر أي تنسيق افتراضي خاص، بل يكون مجرد حاوية فارغة يُمكن إعطاؤها الشكل والوظيفة من خلال CSS.

مثال أولي:

html
<div>محتوى هناdiv>

دون CSS، سيظهر هذا العنصر فقط كسطر نصي بسيط داخل الصفحة. لذلك، يتم الاستعانة بلغة CSS لإضفاء مظهر وهيكل لهذا العنصر.

2. تحديد الأبعاد: العرض والطول

التحكم في عرض وطول عنصر

يُعتبر من أولى خطوات تنسيقه:

css
div {
  width: 300px;
  height: 200px;
}

  • width: يحدد عرض العنصر.

  • height: يحدد طوله.

يمكن أيضًا استخدام وحدات نسبية مثل % لجعل التنسيق مرنًا ومناسبًا لأحجام الشاشات المختلفة:

css
div {
  width: 80%;
  height: auto;
}

3. الألوان: الخلفية والحدود

لإضفاء لون على خلفية عنصر

:

css
div {
  background-color: #f2f2f2;
}

ولإضافة حدود:

css
div {
  border: 2px solid #000;
}

خصائص الحدود الأخرى:

  • border-radius: لإعطاء زوايا مستديرة.

  • border-style: لتحديد نوع الحد (متصل، منقط، مزدوج…).

مثال:

css
div {
  border: 2px dashed red;
  border-radius: 10px;
}

4. التحكم في الخط داخل عنصر

عنصر

يحتوي غالبًا على نصوص، ولتحديد كيفية عرض هذه النصوص:

css
div {
  font-family: 'Arial', sans-serif;
  font-size: 16px;
  color: #333;
  font-weight: bold;
  text-align: center;
}

خصائص تنسيق النصوص تشمل:

  • font-family: نوع الخط.

  • font-size: حجم الخط.

  • color: لون النص.

  • text-align: محاذاة النص (يمين، وسط، يسار).

  • line-height: ارتفاع السطر.

5. التحكم في التباعد: margin وpadding

  • padding: المسافة بين محتوى العنصر وحدوده الداخلية.

  • margin: المسافة بين العنصر والعناصر المجاورة له.

مثال:

css
div {
  padding: 20px;
  margin: 30px;
}

يمكن تخصيص كل جهة:

css
div {
  padding-top: 10px;
  padding-right: 15px;
  padding-bottom: 20px;
  padding-left: 25px;
}

6. استخدام display لتحديد سلوك العنصر

عنصر

افتراضيًا عنصر “block”، أي يحتل السطر بالكامل. يمكن تغيير هذا السلوك باستخدام الخاصية display.

أنواع display المهمة:

القيمة الوصف
block العنصر يحتل كامل السطر
inline العنصر يُدمج مع العناصر الأخرى في نفس السطر
inline-block دمج خصائص inline وblock
flex يُفعّل تنسيق Flexbox
grid يُفعّل تنسيق Grid
none إخفاء العنصر

مثال:

css
div {
  display: flex;
  justify-content: center;
  align-items: center;
}

7. استخدام Flexbox لتنسيق العناصر داخل

Flexbox هو نظام تنسيق مرن يسمح بترتيب العناصر الداخلية بطريقة ديناميكية.

مثال على استخدام Flexbox داخل

:

css
.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

خصائص Flexbox الشائعة:

  • flex-direction: تحديد اتجاه العناصر (عمودي أو أفقي).

  • justify-content: توزيع المسافة أفقياً.

  • align-items: توزيع المسافة عمودياً.

  • gap: إضافة فواصل بين العناصر.

8. استخدام CSS Grid لتقسيم المساحات داخل

CSS Grid يقدم نظام شبكة ثنائية الأبعاد يمكن استخدامه لتقسيم الحاوية بسهولة.

css
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
}

الشرح:

  • grid-template-columns: تحديد عدد الأعمدة.

  • 1fr: يعني تقسيم متساوي للمساحة المتاحة.

  • grid-gap: المسافة بين الصفوف والأعمدة.

9. إضافة التأثيرات والانتقالات (Transitions)

لجعل عنصر

أكثر تفاعلية، يمكن استخدام خاصية transition:

css
div {
  background-color: #ccc;
  transition: background-color 0.3s ease;
}

div:hover {
  background-color: #999;
}

  • عند تمرير الماوس، يتغير اللون تدريجيًا.

  • يمكن إضافة انتقالات لأبعاد، ظلال، أو مواقع العنصر.

10. الظلال والإضاءة

لجعل عنصر

أكثر جاذبية بصريًا:

css
div {
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}

ويمكن إضافة ظل للنص:

css
div {
  text-shadow: 2px 2px 4px #000000;
}

11. جعل

في منتصف الصفحة

أحد الاستخدامات الشائعة هو توسيط العنصر أفقيًا وعموديًا.

باستخدام Flexbox:

css
body, html {
  height: 100%;
  margin: 0;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

12. الجدول الكامل لأهم خصائص CSS المتعلقة بعنصر

الخاصية الوظيفة الرئيسية
width, height تحديد أبعاد العنصر
background-color تلوين خلفية العنصر
border تعيين حدود العنصر
padding المسافة بين المحتوى وحدود العنصر
margin المسافة بين العنصر والعناصر المحيطة
font-family تعيين نوع الخط للنص داخل العنصر
font-size حجم الخط
color لون النص
text-align محاذاة النص داخل العنصر
display تحديد سلوك عرض العنصر
flex, grid أنظمة تنسيق متقدمة
box-shadow إضافة ظل للصندوق
transition تطبيق الانتقال بين الحالات
z-index تحديد ترتيب العنصر بالنسبة للعناصر الأخرى
overflow التعامل مع المحتوى الزائد
position, top, left تحديد موقع العنصر عند استخدام الوضعيات المختلفة

13. دمج CSS في المشروع

هناك ثلاث طرق رئيسية لإدراج CSS:

1. CSS داخلي داخل ملف HTML:

html
<style>
  div {
    color: red;
  }
style>

2. CSS خارجي:

html
<link rel="stylesheet" href="style.css">

3. CSS مضمّن (Inline):

html
<div style="color: red;">نص أحمرdiv>

الطريقة الأفضل للمشاريع الكبيرة هي استخدام ملفات CSS خارجية لسهولة التنظيم والصيانة.

14. استخدام الوسائط الإعلامية (Media Queries)

لجعل تنسيق عنصر

مناسبًا لمختلف الأجهزة:

css
@media (max-width: 768px) {
  div {
    width: 100%;
    font-size: 14px;
  }
}

يساعد هذا على ضمان توافق التصميم مع الهواتف المحمولة والأجهزة اللوحية.

15. خاتمة تقنية

عنصر

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

المراجع:

  1. MDN Web Docs – The

  2. CSS Tricks – A Complete Guide to Flexbox

اخر تحديث 15/05/2025
18 تمت قراءة 3 دقيقة