جداکننده خطوط افقی Html. خطوط افقی نمونه هایی از خطوط افقی در HTML

یک وظیفه

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

راه حل

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

با برچسب

---

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

---

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

خط پیش فرض

---

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

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

HTML5 CSS 2.1 IE Cr Op Sa Fx

---

رشته متن

---

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

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

درود بر همه خوانندگان گهگاه استادان با این مشکل مواجه می شوند که چگونه با استفاده از 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 بروید.

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

به نظر می رسد، چرا ممکن است چهار روش مورد نیاز باشد؟ از این گذشته ، تقریباً هر شخصی از یک روشی استفاده می کند که به آن عادت کرده است. مثلا Shift و کلید داش رو چند بار فشار دادم و اینطوری یه خط افقی شد.

اما اگر این منجر به یک خط نقطه چین شود، اما شما به یک خط ثابت نیاز دارید، چه؟
- به احتمال زیاد کلید Shift روی کیبورد معیوب است. در اینجا چند راه دیگر برای کمک وجود دارد.

3.
4.
5.

شاید آشناترین راه برای ایجاد یک خط در Word استفاده از چند کلید روی صفحه کلید باشد.

I نازک، ضخیم، دوتایی، خط نقطه چین با استفاده از صفحه کلید

در زیر نقاشی یک صفحه کلید با طرح انگلیسی، اما بدون طرح روسی است، اما این مهم نیست، زیرا ما فقط به سه کلید علاقه مندیم: Shift، dash و Enter.

برنج. 1. سه کلید روی صفحه کلید: Shift، dash و Enter برای یک خط افقی ممتد در Word

با این سه کلید می توانید یک خط افقی ممتد در Word رسم کنید: خط چین یا توپر، نازک یا ضخیم، بلند یا کوتاه.

1) با چند بار فشار دادن کلید "-" (خط تیره). ویرایشگر وردما یک خط نقطه چین با هر طولی دریافت می کنیم.

انجام دادن لاغر خط طولانیعرض کامل صفحه:

• ما کلید "داش" را روی صفحه کلید پیدا می کنیم (در سمت راست کلید "صفر"، در کادر سبز رنگ در شکل 1).
• از یک خط جدید (!) در Word، این کلید را چندین بار فشار دهید: -
• و سپس کلید "Enter" () را فشار دهید. چندین خط تیره چاپ شده ناگهان به یک خط نازک افقی پیوسته در سراسر عرض صفحه تبدیل می شوند.

2) هنگامی که Shift و "-" (خط تیره) را همزمان فشار دهید، خط تیره چاپ نمی شود، بلکه یک زیرخط _________ چاپ می شود. بنابراین، می توانید یک خط پیوسته با طول دلخواه در هر نقطه از سند ایجاد کنید.

برنج. 2. خط افقی نازک و ضخیم در Word

حالا ما چاپ می کنیم ضخیمخط افقی در تمام عرض صفحه:

• دوباره همان کلید خط تیره و همچنین کلید Shift (چپ یا راست، به دلخواه) را پیدا می کنیم. Shift را فشار دهید، نگه دارید و رها نکنید.
• و حالا از یک خط جدید (!) چندین بار (مثلاً 3-4 بار) روی خط تیره کلیک کنید (در حالی که Shift را رها نمی کنید): ___. Shift را رها کنید.
• حالا کلید Enter را فشار دهید. یک خط ثابت افقی ضخیم خواهید دید.

بیایید برخی از نتایج را در قالب یک جدول خلاصه کنیم:

(برای بزرگنمایی کلیک کنید) خطوط در Word با استفاده از صفحه کلید

­­­­­­­­­­­­­­­­­­­­­

خط دوم در ورد با استفاده از جدول

یک خط افقی را می توان با استفاده از یک جدول یک سلولی (1x1) به دست آورد، که در آن فقط حاشیه بالا یا پایین رنگی است (مشاهده خواهد شد) و سه طرف دیگر جدول دارای حاشیه های رنگ نشده هستند (آنها نامرئی خواهند بود). .

مکان نما را در جایی که خط باید باشد قرار می دهیم. در منوی بالای Word، روی:

• درج (1 در شکل 3)،
• جدول (2 در شکل 3)،
• یک سلول (3 در شکل 3).

برنج. 3. نحوه درج جدول 1x1 در Word (از یک سلول)

نتیجه جدولی از یک سلول بزرگ (1x1) است:

در جدول 1x1 در سه طرف باقی می ماند تا مرزها حذف شوند. برای این

• به تب "Home" بروید (1 در شکل 4)،
• در کنار "Font"، "Paragraph" و حاشیه ها را پیدا می کنیم (2 در شکل 4)،
• با کلیک بر روی "بدون حاشیه" (3 در شکل 4)، تمام حاشیه ها را حذف کنید.
• "حاشیه بالا" یا "حاشیه پایین" (4 در شکل 4) را انتخاب کنید.

برنج. 4. نحوه حذف انتخاب حاشیه در جدول Word (نامرئی کردن حاشیه ها)

من این را به وضوح در ویدیو (در انتهای مقاله) نشان می دهم.

به هر حال، در شکل. 3 نشان می دهد که راه آسان تری وجود دارد. می توانید مکان نما را در ابتدای خط در Word قرار دهید و روی "Horizontal Line" کلیک کنید (5 در شکل 4):

خط III در ورد با طراحی

درج (1 در شکل 5) - Shapes (2 در شکل 5) راه دیگری برای به دست آوردن یک خط افقی در Word است.

برای اینکه خط را کاملا افقی کنید، کلید Shift را نگه دارید و همزمان خط را بکشید.

برنج. 5. نحوه رسم خط در Word

خط IV در Word با استفاده از صفحه کلید روی صفحه نمایش

برای یافتن صفحه‌کلید روی صفحه، در جستجو عبارت «صفحه‌کلید روی صفحه»، جزئیات بیشتر برای ویندوز 7 و برای ویندوز 8 را وارد می‌کنیم.

برای ویندوز 10، می‌توانید صفحه‌کلید روی صفحه را با تایپ کردن «صفحه‌کلید روی صفحه» در نوار جستجو پیدا کنید.

برنج. 6. صفحه کلید روی صفحه

ما یک خط افقی را مانند نسخه اول با یک صفحه کلید معمولی ایجاد می کنیم. در کیبورد روی صفحهشما به سه دکمه نیاز دارید: dash، shift و enter.

1 خط تیره و Enter

از یک خط جدید در Word، چندین بار روی خط تیره کلیک کنید (1 در شکل 6) و Enter را فشار دهید. یک خط افقی نازک دریافت خواهید کرد.

2 Shift، dash و Enter

از یک خط جدید در Word، ابتدا روی Shift (2 در شکل 6) و سپس روی Dash (1 در شکل 6) کلیک کنید. زیر خط بگیرید بنابراین 2 بار دیگر تکرار کنید و سپس Enter را فشار دهید. در نتیجه یک خط افقی ضخیم را خواهیم دید.

در حین ایجاد صفحات 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 آورده شده است.