الخط الأفقي إلى شاشة CSS بأكملها. كيف نفعل مع CSS كتل في الخط؟ III خط في كلمة مع الرسم

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

خطوط في CSS.

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

وهذا ما يحدث.

الخط الأفقي والرأسي مع باستخدام CSS..

خطوط، CSS يمكن رسمها باستخدام مشغل الحدود. إذا كنت بحاجة إلى مستطيل مع عرض ثابت للإطار، فيمكنك ببساطة استخدام هذا المشغل، وقم بتعيين القيمة. على سبيل المثال الحدود: 5PX الصلبة # 000000؛ هذا يعني أن حدود الكتلة لديها عرض 5 بكسل من الأسود.

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

• أعلى الحدود - يحدد قيمة الحدود العليا
• الحد من الحدود - يحدد قيمة الحدود السفلية
• الحدود اليسار - يحدد قيمة الحدود اليسرى
• الحدود الصحيحة - يحدد قيمة الحدود الصحيحة.

خط عمودي وأفقي في أتش تي أم أل

يمكنك إنشاء خطوط في HTML نفسها. للقيام بذلك، يمكنك استخدام علامة HR.

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

ولكن هذه العلامة، يمكنك أن تسأل بعض القيم.

• عرض. - تعيين قيمة عرض القيمة.
• اللون - يحدد لون الخط.
• محاذاة. - يحدد محاذاة على الحافة اليسرى، في المركز، على الحافة اليمنى
• بحجم - يحدد سمك سماكة الخط في بكسل.

باستخدام علامة HR، يمكنك تحديد الخط الرأسي. ولكن في هذه الحالة، سيكون عليك اللجوء إلى الأساليب مرة أخرى.

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

استنتاج.

حسنا الآن تعرف كيف يمكنك ضبط الخط الرأسي والأفقي. يمكن تعيين الأسطر على حد سواء على المواقع العادية، باستخدام HTML وتعيين على الموقع الذي يستخدم CMS، على سبيل المثال، WordPress، ولكن في هذه الحالة، ستحتاج إلى الذهاب إلى وضع HTML.

حسنا، إذا كنت لا تزال لديك أي أسئلة، اسألهم في التعليقات.

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

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

الطرق الرئيسية للبناء في كتل CSS على التوالي

نحن لن تعقد أي شيء، هناك 3 طرق رئيسية:

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

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

اجعل العناصر العائمة باستخدام العقار تعويم.

هذه الخيارات سوف تتوقف. لن يتم النظر في شاشة FlexBox، عرض جدول وغيرها من النقاط الأخرى. لذلك، دعونا لدينا 3 ترجمات.

العنوان 1.

العنوان 2.

العنوان 3.

بطبيعة الحال، يجب تحديد جميع خصائص CSS في ملف منفصل (style.css) أن تكون متصلا وثيقة HTML. في هذا الملف، سأكتب الحد الأدنى من النمط بحيث يمكن رؤية ترجماتنا ببساطة.

h3 (خلفية: # #EDCD؛)

هنا هم في الصفحة:

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

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

عرض: مضمنة؛ الحشو: 30px؛

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

في HTML، ضع رمز الكتل المرغوبة في سطر واحد بدون مسافات

ضع المسافة البادئة الخارجية السلبية على اليمين -4 بكسل. إنه يأخذ فجوة واحدة واحدة.

المشكلة الثانية - مع ارتفاع مختلف العناصر، قد تنشأ المشاكل مع الشاشة. بشكل عام، فإن الخيار الأفضل هو كتل عائمة. بدلا من العرض: Inline-Block اكتب هذا:

كتل في الخط باستخدام الإطار

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

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

على سبيل المثال، عندما يكون لديك شاشات كبيرة يجب أن يكون هناك 4 أعمدة، في المتوسط \u200b\u200b- 3، وعلى الهواتف المحمولة - 2. استخدام الأطر مثل bootstrap، أو بالأحرى بمساعدة شبكتها، تدرك أن هذه مسألة حرفيا بضع دقائق.

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

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

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

كيفية جعل في نص النص مع CSS

لتنفيذ conceived نحن بحاجة إلى الاتصال sTYLE.CSS FILE.، تحدث في ذلك الممتلكات المقابلة حدود.وبعد وبالتالي، سيظهر خط أو من جانب معين من النص. بدوره، هناك العديد من الخصائص المسؤولة عن عرض الخط، وهي:

- الحدود الحدودية. - خط أفقي، يقع فوق النص؛

- الحدود الصحيحة - الخط العمودي، الواقد على يمين النص؛

- أسفل الحدود. - الخط الأفقي، الموجود تحت النص؛

- الحدود اليسار. - خط عمودي يقع على اليسار.

كيفية جعل خط في HTML

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

قيادة موجزة فك التشفير

- العرض. - طول الخط؛

- صلب - خط الصلبة؛

- منقط. - خط بقعة.

للحصول على معارف أعمق مع الأساليب، أوصي بقراءة هذا.

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

الطريقة الناتجة لديها العديد من المزايا:

مجموعة واسعة من الاحتمالات التي يمكنك من خلالها إجراء أي خط تقريبا.

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

كيفية جعل خط أفقي مستقيم باستخدام علامة HTML

---

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

سمات العلامة

---

- العرض. - مسؤولة عن طول الخط. قد يتم الإشارة إليها كنسبة مئوية وبكسل.

- بحجم - سمك الخط. المشار إليها في بكسل.

- اللون - يحدد لون الخط.

- محاذاة. - سمة مسؤولة عن بطانة الخط. بدوره، يشير الفريق إليها.

الخطوط الأفقية نموذج غير ضروري (لا توجد حاجة إلى علامة إغلاق)

بالمناسبة، يمكنك أيضا استخدام خصائص أنماط كتلة.