CSS عبارة عن ورقة أنماط متتالية ، وهي لغة لوصف مظهر صفحات الويب. تتمثل إحدى المزايا الرئيسية لـ CSS في القدرة على استبدال تخطيط الجدول بتخطيط الكتلة.
انه ضروري
محرر كود HTML
تعليمات
الخطوة 1
قم بإنشاء الكتلة الأولى. في شكل HTML ، سيبدو مثل علامة div بالمعرف "block01". هنا ، يشير معرف block01 إلى أنه في وصف CSS ، تم تحديد جميع خصائص هذه الكتلة لمحدد # block01.
الخطوة 2
صف الكتلة في CSS. في أنماط CSS ، حدد اسم المعرف (# block01) وفي الأقواس المتعرجة تصف معلماته - العرض والموضع والإزاحة ولون الخلفية وما إلى ذلك. على سبيل المثال ، قد يبدو كالتالي: # block01 {width: 150px؛ الارتفاع: 150 بكسل ؛ الموقف: مطلق. أعلى: 0 بكسل ؛ اليسار: 0 بكسل ؛ لون الخلفية: وردي}. يفترض هذا الوصف أن المربع سيكون طوله 150 بكسل وعرضه 150 بكسل ، وسيتم وضعه بشكل صارم في الزاوية اليسرى العليا من المستند ، وستكون خلفيته باللون الوردي.
الخطوه 3
امنح الكتلة موضعًا نسبيًا. إذا كنت لا تستخدم الموضع المطلق ، ولكن النسبي في وصف CSS ، فيمكنك وضع الكتل ليس مع انطباق صارم على شبكة من الإحداثيات ، ولكن بالنسبة للكتل الأخرى الموجودة بالفعل. للقيام بذلك ، قم بتغيير موضع الكود: مطلق؛ أعلى: 0 بكسل ؛ اليسار: 0 بكسل حسب الموضع: نسبي ؛ أعلى: 200 بكسل ؛ اليسار: 100 بكسل.
الخطوة 4
قم بتدوير الكتلة. في CSS ، تكون عبارة border-radius هي المسؤولة عن ذلك. أضف الكود التالي إلى ورقة الأنماط الخاصة بك: border-radius: 8px. سيكون للكتلة الآن زوايا مستديرة. إذا كنت ترغب فقط في تقريب بعض الزوايا ، فقم بوصف نصف القطر بشكل منفصل لكل منها: border-radius: 8px 8px 0px 0px.
الخطوة الخامسة
أعط الكتلة ضربة. لتمييز المخطط التفصيلي للكتلة بخط رفيع ، أضف الكود التالي إلى وصف CSS الخاص به: border-top: 1px dashed black. تعني هذه التعليمات أن حدود الكتلة ستكون سوداء وستكون بسمك بكسل واحد. في هذه الحالة ، سيتم عرض خط الكنتور نفسه كخط متقطع (متقطع - خط منقط ، منقط - نقاط ، متصل - خط متصل).
الخطوة 6
قم بتعيين خصائص الكتلة المتبقية. حدد في وصف CSS المحرف الذي يجب استخدامه للنص داخل الكتلة ، وما يجب أن يكون حجم الخط والمحاذاة والمسافة البادئة من حواف الكتلة. يتم وصف هذه الخصائص في تعريفات عائلة الخطوط وحجم الخط ومحاذاة النص والحشو.
الخطوة 7
يمكنك استخدام خاصية الطفو لتخصيص تدفق كتلة واحدة على أخرى. إذا قمت بضبطه على "اليسار" ، فسوف تتدفق بقية العناصر حول الكتلة الموجودة على اليسار ، و "اليمين" - على اليمين. إذا قمت بتعيين قيمة الطفو على "لا شيء" ، فلن يتم تعيين محاذاة الكتلة. تمنع الخاصية clear في CSS الكتلة من التدفق إلى اليمين أو اليسار أو كلا الجانبين ، وتتجاوز بيان العائمة.
