CSS	Internet Explorer		Chrome	Opera	Safari	Firefox	Android	iOS
2.1	6.0+	8.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+
3			2.0+	11.6+	3.1+	3.6+	2.1+	2.0+

qisqacha ma'lumot

CSS versiyalari

Qiymatlar

markaz Matnni markazga tekislaydi. Matn brauzer oynasida yoki matn bloki joylashgan konteynerda gorizontal holatda joylashtiriladi. Matn satrlari veb-sahifaning o'rtasidan pastga tushadigan ko'rinmas o'qga bog'langanga o'xshaydi. Ushbu tekislash usuli sarlavhalar va turli xil imzolarda, masalan, sarlavhalarda faol qo'llaniladi; matn dizayniga rasmiy va mustahkam ko'rinish beradi. Boshqa barcha holatlarda, markazga moslashtirish kamdan-kam qo'llaniladi, chunki bunday matnni katta hajmda o'qish noqulay. oqlash Justified, ya'ni bir vaqtning o'zida chapga va o'ngga tekislangan. Ushbu amalni bajarish uchun brauzer bu holda so'zlar orasiga bo'sh joy qo'yadi. chap Matnni chapga tekislaydi. Bunday holda, matn satrlari chapga tekislanadi va o'ng qirrasi narvon sifatida joylashtiriladi. Ushbu tekislash usuli veb-saytlarda eng mashhur hisoblanadi, chunki u foydalanuvchiga osongina topish imkonini beradi yangi qator va katta matnni bemalol o'qing. o'ng Matnni o'ngga tekislaydi. Ushbu hizalama usuli oldingi turga antagonist sifatida ishlaydi. Ya'ni, matn satrlari o'ng chetiga tekislanadi, chap esa "yirtilgan" bo'lib qoladi. Chap qirrasi tekislanmaganligi sababli, bu erda yangi satrlar o'qiladi, bu matnni o'qish chapga tekislanganidan ko'ra qiyinroq. Shuning uchun, o'ngga tekislash odatda uchta qatordan ko'p bo'lmagan qisqa sarlavhalar uchun ishlatiladi. Biz matnni o'ngdan chapga o'qish kerak bo'lgan maxsus saytlarni hisobga olmaymiz, bu erda, ehtimol, shunga o'xshash tekislash usuli foydali bo'ladi. auto Elementning o'rnini o'zgartirmaydi. inherit Ota-ona qiymatini meros qilib oladi. start Agar matn o'ngdan chapga o'tganda matn chapdan o'ngga va o'ngga o'tsa, chapga o'xshash. end Agar matn chapdan o'ngga va chapdan o'ngga o'tsa, o'ng bilan bir xil.

HTML5 CSS2.1 IE Cr Op Sa Fx

Ushbu misolning natijasi rasmda ko'rsatilgan. 1.

Guruch. 1. Safari brauzerida matnni tekislang

7.0 inklyuziv versiyasigacha bo'lgan Internet Explorer uni biroz boshqacha talqin qiladi bu misol boshqa brauzerlarga qaraganda, nafaqat matnni, balki bloklarni ham tekislash (2-rasm).

Guruch. 2. Internet Explorer 7 da matnni tekislash

Ob'ekt modeli

document.getElementById("elementID").style.textAlign

Brauzerlar

IE 7.0 versiyasigacha va shu jumladan, blok darajasidagi elementning mazmunini emas, balki elementning o'zini ham tekislaydi.

Matnning hizalanishi va chekinishini aniqlaydigan HTML teglari

Tipografiyada ishlatiladigan asosli matn

Quyidagi misol qanday qilib tekislashni ko'rsatadi matn kengligiga sahifalar:

align = "chapga"	tekislash = "o'ng"
	Xizmat ko'rsatish va axborot tarqatish sohasida band bo'lgan ishchilar soni kundan-kunga ortib bormoqda. Agar o'tgan asrlarning timsoli fermer xo'jaligi va zavod bo'lsa, hozirgi XXI asrning ramzi axborot oqimiga kirish imkoniga ega bo'lgan kompyuterlar bilan jihozlangan ofisdir.
