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