سلام به همه! امروز به شما خواهم گفت که چگونه با استفاده از html یک خط افقی بسازید.

در واقع، نیاز به ایجاد یک خط افقی اغلب ایجاد می شود، به عنوان مثال، زمانی که شما نیاز به جدا کردن یک قسمت از متن از دیگری دارید.

خطوط افقی و عمودی با css

شما می توانید این کار را با css انجام دهید. برای این کار، قسمت لازم از متن را با استفاده از تگ div در یک بلوک قرار می دهم و سپس در فایل style.css یا مستقیماً در کد html، با استفاده از border-top، ویژگی های این بلوک را برای حاشیه بالا یا پایین تعیین می کنیم. و حاشیه پایین. به عنوان مثال:

در این مورد، من آن را با css مستقیماً از کد html استایل دادم و حاشیه بالایی را یک خط ثابت و حاشیه پایین را یک خط نقطه چین قرار دادم.

در اینجا نحوه نمایش آن در صفحه است:

خط افقی با css.

این روش مزایای خود را دارد:

• طیف گسترده ای از تنظیمات که به شما امکان می دهد تقریباً هر نوع خطی را تنظیم کنید.
• می توانید خطوط افقی و عمودی ایجاد کنید. برای ایجاد خطوط عمودی، باید border-top را به حاشیه-چپ و border-bottom را به حاشیه-راست تغییر دهید.

از معایب آن می توان به حجیم بودن نسبی کد اشاره کرد.

با این حال، همانطور که مشخص شد، می توانید یک خط افقی را با استفاده از html وارد متن کنید. در عین حال، حتی لازم نیست به css صعود کنید. برای این کار از تگ استفاده می شود.

---

.

خط افقی با تگ html

---

اولین ویژگی این تگ این است که تگ انتهایی جفتی ندارد. می توان از آن در هر نقطه از کد html بین تگ ها استفاده کرد و.

این تگ دارای ویژگی های زیر است:

• عرض- طول خط افقی ما را بر حسب پیکسل یا درصد مشخص می کند.
• رنگ- رنگ خط را مشخص می کند.
• تراز کردن- تراز خط را به لبه راست - راست، به لبه چپ - چپ، به مرکز - مرکز تنظیم می کند.
• اندازه- ضخامت خط بر حسب پیکسل

اینجا مثال html- کد:

---

و به این صورت خواهد بود:

همانطور که می بینید، در این روشمعایب خود را دارد:

• تنظیمات کمتر برای خط.
• شما نمی توانید یک خط عمودی ایجاد کنید.

اما این راه بسیار ساده تر است.

اکنون دقیقاً می دانید که چگونه خطوط عمودی و افقی را در سایت خود ایجاد کنید. شما می توانید سوالات خود را در نظرات بپرسید. و فراموش نکنید که مشترک شوید

در این مقاله با ایجاد یک خط عمودی آشنا می شوید که می تواند با استفاده از HTML و CSS انجام شود که در آن متن انتخابی را به آن اضافه می کنیم. برای ایجاد یک خط، چندین روش وجود دارد که می توانید آن را نمایش دهید. اما در اینجا باید بدانید که همه مرورگرها نمی توانند آن را به درستی نمایش دهند، بنابراین ما ساده ترین و قابل فهم ترین راه را انتخاب می کنیم، جایی که خط عمودی به صورت بصری مشاهده می شود.

همچنین در اینجا بلافاصله متنی را به آن اضافه می کنیم تا بتوان آن را انتخاب کرد کلید واژه هایا دسته بندی هایی که در سایت قرار دارند و قطعا باید از توضیحات اصلی در طراحی خود متمایز باشند. بنابراین، فقط خط برای این کار مناسب است، که می تواند تحت هر طیف رنگی تنظیم شود، به این معنی که می توان آن را متناسب با سبک طراحی شما تنظیم کرد.

