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

خط افقی چیست و چرا به آن نیاز است

خط افقی در html یک عنصر طراحی صفحه است که تعدادی عملکرد را انجام می دهد:

1. تزئینی. به افزایش جذابیت صفحه کمک می کند.
2. تقسيم كردن. به جداسازی مؤثر اطلاعات با معانی مختلف کمک می کند.
3. تاکید یا تاکید. توجه بازدیدکنندگان صفحه را به اطلاعات ضروری و مهم جلب می کند.

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

• طول؛
• عرض؛
• ویژگی های رنگ؛
• تراز در یک یا آن لبه

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

ایجاد یک خط افقی در HTML

می توانید با استفاده از یک تگ ساده - hr در براکت های مثلثی یک خط تنظیم کنید. مختصر "قاعده افقی" است و پارامترهای خارجی کلاسیک را تنظیم می کند. تفاوت آن با بسیاری دیگر در این است که نیازی به برچسب بسته شدن ندارد و می تواند به طور مستقل وجود داشته باشد. می توانید ویژگی های خارجی یک عنصر را با استفاده از مقادیر اضافی در تگ تغییر دهید:

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

به نظر می رسد این است. به عنوان مثال، اگر به طول 100 پیکسل نیاز داشته باشیم، برچسب زیر را تنظیم می کنیم: hr width = "100"

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

تگ تمام شده در این مورد به این صورت خواهد بود. به عنوان مثال، اگر بخواهیم تراز مرکزی را برای خط افقیبا طول 150 پیکسل، تگ تمام شده به این صورت خواهد بود: hr align="center" width="150".

توجه داشته باشید که "align"، متریک برای تراز، بر روی 1 تنظیم شده است، حتی اگر مشخصه به متریک عرض وابسته باشد.

1. عرض. به صورت اختیاری، می‌توانید یک عرض را نیز تعیین کنید و یک زیرخط برجسته یا نازک ایجاد کنید. این معیار به هیچ چیز بستگی ندارد و می تواند به عنوان یک معیار مستقل بدون تعیین طول یا تراز استفاده شود. برای این کار از ویژگی size روی تگ و مقدار عددی برابر با عرض مورد نظر در پیکسل استفاده می کنیم. عدد در گیومه ها بعد از ویژگی اندازه و نماد "=" مشخص می شود.

بنابراین، اگر بخواهیم یک خط با عرض 15 پیکسل ایجاد کنیم، باید تگ زیر را ایجاد کنیم: hr size="15".

1. رنگ. همچنین به عنوان یک شاخص مستقل تنظیم شده است. برای تغییر آن از ویژگی color در ترکیب با نام رنگ به صورت کد یا on استفاده کنید زبان انگلیسی. رنگ در علامت نقل قول بعد از علامت "=" مشخص می شود.

بنابراین، تگ خط سفید استاندارد را می توان به دو صورت نوشت: hr color="#FFFFFF" یا hr color="white"

رنگ مشکی را می توان با استفاده از کد #000000 ایجاد کرد.

1. کنار بگذارید سایه. اگر به عنصری نیاز دارید که حاوی سایه نباشد، باید از ویژگی noshade در تگ استفاده کنید. می توان آن را به تنهایی یا در ترکیب با عناصر دیگر استفاده کرد. تگ خط استانداردی که از آن استفاده می کند به این صورت خواهد بود: hr noshade

یک خط افقی با ویدئو ایجاد کنید

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

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

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

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

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

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

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

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

خط افقی با css.

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

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

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

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

---

.

خط افقی با تگ html

---

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

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

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

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

یک وظیفه

یک خط افقی روی صفحه ایجاد کنید.

راه حل

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

با برچسب

---

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

---

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

خط پیش فرض

---

به رنگ خاکستری و با افکت حجم نمایش داده می شود. این نوع خط همیشه با طراحی سایت مطابقت ندارد، بنابراین تمایل توسعه دهندگان برای تغییر رنگ و سایر پارامترهای خط از طریق سبک ها قابل درک است. با این حال، مرورگرها رویکردهای مبهم برای این موضوع دارند، به همین دلیل شما مجبور خواهید بود از چندین ویژگی سبک به طور همزمان استفاده کنید. به ویژه، نسخه های قدیمی مرورگر اینترنت اکسپلورراز ویژگی color برای رنگ خط استفاده می شود و بقیه مرورگرها از ویژگی background-color استفاده می کنند. اما این همه ماجرا نیست، حتما ضخامت خط (ویژگی ارتفاع) را غیر از صفر مشخص کنید و با قرار دادن خاصیت border روی none، فریم اطراف خط را بردارید. با کنار هم قرار دادن تمام ویژگی ها برای انتخابگر hr، یک راه حل جهانی برای مرورگرهای محبوب دریافت می کنیم (مثال 1).

مثال 1. خط افقی

HTML5 CSS 2.1 IE Cr Op Sa Fx

---

رشته متن

---

نتیجه این مثالدر شکل نشان داده شده است. یکی

برنج. 1. خط افقی رنگی

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

---

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

---

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

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

و و