tekislash = "oqlash"	align = "markaz"
Xizmat ko'rsatish va axborot tarqatish sohasida band bo'lgan ishchilar soni kundan-kunga ortib bormoqda. Agar o'tgan asrlarning timsoli fermer xo'jaligi va zavod bo'lsa, hozirgi XXI asrning ramzi axborot oqimiga kirish imkoniga ega bo'lgan kompyuterlar bilan jihozlangan ofisdir.	Xizmat ko'rsatish va axborot tarqatish sohasida band bo'lgan ishchilar soni kundan-kunga ortib bormoqda. Agar o'tgan asrlarning timsoli fermer xo'jaligi va zavod bo'lsa, hozirgi XXI asrning ramzi axborot oqimiga kirish imkoniga ega bo'lgan kompyuterlar bilan jihozlangan ofisdir.

Oqlangan qiymat bir xillikni ta'minlaydi matnni o'ngga va chapga tekislang, ya'ni kengligida. Ushbu usul bosmaxonada keng qo'llaniladi.

HTML-dagi matnni markazga va kenglikka tekislash

Matnni HTML-da markazga, matnni o'ngga tekislang:

Natija:

Atributlar va qadriyatlar

• align="left" - belgilaydi chap matnni tekislash(standart).
• align = "markaz" - matnni markazga tekislaydi.
• align = "o'ng" - matnni o'ngga tekislaydi.

tekislang | HTML matn chekinishi

HTML matn va sahifaning chap tomonida uning chegarasi

Biz ishlab chiqaramiz matn chegarasi chap tomonda ikki usulda:

Natija:

Yangi oynada ko'rish.

Xususiyat matnni tekislash-oxirgi ( HTML align bilan adashtirmaslik kerak) blokning oxirgi satri yoki majburiy tanaffusdan oldingi chiziq qanday tekislanishini aniqlaydi. Bu juda muhim, chunki paragrafning oxirgi satrida barcha bo'sh joyni to'ldirish uchun etarli matn bo'lmaydi.

Ushbu maqolada biz matnni tekislash-oxirgi xususiyatining barcha jihatlarini, jumladan u qabul qiladigan qiymatlarni va brauzerni qo'llab-quvvatlashni ko'rib chiqamiz.

Foydalanish va qabul qilingan qiymatlar

text-align-last xususiyatidan foydalanish oddiy. Matnning oxirgi qatorini o‘ngga tekislash uchun kod parchasi:

