مسافة Html بين الفقرات. HTML: فقرة وخط أحمر. الاقتباسات والتعاريف

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

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

تحتوي خاصية المسافة البادئة للنص على بناء جملة بسيط:

المسافة البادئة النص:<значение> | <проценты>| يرث

كقيم ، يمكنك تحديد وحدات البكسل (px) والنقاط (pt) والوحدات الأخرى المقبولة في CSS. تحدد القيمة مقدار نقل نص السطر الأول إلى اليمين من الموضع الأصلي. يجوز تحديد القيم السالبة ، ثم ينتقل النص إلى اليسار. عند تحديد قيم النسبة المئوية ، يتم حساب المسافة البادئة للسطر الأول بناءً على عرض كتلة النص.

إذا كان يجب إضافة الخط الأحمر إلى فقرة واحدة فقط ، فيمكنك القيام بذلك:

نتيجة:

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

أو أضف سمة class إلى الفقرات التي يجب أن تبدأ بخط أحمر وأضف النمط المطلوب:

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

نتيجة:

يمكنك الآن بسهولة قم بعمل خط أحمر على صفحات html الخاصة بك. اراك قريبا!

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

الطريقة الأولى

يجب أن تبدأ بالطريقة الأكثر شيوعًا. فقط في هذه الحالة ، من الضروري استخدام الجداول المتتالية ، لأن CSS مرتبطة ارتباطًا وثيقًا بلغة ترميز النص التشعبي. يمكن تعيين السطر الأحمر في html باستخدام خاصية "text-indent". يكفي تحديد العنصر المطلوب والمسافة التي سيتم استخدامها للمسافة البادئة على الجانب الأيسر من المستند. على سبيل المثال ، الإدخال: "p (مسافة بادئة للنص: 20 بكسل ؛)" يعني أنه سيتم عمل خط أحمر من 20 بكسل في كل فقرة p. يمكن استخدام أي كتلة نصية كعنصر تم تحديد القيمة له. في الواقع ، لا تحدد هذه الخاصية الخط الأحمر ، ولكنها تحدد المسافة البادئة للسطر الأول من العنصر المحدد. لكن من سيلاحظ الفرق؟ يمكن أن تأخذ الخاصية "text-indent" ثلاثة أنواع مختلفة من القيم:

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

الطريقة الثانية

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

الطريق الثالث

خاتمة

في الختام ، يمكننا القول أن html مع CSS يسمحان لك بعمل مجموعة متنوعة من التأثيرات. تُستخدم الخصائص والعناصر أحيانًا لأغراض أخرى ، لكن يجب ألا تحيد كثيرًا عن المعنى القياسي للعلامات.

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

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

لإنشاء وحدات هيكلية من النص مثل الفقرات ، يتم استخدام العلامة في مستندات HTML.

، الذي يفصل أجزاء النص بمسافة بادئة رأسية (تتم إضافة سطر فارغ قبل فقرة وبعدها).

ملاحظة: بشكل افتراضي ، التباعد بين الفقرات هو 1em (em هي وحدة قياس تساوي ارتفاع الخط) ، أي أن التباعد بين الفقرات يعتمد بشكل مباشر على حجم الخط.

لتغيير المسافات البادئة بين الفقرات دون تغيير حجم الخط ، يمكنك استخدام خاصية هامش CSS.

لا تنسى علامة الإغلاق

ستعرض معظم المتصفحات مستند HTML بشكل صحيح حتى إذا نسيت علامة النهاية.

فقرة

فقرة أخرى

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

خط أحمر

ما هو الخط الأحمر؟ حسب التعريف ، هذا هو السطر الأول من الفقرة ، والذي كان يتم إبرازه باللون الأحمر (ومن هنا جاء الاسم). قبل اختراع الطباعة ، كانت الكتب تكتب باليد - كان الفصل أو جزء من النص ، الكلمة أو الحرف الأول مكتوبًا باللون الأحمر. هكذا ظهر مفهوم "الكتابة من الخط الأحمر" - وهذا يعني بداية فكر أو فصل أو جزء جديد.

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

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

يحاول "

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

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

يحاول "

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

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

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

يجب أن تعرف ذلك بالفعل في لغة البرمجةيتم إنشاء فقرة باستخدام علامة<ص>. وبالتالي ، يجب أن تكون كل فقرة في العلامة الخاصة بها.<ص>. ولل المسافة البادئة للسطر الأول من كل فقرةيكفي للاتصال كود CSS:

ف (
مسافة بادئة نصية: 10 بكسل ؛
}

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

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

إذا كان لديك أي أسئلة ، أو لديك رغبة في التحدث عن هذا المقال ، فيمكنك ترك تعليقك في أسفل الصفحة.

التعليقات (9):

31.05.2013 13:10:03

مرحبًا مايكل ، الرجاء مساعدتي في حل المشكلة باستخدام كود css التالي: .bam (border: 1px solid black؛ border-radius: 8px؛ margin-bottom: 4٪؛ text-align: left؛ width: 84٪؛). bam .author (لون الخلفية: أبيض ؛ الحد السفلي: 1 بكسل أسود خالص ؛ نصف قطر أعلى يمين حد: 8 بكسل ؛ نصف قطر أعلى يمين حد: 8 بكسل ؛ وزن الخط: غامق ؛ الحشو: 4 بكسل ؛). نص bam. (background-color: WhiteSmoke؛ border-bottom-right-radius: 8px؛ border-bottom-left-radius: 8px؛ padding: 4px؛) يجب التفاف النص الموجود داخل ".bam .text" بسطر آخر إذا كان لا يتناسب مع سطر واحد. لكن لسبب ما لم يتم نقله ، ولكنه يزحف خارج الكتلة. ساعد في حل هذه المشكلة.

