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.

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.

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 css yordamida amalga oshirish mumkin. Buning uchun matnning kerakli qismini div tegi yordamida blokga qo‘shaman, so‘ngra style.css faylida yoki to‘g‘ridan-to‘g‘ri html kodiga border-top va yordamida yuqori yoki pastki chegara uchun ushbu blokning xususiyatlarini yozamiz. chegara-pastki. Mana bir misol:

Bunday holda, men to'g'ridan-to'g'ri html kodidan CSS yordamida uslubni o'rnatdim va yuqori chegarani qattiq va pastki chegarani nuqta qilib qo'ydim.

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.

Ko'rinishidan, nima uchun to'rtta usul kerak bo'lishi mumkin? Axir, deyarli har bir kishi o'zi odatlangan bitta usuldan foydalanadi. Misol uchun, men Shift va chiziqcha tugmachasini bir necha marta bosdim va shuning uchun gorizontal chiziq oldim.

Agar bu nuqta chiziqqa olib kelsa-chi, lekin sizga qattiq chiziq kerak bo'lsa-chi?
- Katta ehtimol bilan klaviaturadagi Shift tugmasi noto'g'ri. Bu erda boshqa usullar yordamga keladi.

3.
4.
5.

Ehtimol, Word-da chiziq yaratishning eng keng tarqalgan usuli bu klaviaturada bir nechta tugmachalardan foydalanishdir.

I Klaviatura yordamida yupqa, qalin, juft, nuqta chiziq

Quyida inglizcha tartibli, lekin ruscha tartibsiz klaviatura surati keltirilgan, ammo bu muhim emas, chunki bizni faqat uchta tugma qiziqtiradi: Shift, chiziqcha va Enter.

Guruch. 1. Klaviaturadagi uchta tugma: Word dasturida doimiy gorizontal chiziq uchun Shift, chiziqcha va Enter.

Ushbu uchta tugma yordamida Word dasturida uzluksiz gorizontal chiziq chizishingiz mumkin: nuqta yoki qattiq, ingichka yoki qalin, uzun yoki qisqa.

1) “-” (chiziq) tugmasini bir necha marta bosganingizda So'z muharriri biz har qanday uzunlikdagi nuqta chiziqni olamiz.

Qilish uchun yupqa sahifaning butun kengligi bo'ylab uzun chiziq:

• Biz klaviaturada "tire" tugmachasini topamiz ("nol" tugmachasining o'ng tomonida, 1-rasmdagi yashil ramkada).
• Word-dagi yangi (!) qatordan ushbu tugmani bir necha marta bosing: -
• Va keyin "Enter" () tugmasini bosing. Bir nechta bosilgan chiziqlar to'satdan sahifaning butun kengligi bo'ylab doimiy gorizontal nozik chiziqqa aylanadi.

2) Shift va “-” (chiziq) tugmalarini bir vaqtda bosganingizda, chiziqcha EMAS, pastki chiziq _________ bosiladi. Shunday qilib, hujjatning istalgan joyida ixtiyoriy uzunlikdagi uzluksiz chiziq hosil qilishingiz mumkin.

Guruch. 2. Word dasturida yupqa va qalin gorizontal chiziq

Endi chop qilaylik semiz sahifaning butun kengligi bo'ylab gorizontal chiziq:

