باستخدام CSS لوضع عناصر HTML

• أبريل 18, 2024

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

العرض: تحدد هذه الخاصية كيفية عرض عنصر. يؤدي ضبط العرض إلى "لا شيء" إلى إخفاء العنصر بالكامل ، بينما يمكن للقيم الأخرى تغيير كيفية تفاعل العنصر مع الخصائص والعناصر الأخرى. على سبيل المثال ، يتم تعيين divs للعرض كـ "block" افتراضيًا ، مما يعني أنه يعمل ككائن مستطيل ، ولكن يمكنك استخدام "display: inline" لفرض div على التصرف كفقرة بدلاً من ذلك. أو يمكنك القيام بالعكس واستخدام "display: block" لإجبار فقرة على التصرف مثل div.

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

الرؤية: يقرر ما إذا كان هناك عنصر معروض على الصفحة أم لا. الفرق بين "العرض: لا شيء" و "الرؤية: مخفي" هو أنه في الحالة السابقة ، تتصرف عناصر الصفحة الأخرى كما لو أن الكائن غير المرئي غير موجود ؛ في الأخير ، سوف تحتفظ العناصر الأخرى بمكان للعنصر المخفي. من الواضح أن الإعداد الافتراضي "مرئي".

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

مسح: تعمل هذه الخاصية مع خاصية "float". يقرر كيف سيسمح العنصر بتطفو العناصر الأخرى حوله - "clear: left" يعني أنه لا توجد عناصر أخرى يمكن أن تطفو إلى يساره ؛ كتل "مسح: يمين" قبالة الجانب الأيمن و "مسح: كلاهما" تعني أنه لا توجد عناصر يمكن أن تطفو على أي جانب. الإعداد الافتراضي هو "واضح: لا شيء" (بمعنى أن العناصر الأخرى يمكن أن تطفو على أي جانب).

تعليمات الفيديو: #5 تعلم HTML و CSS خطوة بخطوة - تنسيق الموقع في منتصف المتصفح (أبريل 2024).