للرد

06.06.2013 22:42:20

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

للرد

مشرف 06.06.2013 23:32:40

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

للرد

07.06.2013 11:11:09

وأنت تنظر: http://progbase.ru/about.php

للرد

مشرف 07.06.2013 21:54:37

يجب استخدامها

- ضع هذه الكتلة في أماكن مختلفة وشاهد التغييرات. بمجرد أن يصبح كل شيء في محله ، اتركه هناك.

للرد

13.09.2013 21:39:34

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

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

بطاقة شعار

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

محاذاة الفقرة

يمكنك محاذاة فقرة باستخدام سمة المحاذاة مع القيم التالية:

انسخ الكود التالي إلى ملف .html.

محاذاة فقرة مع سمة النمط

هذه الفقرة محاذاة للوسط

هذه الفقرة محاذاة إلى اليمين

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

في نافذة متصفح HTML ، يبدو كود الفقرة على هذا النحو.

تباعد الأسطر

يمكنك التحكم في تباعد الأسطر في الفقرة باستخدام النمط = ارتفاع السطر. استخدم سمة النمط مع القيم التالية:

ارتفاع السطر: عادي | رقم | طول | أولي | وراثة ؛

فيما يلي مثال على تعليمات HTML البرمجية التي تُخرج فقرات بمسافات أسطر مختلفة:

ضبط تباعد الأسطر باستخدام سمة النمط

تستخدم هذه الفقرة قيمتين لسمة النمط. ارتفاع السطر الأول: 1.5 يحدد تباعد سطر ونصف للفقرة ، والقيمة الثانية محاذاة النص: ضبط يحدد أن نص الفقرة يجب أن يكون مضبوطًا في العرض.

هذه الفقرة لها تباعد أسطر مزدوج وهي مضبوطة. ارتفاع السطر: 2 يحدد تباعد مزدوج. لا يجب أن تحتوي سمة النمط على قيمتين. ولكن إذا كنت بحاجة إلى تحديد قيمتين ، فيمكنك القيام بذلك عن طريق فصلهما بفاصلة منقوطة.

فيما يلي بعض الطرق المختلفة لاستخدام قيمة ارتفاع السطر لسمة النمط:

: ضبط تباعد الأسطر على 13 بكسل ؛

: يضبط التباعد بين الفقرات في HTML على 200٪ من حجم الخط الحالي ؛

: يضبط ارتفاع الخط على 14 بكسل.

المسافة الفارغة

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

فيما يلي مثال على الفقرات ذات المسافة البادئة اليمنى واليسرى:

المسافة البادئة للفقرات باستخدام سمة النمط

هذه الفقرة ليست مسافة بادئة ، إنها مبررة. انظر إلى سمة النمط الخاصة بالعنصر P لهذه الفقرة.

بالنسبة لهذه الفقرة ، قمت بتعيين المسافة البادئة اليسرى على 30 بكسل باستخدام padding-left: 30 بكسل. يتم ضبط هذه الفقرة أيضًا باستخدام محاذاة النص: ضبط النمط. كما تعلم بالفعل ، يمكننا استخدام قيم متعددة لسمة النمط عن طريق فصلها بفاصلة منقوطة.

وهذه الفقرة بها مسافة بادئة يمنى مقدارها 30 بكسل ، لكن بدون مسافة بادئة يسرى. له ما يبرره أيضا في العرض. تحدد قيمة "padding-right" لسمة النمط المساحة المتروكة إلى اليمين. إذا كنت لا ترى التأثير ، فقم بتقليل عرض نافذة المتصفح بحيث يتم عرض فقرة HTML المضبوطة بشكل صحيح.

المسافات البادئة بين الفقرات (مسافة بادئة قبل وبعد مسافة بادئة بعد الفقرة)

في HTML أو CSS ، لا نحتاج إلى هذا. يمكننا فقط تصميم الحشو على العنصر

يحدد Padding-top و padding-bottom مسافة بيضاء قبل فقرة وبعدها ، والتي تعمل مثل المساحة المتروكة العلوية أو السفلية. انظر إلى مثال العلامة أدناه

قمت بتعيين فقرة HTML الأولى على مسافة بادئة 10 بكسل قبل الثانية و 50 بكسل بعد الفقرة الثانية:

المسافة البادئة بين الفقرات باستخدام سمة النمط

لم يتم وضع مسافة بادئة لهذه الفقرة قبل أو بعد. هذه فقرة عادية لها ما يبررها. كما تعلم بالفعل ، يمكننا تبرير فقرة باستخدام النمط = ”text-align: justify” code داخل العلامة.

هذه الفقرة مصطفة. كما أن لها مسافة بادئة بمقدار 10 بكسل قبل الفقرة و 50 بكسل بعدها. داخل العلامة ، قمت بتعيين 3 أنماط.

هذه فقرة عادية بدون مسافات بادئة ومحاذاة افتراضية.

أشياء للذكرى

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