نحوه اضافه کردن خط افقی در html خطوط افقی و عمودی در HTML

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

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

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

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

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

- حاشیه پایین- یک خط افقی زیر متن ؛

- مرز چپ- خط عمودی به سمت چپ

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

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



چگونه می توان خط نقطه ای یا مستقیم ایجاد کرد؟



با تجویز این خواص ، می توانید بر اهمیت مطالب ، پاراگراف یا عنوان ارائه شده تأکید کنید؟


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

- عرض- طول خط؛

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

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

برای آشنایی بیشتر با سبک ها ، خواندن این یکی را توصیه می کنم.

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

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

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

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

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

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

برچسب ویژگی ها

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

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

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

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

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

چگونه خط افقی بکشم؟

یک برچسب ویژه برای ترسیم خطوط افقی در HTML وجود دارد


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

نمونه ای از رسم خطوط افقی در HTML

خطوط افقی بکشید


پاراگراف

پاراگراف


پاراگراف

نتیجه در مرورگر

پاراگراف

پاراگراف

پاراگراف

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

چگونه می توان رنگ ، ضخامت و عرض خطوط افقی را تغییر داد؟

در نسخه های قدیمی HTML ، برچسب


ویژگی های خاصی وجود داشت که با آنها می توان رنگ ، ضخامت و عرض خطوط افقی را تغییر داد. اینها به ترتیب رنگ ، اندازه و عرض هستند. اما در نسخه های جدیدتر آنها به نفع Cascading Style Sheets (CSS) کنار گذاشته شده اند ، بنابراین ، شما حدس زده اید ، ما دوباره از ویژگی سبک مورد علاقه خود استفاده خواهیم کرد. نحو کلی عبارت است از:


style = "background: color">- رنگ خط (یا پس زمینه آن).


style = "height: size">- ضخامت خط


style = "width: size">- عرض خط


سبک = "پس زمینه: رنگ ؛ ارتفاع: اندازه ؛ عرض: اندازه"> - اما می توانید همه پارامترها را به طور همزمان مشخص کنید ، فقط نقطه ویرگول (؛) را فراموش نکنید.