Intro-grafik ( text-align: justify; // IE va Edge uchun talab qilinadi matnni tekislash-oxirgi: o'ng; )

Mulk etti qiymatni qabul qilishi mumkin. Siz align:left, o'ng va markazning standart HTML matn qiymatlari bilan tanish bo'lsangiz kerak. Ular oxirgi satrdagi matnni konteynerning o'ng, chap va o'rtasiga to'g'rilaydi.

Quyidagi misol ushbu uchta qiymat o'rtasidagi farqni ko'rsatadi:

Misolni ko'rish

To'rtinchi qiymat, justify , oxirgi qatorni oqlaydi, shunda matn konteynerning butun kengligi bo'ylab teng taqsimlanadi. Bunga so'zlar orasiga tegishli bo'shliqlar qo'shish orqali erishiladi. Matn miqdoriga qarab, bu xususiyat so'zlar orasida juda katta bo'shliqlar qoldirmasdan oxirgi qatordagi bo'sh joyni to'liq to'ldirish uchun ishlatilishi mumkin.

Ikkinchi xatboshidagi matn ham kenglik bo'ylab yoyilgan, ammo oxirgi qatorda faqat bitta so'z borligi sababli u chap tomonda joylashgan.

Misolni ko'rish

Matnning oxirgi qatorini chapga tekislash chapdan o'ngga o'qiladigan tillar uchun mos keladi ( LTR), lekin bu RTL tillari uchun noto'g'ri bo'ladi. Bunday hollarda chap yoki o'ng qiymatlardan foydalanish muammolarga olib kelishi mumkin.

Yaxshiyamki, siz matnni yozish va o'qish boshlanadigan chetiga tekislash uchun boshlang'ich qiymatidan foydalanishingiz mumkin. Bu shuni anglatadiki, matnni tekislash-oxirgi xususiyatni boshlash uchun sozlash orqali siz LTR tillari uchun chapga va RTL tillari uchun o'ngga tekislang.

Yakuniy qiymatdan matnni yozish va o‘qishni boshlagan joyning qarama-qarshi tomoniga tekislash uchun ham foydalanishingiz mumkin. Bu LTR tillari uchun o'ng va RTL tillari uchun chap qiymatga mos keladi.

Misolni ko'rish

Ushbu xususiyat uchun standart qiymat auto hisoblanadi. Foydalanilganda oxirgi satrdagi matn, agar asoslash uchun o'rnatilmagan bo'lsa, HTML matn align xususiyati qiymatiga mos ravishda tekislanadi. Aks holda, agar matnni oqlash xususiyati distribute ga o'rnatilgan bo'lsa, matn konteyner kengligi bo'ylab taqsimlanadi. Aks holda, matn yozish va o'qish boshlanadigan chetiga tekislanadi.

Muhim eslatmalar

Matnni tekislash oxirgi ishlashi uchun matnni tekislash xususiyati oqlash uchun sozlanishi kerak. Ammo bu qoida faqat IE va Edge-da qo'llaniladi. Firefox va Chrome brauzerlarida bu xususiyat matnni tekislash uchun moslashtirmasdan ishlaydi. Quyidagi misolda matn Edge va IE da to'g'ri tekislangan bo'lishi kerak. Boshqa brauzerlarda paragraflarning oxirgi satrlari text-align-last xususiyati qiymatiga mos ravishda, qolgan satrlar esa o'ng tomonda tekislanadi.

Demoni ko'rish

Agar biz matnni tekislash uchun HTMLni tekislash uchun o'rnatmasak, natija unchalik yaxshi ko'rinmaydi. Shuning uchun, ehtimol siz matn taqsimotini kenglikka o'rnatasiz.

Xususiyat xatboshida teg yordamida belgilangan majburiy satr uzilishi bo'lsa ham ishlaydi
yoki shunga o'xshash narsa. Yodda tutingki, bu xususiyat faqat tashqi elementga emas, balki belgilangan element ichidagi matnning barcha oxirgi satrlariga ta'sir qiladi. Misol uchun, agar maqola yoki div elementi ichidagi matn uchta paragrafdan iborat bo'lsa, har biridagi oxirgi satr butun bosh element uchun o'rnatilgan text-align-last xususiyatiga muvofiq tekislanadi.

Agar siz faqat oxirgi tarkib qatorini tekislashingiz kerak bo'lsa, siz :last-child yoki :last-of-type selektorlaridan foydalanishingiz mumkin. Misol sifatida quyidagi demo kodini oling:

maqola ( matnni tekislash: oqlash; ) maqola p: turdagi oxirgi ( matnni tekislash - oxirgi: o'ng; )

U bizning maqolamizning oxirgi bandining oxirgi qatorini o'ngga tekislaydi. Qolgan satrlar HTML matnni align xususiyati qiymatiga qarab tekislanadi.

Demoni ko'rish

Hizalashni o'zgartirish uchun siz boshqa selektorlardan ham foydalanishingiz mumkin: :juft va :odd.

Ba'zan paragraf faqat bitta satrdan iborat bo'lishi mumkin. Bunday holda, agar siz matnni tekislash xususiyati va matnni tekislash-oxirgi xususiyat uchun qiymatlarni belgilagan bo'lsangiz, u holda oxirgi xususiyat ustunlikka ega bo'ladi.

Quyidagi kod parchasini ko'rib chiqing:

p (matnni tekislash: oqlash; ) p: nth-of-tur(2) ( matnni tekislash-oxirgi: chap; )

Agar ikkinchi xatboshida faqat bitta satr bo'lsa, u holda matn chapga tekislanadi, chunki matnni tekislash-oxirgi ustunlik qiladi. Quyidagi demo ko'rsatilgan bu kod CSS amalda va yana bir nechta HTML misollar tekislash.

Demoni ko'rish

Brauzerni qo'llab-quvvatlash

Ushbu xususiyatni qo'llab-quvvatlash "opsiyasi yordamida yoqilishi mumkin. Eksperimental veb-platforma funksiyalarini yoqing"V Gugl xrom va Opera, mos ravishda 35 va 22 versiyalaridan boshlab. U Chrome 47+ va Opera 34+ versiyalarida to'liq qo'llab-quvvatlanadi.

Firefox-da ushbu xususiyatdan foydalanish uchun uni -moz- bilan prefikslash kerak bo'ladi. Boshlanish va tugatish qiymatlari IE tomonidan qo'llab-quvvatlanmaydi. Shu bilan birga, Edge ushbu xususiyatni to'liq qo'llab-quvvatlaydi. Matnni tekislash oxirgisini to'liq qo'llab-quvvatlamaydigan yagona mashhur brauzer bu Safari.

Odatda sayt yaratuvchisining o'zi imlo qoidalari va o'z xohishiga ko'ra qaysi harflar katta va qaysi kichik bo'lishini o'zi hal qiladi. Biroq, xarakterli holatlarni o'zgartirish jarayoni xususiyat yordamida avtomatlashtirilishi mumkin matnni o'zgartirish. Bu xususiyat to'rtta qiymatni qabul qilishi mumkin:

• yo'q - matn o'zgarishsiz yoziladi;
• katta harf bilan yozing- har bir so'z bosh harf bilan boshlanadi;
• kichik harf - barcha belgilar kichik harfga aylanadi (kichik harf);
• bosh harf- barcha belgilar katta harf bilan yoziladi (katta harf).

Masalan, quyidagi qoida H1 sarlavhasi katta harflar bilan yozilishini belgilaydi:

H1 (matnni o'zgartirish: katta harf;)

Qisqartmalar, elementlar nomlari, sarlavhalar va boshqalar uchun harflar registrini avtomatik o'zgartirishni o'rnatish qulay matn elementlari, bu erda siz katta yoki kichik harflar bilan yozishingiz kerak.

Matnni bezash: matnni bezash xususiyati

Mulk matn-bezak matnga qo'shimcha dizayn berish imkonini beradi. Ushbu xususiyatning qiymatlari doimiydir yo'q, tagiga chizilgan, ustiga chizilgan, chiziqli Va miltillash, bu sizga oddiy matnni ko'rsatish, yuqorida, pastda yoki matn bo'ylab chiziq chizish yoki matnni miltillash imkonini beradi. Ushbu xususiyatning turli qiymatlaridan foydalanishga misol 11.4-rasmda ko'rsatilgan.

Guruch. 11.4.

Mulkdan eng keng tarqalgan foydalanish matn-bezak standart havolaning tagiga chizishni o'zgartirishdan iborat. Misol uchun, quyidagi qoida havolalarning tagiga chizilgan bo'lishi kerakligini belgilaydi:

Javob: havola (matnni bezash: tagiga chizilgan;)

So‘zlar orasidagi interval: so‘z oralig‘i xossasi

Matndagi so'zlar orasidagi masofani belgilash uchun so'z oralig'i xususiyatidan foydalaning. Ushbu xususiyatning qiymatlari yordamida o'rnatilishi mumkin kalit so'z normal , bu standart bo'lib, joriy shrift uchun standart intervalni o'rnatadi. Standartga qo'shimcha ravishda intervalni o'rnatish uchun siz istalgan mavjud CSS birliklarida qiymatni belgilashingiz mumkin va qiymat salbiy bo'lishi mumkin.

Shunday qilib, quyidagi qoida H1 sarlavhasidagi so'zlar orasidagi masofani 1em ga oshiradi:

H1 (so'z oralig'i: 1em;)

Matnni tekislash: matnni tekislash xususiyati

Alignment - matn blokining chap yoki o'ng chetini ko'rinmas bo'ylab joylashtirish vertikal chiziq. Matnni tekislash uchun matnni tekislash xususiyatidan foydalaning. Ushbu xususiyat uchun tegishli qiymatlar chap, o'ng, markaz va oqlash bo'lib, ular mos ravishda chap, o'ng, markaz va tekislashni asoslaydi.

Quyidagi qoida DIV elementi tarkibidagi barcha elementlarning markazga mos kelishini belgilaydi:

DIV (matnni tekislash: markaz;)

Etakchi: chiziq balandligi xususiyati

Etakchi - bir-biriga yaqin bo'lgan chiziqlarning asosiy chiziqlari orasidagi masofa. Oddiy sharoitlarda, satrlar orasidagi masofa shrift turi va o'lchamiga bog'liq va brauzer tomonidan avtomatik ravishda aniqlanadi. Lekin bu qiymat line-height xususiyati yordamida o'zgartirilishi mumkin. Oddiyning standart qiymati brauzerni avtomatik ravishda satrlar orasidagi masofani hisoblashiga olib keladi. Noldan katta bo'lgan har qanday raqam joriy matnning shrift hajmining ko'paytmasi sifatida qabul qilinadi. Ushbu xususiyat uchun qiymat sifatida CSS-da qabul qilingan har qanday uzunlik birliklaridan foydalanish ham mumkin. Bundan tashqari, foiz belgilaridan foydalanishga ruxsat beriladi va bu holda shrift balandligi 100% sifatida qabul qilinadi. Salbiy qator oralig'iga ruxsat berilmaydi.

Harflar oralig'i: harflar oralig'i xususiyati

Brauzer shrift o'lchami va turiga qarab belgilar orasidagi masofani avtomatik ravishda sozlaydi. Ba'zi hollarda harflar orasidagi masofani sozlash kerak. Harflar oralig'ini boshqarish uchun harf oralig'i xususiyatidan foydalaning. Ushbu xususiyat uchun qiymatlar har qanday CSS uzunlik birliklari bo'lishi mumkin, ammo shrift o'lchamiga (em va ex) asoslangan nisbiy birliklardan foydalanish tavsiya etiladi. Satr oralig'idan farqli o'laroq, harflar oralig'i xususiyati manfiy qiymatdan foydalanishga imkon beradi, ammo bu holda siz matnning o'qilishi saqlanishiga ishonch hosil qilishingiz kerak.

Quyidagi qoida H1 sarlavhasidagi belgilar oralig'ini 0,5em ga oshiradi.

Salom, aziz blog o'quvchilari. Bugun biz o'rganishni davom ettirmoqdamiz va keyingi navbatda biz matnni bezash, vertikal tekislash, matnni tekislash, matnni cheklash va boshqa bir qator xususiyatlarga ega bo'lamiz, ular Html kodidagi matnlarning ko'rinishini loyihalashga yordam beradi.

Oxirgi maqolada biz sozlash uchun mo'ljallangan xususiyatlarni ko'rib chiqdik ko'rinish shriftlari.

Xo'sh, bundan oldin biz barcha turlarni batafsil ko'rib chiqdik, ularni qanday guruhlash mumkinligini va ularni sharhlashda brauzer qanday ustuvorliklarni belgilashini bilib oldik. To'g'ri, bularning barchasi bir nechta maqolalarga bo'lingan, shuning uchun chalkashmaslik uchun materiallarni keltirilgan tartibda o'rganishni maslahat beraman.

CSS-da matnni bezash, matnni tekislash, matnni cheklash

Css da matn bilan qanday ishlash mumkin? Buning uchun maxsus ishlab chiqilgan qoidalar mavjudligini taxmin qilish mantiqan to'g'ri bo'ladi. Keling, matnni tekislashdan boshlaylik, bu aslida align atributining o'rnini bosuvchi (u P paragraflari yoki sarlavhalari kabi tarkibni tekislash uchun ishlatilgan).

Bu faqat to'rtta mumkin ma'noga ega:

Ma'no avvalgidek qoladi. Matnni tekislash- bu chiziqlarning gorizontal tekislanishi. Ushbu qoida faqat blokirovka qiluvchi elementlarga (paragraflar, sarlavhalar va boshqalar) nisbatan qo'llaniladi, ya'ni. bir nechta satrlar paydo bo'lishi mumkin bo'lgan teglar. Chunki Inline elementlar faqat bitta qatorga ega bo'lishi mumkinligi sababli, ularda matnni tekislashdan foydalanishning alohida nuqtasi yo'q.

Ushbu qoidaning qiymatlari mos ravishda tekislashni anglatishi aniq: chap, o'ng, markaz va sahifa kengligi (Aslash - so'zlar orasidagi masofani oshirish orqali bir vaqtning o'zida chap va o'ngga). O'z-o'zidan ma'lumki, Justify qiymati kamida bir necha qator matnli elementlar uchun ishlatilishi kerak, aks holda ko'rinadigan effekt bo'lmaydi.

Misol uchun, men oldingi paragrafni (uning chap va o'ng tomonida silliq chegaralari borligini ko'rishingiz mumkin) yordamida oqladim:

Matnni tekislash: asoslash;

Odatiy bo'lib, gorizontal matnni tekislash qoldiriladi, ya'ni. Matnni tekislash: chapga maxsus yozishning hojati yo'q, agar siz avval boshqa tekislashni ko'rsatmagan bo'lsangiz. Aytgancha, men ushbu paragrafni markazga (markazga) to'g'rilab qo'ydim, yana aniq misol uchun, lekin bu erda, menimcha, hamma narsa aniq.

Keyingi Css qoidasi matn chegarasi qizil chiziqni belgilash imkonini beradi, masalan, P paragraf tegidagi matn uchun. Qizil chiziqning chekinishi qiymatni belgilash orqali (yoki ortiqcha yoki minus belgisi yordamida) yoki foizlar yordamida belgilanishi mumkin:

Matn-bandda qanday foizlar hisoblanadi? Matn uchun ajratilgan maydonning kengligidan. Bular. CSS qoidasi text-indent:50% bu chiziq uzunligining yarmiga teng qizil chiziqni o'rnatadi. Xo'sh, ushbu paragraf bunday qoidaga misol bo'lib xizmat qiladi.

Yoki, masalan, matn-indentdagi qizil chiziq uchun salbiy qiymat o'rnatishingiz mumkin va keyin biz ushbu paragrafda ko'rgan narsangizni olamiz. Muvaffaqiyat uchun bu natija Men ushbu CSS qoidasini P paragraf tegi uchun yozdim:

Matn-indent:-1em;

Xo'sh, text-indent dan odatiy foydalanish (standart qizil chiziqni o'rnatish uchun) quyidagicha ko'rinishi mumkin: text-indent:40px; (Aytgancha, ushbu bandga nisbatan qo'llaniladi). Ushbu qoida, xuddi yuqorida muhokama qilingan matnni tekislash kabi, faqat blok elementlari uchun amal qiladi, ya'ni. bu erda bir nechta satrlar paydo bo'lishi mumkin (paragraflar, sarlavhalar va boshqalar).

