كيفية بادئة الفقرات مع المغلق

استخدام الخاصية Text-Indent و Selected Sibling Selectors

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

نمط فقرة عامة واحد تشاهده غالبًا في الطباعة (والذي يمكننا إعادة إنشائه عبر الإنترنت) هو المكان الذي يكون فيه السطر الأول من تلك الفقرة محفزًا على مساحة واحدة. هذا يسمح للقراء برؤية حيث تبدأ فقرة واحدة وينتهي آخر.

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

إن بناء الجملة لهذه الخاصية بسيط. إليك كيفية إضافة مسافة بادئة نصية إلى كل الفقرات في المستند.

p {text-indent: 2em؛ }

تخصيص المسافات البادئة

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

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

p + p {text-indent: 2em؛ }

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

ص {margin-bottom: 0؛ الحشو السفلي: 0 ؛ } p + p {margin-top: 0؛ الحشو أعلى: 0 ؛ }

المسافات البادئة السلبية

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

قل ، على سبيل المثال ، أن لديك فقرة هي سليل من فقرة مقسمة وتريد أن يكون لها مسافة بادئة سالبة. يمكنك كتابة هذا CSS:

blockquote p {text-indent: -5em؛ }

هذا من شأنه أن يعطي بداية الفقرة ، التي من المفترض أنها تتضمن حرف الافتتاح ، أن يتم تحريكها قليلاً إلى اليسار لإنشاء علامات تعليق معلقة.

فيما يتعلق الهوامش والحشو

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