خط افقی به کل صفحه نمایش CSS. چگونه با بلوک CSS در خط؟ خط III در کلمه با نقاشی

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

خطوط در CSS

چندین راه برای ایجاد خطوط وجود دارد. یکی از این راههاست با استفاده از CSS. یا نه با مرز بیایید مثال را در نظر بگیریم

و این چیزی است که اتفاق می افتد.

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

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

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

• مرزی بالا - ارزش مرز بالا را تعیین می کند
• مرزی پایین - ارزش مرز پایین را تعیین می کند
• مرزی سمت چپ - ارزش مرز چپ را تعیین می کند
• مرزی راست - ارزش مرز راست را تعیین می کند.

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

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

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

اما این برچسب، شما می توانید برخی از ارزش ها را بپرسید.

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

با استفاده از برچسب HR، می توانید خط عمودی را مشخص کنید. اما در این مورد، شما مجبور خواهید شد دوباره به سبک ها بروید.

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

نتیجه.

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

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

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

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

راه های اصلی ساخت بلوک های CSS در یک ردیف

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

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

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

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

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

عنوان 1

عنوان 2

عنوان 3

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

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

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

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

ما به رشته ها تبدیل می شویم و بلافاصله باعث افزودن دندانهای داخلی می شود. برای این انتخاب H3 شما نیاز به اضافه کردن خواص:

صفحه نمایش: inline؛ Padding: 30px؛

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

در HTML، کد بلوک های دلخواه را در یک خط بدون فضایی قرار دهید

یک پیوند خارجی منفی را در پیکسل سمت راست قرار دهید. این خیلی فاصله دارد.

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

بلوک های خطی با استفاده از چارچوب

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

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

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

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

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

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

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

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

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

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

- پایین مرز - خط افقی، واقع در زیر متن؛

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

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

استفاده كردن خواص CSS شما می توانید تمام مقادیر لازم را ویرایش کد HTML را ثبت کنید. برای انجام این کار، به بخش اداری سایت بروید. یکی از مواد منتشر شده را انتخاب کنید، سوئیچ کنید ویرایشگر متن در حالت ویرایش کد HTML و خواص CSS را ایجاد کنید. نمونه را می توان در زیر مورد توجه قرار داد.

رمزگشایی فرمان مختصر

- عرض - طول خط؛

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

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

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

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

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

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

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

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

---

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

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

---

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

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

- رنگ - رنگ خط را تعیین می کند.

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

خطوط افقی فرم لازم نیست (بدون برچسب بسته بندی مورد نیاز) برچسب

به هر حال، شما همچنین می توانید از خواص سبک های بلوک استفاده کنید.