اگر آن را به طور کامل در نظر بگیریم، پس راه های مختلفی برای ایجاد چنین خطوطی برای قرار دادن خطوط عمودی در صفحه وجود دارد. در اینجا ما 2 روش اصلی را در نظر خواهیم گرفت، این در HTML و CSS است، اما اینکه کدام یک برای شما مناسب تر است، بستگی به نیاز شما دارد. اگر نصب کنید صفحه نخست، پس بهتر است همه چیز را از طریق استایل ها انجام دهید. اما در مقالات مختلف به عنوان طراحی نیز استفاده می شود، پس مطمئناً قرار دادن آن در HTML بسیار منطقی تر خواهد بود.

برای ایجاد یک خط، چندین روش وجود دارد که می توانید از آنها استفاده کنید:

1 . ویژگی حاشیه-راست یا حاشیه-چپ جدول را به عرض دلخواه تبدیل کنید تا بتواند به عنوان یک خط عمودی عمل کند.
2 . ویژگی حاشیه-راست یا حاشیه-چپ DIV را نوع عرض دلخواه خود قرار دهید.
3 . به طور مشابه، شما می توانید همه چیز را با کمک style استفاده کنید، جایی که در CSS، ما تمام پارامترها را تجویز می کنیم.

روش اول:

در این روش همه چیز ساده است، در اینجا ابتدا آن را روی صفحه در یک تگ div قرار می دهیم، این همه برای برجسته کردن عنصر است. جایی که می توانید از یک قاب بلوک موجود نیز استفاده کنید، جایی که مرز را از یک سمت مشخص تعیین می کنید. جایی که امکان وارد کردن سبک در تگ مشخص شده وجود دارد.

این خروجی خواهد بود:

همه این کارها با استفاده از ویژگی border-left انجام شد، جایی که ما ابتدا مرز بلوک را در سمت چپ قرار دادیم و پس از آن می توانید پارامترها را هم در زیر خط و هم در زیر عبارت کلیدی که پیوست می شود تنظیم کنید.

در اینجا توجه داشته باشید، زیرا از ویژگی های border-top و border-bottom می توان به طور مشابه برای تنظیم یک خط افقی استفاده کرد.

روش دوم:

شما باید یک div را در اطراف نشانه گذاری داده شده قرار دهید، این کار تا جایی انجام می شود که تصمیم می گیرید که خط به صورت زیر نمایش داده شود. استفاده از CSS.

تصاویر چندین ویژگی جالب دارند که می توان با اعمال تبدیل مستقیم (18) در موقعیت های فیزیکی ساده به دست آورد. برای هدف فعلی ما نیازی به کلیت کامل فرمول (18) نداریم. اثری که می‌خواهیم نشان دهیم را می‌توان حتی زمانی نشان داد که تمام پارامترهای مشخص‌کننده موقعیت دوربین برابر با صفر باشند، به جز یک زاویه شیب. مطابق با این، ما عبارت (18) را به شکل ساده تری می گیریم و تبدیل می کنیم:

ویژگی های تصویر یک خط عمودی را بررسی می کنیم. خط عمودی یک جسم توسط نقطه جسم ترسیم می شود

که در آن مختصات نقطه ای که خط سطح کف را قطع می کند و z یک پارامتر آزاد است که مقدار آن در بین همه گرفته می شود. اعداد واقعی. اگر v را جایگزین فرمول (27) کنیم و پارامتر آزاد z را از دو معادله حذف کنیم، معادله یک خط مستقیم در صفحه تصویر به دست می آید.

تجزیه و تحلیل این معادله ساده به دست می دهد کل خطمشاهدات جالب مهمتر از همه، نقطه تقاطع با محور Z مستقل از موقعیت خود خط عمودی است. فقط به این بستگی دارد که آیا خط واقعاً عمودی است یا خیر. بنابراین، برای یک هندسه دوربین معین، تصاویر تمام خطوط عمودی از یک نقطه از صفحه عمودی عبور می کنند که مختصات آن در تصویر برابر است.

برنج. 10.4. نقاط ناپدید شدن

