Barcha o'quvchilarga salom. Vaqti-vaqti bilan hunarmandlar HTML yoki CSS yordamida gorizontal yoki vertikal chiziqni qanday qilish kerakligi muammosiga duch kelishadi. Bugun men sizga bu haqda aytib beraman.

CSS-dagi chiziqlar

Chiziqlarni yaratishning bir necha yo'li mavjud. Bunday usullardan biri CSS-dan foydalanishdir. To'g'rirog'i, Border-dan foydalaning. Keling, bir misolni ko'rib chiqaylik.

Va natijada bu sodir bo'ladi.

CSS yordamida gorizontal va vertikal chiziq.

Chiziqlarni CSS-da Border operatori yordamida chizish mumkin. Agar sizga faqat belgilangan ramka kengligi bilan to'rtburchaklar kerak bo'lsa, unda siz shunchaki ushbu operatordan foydalanishingiz va unga qiymat berishingiz mumkin. Masalan chegara: 5px qattiq #000000; blok chegaralari qora rangdagi 5 pikselga teng kenglikka ega ekanligini bildiradi.

Biroq, agar siz barcha chegaralarni emas, balki faqat ba'zilarini belgilashingiz kerak bo'lsa, unda qaysi chegaralar kerakligini va ularning har biri qanday qiymatga ega bo'lishini belgilashingiz kerak. Bu operatorlar:

• border-top - yuqori chegara qiymatini o'rnatadi
• chegara-pastki - pastki chegara qiymatini o'rnatadi
• border-left - chap chegara qiymatini o'rnatadi
• border-right - o'ng chegara qiymatini o'rnatadi.

HTMLda vertikal va gorizontal chiziq

Siz HTMLning o'zida qatorlarni yaratishingiz mumkin. Buning uchun siz hr tegidan foydalanishingiz mumkin.

Bunday holda, gorizontal chiziq chiziladi, balandligi bir piksel va to'liq kenglik.

Ammo bu tegga ba'zi qiymatlar ham berilishi mumkin.

• Kengligi– chiziq kengligi qiymatini belgilaydi.
• Rang– chiziq rangini o‘rnatadi.
• Tegishlash– tekislashni chapga, markazga, o'ngga o'rnatadi
• Hajmi– chiziq qalinligi qiymatini piksellarda o‘rnatadi.

Hr tegidan foydalanib, siz vertikal chiziqni ham o'rnatishingiz mumkin. Ammo bu holda siz yana uslublarga murojaat qilishingiz kerak bo'ladi.

Bunday holda, yuz piksel balandlikda, bir piksel qalinlikda va besh piksel chuqurlikda vertikal chiziq chiziladi.

Xulosa.

Xo'sh, endi siz vertikal va gorizontal chiziqni qanday o'rnatishingiz mumkinligini bilasiz. Chiziqlar HTML-dan foydalangan holda oddiy saytlarda ham o'rnatilishi mumkin va ular CMS-dan foydalanadigan saytga o'rnatilishi mumkin, masalan, WordPress, lekin bu holda siz HTML rejimiga o'tishingiz kerak bo'ladi.

Xo'sh, agar sizda boshqa savollar bo'lsa, ularni sharhlarda so'rang.

HTML sahifasini yaratishda uslub muhim rol o'ynaydi. Ayniqsa, biz turli xil ramzlar va dekorativ dizayn haqida gapiradigan bo'lsak: bu kichik narsalar sizning sahifangizning "tilini" yanada qulay va tushunarli qilishga yordam beradi, shuningdek, uning idrokini va ko'rinishini sezilarli darajada o'zgartiradi. Dizayn uchun eng muhim elementlardan biri gorizontal chiziq bo'lib, keyin biz u bilan qanday ishlashni va html da gorizontal chiziqni qanday qilishni batafsilroq bilib olamiz.

Gorizontal chiziq nima va u nima uchun?

Htmldagi gorizontal chiziq bir qator funktsiyalarni bajaradigan sahifa dizayni elementidir:

1. Dekorativ. Sahifaga jozibadorlikni qo'shishga yordam beradi.
2. Bo'linish. Turli ma'nodagi ma'lumotlarni samarali ajratishga yordam beradi.
3. Ta'kidlash yoki ta'kidlash. Sahifa mehmonlarining e'tiborini kerakli va eng muhim ma'lumotlarga qaratadi.

