جدول الدورات

دليل متقدم CSS

• كتاب CSS إضافي
• مقدمة إلى CSS
• قواعد الأساس لـ CSS
• قواعد متقدمة لـ CSS
• مصطلحات فرعية لـ CSS
• مصطلحات id لـ CSS
• مصطلحات الفئة لـ CSS
• إنشاء CSS
• خلفيات CSS
• نصوص CSS
• خطوط CSS
• قوائم CSS

نموذج الصندوق CSS

• مقدمة إلى نموذج الحجرة لـ CSS
• البُعد الداخلي لـ CSS
• الجدران لـ CSS
• البُعد الخارجي لـ CSS
• التلاشي البُعد الخارجي لـ CSS

تحديد الموقع في CSS

• مقدمة إلى التوضيح لـ CSS
• التوضيح المطلق لـ CSS
• التوضيح المطلق لـ CSS
• التحليل لـ CSS

محدد CSS

• مصطلحات العنصر لـ CSS
• مجموعات المصطلحات لـ CSS
• تفصيل مصطلحات الفئة لـ CSS
• تفصيل مصطلحات id لـ CSS
• تفصيل مصطلحات الخصائص لـ CSS
• مصطلحات السلف لـ CSS
• مصطلحات الطفل لـ CSS
• مصطلحات الأخ أقرب لـ CSS

الدورات الاختيارية

توصية بالدورات:

• صندوق CodeW3C.com

سماح خاصية تحديد الموقع في CSS بتحديد موقف العنصر.

تحديد الموقع والدفع في CSS

يقدم CSS بعض الخصائص للتحديد الموقع والدفع، والتي يمكن استخدامها لبناء ترتيب عمودي، وإعادة ترتيب جزء من الترتيب مع جزء آخر، وكذلك إنجاز المهام التي كانت تستلزم استخدام عدة جداول لسنوات عديدة.

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

من جهة أخرى، تم اقتراح الدفع لأول مرة في CSS1، وهو يعتمد على ميزة أضافتها Netscape في بداية تطوير الويب. الدفع ليس بالكامل تحديد الموقع، ولكن بالتأكيد ليس ترتيب التدفق العادي. سنوضح معنى الدفع في الفصول القادمة.

كل شيء هو صندوق

عناصر مثل div، h1 أو p تُسمى عناصر كبيرة، مما يعني أن هذه العناصر تُعرض كـمحتوى قطعة، وهي

يمكنك استخدام خاصية displayتغيير نوع الصندوق المُنتج. هذا يعني أن يمكنك جعل العناصر الداخلية (مثل عناصر <a>) تتصرف مثل العناصر الكبيرة من خلال تعيين خاصية display إلى block. يمكنك أيضًا تعيين display إلى none، مما يجعل العنصر المُنتج لا يمتلك صندوقًا. بذلك، لا يُظهر الصندوق وجميع محتوياته، ولا يأخذ مساحة في الوثيقة.

لكن في حالة واحدة، حتى بدون تعريف صريح، يتم إنشاء عنصر كبير. هذا يحدث عندما يتم إضافة بعض النصوص إلى بداية عنصر كبير (مثل div). حتى لو لم يتم تعريف هذه النصوص كجملة، فإنها سيتم التعامل معها كجملة:

<div>
نص
<p>نص إضافي.</p>
</div>

في هذه الحالة، يُسمى هذا الصندوق بـ الصندوق غير المعروف، لأنه لا يرتبط بتعريف عنصر معين.

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

آليات توجيه CSS

CSS تحتوي على ثلاثة آليات أساسية للتوجيه: التدفق العادي، التدفق المطفى والتوجيه المطلق.

إلا إذا تم تحديد ذلك بشكل خاص، فإن جميع الصناديق يتم توجيهها في التدفق العادي. أي أن موضع العناصر في التدفق العادي يتم تحديده بموضع العناصر في (X)HTML.

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

تنتشر الصناديق الداخلية على مستوى صغير. يمكن تعديل المسافات بينها باستخدام الهوامش الداخلية، والحواف والهوامش الخارجية. ولكن الهوامش الداخلية والحواف والهوامش الخارجية لا تؤثر على طول الصندوق الداخلي. الصندوق المستطيل الذي يُشكل من سطر واحد يُسمىالصندوق الداخلي (Line Box)، طول الصندوق الداخلي دائمًا يكفي لتكون كافيًا لتكون قادرة على احتواء جميع الصناديق الداخلية التي تحتويها. ومع ذلك، يمكن زيادة طول الصندوق الداخلي بتعيين طول الخط.

في الفصول التالية، سنوضح لكم بتفصيل التوجيه المطلق، التوجيه النسبي وال浮动.

خصائص position لـ CSS

من خلال استخدام خاصية positionيمكننا اختيار أربعة أنواع مختلفة من التوجيه، والتي تؤثر على طريقة إنشاء صندوق العنصر.

معنى قيمة الخاصية position:

static

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

relative

يتم تحديد حاوية العنصر بعيدًا عن مسافة معينة. يبقى العنصر في شكله الأصلي، وتبقى المساحة التي كان يأخذها.

absolute

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

fixed

يبدو حاوية العنصر مثل وضع position على absolute، ولكن مكانه هو نافذة المتصفح نفسها.

نصيحة:تحديد الموضع النسبي يُعتبر جزءًا من نموذج تحديد الموضع العادي، لأن موضع العنصر يتعلق بموضعه في النسيج العادي.

خصائص التوضيح لـ CSS

خصائص التوضيح لـ CSS تسمح لك بتحديد التوضيح للعناصر.

صندوق الأدوات

دليل مرجعي لـ CSS

أمثلة CSS

اختبار CSS

دليل CSS

روابط الممولين