برنج. 10.4 این اثر را بر روی تصویر یک جعبه مستطیلی نشان می دهد، توسط دوربین ثبت شده است، به شدت به سمت پایین متمایل است خواننده می تواند سایر ویژگی های معادله (28) را که با شهود سازگار است بررسی کند. به عنوان مثال، اگر از صفر به 90 درجه افزایش یابد، نقطه ناپدید شدن عمودی به مرکز صفحه تصویر حرکت می کند و شیب خط صاف تر می شود. به طور مشابه، برای هر زاویه دوربین معین، این اثر با حرکت خطوط عمودی سوژه به سمت حاشیه میدان دید (یعنی زمانی که

در مقایسه با ) بزرگ می شود. بنابراین، نقطه ناپدید شدن عمودی را فقط می توان از روی پارامترهای دوربین تعیین کرد و یک شرط ضروری ساده را بر تصاویر خطوط عمودی تحمیل می کند.

10.5.4. خطوط افقی و نقاط ناپدید شدن

به عنوان آخرین مثال از استفاده از تبدیل های پرسپکتیو، اجازه دهید برخی از ویژگی های تصویر یک خط افقی را بررسی کنیم. برای سادگی، تصویری از یک خط شی را در نظر می گیریم که روی صفحه طبقه سیستم مختصات جهانی قرار دارد. هر نقطه از جسمی که روی چنین خطی قرار دارد دارای کجا و b است - به ترتیب شیب خط و طول قطعه بریده شده توسط این خط در محور مختصات Y. روی زمین، بهتر است دوربین از سطح زمین بلند شود و ممکن است به سمت پایین باشد. مطابق با این، پارامترهای هندسی دوربین را به شکل می گیریم و اجازه می دهیم مقدار مثبت و - منفی باشد. برای این پارامترها، تبدیل مستقیم (18) به صورت زیر ساده شده است:

پس از جایگزینی در فرمول (29) و حذف پارامتر آزاد x از دو معادله، معادله یک خط مستقیم را در صفحه تصویر به دست می آوریم.

هیچ ویژگی ساده ای از شیب این خط گرافیکی یا نقاط تقاطع آن با محورهای مختصات وجود ندارد. با این حال، تقاطع این خط تصویر با خط افق این تصویر را در نظر بگیرید. خط افق هر تصویر به صورت تقاطع صفحه تصویر با صفحه ای از مرکز عدسی موازی با کف تعریف می شود. همانطور که در نمای جانبی شکل نشان داده شده است. 10.5 معادله خط افق (در مختصات تصویر) شکل دارد بدیهی است که مختصات X نقطه تلاقی خط تصویر (30) با خط افق با معادل سازی عبارت (30) با مقدار - تعیین می شود. حل معادله به دست آمده

با توجه به مختصات نقطه تقاطع با افق، متوجه می شویم که

این نتیجه را می توان با جایگزین کردن عبارت (29) در معادله اول و عبور از حد به عنوان x به سمت بی نهایت بدست آورد. بنابراین، نقطه تلاقی با افق را کاملاً شایسته، نقطه ناپدید شدن افقی یا نقطه ناپدید شدن با افق تصویر یک خط معین می نامند. این حدی است که نقطه تصویر به سمت آن میل می کند در حالی که نقطه جسم به سمت بی نهایت در امتداد یک خط مستقیم حرکت می کند.

برنج. 10.5. برای محاسبه خط افق.

در مورد بیان می توان چند نکته جالب را بیان کرد (31). ابتدا توجه داشته باشید که نقطه ناپدید شدن به ارتفاع دوربین بالای صفحه حاوی خط جسم بستگی ندارد. ثانیاً، نقطه ناپدید شدن به پارامتر انتقال b در معادله خط شی بستگی ندارد. بنابراین، ما می‌توانیم این نتیجه مهم را بگیریم که هر دو خط موازی با صفحه کف، نقطه ناپدید شدن یکسانی دارند، اگر و فقط اگر موازی یکدیگر باشند. در نهایت، فرض کنید دو خط جسم متعامد داریم که روی یک صفحه موازی با کف قرار دارند. شیب آنها باشد و نقاط ناپدید آنها با افق دارای مختصاتی باشد. و از آنجایی که این خطوط متعامد هستند، . بنابراین مستقیماً از فرمول (31) بدست می آوریم