Bu bir qator funktsiyalarni amalga oshirishning eng qulay usuli deb hisoblangan gorizontal chiziq. Uni yaratish juda oddiy va tashqi tomondan u juda foydali ko'rinadi. Html kodiga oddiy o'zgartirishlar kiritish orqali siz quyidagilarni sozlashingiz mumkin:

• uzunligi;
• kengligi;
• rang xususiyatlari;
• bir yoki boshqa chekka bo'ylab tekislash.

Shuni ta'kidlash kerakki, gorizontal chiziq blok elementlariga ishora qiladi. Bu shuni anglatadiki, u sahifada yangi qatorni egallaydi va undan keyingi matn pastga tushadi.

HTML da gorizontal chiziq yaratish

Siz oddiy teg yordamida chiziqni o'rnatishingiz mumkin - hr uchburchak qavslar ichida. Bu "Gorizontal Rule" ning qisqartmasi va klassik tashqi parametrlarni o'rnatadi. U boshqa ko'plablardan farq qiladi, chunki u yopish tegiga muhtoj emas va mustaqil ravishda mavjud bo'la oladi. Tegdagi qo'shimcha qiymatlar yordamida elementning tashqi xususiyatlarini o'zgartirishingiz mumkin:

1. Uzunlik. Agar chiziq uzunligi butun sahifa bo'ylab cho'zilishini xohlamasangiz, kerakli o'lchamni piksel yoki foizlarda belgilashingiz mumkin. Bu tegdagi qo'shimcha "kenglik" so'zi va tirnoq ichidagi "=" belgisidan keyin ko'rsatilgan raqamli uzunlik yordamida amalga oshiriladi.

Bu shunday ko'rinadi. Misol uchun, agar bizga 100 piksel uzunlik kerak bo'lsa, biz quyidagi tegni o'rnatamiz: hr width = "100"

1. Hizalama. Chap yoki o'ng qirralarga, shuningdek markazga tekislash mumkin. Bu xususiyat faqat siz allaqachon kenglik parametrini belgilagan bo'lsangiz amal qiladi, chunki butun sahifani qamrab oladigan chiziqni tekislash mumkin emas. Hizalama uchun biz "align" tegida qo'shimcha atributni o'rnatamiz va unga yo'nalish qo'shamiz: markaz - markaziy uchun, chap - chap va o'ng uchun - o'ngga tekislash uchun.

Bu holda tayyor teg shunday ko'rinadi. Masalan, 150 piksel uzunlikdagi gorizontal chiziq uchun markazni tekislashni o'rnatishimiz kerak bo'lsa, u holda tayyor teg quyidagicha ko'rinadi: hr align=”center” width=”150″.

E'tibor bering, atribut kenglik ko'rsatkichiga bog'liq bo'lsa ham, "align", tekislash ko'rsatkichi 1-o'rinda joylashgan.

1. Kengligi. Shuningdek, siz qalin yoki ingichka pastki chiziq yaratib, kenglikni belgilashni tanlashingiz mumkin. Ushbu mezon hech narsaga bog'liq emas va uzunlik yoki tekislashni ko'rsatmasdan mustaqil mezon sifatida ishlatilishi mumkin. Buning uchun biz tegdagi o'lcham atributidan va piksellardagi kerakli kenglikka teng raqamli qiymatdan foydalanamiz. Raqam o'lcham atributidan va "=" belgisidan keyin qo'shtirnoq ichida ko'rsatilgan.

Shunday qilib, agar biz 15 piksel kengligida chiziq yaratishimiz kerak bo'lsa, biz quyidagi tegni yaratishimiz kerak: hr size=”15″.

1. Rang. Bundan tashqari, mustaqil ko'rsatkich sifatida ko'rsatilgan. Uni o'zgartirish uchun rang atributidan rang nomi bilan birgalikda kod shaklida yoki ingliz tilida foydalaning. Rang "=" belgisidan keyin qo'shtirnoq ichida ko'rsatilgan.

Shunday qilib, standart oq chiziq uchun teg ikki shaklda yozilishi mumkin: hr color=”#FFFFFF” yoki hr color=”white”

Qora rang #000000 kodi yordamida yaratilishi mumkin.

1. Qo'ying soya. Agar sizga soyasi bo'lmagan element kerak bo'lsa, tegda noshade atributidan foydalaning. U alohida yoki boshqa elementlar bilan birgalikda ishlatilishi mumkin. Undan foydalanadigan standart chiziq uchun teg quyidagicha ko'rinadi: hr noshade

