Matndagi asosiy fikrlarni ajratib ko'rsatish uchun html da vertikal chiziqni qanday yasash mumkin. Html va css yordamida gorizontal va vertikal chiziqlar Vertikal chiziq CSS hosil qiling

Gorizontal chiziqlar juftlashtirilmagan (yopish yorlig'i kerak emas) teg orqali tuzilgan

va juda noyob dizayn elementlari bo'lishi mumkin. Matnni gorizontal HTML qatorlarini qo'shib formatlash sahifaga matnni taqdim etishning ma'lum mantiqiyligini beradi, shuningdek, o'quvchiga ketma-ket o'rganilishi kerak bo'lgan ma'lumotlar bloklarini ajratib ko'rsatishni osonlashtiradi. teg
turli rangdagi, qalinlikdagi va uzunlikdagi gorizontal chiziqlar hosil qilishi mumkin. Va buni qilish juda oddiy, quyida keltirilgan misollarda ko'rsatilganidek.

Aytgancha, siz blok uslubi xususiyatlaridan ham foydalanishingiz mumkin

Va
chiziqlarni shakllantirish uchun
ma'lum bir joyda. To'g'ri, bu variant har doim ham qulay bo'lmasligi mumkin, masalan, rasm chizish ba'zan har doim ham o'zini oqlamaydi, lekin ko'p hollarda muammolarni shu tarzda hal qilish mumkin. Misol uchun, hosil bo'lgan chiziq ichida teg
matn kirita olmaysiz. Ammo bloklar ichida bu mumkin va doimiy ravishda qo'llaniladi. Shunday qilib, dizayn talablariga qarab o'z variantingizni tanlashingiz kerak.

HTMLda vertikal chiziqlar.

A vertikal chiziqlar aslida bir xil bloklarda hosil bo'ladi

Va
.
Faqatgina noqulaylik shundaki, teg barcha brauzerlarda mavjud emas.
xuddi shunday ishlaydi, lekin siz sinashingiz kerak
va sahifani sozlang yoki yangilangan brauzerlardan foydalaning.

Gorizontal chiziqlarni shakllantirish:

teg
sahifaga gorizontal chiziq qo'yadi va quyidagi atributlarga ega:

Teg sintaksisi
:

HTMLdagi gorizontal chiziqlarga misollar:

HTMLdagi vertikal chiziqlarga misollar:

Chapdagi qizil vertikal chiziqning namunasi.

Mana o'ngdagi qizil vertikal chiziqning namunasi.

Yuqoridagi gorizontal qizil chiziqning namunasi.

Quyida qizil rangdagi gorizontal chiziqning misoli keltirilgan.

Bu erda gorizontal va vertikal chiziqlarga misol.

HTMLda vertikal va gorizontal chiziqlar misollari uchun sintaksis:

uslub atributiga e'tibor bering
chegara - chap (-o'ng): 4px qattiq #FF0000;:

Doira teg yordamida tuzilgan

Chapdagi qizil vertikal chiziqning namunasi.

Mana o'ngdagi qizil vertikal chiziqning namunasi.

Quyida qizil rangdagi gorizontal chiziqning misoli keltirilgan.

Bu erda gorizontal va vertikal chiziqlarga misol.

Va agar biz ushbu misollarni tahlil qilsak, biz juda oddiy xulosaga kelishimiz mumkin: vertikal chiziqlar eng yaxshisi yordamida shakllanadi va oraliq chiziq variantlari yordamida amalga oshirilishi mumkin. teg

Lekin barchasi tasavvur va so'rovlarga bog'liq. Shunday qilib, tanlang va shakllantiring.

Salom, mening o'quv saytimning sodiq obunachilari, shuningdek, blog mehmonlari. Veb-resurs sahifalarida html-dagi vertikal chiziq ba'zi ma'lumotlarni ajratib turganini hech qachon payqaganmisiz? Shunday bo'lsa-da, bu juda oddiy samarali usul o'quvchi e'tiborini tarkibning kerakli qismiga qaratish.

Shunung uchun ushbu nashr Men o'zimni vertikal chiziqlarni o'rnatish uchun asboblar va teglarni o'rganishga bag'ishlamoqchiman, shuningdek, ushbu texnikadan yana qayerda foydalanishingiz mumkinligini aytmoqchiman. Endi boshlaymiz!

Vertikal matnni ajratish nima uchun ishlatiladi?

Ishlab chiquvchilar va veb-dizaynerlar qulay va intuitiv foydalanuvchi interfeysiga ega bo'lgan noyob veb-sayt yaratishga harakat qilmoqdalar. Bularning barchasiga turli xil vositalar va yondashuvlar va CSS uslublar jadvallari yordamida erishiladi.

Ko'pincha urg'u sahifalarning matn tarkibiga joylashtiriladi. Buning uchun biz foydalanamiz:

  • maxsus teglar, masalan, < kuchli>, < i>, < katta> va boshqalar;
  • matnni paragraflarga bo'lish va turli darajadagi sarlavhalarni kiritish;
  • turli xil vositalar yordamida ob'ektlarni tanlash;
  • shrift uslubini o'zgartirish;
  • tarkibga hoshiya ramkalarini kiritish va h.k.

Keling, oxirgi nuqtani ko'rib chiqaylik.

Ramka ma'lum ob'ektlarni ommaviydan ajratish, veb-kontentni ajratib ko'rsatish va oddiygina loyihalash uchun umumiy mexanizmdir. Ular mulk yordamida yaratilgan chegara.

Ushbu CSS tili elementi juda moslashuvchan va tanlangan ob'ektning har tomondan yoki faqat bir tomonida ramka o'rnatishi mumkin. Men jadvalda muhim xususiyatlarni sanab o'tdim.

Yuqoridagi barcha xususiyatlar chiziq qalinligi, rangi va taqdimot uslubini boshqarishi mumkin.

Shuni ta'kidlashni istardimki, chegaralar to'g'ri chiziqlardan ko'ra ko'proq ko'rinishi mumkin. Ular shuningdek paydo bo'lishi mumkin:

  • nuqta(nuqta)
  • nuqtali(chiziqli)
  • chiziqli(qattiq)
  • ikki barobar(ikki marta)
  • hajmli(yiv, ichkari, tizma va chiqish) ramka
  • yoki yordamida ajdodning uslub sozlamalarini takrorlang kalit so'z meros.

Ba'zida men shunday savollarga duch kelaman: "Chegarani tasvir sifatida ko'rsatish mumkinmi va buni qanday qilish kerak?" Javob ha. Va bu juda oddiy tarzda amalga oshiriladi.

Buning uchun CSS yaratuvchilari elementni taqdim etdilar chegara tasviri, unda siz rasmga boradigan yo'lni ko'rsatishingiz va chegaraning har bir tomonining qalinligini tasvirlashingiz kerak.

Amaliy qism

Nazariyani sinovdan o'tkazish vaqti keldi deb o'ylayman. Sizning vazifangiz matnning tanasini yozish va asosiy fikrlarni yoki tirnoqlarni vertikal chiziqlar bilan ajratishdir. Misol kodi quyida keltirilgan:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 Vertikal chiziq

Ushbu matn qismi juda muhimdir.

Vertikal chiziq

Birinchi xatboshi. Chegara-chapdan foydalanish

Birinchi xatboshida matnning asosiy nuqtasini chap qo'sh binafsha chiziq bilan belgilang.

Ushbu matn qismi juda muhimdir.

Ikkinchi xatboshi. Chegara tasviridan foydalanish

Ikkinchi xatboshida biz matnning asosiy nuqtasini tasvir shaklida chap tomonda vertikal chiziq bilan ta'kidlaymiz.

Ushbu matn qismi juda muhimdir.

Siz sezganingizdek, material juda engil, ammo ko'plab turli muammolarni hal qilish uchun foydali bo'lishi mumkin. Shu bilan men siz bilan xayrlashaman. Obuna bo'lishni unutmang va do'stlaringizni do'stona jamoamizga taklif qiling. Hayr hayr!

Hurmat bilan, Roman Chueshov

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

Foydalanish CSS xususiyatlari HTML kodini tahrirlash orqali barcha kerakli qiymatlarni kiritishingiz mumkin. Buning uchun siz saytning ma'muriy qismiga o'tishingiz kerak. Chop etilgan materiallardan birini tanlang, almashtiring matn muharriri HTML kodini tahrirlash rejimiga o'ting va CSS xususiyatlarini qo'shing. Quyida namunani ko'rish mumkin.



Nuqta yoki to'g'ri chiziqni qanday qilish kerak?



Ushbu xususiyatlarni ko'rsatish orqali siz taqdim etilayotgan material, paragraf yoki sarlavha muhimligini ta'kidlay olasizmi?


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 har qanday joyda ishlatilishi mumkin html kodi, teglar orasida 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.

Hammaga salom! Bugun men sizga html yordamida qanday qilib gorizontal chiziq yasashni aytaman.

Aslida, gorizontal chiziq qilish zarurati juda tez-tez paydo bo'ladi, masalan, matnning bir qismini boshqasidan ajratish kerak bo'lganda.

CSS yordamida gorizontal va vertikal chiziqlar

Buni bilan qilishingiz mumkin css yordamida. Buning uchun matnning kerakli qismini div tegi yordamida blokga qo‘shaman, so‘ngra style.css faylida yoki to‘g‘ridan-to‘g‘ri html kodida border-top va yordamida yuqori yoki pastki chegara uchun ushbu blok uchun xossalarni yozamiz. chegara-pastki. Mana bir misol:

Vertikal HTML liniyasi

CSS yordamida gorizontal chiziq.

Bunday holda, men to'g'ridan-to'g'ri HTML kodidan CSS yordamida uslubni o'rnatdim va yuqori chegarani qattiq va pastki qismini qildim. nuqta chiziq.

Bu sahifada shunday ko'rinadi:

CSS yordamida gorizontal chiziq.

Ushbu usul o'zining afzalliklariga ega:

  • Deyarli har qanday turdagi chiziqni o'rnatishga imkon beruvchi keng parametrlar;
  • Siz gorizontal va vertikal chiziqlar yaratishingiz mumkin. Vertikal chiziqlar hosil qilish uchun chegara-yuqori chegara-chapga va chegara-pastki chegarani o'ngga o'zgartirishingiz kerak.

Kamchiliklari kodning nisbatan noqulayligini o'z ichiga oladi.

Biroq, ma'lum bo'lishicha, siz html-dan foydalanib, matnga gorizontal chiziq qo'yishingiz mumkin. Shu bilan birga, CSS-ga kirishingiz shart emas. Buning uchun teg ishlatiladi

.

Html tegidan foydalangan holda gorizontal chiziq

Bu tegning birinchi xususiyati shundaki, u juftlashgan yopish tegiga ega emas. U teglar orasidagi HTML kodining istalgan joyidan foydalanish mumkin Va.

Bu teg quyidagi atributlarga ega:

  • Kengligi– gorizontal chiziq uzunligini piksel yoki foizlarda aniqlaydi;
  • Rang– chiziq rangini belgilaydi;
  • Hizalamoq– chiziqning o‘ng chetiga – o‘ngga, chap chetiga – chapga, markazda – markazga tekislanishini o‘rnatadi;
  • Hajmi– piksellardagi chiziq qalinligi.

Bu yerga misol html- kod:

Va bu shunday ko'rinadi:

Ko'rib turganingizdek, bu usul uning kamchiliklari bor:

  • Kamroq qator sozlamalari;
  • Siz vertikal chiziq yasay olmaysiz.

Ammo bu usul ancha sodda.

Endi siz veb-saytingizda vertikal va gorizontal chiziqlarni qanday yaratishni aniq bilasiz. Savollaringizni izohlarda berishingiz mumkin. Va obuna bo'lishni unutmang