• Yana bir xil "chiziq" tugmachasini, shuningdek Shift tugmachasini (chapda yoki o'ngda, xohlaganingizcha) topamiz. Shift tugmasini bosing, ushlab turing va qo'yib yubormang.
• Va endi, yangi (!) qatordan chiziqchani bir necha marta bosing (masalan, 3-4 marta) (Shift-ni qo'ymasdan): ___. Shift-ni bo'shating.
• Endi Enter tugmasini bosing. Siz qalin gorizontal chiziqni ko'rasiz.

Keling, ba'zi natijalarni jadval shaklida umumlashtiramiz:

(Kattalashtirish uchun bosing) Klaviatura yordamida Word-dagi qatorlar

­­­­­­­­­­­­­­­­­­­­­

II jadval yordamida Word dasturida qator

Gorizontal chiziqni bitta katak (1x1) jadvali yordamida olish mumkin, unda faqat yuqori yoki pastki chegara rangli (ko'rinadigan bo'ladi) va jadvalning qolgan uch tomoni rangsiz chegaralarga ega (ular ko'rinmas bo'ladi). .

Kursorni chiziq bo'lishi kerak bo'lgan joyga qo'ying. Word-ning yuqori menyusida quyidagini bosing:

• Qo'shish (3-rasmda 1),
• Jadval (3-rasmda 2),
• Bitta hujayra (3-rasmda 3).

Guruch. 3. Word dasturida 1x1 jadval (bitta katakchadan) qanday kiritiladi

Natijada bitta jadval bo'ladi katta qafas(1x1):

1x1 jadvalidagi uch tomondan chegaralarni olib tashlash qoladi. Buning uchun

• "Uy" yorlig'iga o'ting (4-rasmdagi 1),
• keyin "Shrift" yonida biz "Paragraf" va chegaralarni topamiz (4-rasmda 2),
• "Chegara yo'q" tugmasini bosish orqali barcha chegaralarni olib tashlang (4-rasmda 3),
• “Yuqori chegara” yoki “Quyi chegara” ni tanlang (4-rasmda 4).

Guruch. 4. Word jadvalidan chegara tanlashni qanday olib tashlash mumkin (chegaralarni ko'rinmas qilish)

Men buni videoda aniq ko'rsataman (maqolaning oxirida).

Aytgancha, rasmda. 3 osonroq yo'li borligi aniq. Kursorni Word dasturida satr boshiga qo'yib, "Gorizontal Line" tugmasini bosishingiz mumkin (4-rasmda 5):

III Chizma yordamida Word dasturida qator

Insert (5-rasmda 1) - Shakllar (5-rasmda 2) - bu Word dasturida gorizontal chiziqni olishning yana bir usuli.

Chiziqni qat'iy gorizontal holatda ushlab turish uchun Shift tugmachasini bosib ushlab turing va bir vaqtning o'zida chiziqni torting.

Guruch. 5. Word dasturida chiziq chizish

Ekrandagi klaviatura yordamida Word dasturida IV qator

Ekran klaviaturasini topish uchun Qidiruvga “ekrandagi klaviatura” iborasini kiriting, Windows 7 va Windows 8 uchun batafsil ma’lumot.

Windows 10 uchun siz Qidiruv satriga "ekrandagi klaviatura" ni kiritish orqali ekran klaviaturasini ham topishingiz mumkin.

Guruch. 6. Ekrandagi klaviatura

Biz gorizontal chiziqni birinchi variantda bo'lgani kabi yaratamiz oddiy klaviatura. Ekrandagi klaviaturada uchta tugma kerak bo'ladi: chiziqcha, Shift va Enter.

1 Chiziq va Enter

BILAN yangi qator Word dasturida chiziqchani (6-rasmda 1) bir necha marta bosing va Enter tugmasini bosing. Siz ingichka gorizontal chiziqni olasiz.

2 Shift, chiziqcha va Enter

Word dasturidagi yangi qatordan avval Shift (6-rasmda 2), so'ng Chiziq (6-rasmda 1) tugmasini bosing. Siz pastki chiziqni olasiz. Buni yana 2 marta takrorlaymiz va keyin Enter tugmasini bosing. Natijada, biz qalin gorizontal chiziqni ko'ramiz.

Barcha o'quvchilarga salom. Vaqti-vaqti bilan hunarmandlar gorizontal yoki vertikal chiziqni qanday qilish kerakligi muammosiga duch kelishadi. HTML yordamida yoki CSS yordamida. 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.
• Hizalamoq– 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.

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; )

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 bloklar. 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 muammosi sizga kerak bo'lganda keladi moslashuvchan dizayn. 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.

Misol uchun, sizda bo'lganda katta ekranlar 4 ta ustun bo'lishi kerak, o'rtada - 3 va yana mobil telefonlar— 2. Bootstrap kabi ramkalar yordamida, to‘g‘rirog‘i, uning grid yordamida bunday narsani amalga oshirish bir necha daqiqa vaqtni oladi.

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 hatto ulanishingiz shart emas. to'liq versiya ramka - 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 ni tashkil qilyapsiz moslashuvchan shablon va buyurtma berish uchun yoki o'zingiz uchun veb-saytlarni loyihalash imkonini beradigan ajoyib tajribaga ega bo'ling. 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.