Video yordamida gorizontal chiziq yaratish

Va agar siz ko'proq vizual formatda ma'lumot olishni istasangiz, gorizontal chiziq bilan ishlash imkoniyatlari batafsil tavsiflangan quyidagi videoga qarang.

Gorizontal chiziqning kerakli o'lchamlarini aniqlaganingizdan so'ng, siz veb-sayt sahifalarini ma'lumotlar tuzilgan va vizual ravishda malakali bo'ladigan tarzda loyihalashingiz mumkin. Bu tashrif buyuruvchilarga taqdim etilgan ma'lumotlarni osonroq qabul qilishlariga yordam beradi va saytingizni boshqalardan ajratib turadi.

Muallifdan: Sizni tabriklayman. Bir qatorda veb-sahifada bir nechta bloklarni ko'rsatish zarurati - bu maket dizaynerlari duch keladigan juda keng tarqalgan vazifadir. Bu deyarli har bir shablonni joylashtirish paytida sodir bo'ladi, shuning uchun har qanday holatda ham barchamiz bloklarning xatti-harakatlarini o'zgartirishning asosiy usullarini bilishimiz va qo'llashimiz kerak.

Eng keng tarqalgan texnikani ko'rib chiqishdan oldin, men bir oz nazariyani eslashni istardim. Web-sahifa elementlari blokli va inline elementlarga bo'linadi. Va ularning orasidagi farq juda oddiy - kichik harflarni bir qatorga qo'yish mumkin, lekin blokirovka qilish mumkin emas. Albatta, farqlar shu bilan tugamaydi, lekin bu asosiy farq. Bloklarning yuqori va pastki qismida allaqachon to'ldirilgan bo'lishi mumkin (kichik harflar mavjud emas) va ularga ko'proq xususiyatlar qo'llanilishi mumkin.

CSS-da bloklarni joylashtirishning asosiy usullari

Biz hech narsani murakkablashtirmaymiz, uchta asosiy usul mavjud:

Bloklarni inline elementlarga aylantiring. Bunday holda, blok xususiyatlari yo'qoladi, shuning uchun bu variant deyarli ishlatilmaydi

Kerakli elementlarni blok-liniya qiling. Bu element o'z xususiyatlarini saqlab qoladigan maxsus tur, lekin ayni paytda boshqa bloklarni yaqin joyda joylashtirishga imkon beradi.

Float xususiyatidan foydalanib elementlarni suzuvchi holga keltiring.

Keling, ushbu variantlarga e'tibor qarataylik. Biz Flexbox, stol displeyi va boshqa jihatlarni ko'rib chiqmaymiz. Deylik, bizda 3 ta sarlavha bor.

Sarlavha 1

Sarlavha 2

Sarlavha 3

Tabiiyki, barcha CSS xossalari html hujjatiga ulangan bo'lishi kerak bo'lgan alohida faylda (style.css) yozilishi kerak. Ushbu faylda men minimal uslubni yozaman, shunda bizning sarlavhalarimiz oddiygina ko'rinadi.