OK, endi davom etamiz matn-bezak(gorizontal chiziq yordamida loyihalash), bu allaqachon barcha Html elementlariga (ham ichki, ham blok) qo'llaniladi.

U faqat to'rtta ma'noga ega bo'lishi mumkin:

Bular. matn bezatish yordamida ishlatilishi mumkin: ustiga chizish, chiziq orqali yoki tagiga chizish yoki umuman hech narsa ishlatmaslik (yo'q). Ba'zi HTML elementlari allaqachon standart dizaynga ega gorizontal chiziq, masalan, (ular sukut bo'yicha tagiga chizilgan).

Shuning uchun, tagiga chizilgan boshqa narsani (giperhavolalardan tashqari) ajratib ko'rsatish yaxshi emas, chunki foydalanuvchilar o'zlarining ongsizlarida bir marta tagiga chizilgan (shuningdek, rang bilan ta'kidlangan), bu ular borish uchun ustiga bosishlari mumkinligini yozgan. Ammo oddiy matnni tagiga chizilgan holda ajratib ko'rsatish orqali siz foydalanuvchini yo'ldan ozdirasiz va keyinchalik o'z manbangizdan hafsalasi pir bo'lib qolasiz (u shunday deb o'ylagan, lekin shunday bo'lib chiqdi...).

Css matn bezatish qoidasidan foydalanishning nuancei shundaki, siz istalgan Html elementi uchun birdaniga uchta (yoki ikkita) qiymatni kiritishingiz mumkin (hech birini qoldirmang) va natijada siz olasiz. matnning tagiga chizilgan-chiziq-chizilgan-chizilgan qismi(tovush va ajoyib ko'rinadi, shunday emasmi?):

Matn-bezatish:ustiga chizilgan chiziq orqali;

Matnni bezash uchun qiymatlar (agar siz bir vaqtning o'zida bir nechtasini ishlatmoqchi bo'lsangiz) yozilishi kerak kosmik belgi orqali.

Vertical-align - vertikal tekislash

Keyinchalik biz vertikal hizalamaga egamiz - vertikal-align. HTML kodidagi deyarli barcha elementlar uchun bu inline elementlarni matn bilan ularning asosiy chizig'iga nisbatan tekislashni anglatadi. To'g'ri, buning uchun bu biroz boshqacha ma'noni anglatadi - bu hujayralardagi barcha tarkib vertikal ravishda tekislanadi.

CSS vertikal tekislash qoidasi uchun siz quyidagi qiymatlardan foydalanishingiz mumkin:

Chiziqlar sukut bo'yicha asosiy chiziq bilan tekislanadi. Mana, men ariza berdim ushbu matn qismi uchun shrift hajmini oshiring va bu ikki parcha asosiy (pastki) chiziqqa to'g'ri keladi. Vertical-align yordamida vertikal hizalama aniq chiziqlarni tekislash usulini o'zgartirish uchun mo'ljallangan.

Misol uchun, agar men bir xil kattalashtirilgan matn qismi uchun vertikal align:baseline deb yozsam, hech qanday o'zgarishlar bo'lmaydi, chunki sukut bo'yicha ushbu CSS qoidasi uchun asosiy qiymat ishlatiladi.

Aytgancha, siz raqamlarni qiymat sifatida ham ishlatishingiz mumkin va vertikal-align: 0 yozuvi vertikal-align: bazaviy chiziq bilan bir xil narsani anglatadi, ya'ni. asosiy chiziq nolga teng. Shuning uchun, agar biz vertikal tekislashning har qanday o'zgarishini ko'rsatmoqchi bo'lsak, u holda bu siljish asosiy chiziqqa (yoki nolga) nisbatan ko'rsatiladi.

Siz buni shunday yozishingiz mumkin:

vertikal tekislash: 10px;

Va biz qabul qilamiz kattaroq shrift bilan fragmentni yuqoriga siljiting Asosiy chiziqqa nisbatan 10 piksel. Agar salbiy qiymat yozsak:

Vertikal tekislash: -10px;

Keyin olamiz fragmentni pastga siljiting asosiy chiziqqa nisbatan. Misollardan ko'rinib turibdiki, siljish tufayli chiziq balandligi ko'tarilib, matn qo'shni chiziq bilan to'qnashmasdan unga mos keladi. Shift Em va Ex-da ham ko'rsatilishi mumkin va foiz sifatida, bu elementning chiziq balandligidan hisoblab chiqiladi (oxirgi maqolada biz uni qanday o'rnatishni o'rganganimizni eslang ).

Jadval kataklari tarkibini vertikal tekislash uchun, vertikal tekislash tarkibni katakning yuqori va pastki qismiga mos ravishda tekislash uchun yuqori va pastki qiymatlardan foydalanishi kerak (yaxshi, jadval katakchasining o'rtasi standart vertikal tekislash qiymati sifatida ishlatiladi. ).

Shrift elementlari uchun esa matn-yuqori, matn-pastki, oʻrtadan foydalanishingiz mumkin. Keling, buni misol sifatida ishlatamiz ushbu matn qismi ma'nosi:

vertikal tekislash:o'rta;

Natija qanday bo'ldi? Kattalashtirilgan fragmentning o'rta chizig'i oddiy matnning asosiy chizig'iga to'g'ri keladi, ya'ni. biz markaziy chiziqqa vertikal tekislashni oldik. Matn-yuqori va matn-pastki uchun hamma narsa bir xil bo'ladi. Bu matn tepasida va bu matn pastki qismida.

Css vertical-align sub va super xususiyatining qiymatlari o'tgan davrdagi pastki va super indekslarga mos keladi. toza HTML(ishlatishdan oldin CSS xususiyatlari vizual dizayn uchun).

Matnni o'zgartirish, harflar oralig'i, so'z oralig'i va bo'sh joy

Sukut bo'yicha hech biri ishlatilmaydi va matndagi belgilar hech qanday tarzda o'zgarmasligini bildiradi - Html da yozilganidek, ular shunday ko'rsatiladi. Matnni o'zgartirish uchun katta harflar fragmentdagi barcha harflarni bosh harflarga aylantiradi ( misol bu jumlada ko'rsatilgan, bu erda text-transform:büyük harf qoidasi ishlatilgan va harflar dastlab kichik harflarda yozilgan).

Css matnni o'zgartirish qoidasi uchun kichik harf qiymati fragmentdagi barcha belgilarni kichik harflarga o'zgartirishga imkon beradi va katta harflar qiymati so'zning barcha birinchi harflarini bosh harflarga aylantiradi ( bu jumladagi misol- matnni o'zgartirish: katta harf bilan yozish). Bular. text-transform-dan foydalanib, siz oddiy matn bilan xohlagan narsani qilishingiz va keyin hamma narsani osongina qaytarishingiz mumkin.

Shuning uchun, agar sizda, masalan, barcha sarlavhalarni faqat yozilgan qilish vazifasi bo'lsa bosh harflar bilan, keyin ularni odatdagidek Html-da yozing va matn-transform: katta harflar orqali ularni CSS-da katta harf bilan yozing. Keyin, agar biror narsani o'zgartirishga qaror qilsangiz, saytingizdagi barcha 100 500 sarlavhalar tarkibiga emas, balki uslublarga ozgina o'zgartirish kiritishingiz kerak.

Odatiy bo'lib, harflar oralig'i ham, so'zlar oralig'i ham Oddiyga o'rnatiladi yoki bu nolga teng (ya'ni, belgilar va so'zlar orasidagi masofa hech qanday tarzda o'zgarmaydi). Ushbu qoidalardagi masofani o'zgartirish miqdori faqat piksellarda ko'rsatilishi mumkin, Em yoki Ex, lekin foizlarda emas.

Biroq, siz ham ijobiy (belgilar yoki so'zlarning siyrakligi) va salbiy qiymatlardan (belgilar yoki so'zlarni bir-biriga yaqinlashtirish) foydalanishingiz mumkin. Misol uchun, mumkin "Ushbu iboradagi belgilarni qanday qilib yupqalash mumkin" quyidagi Css qoidasidan foydalaning:

Harflar oralig'i: 0,4em;

Yoki mumkin "Mana bu iboradagi belgilarni bir-biriga yaqinlashtirish mumkin" yordamida:

Harflar oralig'i: -1px;

Xuddi shu narsani so'z oralig'i haqida ham aytish mumkin, yagona farq shundaki, so'zlar orasidagi masofa o'zgaradi, kabi, masalan, ushbu iborada, ushbu CSS konstruktsiyasidan foydalangan holda:

So'zlar oralig'i: 4em;

Xuddi shunday, so'zlar orasidagi masofani kamaytirish uchun so'zlar oralig'ida salbiy qiymatlardan foydalanishingiz mumkin.

Xo'sh, bugungi kunda Html kodidagi matnni ma'lum bir tarzda formatlash imkonini beruvchi so'nggi CSS qoidasi bu oq bo'shliq. U Html kodini yozishda yuzaga kelgan veb-sahifadagi bo'shliq belgilarini ko'rsatish uchun javobgardir.

Maqolada eslaganingizdek, brauzer kodni tahlil qilishda barcha bo'shliqlarni, satrlarni va yorliqlarni bitta bo'shliqqa birlashtiradi va veb-sahifadagi satrlarni aniq ko'ra ajratadi. bo'shliq belgilari, kodda sodir bo'lgan.

Shunday qilib, oq bo'shliq uchta qiymatdan birini qabul qilishi mumkin:

Ko'rinib turibdiki, standart qiymat Oddiy va bu holda hamma narsa yuqorida aytib o'tganimdek ko'rsatiladi. Ammo Pre qiymatidan foydalanganda biz foydalanish bilan to'liq o'xshashlikni olamiz, ya'ni. Veb-sahifada matn kodni yozishda mavjud bo'lgan barcha qo'shimcha bo'sh belgilar bilan ko'rsatiladi va brauzer endi ular yordamida o'tkazmalarni amalga oshira olmaydi.

Xo'sh, ma'nosi nima? hozir rap Bu shunchaki brauzerning fragment ichida topilgan bo'sh joy belgilarini CSS qoidasi white-space:nowrap bilan o'rashiga yo'l qo'ymaydi. Oddiy Html faylini yaratish va matnning istalgan qismini quyidagi teglarga qo'shish orqali hammasi qanday ishlashini o'zingiz sinab ko'rishingiz mumkin:

Omad sizga! Tez orada blog sayti sahifalarida ko'rishguncha

Sizni qiziqtirishi mumkin

Ro'yxat uslubi (turi, tasviri, joylashuvi) - Html kodidagi ro'yxatlar ko'rinishini sozlash uchun Css qoidalari
Sichqoncha kursorini o'zgartirish uchun Z-indeks va CSS Kursor qoidasi yordamida joylashishni aniqlash
To'ldirish, chekka va chegara - o'rnatilgan CSS ichki va tashqi chekkalar, shuningdek, barcha tomonlar uchun ramkalar (yuqori, pastki, chap, o'ng)
CSS nima uchun, kaskadli uslublar jadvallarini qanday ulash mumkin HTML hujjati va bu tilning asosiy sintaksisi
CSS-da suzish va tozalash - blokirovka qilish vositalari
CSS - bu nima, kaskadli uslublar jadvallari qanday ulanadi HTML kodi Style va Link yordamida
O'lchov birliklari (piksellar, Em va Ex) va CSS-dagi meros qoidalari
Teg, sinf, Id va universal selektorlar, shuningdek zamonaviy CSS-dagi atribut selektorlari
Pozitsiya (mutlaq, nisbiy va qat'iy) - joylashishni aniqlash usullari HTML elementlari CSS-da (chap, o'ng, yuqori va pastki qoidalar)
CSS-dagi fon (rang, joy, rasm, takrorlash, biriktirma) - fon yoki fon rangini o'rnatish uchun hamma narsa Html rasmlar elementlar