یک رنگ را می توان با نام آن به انگلیسی یا با کد HEX رنگ ، قبل از یک هش (#) مشخص کرد. خوب ، شما قبلاً در مورد این موضوع از درس می دانید تغییر رنگ متن و پس زمینه.

اما ما در مورد تغییر اندازه با جزئیات بیشتری صحبت خواهیم کرد. یادت هست از آموزش تغییر فونت، حدود ده واحد در CSS وجود دارد ، اما عرض خطفقط در پیکسل (px) و درصد (٪) و ضخامتبه طور کلی فقط در پیکسل اگر واحدهای دیگر را عرضه می کنید ، این خطا نخواهد بود ، اما مرورگرها به سادگی آنها را نادیده می گیرند.

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

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


... در این مورد ، اندازه والدین 100 در نظر گرفته می شود. به عنوان مثال ، اگر تگ را قرار دهیم
style = "width: 50٪">عنصر داخلی
، مهم نیست که چگونه پنجره مرورگر یا وضوح مانیتور را تغییر دهیم - عرض خط همیشه نصف عرض بلوک خواهد بود
.

نمونه ای از تغییر رنگ ، ضخامت و عرض خطوط افقی.

رنگ ، ضخامت و عرض خطوط افقی را تغییر دهید.





نتیجه در مرورگر

تغییر موقعیت خطوط افقی

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


ویژگی را با مقادیر زیر تراز کنید:

  • مرکز- خط به مرکز تراز می شود (مقدار پیش فرض).
  • ترک کرد- لبه سمت چپ را فشار دهید.
  • درست- به لبه سمت راست فشار داده شده است.

نمونه ای از تراز خطوط افقی.

موقعیت خطوط افقی را تغییر دهید.




نتیجه در مرورگر

چگونه می توانم مرز اطراف خط را حذف کنم؟

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

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

برای حذف مرز اطراف خط ، که اغلب فقط ظاهر را خراب می کند ، ویژگی style را مجدداً اعمال می کنیم. و چنین نوشته شده است:


مشق شب.

  1. ایجاد سرفصل مقاله ، بخش و زیر بخش. همه آنها را مرکز قرار دهید.
  2. برای هدرها کل صفحه را روی Arial و Courier تنظیم کنید.
  3. اجازه دهید اندازه فونت برای کل صفحه 85٪ اندازه مرورگر پیش فرض باشد. و عنوانها به ترتیب 145 ، 125 و 110 درصد اندازه فونت را در صفحه دارند.
  4. یک پاراگراف در زیر عنوان اول ، یک نقل قول طولانی در زیر عنوان دوم و یک شعر در زیر سوم بنویسید. و بگذارید شعر روی صفحه متمرکز شود.
  5. در نقل قول خود سه کلمه را به صورت برجسته برجسته کنید.
  6. در زیر عنوان مقاله ، یک خط افقی قرمز سه پیکسلی در عرض کامل صفحه بکشید.
  7. در بالا و پایین شعر ، یک خط پیکسل سیاه و سفید بکشید. بگذارید عرض سطر بالا تقریباً برابر با عرض آیه و خط پایین آن نصف باشد.
  8. فریم های غیر ضروری را از خطوط حذف کنید.

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

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

راههای اصلی تراز کردن بلاک ها در یک ردیف در css

ما هیچ چیز را پیچیده نخواهیم کرد ، 3 راه اصلی وجود دارد:

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

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

عناصر شناور با استفاده از ویژگی float.

بگذارید روی این گزینه ها متمرکز شویم. Flexbox ، نمایش جدول و سایر نکات در نظر گرفته نمی شود. بنابراین فرض کنید ما 3 عنوان فرعی داریم.

عنوان 1

عنوان 2

عنوان 3

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

h3 (پس زمینه: #EEDDCD ؛)

h3 (

پس زمینه: #EEDDCD؛

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

در آنجا آنها مانند بلوک رفتار می کنند. هر کدام در خط خود قرار دارند ، بین آنها تورفتگی وجود دارد. در صورت تمایل ، می توانید هر تورفتگی داخلی را تنظیم کرده و به طور کلی هر کاری را انجام دهید.

تبدیل به خطوط و بلافاصله پد را اضافه کنید. برای انجام این کار ، ویژگیهای زیر را به انتخابگر h3 اضافه کنید:

نمایش: درون خطی ؛ بالشتک: 30 پیکسل ؛

این تکنیک 2 مشکل اساسی دارد. اولین حداقل پد است. این به دلیل این واقعیت ایجاد می شود که بین بلوک های کد یک فاصله وجود دارد که این تورفتگی را ایجاد می کند. اگر این مشکل نیاز به راه حل دارد ، 2 گزینه اصلی وجود دارد:

در html ، کد بلوک های لازم را در یک خط بدون فاصله مرتب کنید

حاشیه منفی را در سمت راست 4 پیکسل قرار دهید. این است که یک فضا چقدر طول می کشد.

مشکل دوم این است که مشکلات نمایش با ارتفاع مختلف عناصر ممکن است رخ دهد. به طور کلی بلوک های شناور بهترین گزینه هستند. به جای display: inline-block ، این را می نویسیم:

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

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

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

به عنوان مثال ، هنگامی که شما باید 4 ستون در صفحه های بزرگ ، 3 ستون در وسط متوسط ​​و 2 ستون در تلفن های همراه داشته باشید. با استفاده از چارچوب هایی مانند Bootstrap یا بهتر است بگوییم با شبکه آن ، چند دقیقه طول می کشد تا چنین چیزی را پیاده سازی کنید. به

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

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

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

خط افقی چیست و برای چیست؟

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

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

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

  • طول
  • عرض ؛
  • ویژگی های رنگ ؛
  • همسویی با یک یا دو لبه دیگر

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

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

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

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

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

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

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

توجه داشته باشید که "تراز" ، اندازه گیری برای تراز ، در موقعیت 1 قرار می گیرد ، حتی اگر ویژگی به عرض اندازه طول بستگی دارد.

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

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

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

بنابراین ، برچسب یک خط سفید استاندارد را می توان به دو صورت نوشت: hr color = "#FFFFF" یا hr color = "سفید"

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

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

با استفاده از ویدئو یک خط افقی ایجاد کنید

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

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

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

خطوط در CSS

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

و در اینجا نتیجه آن چه می شود.

خط افقی و عمودی با استفاده از css.

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

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

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

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

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

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

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

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

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

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

نتیجه.

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

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