h3 (fon: #EEDDCD; )

h3 ( fon: #EDDCD;

Mana ular sahifada:

Ular bloklar kabi harakat qilishadi. Ularning har biri o'z chizig'ida joylashgan, ular orasida bo'shliqlar mavjud. Agar xohlasangiz, har qanday ichki to'ldirishni ham o'rnatishingiz va xohlaganingizni qilishingiz mumkin.

Keling, uni satrlarga aylantiramiz va darhol chekinishlarni qo'shamiz. Buning uchun h3 selektori quyidagi xususiyatlarni qo'shishi kerak:

displey: inline; to'ldirish: 30px;

Ushbu texnikani qo'llashda yuzaga keladigan ikkita asosiy muammo mavjud. Birinchisi, minimal chekinish. Bu kodda bloklar o'rtasida ushbu chekinishni tashkil etuvchi bitta bo'sh joy mavjudligi sababli hosil bo'ladi. Agar bu muammoni hal qilish kerak bo'lsa, ikkita asosiy variant mavjud:

Htmlda kerakli bloklar kodini bo'sh joysiz bir qatorga joylashtiring

-4 piksel o'ng tomoniga manfiy chekka qo'shing. Bitta joy shunchalik ko'p joy oladi.

Ikkinchi muammo shundaki, agar elementlar turli balandliklarga ega bo'lsa, displey muammolari paydo bo'lishi mumkin. Umuman olganda, eng yaxshi variant suzuvchi bloklardir. Display: inline-block o'rniga biz buni yozamiz:

Ramka yordamida chiziqdagi bloklar

Men darhol aytamanki, agar siz biron bir oddiy CSS ramkasidan (masalan, Bootstrap) foydalanmoqchi bo'lsangiz, unda hamma narsa hali ham ancha sodda. Elementlarni tartibga solish uchun mas'ul bo'lgan barcha CSS kodi allaqachon yozilgan va siz faqat to'g'ri sinflarni o'rnatishingiz kerak. Buning uchun faqat grid tizimini o'rganing va siz ko'p ustunli javob beruvchi shablonlarni qiyinchiliksiz yaratishingiz mumkin. Hech bo'lmaganda noldan CSS yozishdan ko'ra osonroq bo'ladi.

Noldan kod yozishning yana bir qiyinligi sizga sezgir dizayn kerak bo'lganda paydo bo'ladi. Albatta, siz media so'rovlariga ega bo'lish orqali uni o'zingiz amalga oshirishingiz mumkin, ammo agar sizda murakkab shablon bo'lsa, bu ancha qiyin bo'ladi.

Masalan, katta ekranlarda 4 ta, oʻrta ekranlarda 3 ta va mobil telefonlarda 2 ta ustun boʻlishi kerak boʻlsa.Bootstrap kabi ramkalar yordamida, toʻgʻrirogʻi uning panjarasi yordamida buni amalga oshirish bir necha daqiqa vaqt olishi mumkin. .

Mavzuni Bootstrap ramkasiga silliq tarjima qilib, yana bir bor ta'kidlaymanki, agar siz murakkab moslashuvchan shablonni yaratish vazifasiga duch kelsangiz, unda panjara ishlatmaslik shunchaki gunohdir. Buni amalga oshirish uchun siz ramkaning to'liq versiyasini ulashingiz shart emas - siz uni sozlashingiz va u erda faqat sizga kerak bo'lgan narsani to'xtatishingiz mumkin.

dan foydalanib, ramka bilan ishlashni o'rganishingiz mumkin. U erda nazariya tushuntiriladi, lekin eng muhimi, amaliyot bor. Siz 3 ta moslashtirilgan shablonlarni yaratasiz va buyurtma berish yoki o'zingiz uchun veb-saytlarni loyihalash imkonini beradigan ajoyib tajribaga ega bo'lasiz. Va agar siz ramkaning afzalliklari va imkoniyatlari bilan bepul tanishmoqchi bo'lsangiz, men sizga Bootstrap haqidagi maqolalar seriyamizni, shuningdek, oddiy dizayn dizaynini ko'rib chiqishni taklif qilaman. Men sizga maket va umuman veb-sayt yaratishda muvaffaqiyatlar tilayman.

Saytning ba'zi muhim elementlarini ta'kidlash uchun, buning uchun taqdim etilgan barcha turdagi CSS uslublari va xususiyatlaridan foydalanish zarar qilmaydi. Albatta, matn haqida juda ko'p tashvishlanishingiz va uni ta'kidlashingiz shart emas, masalan, qalin yoki kursiv bilan, fonni o'zgartiring yoki matn atrofida ramka hosil qiling. Ammo taqdim etilgan usullardan biri har doim ham mos kelmaydi. Aytaylik, sizda semantik yukining o'ziga xos xususiyatlari tufayli bo'linishi kerak bo'lgan matn bor. Bu erda HTML va CSS xususiyatlari yordamga keladi.

CSS-dan foydalanib, matnda qatorni qanday qilish kerak

Rejalarimizni amalga oshirish uchun biz bilan bog'lanishimiz kerak bo'ladi style.css fayli, unda tegishli xususiyatni yozgan chegara. Bu matnning yuqorida, ostida yoki ma'lum bir tomonida chiziq paydo bo'lishiga olib keladi. O'z navbatida, chiziqni ko'rsatish uchun mas'ul bo'lgan bir nechta xususiyatlar mavjud, xususan:

- chegara tepasi– matn ustida joylashgan gorizontal chiziq;

- chegara - o'ng– matnning o‘ng tomonida joylashgan vertikal chiziq;

- chegara-pastki– matn ostida joylashgan gorizontal chiziq;

- chegara - chap– chap tomonda joylashgan vertikal chiziq.

Htmlda qanday qilib qator yasash mumkin

CSS xususiyatlaridan foydalanib, HTML kodini tahrirlash orqali barcha kerakli qiymatlarni belgilashingiz mumkin. Buning uchun siz saytning ma'muriy qismiga o'tishingiz kerak. Chop etilgan materiallardan birini tanlang, matn muharririni HTML kodini tahrirlash rejimiga o'tkazing va CSS xususiyatlarini kiriting. Quyida namunani ko'rish mumkin.

Buyruqlarning qisqacha tavsifi

- kengligi- chiziq uzunligi;

- qattiq- qattiq chiziq;

- nuqtali- nuqta chiziq.

Uslublarni chuqurroq tushunish uchun men buni o'qishni tavsiya qilaman.

Shuni tushunish kerakki, sayt kodiga o'zgartirishlar kiritish jarayonida chiziq turini, uning qalinligi va rangini aniqlaydigan xususiyatlar bo'sh joy bilan ajratilgan.

Ushbu usul bir qator afzalliklarga ega:

Deyarli har qanday chiziqni yasashingiz mumkin bo'lgan keng imkoniyatlar.

To'g'ridan-to'g'ri HTML kodiga barcha kerakli o'zgartirishlarni kiritish qulayligi. Bu tajribasiz sayt quruvchilar uchun vazifani sezilarli darajada osonlashtiradi.

HTML teg yordamida to'g'ri gorizontal chiziqni qanday yasash mumkin

---

Birinchi navbatda e'tiboringizni qaratmoqchi bo'lgan narsa shuki, bu teg html ning barcha nozikliklari va tamoyillariga qaramay, yopish tegiga ega emas. U html kodining istalgan joyida, teglar orasida ishlatilishi mumkin Va.

Teg atributlari

---

- kengligi- chiziq uzunligi uchun javobgardir. Foiz yoki piksel sifatida ko'rsatilishi mumkin.

- hajmi- chiziq qalinligi. Piksellarda ko'rsatilgan.

- rang– chiziq rangini belgilaydi.

- tekislash- chiziqni tekislash uchun mas'ul bo'lgan atribut. O'z navbatida, jamoa unga tegishli.

Vazifa

Sahifada gorizontal chiziq hosil qiling.

Yechim

Gorizontal chiziqlar bir matn blokini boshqasidan ajratish uchun yaxshi. Yuqorida va pastda gorizontal chiziqlarga ega kichik matn oddiy matnga qaraganda ko'proq o'quvchi e'tiborini tortadi.

Teg foydalanish

---

siz gorizontal chiziq chizishingiz mumkin, uning ko'rinishi ishlatiladigan atributlarga, shuningdek, brauzerga bog'liq. Teg blok elementlariga ishora qiladi, shuning uchun chiziq har doim yangi satrdan boshlanadi va undan keyin barcha elementlar keyingi qatorda ko'rsatiladi. Ko'p teg atributlari tufayli

---

bu teg orqali yaratilgan chiziqni boshqarish oson. Agar siz uslublar kuchini ham bog'lasangiz, hujjatga chiziq qo'shish oddiy vazifaga aylanadi.

Standart qator

---

kul rangda va ovoz balandligi effekti bilan ko'rsatiladi. Ushbu turdagi chiziq har doim ham sayt dizayniga mos kelmaydi, shuning uchun ishlab chiquvchilarning uslublar orqali chiziqning rangi va boshqa parametrlarini o'zgartirish istagi tushunarli. Biroq, brauzerlarda bu masala bo'yicha aralash yondashuvlar mavjud, shuning uchun siz bir vaqtning o'zida bir nechta uslub xususiyatlaridan foydalanishingiz kerak bo'ladi. Xususan, Internet Explorer-ning eski versiyalari chiziq rangi uchun rang xususiyatidan foydalanadi, boshqa brauzerlar esa fon rangidan foydalanadi. Lekin bu hammasi emas, siz chiziq qalinligini (balandlik xususiyati) nolga teng bo'lmasligi uchun belgilashingiz kerak va chegara xususiyatini "yo'q" ga o'rnatib, chiziq atrofidagi ramkani olib tashlashingiz kerak. Hr selektori uchun barcha xususiyatlarni birlashtirib, biz mashhur brauzerlar uchun universal echimga ega bo'lamiz (1-misol).

1-misol: Gorizontal chiziq

HTML5 CSS 2.1 IE Cr Op Sa Fx

---

Matn qatori

---

Ushbu misolning natijasi rasmda ko'rsatilgan. 1.

Guruch. 1. Rangli gorizontal chiziq