خط أفقي بلغة html بطول معين. كيفية جعل الكتل تصطف مع المغلق؟ بناء جملة أمثلة للخطوط الرأسية والأفقية في HTML
خطوط أفقيةيتم تشكيلها بواسطة علامة غير مقترنة (ليست هناك حاجة إلى علامة إغلاق)
ويمكن أن تكون عناصر تصميم فريدة تمامًا. سيعطي تخطيط النص مع خطوط HTML الأفقية للصفحة منطقًا معينًا لعرض النص ، بالإضافة إلى تسهيل قيام القارئ بتمييز كتل المعلومات التي يجب دراستها بالتسلسل. بطاقة شعار
يمكن أن تشكل خطوطًا أفقية بألوان وسمك وأطوال مختلفة. والقيام بذلك بسيط للغاية ، كما هو موضح في الأمثلة أدناه.
بالمناسبة ، يمكنك أيضًا استخدام خصائص نمط الكتلة أ خطوط عموديةتتشكل في الواقع في نفس الكتل هذا مثال على خط عمودي أحمر على اليسار. هذا مثال على خط عمودي أحمر على اليمين. هذا مثال على خط أحمر أفقي في الأعلى. هذا مثال على خط أحمر أفقي في الأسفل. هذا مثال على الخطوط الأفقية والعمودية. لاحظ سمة النمط الدائرة التي تم إنشاؤها بواسطة العلامة هذا مثال على خط عمودي أحمر على اليسار. هذا مثال على خط عمودي أحمر على اليمين. هذا مثال على خط أحمر أفقي في الأسفل. هذا مثال على الخطوط الأفقية والعمودية. وإذا قمنا بتحليل هذه الأمثلة ، فيمكننا التوصل إلى استنتاج بسيط إلى حد ما مفاده أن الخطوط الرأسية يتم تشكيلها على أفضل وجه ، ويمكن عمل خيارات الخطوط الوسيطة باستخدام بطاقة شعار أهلا بالجميع! سأخبرك اليوم بكيفية عمل خط أفقي باستخدام لغة تأشير النص الفائق. في الواقع ، تظهر الحاجة إلى إنشاء خط أفقي في كثير من الأحيان ، على سبيل المثال ، عندما تحتاج إلى فصل جزء من النص عن جزء آخر. يمكنك القيام بذلك باستخدام css. للقيام بذلك ، أرفق القسم الضروري من النص في كتلة باستخدام علامة div ، ثم في ملف style.css أو مباشرةً في كود html ، نوصي بخصائص هذه الكتلة للحد العلوي أو السفلي باستخدام الحد العلوي والحد السفلي. هنا مثال:
في هذه الحالة ، قمت بتصميمه باستخدام css مباشرةً من كود html ، وجعلت الحد العلوي خطًا متصلًا والحد السفلي خطًا منقطًا. إليك كيف ستبدو على الصفحة: خط أفقي مع css. هذه الطريقة لها مزاياها: تشمل العيوب الحجم النسبي للشفرة. ومع ذلك ، كما اتضح ، يمكنك إدراج خط أفقي في النص باستخدام html. في الوقت نفسه ، ليس من الضروري حتى الصعود إلى المغلق. يتم استخدام العلامة لهذا الغرض. الميزة الأولى لهذه العلامة هي أنها لا تحتوي على علامة نهاية مقترنة. يمكن استخدامه في أي مكان في كود html بين العلامات تحتوي هذه العلامة على السمات التالية: هنا مثال على كود html. عند إنشاء صفحة HTML ، يلعب التصميم دورًا أساسيًا. خصوصًا عندما نتحدث عن رموز وزخارف مختلفة: تساعد هذه الأشياء الصغيرة في جعل "لغة" صفحتك أكثر سهولة في الوصول إليها ووضوحًا ، كما أنها تغير بشكل كبير من منظورها ومظهرها بشكل عام. يعد الخط الأفقي أحد أهم عناصر التصميم ، وسنتعرف بعد ذلك بمزيد من التفصيل على كيفية التعامل معه وكيفية إنشاء خط أفقي في لغة تأشير النص الفائق. الخط الأفقي في html هو عنصر تصميم صفحة يؤدي عددًا من الوظائف: يعتبر الخط الأفقي الطريقة الأكثر سهولة لتنفيذ عدد من الوظائف. من السهل جدًا إنشاؤه ، ويبدو ظاهريًا أنه مربح للغاية. من خلال تغييرات بسيطة في كود html ، يمكنك التحكم في: تجدر الإشارة إلى أن الخط الأفقي يشير إلى عناصر الكتلة. هذا يعني أنه يحتل سطرًا جديدًا على الصفحة ، وسيظهر النص الذي يليه أدناه. يمكنك تعيين خط باستخدام علامة بسيطة - hr بين قوسين مثلثين. إنه اختصار لـ "H Horisontal Rule" ويضع المعايير الخارجية الكلاسيكية. وهي تختلف عن غيرها من حيث أنها لا تحتاج إلى علامة إغلاق وقادرة على الوجود بشكل مستقل. يمكنك تغيير الخصائص الخارجية لعنصر باستخدام قيم إضافية في العلامة: تبدو هكذا. على سبيل المثال ، إذا احتجنا إلى طول 100 بكسل ، فسنقوم بتعيين العلامة التالية: hr width = "100" ستبدو العلامة النهائية في هذه الحالة هكذا. على سبيل المثال ، إذا احتجنا إلى ضبط المحاذاة المركزية لخط أفقي يبلغ طوله 150 بكسل ، فستبدو العلامة النهائية على النحو التالي: hr align = "center" width = "150". لاحظ أنه تم تعيين "المحاذاة" ، مقياس المحاذاة ، على 1 ، على الرغم من أن السمة تعتمد على مقياس العرض. وبالتالي ، إذا أردنا إنشاء خط بعرض 15 بكسل ، فنحن بحاجة إلى إنشاء العلامة التالية: hr size = "15". وبالتالي ، يمكن كتابة علامة الخط الأبيض القياسي بطريقتين: hr color = "# FFFFFF" أو hr color = "white" يمكن إنشاء اللون الأسود باستخدام الكود # 000000. وإذا كنت ترغب في الحصول على معلومات بتنسيق أكثر وضوحًا ، فارجع إلى الفيديو التالي ، الذي يصف بالتفصيل إمكانيات العمل بخط أفقي. بعد تحديد الأبعاد المطلوبة للخط الأفقي ، يمكنك ترتيب صفحات الموقع بطريقة تكون فيها المعلومات منظمة ومنسقة بصريًا بشكل جيد. هذا يسهل على الزائرين إدراك المعلومات المقدمة وتمييز موقعك عن الآخرين. بشكل أساسي ، تُستخدم الخطوط الأفقية لتزيين صفحات HTML الخاصة بالموقع ، مما يمنحها مظهرًا أكثر جاذبية. لكن يمكنهم أيضًا تحديد معلومات الأقسام المجاورة بشكل مرئي ، مما يضيف راحة للقراء عند دراستها. بشكل عام ، ارسم خطوطًا أفقية حيث تريد ، هذا كل شيء. هناك علامة خاصة لرسم الخطوط الأفقية في HTML. مثال على رسم الخطوط الأفقية بتنسيق HTML
فقرة. فقرة. فقرة. نتيجة في المتصفح فقرة. فقرة. فقرة. كما ترى ، الخطوط رفيعة جدًا وغير موصوفة ومرسومة بالعرض الكامل المتاح ، لذلك سنتعلم الآن كيفية تغييرها لجعلها تبدو أكثر جاذبية. في الإصدارات الأقدم من HTML ، تكون العلامة يمكن تحديد اللون من خلال اسمه باللغة الإنجليزية أو من خلال رمز HEX للون مسبوقًا بعلامة الجنيه (#). حسنًا ، أنت تعرف ذلك بالفعل من الدرس فصاعدًا تغيير لون النص والخلفية. لكن دعنا نتحدث عن تغيير الحجم بمزيد من التفصيل. كما تتذكر من البرنامج التعليمي حول تغيير الخطوط، هناك حوالي عشر وحدات في CSS ، لكن عرض الخطيمكن تحديده فقط بالبكسل (بكسل) والنسب المئوية (٪) ، و سماكةبشكل عام فقط بالبكسل. إذا وضعت وحدات قياس أخرى ، فلن يكون هذا خطأ ، لكن المتصفحات ستتجاهلها ببساطة. إذا حددت أبعادًا بالبكسل ، فسيعتمد سمك الخط وعرضه على دقة الشاشة التي يُعرض عليها موقعك (كلما زادت دقة الشاشة ، كان الخط أرق وأضيق). كما قلت ، يمكن تحديد عرض الخط فقط كنسبة مئوية. تعتمد أحجام النسبة المئوية دائمًا على حجم حاوية العنصر الأصلية التي توجد بداخلها العلامة وتحسب بناءً على ذلك مثال على تغيير لون وسمك وعرض الخطوط الأفقية.
نتيجة في المتصفح عندما تقوم بتغيير عرض خط أفقي ، يمكنك أن ترى بوضوح أن المستعرضات تقوم دائمًا بتوسيطه. إذا كنت ترغب في تغيير موضعه ، فما عليك سوى استخدام الداخل مثال على محاذاة الخطوط الأفقية.
نتيجة في المتصفح انظر إلى المثال الأول من هذا البرنامج التعليمي. ما هو لون هذه الخطوط في رأيك؟ وهذا هو الخطأ. إنها شفافة ، مثلها مثل أي عناصر صفحة لم يتم تحديد لون خلفية لها! لا تصدق؟ ثم انظر إلى المثال الذي قمنا فيه بتغيير لون الخطوط. في البداية ، لم نضبط اللون ، بل زدنا حجمه فقط ، أليس هذا الخط شفافًا؟ لهذا السبب! الآن سأشرح. بشكل افتراضي ، ترسم المتصفحات حول خطوط الحدود ، مما يؤدي إلى إنشاء تأثير ثلاثي الأبعاد. لذلك ، عندما لا نزيد سمك الخطوط الأفقية ، تظهر لنا المتصفحات هذه الإطارات فقط ، لأن سمك الخط نفسه يساوي 0 بكسل. لإزالة الحد حول الخط ، والذي غالبًا ما يفسد المظهر فقط ، سنطبق سمة النمط مرة أخرى. وهي مكتوبة على هذا النحو:
الواجب المنزلي. من المؤلف:انا احييك. تعد الحاجة إلى تقديم عدة كتل على صفحة ويب في سطر واحد مهمة شائعة جدًا يواجهها مصممو التخطيط. يحدث ذلك عند تصميم كل قالب تقريبًا ، لذلك نحتاج جميعًا إلى معرفة وتطبيق الطرق الأساسية لتغيير سلوك الكتل على أي حال. قبل أن ننظر إلى الحيل الأكثر شيوعًا ، أود أن أتذكر القليل من النظرية. تنقسم عناصر صفحة الويب إلى عناصر كتلة ومضمنة. والفرق بينهما بسيط للغاية - يمكن وضع الأحرف الصغيرة في سطر واحد ، ولكن لا يمكن وضع الأحرف الصغيرة في سطر واحد. بالطبع الخلافات لا تنتهي عند هذا الحد ، لكن هذا هو الاختلاف الرئيسي. يمكن أن تحتوي الكتل بالفعل على مسافات بادئة في الجزء العلوي والسفلي (لا تحتوي الكتل المضمنة على مسافات بادئة) ، ويمكن تطبيق المزيد من الخصائص عليها. لن نعقد أي شيء ، فهناك 3 طرق رئيسية: تحويل الكتل إلى عناصر مضمنة. في هذه الحالة ، يتم فقد خصائص الكتلة ، لذلك لا يتم استخدام هذا الخيار مطلقًا. جعل العناصر المطلوبة مضمنة كتلة. هذا نوع خاص يحتفظ فيه العنصر بخصائصه ، ولكن في نفس الوقت يسمح بوضع الكتل الأخرى في مكان قريب. اجعل العناصر تطفو باستخدام خاصية الطفو. دعنا نلقي نظرة على هذه الخيارات. لن يتم النظر في Flexbox والعرض الجدولي والنقاط الأخرى. لنفترض أن لدينا 3 عناوين فرعية. بطبيعة الحال ، يجب كتابة جميع خصائص css في ملف منفصل (style.css) ، والذي يجب أن يكون متصلاً بمستند html. في هذا الملف ، سأكتب أسلوبًا مبسطًا بحيث يمكن رؤية عناويننا الفرعية ببساطة. h3 (الخلفية: #EEDDCD ؛) h3 ( الخلفية: #EEDDCD ؛ ها هم على الصفحة: هناك يتصرفون مثل الكتل. يقع كل منها على خطها الخاص ، وهناك مسافات بادئة بينهما. إذا كنت ترغب في ذلك ، يمكنك أيضًا تعيين أي مسافات بادئة داخلية وفعل أي شيء بشكل عام. دعنا نحول إلى سلاسل ونضيف المسافات البادئة على الفور. للقيام بذلك ، يحتاج محدد h3 إلى إضافة الخصائص التالية: عرض: مضمنة ؛ المساحة المتروكة: 30 بكسل هناك مشكلتان رئيسيتان تظهران عند استخدام هذه التقنية. الأول هو الحد الأدنى للإزاحة. يتم تشكيلها بسبب حقيقة أن هناك مساحة واحدة في الكود بين الكتل ، والتي تشكل هذه المسافة البادئة. إذا كانت هذه المشكلة بحاجة إلى المعالجة ، فهناك خياران رئيسيان: في لغة تأشير النص الفائق ، ضع كود الكتل الضرورية في سطر واحد بدون مسافات ضع هامشًا سلبيًا على اليمين -4 بكسل. هذا هو الوقت الذي تستغرقه مساحة واحدة. المشكلة الثانية هي أنه مع اختلاف ارتفاعات العناصر ، يمكن أن تحدث مشاكل في العرض. بشكل عام ، الكتل العائمة هي الخيار الأفضل. بدلاً من العرض: inline-block نكتب هذا: يجب أن أقول على الفور أنه إذا كنت ستستخدم أي إطار عمل css عادي (على سبيل المثال ، Bootstrap) ، فلا يزال الأمر أسهل كثيرًا هناك. تمت كتابة جميع رموز css المسؤولة عن ترتيب العناصر بالفعل وسيتعين عليك فقط تعيين الفئات الصحيحة. للقيام بذلك ، يكفي تعلم نظام الشبكة ، وستكون قادرًا على إنشاء قوالب مستجيبة متعددة الأعمدة دون صعوبة كبيرة. على الأقل سيكون الأمر أسهل بكثير من كتابة css من البداية. تظهر مشكلة أخرى في كتابة التعليمات البرمجية من البداية عندما تحتاج إلى تصميم سريع الاستجابة. بالطبع ، يمكنك تنفيذه بنفسك من خلال امتلاك استعلامات وسائط ، ولكن سيكون الأمر أكثر صعوبة إذا كان لديك قالب معقد. على سبيل المثال ، عندما تحتاج إلى 4 أعمدة على الشاشات الكبيرة ، و 3 على الشاشات المتوسطة ، و 2 على الهواتف المحمولة.بمساعدة أطر عمل مثل Bootstrap ، أو بالأحرى استخدام شبكتها ، فإن هذا حرفيًا يستغرق بضع دقائق. بنقل الموضوع بسلاسة إلى إطار عمل Bootstrap ، سألاحظ مرة أخرى أنه إذا واجهت مهمة وضع قالب تكيفي معقد ، فمن الخطيئة ببساطة عدم استخدام الشبكة. للقيام بذلك ، ليس من الضروري حتى توصيل الإصدار الكامل من إطار العمل - يمكنك تخصيصه وإيقاف ما تحتاجه حقًا فقط. يمكنك تعلم كيفية العمل مع الإطار باستخدام. يتم شرح النظرية هناك ، ولكن أهم شيء هو الممارسة. ستؤلف 3 قوالب قابلة للتكيف وستحصل على تجربة رائعة تتيح لك إنشاء مواقع إلكترونية تطلبها أو لنفسك. وإذا كنت ترغب في التعرف على مزايا وميزات إطار العمل مجانًا ، أقترح عليك مراجعة سلسلة المقالات الخاصة بنا على Bootstrap ، وكذلك حول تخطيط تخطيط بسيط. أتمنى لكم التوفيق في التخطيط وبناء الموقع بشكل عام.
و
في مكان معين. صحيح ، قد لا يكون هذا الخيار مناسبًا دائمًا ، على سبيل المثال ، لا يبرر التلوين أحيانًا نفسه دائمًا ، ولكن في كثير من الحالات من الممكن حل المشكلات بهذه الطريقة. على سبيل المثال ، تشكلت داخل الخط بطاقة شعار
لا تدخل النص. وداخل الكتل - هذا ممكن ويمارس باستمرار. لذلك عليك أن تختار خيارك حسب متطلبات التصميم.
خطوط عمودية في HTML.
و
الإزعاج الوحيد هو أن العلامة غير متوفرة في جميع المتصفحات.
يعمل بنفس الطريقة ، ولكن هنا تحتاج إلى المحاولة
وضبط الصفحة ، أو استخدم متصفحات محدثة.
تشكيل الخطوط الأفقية:
بطاقة شعار
يدخل خطًا أفقيًا في الصفحة وله السمات التالية:بناء جملة العلامة
:أمثلة على الخطوط الأفقية في HTML:
أمثلة على الخطوط العمودية في HTML:
صيغة أمثلة الخطوط الرأسية والأفقية في HTML هي:
الحدود- يسار (- يمين): 4 بكسل صلب # FF0000 ؛:
لكن كل هذا يتوقف على الخيال والطلبات. لذا اختر وشكل.خطوط أفقية وعمودية مع css
. خط أفقي بعلامة html
ما هو الخط الأفقي ولماذا هو مطلوب
إنشاء خط أفقي في HTML
إنشاء خط أفقي بالفيديو
كيفية رسم خط أفقي؟
. وهو علامة الحظر، أي أنه ينشئ فواصل أسطر قبل وبعد نفسه ، لذلك يتم الحصول على السطر دائمًا في سطر منفصل. وفقًا لذلك ، يمكن تحديده فقط داخل العلامات التي يمكن أن تحتوي على عناصر كتلة ، على سبيل المثال أو . لكن نفسه
لا يمكن أن يحتوي على محتوى لأنه ببساطة لا يحتوي على علامة إغلاق ، أي أنه فارغ.
كيفية تغيير لون وسمك وعرض الخطوط الأفقية؟
كانت هناك سمات خاصة يمكنك من خلالها تغيير لون الخطوط الأفقية وسمكها وعرضها. هذه هي اللون والحجم والعرض ، على التوالي. لكن في الإصدارات الأحدث ، تم إهمالها لصالح أوراق الأنماط المتتالية (CSS) ، لذلك ، خمنت ذلك ، سنستخدم سمة النمط المفضلة لدينا مرة أخرى. الصيغة العامة هي:
style = "background: color">- لون الخط (أو بالأحرى خلفيته).
style = "height: size">- سماكة الخط.
style = "width: size">- عرض الخط.
النمط = "الخلفية: اللون ؛ الارتفاع: الحجم ؛ العرض: الحجم">
- ويمكنك تحديد جميع المعلمات مرة واحدة ، فقط لا تنس الفاصلة المنقوطة (؛).
. في هذه الحالة ، يتم أخذ أبعاد الوالد على أنها 100٪. على سبيل المثال ، إذا وضعنا العلامة
النمط = "العرض: 50٪">داخل العنصر ، فبغض النظر عن كيفية تغيير حجم نافذة المتصفح أو دقة الشاشة ، فسيكون عرض الخط دائمًا نصف عرض الكتلة
.
تغيير موضع الخطوط الأفقية
محاذاة السمة مع القيم التالية:
كيفية إزالة الحدود حول الخط؟
الطرق الأساسية لمحاذاة الكتل في المغلق
عنوان 1
العنوان 2
العنوان 3
كتل في خط باستخدام الإطار