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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

بنابراین، برچسب یک خط سفید استاندارد را می توان به دو روش نوشت: hr color=”#FFFFFF” یا hr color=”white”

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

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

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

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

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

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

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

روش های اساسی برای ردیف کردن بلوک ها در 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 (مثلاً بوت استرپ) استفاده کنید، پس همه چیز بسیار ساده تر است. تمام کدهای CSS که مسئول چیدمان عناصر هستند قبلاً نوشته شده است و تنها کاری که باید انجام دهید این است که کلاس های صحیح را تنظیم کنید. برای انجام این کار، فقط سیستم گرید را یاد بگیرید، و می توانید بدون مشکل زیاد قالب های واکنش گرا چند ستونی بسازید. حداقل خیلی راحت تر از نوشتن css از ابتدا خواهد بود.

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

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

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

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

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

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

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

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

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

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

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

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

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

شرح مختصری از دستورات

- عرض- طول خط؛

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

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

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

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

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

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

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

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

---

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

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

---

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

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

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

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

وظیفه

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

راه حل

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

استفاده از تگ

---

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

---

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

خط پیش فرض

---

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

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

HTML5 CSS 2.1 IE Cr Op Sa Fx

---

رشته متن

---

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

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