دو نقطه ناپدید گاهی اوقات نقاط ناپدید مزدوج نامیده می شوند. از آنجایی که حاصلضرب آنها منفی است، همیشه در امتداد قرار دارند. طرف های مختلفاز خط مرکزی تصویر، همانطور که در شکل نشان داده شده است. 10.4. نقاط ناپدید مزدوج مثالی از چگونگی تبدیل یک محدودیت شی معین (یعنی متعامد) به یک محدودیت تصویر ساده است.

درود به همه خوانندگان. گهگاه استادان با این مشکل مواجه می شوند که چگونه با استفاده از HTML یا با یک خط افقی یا عمودی ایجاد کنند با استفاده از CSS. این چیزی است که من امروز در مورد آن به شما می گویم.

خطوط در CSS

راه های مختلفی برای ایجاد خطوط وجود دارد. یکی از این راه ها استفاده از CSS است. به طور دقیق تر، با کمک مرز. بیایید به یک مثال نگاه کنیم.

و این هم از نتیجه.

خط افقی و عمودی با css.

خطوط در CSS را می توان با استفاده از عملگر Border ترسیم کرد. اگر فقط یک مستطیل با عرض حاشیه ثابت می خواهید، می توانید به سادگی از این عملگر استفاده کنید و به آن مقدار بدهید. برای مثال حاشیه: 5px solid #000000; به این معنی است که حاشیه های جعبه به رنگ سیاه 5 پیکسل عرض دارند.

با این حال، اگر نیاز دارید که نه همه مرزها، بلکه فقط برخی از آنها را تعیین کنید، باید مشخص کنید که دقیقاً کدام مرزها مورد نیاز است و هر یک از آنها چه ارزشی خواهند داشت. این اپراتورها هستند:

• border-top - مقدار حاشیه بالایی را تعیین می کند
• border-bottom - مقدار حاشیه پایین را تعیین می کند
• border-left - مقدار حاشیه سمت چپ را تعیین می کند
• border-right - مقدار حاشیه سمت راست را تعیین می کند.

خط عمودی و افقی در HTML

همچنین می توانید خطوطی را در خود HTML ایجاد کنید. برای این کار می توانید از تگ hr استفاده کنید.

در این صورت ترسیم خواهد شد خط افقی، یک پیکسل ارتفاع و عرض کامل.

اما این تگ، می توانید مقداری را تنظیم کنید.

• عرض- مقدار عرض خط را تنظیم می کند.
• رنگ- رنگ خط را تنظیم می کند.
• تراز کردن- تراز چپ، مرکز، راست را تنظیم می کند
• اندازه- مقدار ضخامت خط را بر حسب پیکسل تنظیم می کند.

با استفاده از تگ hr می توانید یک خط عمودی نیز تعیین کنید. اما در این صورت باید دوباره به سبک ها متوسل شوید.

در این حالت یک خط عمودی به ارتفاع صد پیکسل، یک پیکسل ضخامت و پنج پیکسل تورفتگی رسم می شود.

نتیجه.

خوب، اکنون می دانید که چگونه می توانید یک خط عمودی و افقی تنظیم کنید. خطوط را می توان مانند سایت های معمولی، با با استفاده از HTMLو روی سایتی تنظیم کنید که از CMS استفاده می کند، به عنوان مثال وردپرس، اما در این مورد، باید به حالت HTML بروید.

خوب، اگر سوال دیگری دارید در نظرات بپرسید.

خطوط افقیتوسط یک تگ جفت نشده (تگ بستن مورد نیاز نیست) تشکیل می شوند

---

و می تواند عناصر طراحی کاملا منحصر به فرد باشد. تزئین متن با خطوط افقی HTML به صفحه منطق خاصی از ارائه متن می بخشد و همچنین به خواننده آسان تر می کند تا بلوک های اطلاعاتی را که باید به طور متوالی مطالعه شوند برجسته کند. برچسب بزنید

---

می تواند خطوط افقی با رنگ ها، ضخامت ها و طول های مختلف را تشکیل دهد. و انجام این کار بسیار ساده است، همانطور که در مثال های زیر نشان داده شده است.

به هر حال، شما همچنین می توانید از ویژگی های سبک بلوک استفاده کنید

و و