در حین ایجاد صفحات 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

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

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

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

یک وظیفه

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

راه حل

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

با برچسب

---

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

---

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

خط پیش فرض

---

به رنگ خاکستری و با افکت حجم نمایش داده می شود. این نوع خط همیشه با طراحی سایت مطابقت ندارد، بنابراین تمایل توسعه دهندگان برای تغییر رنگ و سایر پارامترهای خط از طریق سبک ها قابل درک است. با این حال، مرورگرها رویکردهای مبهم برای این موضوع دارند، به همین دلیل شما مجبور خواهید بود از چندین ویژگی سبک به طور همزمان استفاده کنید. به ویژه، نسخه های قدیمی تر مرورگر اینترنت 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) به دست آورد، که در آن فقط حاشیه بالا یا پایین رنگی است (مشاهده خواهد شد) و سه طرف دیگر جدول دارای حاشیه های رنگ نشده هستند (آنها نامرئی خواهند بود). .

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

• درج (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 را فشار دهید. در نتیجه یک خط افقی ضخیم را خواهیم دید.

برای تاکید بر برخی از مهمترین عناصر سایت، استفاده از انواع و اقلام ارائه شده برای این امر ضرری ندارد. سبک های CSSو خواص البته شما نمی توانید خیلی متن را به خود زحمت دهید و آن را برجسته کنید، مثلاً با حروف برجسته یا ایتالیک تغییر دهید. پس زمینهیا یک قاب دور متن بسازید. اما همیشه یکی از روش های ارائه شده مناسب نیست. فرض کنید متنی دارید که به دلیل ویژگی های بار معنایی آن باید جدا شود. اینجاست که خصوصیات HTML و CSS وارد می شوند.

نحوه ایجاد یک خط در متن با استفاده از CSS

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

- بالای مرز- یک خط افقی واقع در بالای متن؛

- مرز راست- یک خط عمودی واقع در سمت راست متن؛

- لبه پایین- یک خط افقی که در زیر متن قرار دارد.

- لبه چپخط عمودی سمت چپ است.

نحوه ایجاد خط در html

استفاده كردن ویژگی های cssشما می توانید تمام مقادیر لازم را با ویرایش کد HTML تنظیم کنید. برای این کار به قسمت اداری سایت بروید. یکی از مطالب منتشر شده را انتخاب کنید، سوئیچ کنید ویرایشگر متنبه حالت ویرایش کد HTML بروید و ویژگی های CSS را اضافه کنید. یک نمونه در زیر قابل مشاهده است.

توضیح مختصر دستورات

- عرض- طول خط؛

- جامد- خط توپر؛

- خط چین- خط نقطه چین.

برای درک عمیق تر سبک ها، خواندن این مطلب را توصیه می کنم.

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

این روش مزیت های متعددی دارد:

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

سهولت انجام تمام تغییرات لازم به طور مستقیم در کد HTML. این کار را برای سازندگان سایت بی تجربه بسیار ساده می کند.

نحوه ایجاد یک خط افقی مستقیم با تگ HTML

---

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

ویژگی ها را تگ کنید

---

- عرض- مسئول طول خط است. می توان آن را هم به صورت درصد و هم به صورت پیکسل مشخص کرد.

- اندازه- ضخامت خط بر حسب پیکسل مشخص شده است.

- رنگ- رنگ خط را مشخص می کند.

- تراز کردن- ویژگی مسئول تراز خط. به نوبه خود، تیم برای او اعمال می شود.