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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

- عرض- طول خط؛

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

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

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

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

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

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

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

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

---

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

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

---

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

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

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

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

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

داخل تگ < div>div>یک بلوک نامرئی (کانتینر) ایجاد می شود که می توانیم با استفاده از CSS روی آن عمل کنیم. بدون CSS، این بلوک هیچ تاثیری بر چارچوب صفحه ندارد.