الغش ورقة: كيفية البادئة CSS النص

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

margin و padding: ما هو الفرق؟

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

• يحدد حقل الملكية الحشو، والمسافة البادئة - الهامش.
• يتم تحديد المجال من خلال وجود فجوة بين محتويات وكتلة الحدود، مساحة - بين حدود كتل المتاخمة؛
• يمكن اعتبار الحقل كعنصر في حجم (العرض والارتفاع) ولا.

الملكية هامش

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

وثيقة الفقرة الرئيسية. في أبسط الحالات، يمكن أن تكون مكتوبة على النحو التالي:

هامش: 12px.

هذا الخط يعني أن حوالي كتلة من النص (أو أي كتلة أخرى) على جميع الأطراف يتم وضعها في المسافة البادئة 12 بكسل. لزيادة الفاصل الزمني، على سبيل المثال، ثلاث مرات ما يكفي لكتابة:

هامش: 36px.

ولكن ماذا لو بين الكتل الفاصل الزمني يجب أن تكون مختلفة على كل جانب؟ مطوري الويب تستخدم عدة أشكال للتسجيلات:

1. هامش: 11px 22px.
2. هامش: 11px 22px 33px.
3. هامش: 11px 22px 33px 44px.

في المثال الأول، يتم إجراء بكسل تسنن 11 من الحدود الدنيا والعليا للكتلة، على جانبي الكتلة - 22 بكسل. ووفقا لوحدة قياسية الثانية بين الحافة العليا ومضمون يكون 11 بكسل، وبين انخفاض - 33 بكسل على كل جانب - 22 بكسل. في حالة CSS نص الفقرة الثالثة سيكون لها قيمة 11 بكسل من أعلى، والجانب الأيمن 22 بكسل، 33 بكسل و 44 بكسل من الجزء السفلي الأيسر.

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

الهامش اليمين: 22rh.

لمسافة المتبقية حول جوانب كتلة يفترض أن تكون مساوية لقيمة العنصر الأصل.

الملكية هامش ديها الميزات التي يحتاج المطور إلى تذكر عند استخدام النص CSS بادئة عموديا. لا تتلخص فترات من العناصر المجاورة، وفرضه على بعضها البعض. على سبيل المثال، لنفترض أن إحدى الوحدات لديها هامش القاع: 15px، وتحت المجاور كتلة هامش قمة: 35px. الحساب المدرسة والحس السليم يفرض أن التباعد التام بينهما ستكون 50 بكسل. في واقع الامر ليس كذلك. كتلة ذات قيمة كبيرة من هامش الملكية «ابتلاع" جاره. ونتيجة لذلك، والفاصل الزمني بين العناصر هو 35 بكسل.

"الأحمر" خط

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

النص في الهامش: 11px.

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

النص في الهامش: 11px؛

مواءمة النصوص: تبرير.

بالإضافة إلى بكسل، في وصف استخدام وحدات العلامات الأخرى - بوصة تدعي في المئة. دع الوحدة لديها المسافة البادئة النص CSS من 10٪. عندما عرض على كتلة من 500 بكسل، الخط الأحمر ستكون 50 بكسل (10٪ من 500).

لهذا العقار قد عرضت يرث القيمة. يقول هذا السجل أن وحدة تستخدم خاصية مماثلة من وحدة الأصل.

النص في الهامش: وراثة.

والمثير للدهشة، و المسافة البادئة يمكن أن تتخذ على القيم السلبية! في هذه الحالة، يتم تشكيل هذه الخطط من قبل ما يسمى، وهذا هو يبقى النص الأساسي في المكان، ويتم إزاحة السطر الأول إلى اليسار بمقدار 22 بكسل:

النص في الهامش: -22px.

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

الحشو-اليسار: 22px.

تلميحات مفيدة

الخصائص الأساسية لCSS ل تنسيق النص والنظر فيها. واصلاحها ممارسة المساعدة. وفيما يلي بعض النصائح الأخيرة حول كيفية تطبيق المادة المستفادة في تطوير الشبكة:

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