Matnni tekislash xususiyati qanday qiymatlarni olishi mumkin. Bezak matni CSS bilan
Salom, aziz blogi o'quvchilari veb-sayti. Ushbu maqolada biz CSS uslubini belgilash uslublari asoslarini o'rganishni davom ettiramiz va HTML matni dizayniga mo'ljallangan vertikal, matnli tekislik, matnli yo'nalishda va boshqa ba'zi bir qismini ko'rib chiqamiz.
CSS-dan foydalanib matnni tekislash
Keling, matnli elementlardagi matnli xususiyatlarning uslub atributlaridan boshlaylik. Dastlabki atributni almashtirish (P) kabi HTML elementlarining tarkibini muvofiqlashtirish uchun ishlatiladigan matnni tekislash xususiyati bilan boshlaylik.
Mulk uslubi matnni tekislang. Belgilamoq gorizontal matnni tekislashva faqat to'rtta qiymat:
Ushbu qoidaning mavjud qiymatlari mos ravishda quyidagilarni belgilaydi: chap tomonda - chap tomonda - o'ng tomonga, markazda - markazda - sahifaning kengligi (chap va o'ng tomonda) so'zlar orasidagi masofaning ko'payishi). Masalan, ushbu moddaning matni matnning kengligiga teng (agar siz hatto chap va o'ng va o'ng tomonda bo'lsa ham): Rasmiy a'lis orqali quyidagilar yordamida: qoidani oqlash.
Odatiy bo'lib, gorizontal tekislash chap qirrada amalga oshiriladi, shuning uchun agar boshqa elementlarda boshqa xilma-xillik ko'rsatilmagan bo'lsa, chap tomoni kerak emas.
Xususiyatlardan foydalanish misollari:
Quyidagi CSS mulki matn-identifikator. Belgilamoq chekinmoqMasalan, P.-paragraf yorlig'idagi matn uchun Ushbu qoida, shuningdek, matnga muvofiq ravishda faqat blok bloklari uchun qo'llaniladi. Sintaksis:
Bu erda mutlaq va nisbiy miqdorlar kiritilgan. Mutlaq qiymatlari (px - piksel, EM, EX, EX va boshqalar) ortiqcha belgisi va minus belgisi bilan ko'rsatilishi mumkin. Nisbiy qiymati odatda foiz (%). Nisbiy qiymati matnga tayinlangan hududning kengligidan hisoblanadi. Shunday qilib, CSS matnli ma'lumotnoma: 50% bu chiziqning uzunligi yarim uzunligiga teng qizil satrning yarmiga teng. Odatiy bo'lib, "qizil satr" yozuvi nolga teng. Misol:
Keyingi, vertikal tekislash - mulkni ko'rib chiqing o'tgach. Ushbu mulk barcha HTML elementlari uchun allaqachon qo'llaniladi va deyarli har bir kishi kichik harflarni ularning bazasi bo'yicha tegishli matn bilan moslashtirishni anglatadi. Barcha tarkib barcha tarkibni vertikal bilan tenglashtiradigan TD va Teg teglar bilan qo'shimcha ravishda. Sintaksis:
Har bir qiymatni ko'rib chiqing. Ko'proq o'qing:
- ota elementining asosiy satrida matnli bo'laklarni tekislash. Bu standart qiymati;
- sub-matnli parcha, pastki indeks yoki ota-ona elementi uchun almashtirish shaklida tasvirlangan;
- super - matnli parcha, eng yaxshi indeks yoki ota-ona elementiga qoyil qolish shaklida tasvirlangan;
- yuqoridagi matnning parchalanishini ota-ona elementi yuqori chetidagi tekislash;
- matn-TOP - parchani ota-ona elementi matnining yuqori chetida tekislash;
- o'rta - ona elementi markazidagi matnli bo'laklarning markazini tekislash;
- pastki - matnli qismning pastki chetidagi pastki qismni tekislash;
- matn-pastki - parchani ota-ona elementi matnining pastki chetida tekislash;
Quyidagi rasmda siz Internet Explorer 11 brauzerida vertikal tekislikda ishlatiladigan mulkning turli qiymatlari bo'yicha test qismlarining harakatlarini ko'rishingiz mumkin:
Yuqoridagi qiymatlarga qo'shimcha ravishda siz raqamli qiymatlarni belgilashingiz mumkin. Shunday qilib, CSS vertikal tomon yo'nalishi: 0 qoida vertikal jihatidan tekislash: bazaviy yozuvlar yozish bilan bir xil degani bo'ladi. Va vertikal ravishda tekislash qoidasi: 10px matnni dastlabki 10 pikselga aylantiradi. Ofset matniga qiymatni minus bilan belgilash kerak.
Shift shuningdek o'lchov birliklarida, masalan, em va sobiq yoki foizda belgilanishi mumkin.
Vertikal tekislikda, foydalanish qiymatlari bo'yicha jadval hujayralarining tarkibini vertikallashtirish uchun:
- yuqori - hujayraning yuqori chegarasi tarkibini tekislash;
- pastki qism - hujayraning pastki qismidagi tarkibni tekislash;
- o'rta - hujayra markazida joylashgan (standart ishlatilgan).
Istalgan natijaga erishish uchun odatda vertikal-tekislikdagi xususiyat qiymatlarining turli xil qiymatlari bilan tajriba o'tkazish kerak. Ko'plab mumkin bo'lgan qadriyatlar turli xil holatlarda juda boshqacha natijalarga olib keladi.
Oq rangli va Word-WripApp parametrlari satr yorilishini boshqarish
HTML sahifasida kosmik belgilarni namoyish qilish uchun javob beradigan navbat optionsi.
Biz bilganimizdek, sukut bo'yicha brauzer butun ketma-ket bo'shliq belgilarini birlashtiradi: bo'sh joy, struktsiya va yorliq ramzlari, bir joyda. Istisno "Oldindan" yorlig'iUnga joylashtirilgan matnda barcha bo'shliqlar mavjud.
Oq bo'shliq mulk quyidagi sintaksisga ega:
Odatiy qiymat normal qiymat ishlatilishi aniq, yuqorida tavsiflangan barcha narsalar birlashtirilgan barcha shartnomalar birlashtiriladi va torlarning uzatilishi avtomatik ravishda o'rnatiladi.
"Oldindan" qiymatidan foydalanib, "oldindan" yorliqdan foydalanganda to'liq o'xshashlik bo'ladi. Brauzer barcha qo'shimcha bo'shliqlarni hisobga olgan holda sahifani ko'rsatadi, chunki ular ishlab chiquvchi tomonidan qo'shilgan. Agar matnli satr juda uzun bo'lsa, gorizontal aylanuv paneli qo'shiladi.
Nowrap qiymatida satrlarni va matnni bitta satrda o'tkazishi uchun brauzerni taqiqlaydi. Yagona bittasi "BR" yorlig'ini qo'shish, matnni yangi satrga o'tkazishga imkon beradi.
Oldindan belgilangan qiymat satrlarning bo'shliqlari va to'plamlarining barcha ketma-ketligini saqlaydi, ammo agar satr belgilangan joyga joylashtirilmasa, brauzer matnni yangi satrga o'tkazadi.
Xo'sh, to'g'ridan-to'g'ri qiymat bo'sh joyni bitta joyga aylantiradi, satr tarjimalari saqlanadi va brauzer gorizontal aylanmaslik uchun juda uzoq iplarni sindira oladi.
Foydalanish namunasi:
Keyingi, ko'rib chiqing word-WriApp parametrQaysi bir pits qo'yilmaydigan joyga joylashtirilmagan yoki yo'q. Ushbu mulk ko'pincha ishlatilmaydi, lekin ba'zida bu qila olmaydi:
word-WRAP: Oddiy | Burilish so'zi
Oddiy qiymat brauzerni faqat bo'sh joylarga bo'linishi mumkinligi va bu brauzerning odatiy xatti-harakati ekanligini ko'rsatadi. Va tanaffus-so'z qiymati brauzerga so'zlar ichidagi qatorlarni kiritishga imkon beradi. Misol:
Soya parametrlari matn - matnli soya mulki
CSS3 standartidagi turli bezaklarni sevuvchilar uchun matnda soyada so'rash mumkin. Matn-soyali mulkdan malakali foydalanish veb-sahifani sezilarli darajada qayta tiklashga imkon beradi. Sintaksis:
Hech qanday qiymat matnning qo'shimchalarini olib, sukut saqlaydi.
Rang soyasi Mavjud CSS formatini o'rnatadi va majburiy parametr emas. Odatiy bo'lib, soyaning rangi matnning rangiga to'g'ri keladi.
Gorizontal soya siljishi Qo'llab-quvvatlanadigan CSS o'lchov birligida belgilashingiz mumkin. Ijobiy qiymat bilan soya matnning o'ng tomonida, salbiy - chapga. Nol qiymat matn ostida soyani to'g'ri chiqaradi va soya xiralashgan bo'lsa, mantiqiy.
Vertikal soya siljishi Qo'llab-quvvatlanadigan CSS o'lchash birligida siz ham spetsifikatsiya qilishingiz mumkin. Ijobiy qiymat bilan soya matndan pastda, salbiy - yuqorida. Nol qiymati soyani matn ostida joylashtiradi.
Har qanday o'lchov to'plamining har qanday bo'limida va soyali loy radiusi. Ushbu qiymat qanchalik ko'p bo'lsa, shunchalik kengroq qattiqroq bo'ladi va qattiqroq bo'ladi. Agar ushbu parametr o'rnatilmagan bo'lsa, loyning qiymati nolga teng. Silliqma algoritm odatda turli xil brauzerlardan farq qiladi, soyaning turi brauzerga qarab biroz farq qilishi mumkin.
Modul CSS matni Manba matnini formatlangan va uzatish uchun formatlangan qatorlarga boshqaradigan CSS funktsiyalarini tavsiflaydi. CSS turli xil xususiyatlari registraturani o'zgartirish, bo'shatish, uzatish qoidalari va matn uzatish va liniyalar va chiziqlar va yozuvlarni boshqarish ustidan nazoratni ta'minlaydi.
Matnning asosiy birligi ramz. Biroq, yozma tizimlar har doimgidek oddiy emas, chunki bu belgi aslida bu atama ishlatilgan kontekstga bog'liq. Masalan, Koreyaning yozish tizimida, haroratli bo'g'inni ko'rish (masalan, 한 \u003d han) ramz deb hisoblash mumkin. Biroq, kvadrat belgisi haqiqatan ham bir nechta harflardan iborat bo'lib, ularning har biri kelib chiqishi (masalan, ㅎ \u003d ㅎ \u003d ㅏ \u003d n, ㄴ \u003d n) va ularning har biri ham ramz deb hisoblanishi mumkin.
1. Matnni qayta ishlash: Matn-transrikitar mulk
Matnni o'zgartiradigan mulk stilistlari matnli matn. Bu asosiy tarkibga ta'sir qilmaydi va nusxa ko'chirish operatsiyasining mazmuniga ta'sir qilmasligi kerak va oddiy matnni joylashtirmasligi kerak.
Mulk meros qilib olingan.
Sintaksis
Matnni o'zgartirish: yo'q; Matnni o'zgartirish: bosh harflar; Matnni o'zgartirish: katta harf; Matnni o'zgartirish: kichik harf; Matnni o'zgartirish: meros olish; Matnni o'zgartirish: boshlang'ich;
2. Ishlov berish joylari va satr o'tkazmalari: oq-bo'sh joy mulki
Oq bo'shliq mol-mulk elementlar ichidagi so'zlar va uzatish liniyalari orasidagi bo'sh joyni.
Mulk meros qilib olingan.
oq bo'shliq. | |
---|---|
Qiymatlar: | |
Normal | Standart qiymati. So'zlar orasida faqat bitta bo'sh joy qo'yilgan, qo'shimcha joylar tashlanadi. Matn faqat kerak bo'lsa, faqat uzatiladi. |
Yangilamoq | Satr o'tkazmalarini taqiqlaydi, arizadan tashqari . |
Oldindan. | Matndagi bo'sh joylar e'tiborga olinmaydi, brauzer qo'shimcha joylar va chiziqlar aks etadi. |
oldindan o'ram | Matndagi bo'shliqlarni matnda saqlaydi, qatorlar kerak bo'lganda qatorlar paydo bo'ladi. |
Oldingi chiziq | Qo'shimcha bo'shliqlarni olib tashlaydi, hollarda hollarda . |
Bo'shliq bo'shliqlar. | Xulq-atvor faqat oldindan o'ralgan, bundan mustasno, faqatgina amalga oshirilmagan bo'shliqlarning ketma-ketligi har doim bo'lib o'tadi, shu jumladan chiziq oxirida; Har bir asossiz maydondan keyin, shu jumladan bo'sh joylar oralig'ida qatorlar mavjud. |
boshlang'ich | |
meros qilib oling. |
Sintaksis
Oq bo'shliq: normal; Oq fazion: yangi; Oq bo'shliq: oldindan; Oq bo'shliq: oldindan o'rash; Oq bo'shliq: oldingi chiziq; Oq bo'shliq: buzilish bo'shliqlari; Oq bo'shliq: meros olish; Oq bo'shliq: boshlang'ich;
3. Tab sozlamalari: yorliq o'lchami
Tab o'lchamidagi mol-mulk yorliqning qiymatini o'zgartirish uchun ilova tugmachasidan foydalanib o'zgartirish uchun ishlatiladi. Mulk qiymatlari uchgacha bo'lgan uchta qiymatlardan biri, normal yoki yangi xususiyatlari oq bo'shliq bo'lsa, mulkiy qiymatlariga e'tibor berilmaydi.
Faqat elementlar uchun ishlaydi
Mulk meros qilib olingan.
Sintaksis
TAB-OLDIN: 0; TAB-HAQIDA: 10PX; TAB-O'lchov: meros olish; Chaqam o'lchamdagi: boshlang'ich;
4. Boshqaruv satr va so'z chegaralari
Chiziq sathidagi tarkib satrlarga bo'linganda, u chiziqli bloklarga bo'linadi. Bunday qism qator bo'shliq deb ataladi.
Satr qator yorilishining aniq elementlari tufayli, masalan, yangi liniya yoki yorliqning ramzi tufayli to'xtatiladi
Blokning boshi yoki oxiri majburiy qator bo'shliqdir.
Agar brauzer tarkibiga kirish uchun qo'shimcha qatorlar tanaffuslarini keltirib chiqarsa, bu tarkib tarkibiga kira oladi - bu yumshoq transfer.
4.1. Harakatlar uchun qoidalar qoidalari: so'z ochilish xususiyati
So'zni buzadigan mulk harflar orasidagi yumshoq uzatish imkoniyatlarini aniqlaydi, i.e. Matn qatorlarini sindirish joiz bo'lganda. Xususan, tegishli tifografik konstruktsiya-ekran va / yoki raqamlar o'rtasida yumshoq uzatilish imkoniyati mavjudligini nazorat qiladi. Bu bo'sh joylar bo'yicha yaratilgan yumshoq transferning imkoniyatlarini tartibga soluvchi qoidalarga ta'sir qilmaydi.
Mulk meros qilib olingan.
Sintaksis
Word-tanaffus: normal; Word-tanaffus: Break-barchasi; Word-tanaffus: barchasi; Word-tanaffus: meros olish; Word-tanaffus: Boshlang'ich;
4.2. Satr qatorlari: chiziqni kesish
Chiziq-parcha mulk element ichida ishlatiladigan qatorlarni, xususan, pulni tinish belgilari va belgilar bilan o'zaro ta'sir qilish qoidalarini belgilaydi.
Mulk meros qilib olingan.
chiziq | |
---|---|
Qiymatlar: | |
Avtomatik. | Brauzer satr uzunligiga qarab o'zgarishi mumkin bo'lgan cheklovlar to'plamini belgilaydi, masalan, qisqa qatorlar uchun kamroq ryurlar qoidalaridan foydalanish uchun. Standart qiymati. |
Bo'shashmasdan. | Satr o'tkazish qoidalarining eng kam cheklangan to'plamidan foydalangan holda matnni buzadi. Odatda, masalan, gazetalarda qisqa chiziqlar uchun ishlatiladi. |
Normal | Satr o'tkazish qoidalarining eng keng tarqalgan to'plamidan foydalanib matnni buzadi. |
Qat'iy. | Qatorni uzatish qoidalarining qat'iy to'plamidan foydalangan holda matnni buzadi. |
boshlang'ich | Standart mulk qiymatini belgilaydi. |
meros qilib oling. | Ota-ona elementidan mulkning qiymatini meros qilib oladi. |
Sintaksis
Chiziq: avtoulov; Chiziqni kesish: bo'shashish; Chiziqni kesish: normal; Satr: qat'iy; Chiziqni kesish: meros olish; Chiziqni kesish: boshlang'ich;
4.3. O'tkazmani tashish: defis mollari
Defenlar mulkni matnli satrda yumshoq uzatish qobiliyatini yaratishga ruxsat berilishini aniqlaydi.
Vitektorlarni tashish - bu odatda paragraflarning joylashini yaxshilash uchun sindirish taqiqlangan so'zlarning yorqin bo'lishidir. Qoida tariqasida so'zlarning bo'linishi loy yoki morfess chegaralarida va ajratish bo'yicha vizual ko'rsatmalar bilan yuzaga keladi (odatda defisni kiritish bilan -). Ba'zi hollarda, pul o'tkazmalari ham yozish so'zlarini o'zgartirishi mumkin. Qanday bo'lmasin, so'zlarni uzatish faqat taqdim etish samaradorligi: u hujjatning tarkibiga ta'sir qilmasligi yoki matnning tarkibiga ta'sir qilmasligi yoki qidirish yoki qidirishni tanlash kerak.
CSS matni 3-darajali so'zlarni topshirish uchun aniq qoidalarni aniqlamaydi, shuning uchun Til uchun mos keladigan pul o'tkazmasini tanlash tavsiya etiladi.
Mulk meros qilib olingan.
defislar. | |
---|---|
Qiymatlar: | |
hech biri | So'zlar uzatilmaydi, hatto bu so'z ichidagi belgilar pul o'tkazmaning imkoniyatlarini aniq belgilab qo'yadi. |
Qo'llanma | So'zlar faqat so'zlarni uzatish imkoniyatini aniq ko'rsatadigan so'zlar ichida belgilar mavjud bo'lgan joylarda o'tkaziladi. Standart qiymati. |
Avtomatik. | So'zlar uzatish imkoniyatlari bilan tartibli defisen tomonidan aniq ko'rsatilganlar bilan bir qatorda transfer tiliga mos keladigan pul o'tkazish imkoniyatlari bilan buzilishi mumkin. Tarkibingizdagi tilni belgilashingiz kerak (masalan, Lang HTML atributi yoki HTTTP tarixi sarlavhasidan foydalanib, to'g'ri avtomatik Word Pulni olish uchun. |
boshlang'ich | Standart mulk qiymatini belgilaydi. |
meros qilib oling. | Ota-ona elementidan mulkning qiymatini meros qilib oladi. |
Sintaksis
Defislar: yo'q; Defislar: qo'llanma; Defiss: avtoulov; Defis: meros olish; Defislar: boshlang'ich;
4.4. To'plash: pastga tushirish / Word-rusumli mulk
To'plangan maskani (yoki uning eskirgan Word-rapap) yoki chiziqli blokni pasayishining oldini olish uchun ajralmas satrda ajralmas satrni hal etilmagan ball bilan to'ldirish mumkinligini ko'rsatadi. Oq bo'shliq mulkni uzatish imkonini beradigan ishda ishlaydi.
Mulk meros qilib olingan.
haddan tashqari gumbaz, so'z-o'rash | |
---|---|
Qiymatlar: | |
Normal | Chiqarsalar faqat ruxsat etilgan tafsilotlar faqat buzishi mumkin. Standart qiymati. |
Break-so'z. | |
Har qanday joyda. | Chiziqda boshqa maqbul kashfiyot ballari bo'lmasa, belgilarning ajralmas punktida o'zboshimchalik bilan buzilishi mumkin. Bu faqat manba matniga ta'sir qilmasdan vizual ko'rinishga ta'sir qiladi. Satrning chog'ida uzatish belgisi qo'shilmaydi. Har qanday joyda taqdim etilgan yumshoq uzatish imkoniyatlari minimal tarkibiy tarkibni hisoblashda hisobga olinadi. |
boshlang'ich | Standart mulk qiymatini belgilaydi. |
meros qilib oling. | Ota-ona elementidan mulkning qiymatini meros qilib oladi. |
Sintaksis
OverfFlow-o'rash: normal; Overfo't-ni o'rab olish: ochilish so'zi; Overfo'p-ni o'rab olish: har qanday joyda; Overflow-o'rash: meros olish; OverfFlow-o'rash: Boshlang'ich;
5. astar va qatorlarni to'xtatish
O'rnatilgan tarkib chiziqli birlikda qanday tarqalishini tekislash va qo'zg'atish
5.1. Matnni tekislash uchun xulosa: Matnni tekislash xususiyati
Matn bloki - bu chiziq bloklari to'plami. Matnni tekislash xususiyati matnni tekislash va matnga tekislangan xususiyatlarni o'rnatadi va har bir chiziqli blokda qatorlar satrda chiziqlar chiziqning boshlang'ich tomonlariga nisbatan mos keladi. Nationsifikatsiyadan tashqari yoki o'yin-ota-onalarga tegishli bo'lgan qadriyatlar matnga moslashtirilgan va avtoulovning tekislanishi bilan tiklanadi.
Mulk meros qilib olingan.
matnni tekislang. | |
---|---|
Qiymatlar: | |
Boshlash. | Tarkibi sathidagi tarkib chiziq blokining dastlabki chetiga mos keladi. Standart qiymati. |
Oxiri. | Qator darajasidagi tarkib chiziqli birlikning oxirgi chetida mos keladi. |
Chapda qoldi. | Qator darajasidagi tarkib chiziqlar blokining chap chetiga mos keladi. Vertikal yozuv tizimlarida u matnning yo'nalishi bo'yicha yo'naltirilgan jismoniy yoki pastki bo'ladi. |
To'g'ri | Qator darajasidagi tarkib chiziqlar blok satrining o'ng tomoniga mos keladi. Vertikal yozuv tizimlarida u matnning yo'nalishi bo'yicha yo'naltirilgan jismoniy yoki pastki bo'ladi. |
Markaz | Qator darajasidagi tarkib chiziq blokida joylashgan. |
Asoslang. | Matn liniya maydonini aniq to'ldirish uchun chiziqli blokning kengligi bilan tekislanadi, ona elementining chap va o'ng qirralariga qarshi. Avvaliga matnni tekislashda boshqacha ko'rsatilmagan bo'lsa, avval shikastlanish oldidan yoki blokning oxiri topilgunga qadar. So'zlar va harflar orasidagi bo'shliqlar barcha qatorlarning uzunligi teng bo'lishi uchun taqsimlanadi. Turli xil brauzerlar harflar orasidagi so'zlar va intervallar orasidagi hamrohni ko'paytirishi mumkin. |
Mudgatni oqlash. | So'nggi satrni tekislashda, shuningdek, oqilona tekislangan va matnga tekislangan matnni o'rnatadi. |
Match ota-ona. | Qiymat merosga ega bo'lganidek harakat qiladi, faqat meros qilib olingan start yoki end qiymat yo'nalishi yo'nalishi (yoki blok bo'lmagan manbaning, agar ota-ona bo'lmasa) chap yoki o'ngdagi hisoblangan qiymatga olib keladi. |
meros qilib oling. | Ota-ona elementidan mulkning qiymatini meros qilib oladi. |
Sintaksis
Matbuotga rioya qiling: Boshlash; Matbuotga qarshi: tugaydi; SMS-rusuk: chapda; Matnni tekislash: to'g'ri; Matn-a'lpi: markazi; Matnni tekislang: oqilomlang; Matnni tekislash: barchasi oqilon; Matbuotga qarshi: o'yin-ota; Matnni ag'darish: meros;
5.2. Odatiy matnni tekislash: Matnni tekislash - mulk
Matnni tekislash - barcha mulk - bu matnni tekislash xususiyatining qisqartirilgan versiyasi blokli konteynerning barcha tarkibiy qismlarini, blokirovka qilingan oxirgi qiymatdan istisno qilinishini aniqlaydi. Boshlanish, tugatish, chap, markaziy, markaziy, oqilona va o'yin-ota-onalarni qabul qiladi.
Mulk meros qilib olingan.
Sintaksis
Matnni tekislash - boshlang'ich; Matnni tekislash: oxiri; Matnni tekislash - chap; Matnni tekislash: to'g'ri; Matnni tekislash - barchasi; Matnni tekislash - barchasi: Matn-alatign - barchasi: Matnni tekislash - hammasi: meros;
5.3. Oxirgi chiziqni tekislash: Matn-tekislash xususiyati
Matnli tekislangan mulk majburiy qismdan oldin blok yoki satrning oxirgi chizig'i darhol mos keladiganligini tavsiflaydi.
Agar avtoulov belgi qo'yilgan bo'lsa, tegishli liniyadagi tarkibiy qismlar faqat matnni tekislash uchun moslashtirilsa, faqat blokning boshida mos kelmaydi. Qolgan barcha qadriyatlar matnga muvofiqlashtirilgan deb ta'riflanadi.
Avtomatik, boshlanish, oxiri, chap, markaziy, markaziy, oqilona va o'yinni oladi.
Mulk meros qilib olingan.
Sintaksis
Matnni tekislash: avtoulov; Matnni tekislash: boshlang'ich; Matnni tekislash: tugaydi; Matnni tekislash: chapda; Matnni tekislash: o'ng; Matnni tekislash: markaz; Matnni tekislash: asoslang; Matnni tekislash: Ota-onalar;
6. Intervallar
CSS-laringizning so'zlari va harflardagi so'zlar va harflardagi xususiyatlardan foydalangan holda so'zlar va tipografik belgilar orasidagi intervallarni boshqarishga imkon beradi.
6.1. So'zlari orasidagi intervallar
Kaloslash xususiyatlari so'zlar orasidagi qo'shimcha oraliqni belgilaydi.
So'zlar orasidagi intervallarni o'rnatadi. Siz ijobiy va salbiy qiymatlardan foydalanishingiz mumkin. So'zning salbiy qiymati bilan bir-birlariga engillashtirilishi mumkin.
Matnni tekislash xususiyati qiymati kengligi kengligida matnli xususiy mulkning qiymatiga ta'sir qiladi.
Mulk meros qilib olingan.
Sintaksis
Word-comping: normal; Word-kalati: 1px; Word-Forcing: 0,2em; Word-fundami: 50%; Word-oraliq: meros olish; Word-comping: Dastlabki;
6.2. Kuzatuv: Xat-harflararo mulk
Maktubdagi harflar qo'shimcha vaqt oralig'ini yoki kuzatuvi bilan qo'shni trifografik belgilar orasiga kiritishni aniqlaydi. Bir-biriga bog'liq interval - bu va kosmikka qo'shimcha. Ushbu mos keladigan qoidalarga qarab, foydalanuvchi agentlari qo'shimcha ravishda matnni tekislash uchun tintollbolik bo'linmalari orasidagi masofani ko'paytirish yoki kamaytirishlari mumkin.
Mulk meros qilib olingan.
Sintaksis
Xat-limpting: normal; Xat-laynmi: 0,1em; Xat-laynmi: 2px; Xat-layn: meros olish; Xat-xashak: boshlang'ich;
7. Birinchi satrni tuzatish: matnga ajratiladigan mulk
Matnli ajratish mol-mulki blokdagi o'rnatilgan tarkibdagi qatorlarga qo'llaniladi. Ajratma chiziq blokining dastlabki chetiga qo'llaniladigan maydon sifatida qayta ishlanadi.
Agar rasm blok elementining birinchi satrida mavjud bo'lsa, u matnning qolgan qismida harakatlanadi.
Mulk meros qilib olingan.
Sintaksis
Matn-yozuv: 5mm; Matn-indent: 20px; Matn-yozuv: 5%; Matn-indence: 2em har bir liniya; Matn-yozuv: 2em osilgan; Matn-yozuv: meros olish; Matn-indence: Dastlabki;
CSS matnga muvofiq mulki gorizontal ravishda matnli tekislash, shuningdek rasmlar va boshqa elementlar uchun javobgardir. Xususiyatlar 4 ta mumkin bo'lgan ixtisosli parametrlarga ega.
CSS textali sintaksis
... Matnni tekislang: markaz | Oqlamoq | Chap | To'g'ri | meros qilib oling.; ...
- mintaqaning markazida joylashtirish (masalan, bu hududning kengligi 500 pikselning kengligi, bu 250 pikselning tekisligi borligini anglatadi)
- asosli - mintaqaning butun kengligi bo'ylab matnni cho'zish
- chap - chap chetiga tekislash
- o'ng tomonda o'ng qirrali tekislash
- meros - ajdodning qiymatini (ota-ona) oling
Ko'pincha, bu xususiyatlar bloklarda ishlatiladi.
Eslatma:
Vertikal tekislash uchun javobgar bo'lgan vertikal tekis mulk mavjud.
HTML-da matnni tekislash
1-misol 1.
Signalni chap tomonga tekislash. Sukut bo'yicha harakat qiling.
Выравнивание текста по левому краю
Выравнивание текста по левому краю
Пример №2. Выравнивание текста и картинки по центру
Выравнивание текста по центру. Зачастую используются для заглавия статей или для вывода картинок по центру.
Выравнивание текста по центру
На странице преобразуется в следующее
Выравнивание текста по левому краю
Пример №3. Выравнивание текста по правому краю
Выравнивание текста по правому краю.
Выравнивание текста по правому краю
На странице преобразуется в следующее
Выравнивание текста по правому краю
Пример №4. Выравнивание текста по ширине всей области
Выравнивание текста по всей ширине. Получается, что выравнивание происходит и полевому, и по правому краю. Браузер автоматически добавляет пробелы.
На странице преобразуется в следующее
Выравнивание текста по ширине всей области
Иногда text-align: justify; может не работать. Это связано с наследованием и даже с работой браузера. В целом не рекомендуется использовать этот параметр.
ПримечаниеВместо свойства text-align можно также использовать атрибут align , который пишется вместе с тегом. Его можно использовать у различных тегов. Например:
Выравнивание по центруВыравнивание текста по ширине всей области
... ...
Разница в тегах
В том, что последний делает переход на новую строку (вертикальный отступ), а div не делает.
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+ |
Краткая информация
Версии CSS
Значения
center Выравнивание текста по центру. Текст помещается по центру горизонтали окна браузера или контейнера, где расположен текстовый блок. Строки текста словно нанизываются на невидимую ось, которая проходит по центру веб-страницы. Подобный способ выравнивания активно используется в заголовках и различных подписях, вроде подрисуночных, он придает официальный и солидный вид оформлению текста. Во всех других случаях выравнивание по центру применяется редко по той причине, что читать большой объем такого текста неудобно. justify Выравнивание по ширине, что означает одновременное выравнивание по левому и правому краю. Чтобы произвести это действие браузер в этом случае добавляет пробелы между словами. left Выравнивание текста по левому краю. В этом случае строки текста выравнивается по левому краю, а правый край располагается «лесенкой». Такой способ выравнивания является наиболее популярным на сайтах, поскольку позволяет пользователю легко отыскивать взглядом новую строку и комфортно читать большой текст. right Выравнивание текста по правому краю. Этот способ выравнивания выступает в роли антагониста предыдущему типу. А именно, строки текста равняются по правому краю, а левый остается «рваным». Из-за того, что левый край не выровнен, а именно с него начинается чтение новых строк, такой текст читать труднее, чем, если бы он был выровнен по левому краю. Поэтому выравнивание по правому краю применяется обычно для коротких заголовков объемом не более трех строк. Мы не рассматриваем специфичные сайты, где текст приходится читать справа налево, там возможно подобный способ выравнивания и пригодится. auto Не изменяет положение элемента. inherit Наследует значение родителя. start Аналогично значению left , если текст идёт слева направо и right , когда текст идёт справа налево. end Аналогично значению right , если текст идёт слева направо и left , когда текст идёт справа налево.HTML5 CSS2.1 IE Cr Op Sa Fx
Ushbu misol natijasi rasmda keltirilgan. biri.
Anjir. 1. Safari brauzeridagi matnli hizalash
Internet Explorer 7.0 versiyasiga, boshqa bir brauzerlarga qaraganda bir oz farq qiladi, nafaqat matn, balki blokirovka qilingan (2-rasm).
Anjir. 2. Internet Explorer 7 brauzeridagi matn
Ob'ekt modeli
hujjatlar.gettelementbyid ("Elementme") .style.text
Brauzerlar
Ya'ni 7.0 versiyasiga nafaqat blok elementi tarkibiga, balki elementning o'zi.
Matn-tekislangan mulk ( hTML hiptali bilan aralashtirmang) Blok yoki satrning oxirgi chizig'ini majburiy bo'shliqqa tenglashtiradi. Bu juda muhim, chunki paragrafning so'nggi satrida, qoida tariqasida, joyni to'ldirish uchun etarli matn mavjud emas.
Ushbu maqolada biz matnga tekislangan mulkka, shu jumladan qabul qilingan va brauzerni qo'llab-quvvatlash qadriyatlari bo'yicha barcha jihatlarni ko'rib chiqamiz.
Foydali va qabul qilingan qiymatlardan foydalaning
Matn-tekislangan mulkni qo'llash oson. Mana, matnning o'ng tomonidagi oxirgi qatorini tekislash uchun kodning parchalanishi:
Intro-grafik (matnga risola: // ya'ni va chet ellik uchun zarur: o'ngda;)
Mulk etti qiymatga ega bo'lishi mumkin. Siz, ehtimol, HTML matnini tekislashingiz mumkin: chap, o'ng va markaz. Ular matnni o'ng qirrali va idishning o'rtasiga joylashtiradilar.
Quyidagi misol ushbu uchta qiymat o'rtasidagi farqlarni ko'rsatadi:
Misolni ko'rish
To'rtinchi qiymat, oqilona satrni shunday konteynerning butun kengligi bo'ylab bir tekis taqsimlanadigan tarzda taqsimlanganligi uchun oxirgi satrni oqlaydi. Bunga so'zlar orasidagi bo'sh joylarni qo'shib erishiladi. Matn soniga qarab, ushbu mulk oxirgi qatordagi bo'sh joyni to'liq to'ldirish uchun ishlatilishi mumkin, ammo so'zlar orasida juda katta bo'shliqlar bo'lmaydi.
Ikkinchi xatboshidagi matn kengligida ham tarqatiladi, ammo oxirgi qatorda faqat bitta so'z mavjud bo'lsa, u chapda joylashgan.
Misolni ko'rish
Chap chetidagi oxirgi satrni tekislash chapdan o'ngga o'qilgan tillar uchun mos ( Lt.), Lekin RTL Tillar 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 chekka yo'naltirilganligini boshlashingiz mumkin. Bu shuni anglatadiki, siz matnni tekislash uchun boshlang'ich xususiyatni belgilash orqali siz matnni chap chetiga LTR tillari uchun va RTL tillari uchun o'ng tomonda joylashtirasiz.
Siz shuningdek, yozuv va o'qishni boshlaydigan qarama-qarshi tomondagi matnni moslashtirish uchun siz oxiridan foydalanishingiz mumkin. Bu LTR uchun to'g'ri qiymatga va RTL Tillar uchun chap tillarga mos keladi.
Misolni ko'rish
Ushbu avtoulovning standart qiymati. Agar siz undan foydalansangiz, oxirgi qatordagi matn HTML-matnning qiymatiga qarab, agar asosli qiymat unga belgilangan bo'lsa, muvofiqlashtirilgan. Aks holda, matn konteynerning kengligi bo'yicha taqsimlanadi, faqat matnni oqlash xususiyati taqsimlanadi. Aks holda, matn yozish va o'qish boshlanadigan chekka joylashtirilgan.
Muhim sharhlar
Matnni tekislash ishlariga, matnni tekislash xususiyati oqlash uchun o'rnatilishi kerak. Ammo bu qoida faqat ya'ni va chetida amalga oshiriladi. Firefox va xromda, mulk oqim oqilona ishlashi uchun va o'rnatilmagan holda ishlaydi. Quyidagi misolda matn chekka va ya'ni o'ng qirrali bilan belgilanishi kerak. Boshqa brauzerlarda paragraflarning so'nggi satrlari matnga tekislangan mulkning qiymatiga muvofiq joylashtiriladi va qolgan chiziqlar o'ng tomonda joylashtiriladi.
Demo versiyasini ko'rish
Agar biz HTML ni oqlashning matnning tekislangan qiymatini aniqlasak, natija juda jozibali ko'rinmaydi. Shuning uchun siz matnni kengligida taqsimlashni belgilab qo'yasiz.
Mulk, agar majburiy qism paragrafda ko'rsatilgan bo'lsa ham
Yoki shunga o'xshash narsa. Shuni yodda tutingki, bu mulk faqat eng ekstremal emas, balki belgilangan element ichida matnning barcha so'nggi satrlariga ta'sir qiladi. Masalan, agar maqola yoki divent ichidagi matnda uchta paragraf bo'lsa, ularning har birida oxirgi satr butun ota-onalar uchun belgilangan matnli tekislangan mulk qiymatiga muvofiq joylashtiriladi.
Agar siz faqat so'nggi tarkibni engillashtirishingiz kerak bo'lsa, siz tanlovlardan foydalanishingiz mumkin: oxirgi bola yoki: oxirgi tur. Kodni quyidagi misol sifatida quyida keltiring:
maqola (matnga muvofiq:) Maqolaning P: tipdagi (matnga tekislangan: o'ngda;)
Bu bizning maqolamizning oxirgi xatboshining oxirgi qismini o'ng qirrali haqidagi so'nggi satrini izlaydi. Qolgan chiziqlar HTML-matnning tekisligi qiymati bilan mos keladi.
Demo versiyasini ko'rish
Siz boshqa tanlovlar-dan foydalanishingiz mumkin: Hatto va: Holbuki, bir xillashishga g'alati.
Ba'zan paragraf faqat bitta qatordan iborat bo'lishi mumkin. Bu holda, agar siz qiymatlarni va matnni tekislash uchun va matnga tekislangan mulk uchun belgilagan bo'lsangiz, oxirgi mulk ustuvor vazifaga ega bo'ladi.
Quyidagi kod parchasini ko'rib chiqing:
p (Matbuot a'lpi:) p: N- darajali (2) (2) (matnga tekislangan: chapda;)
Agar ikkinchi xatboshida faqat bitta qatorga ega bo'lsa, matn chap chetiga qarab o'rnatiladi, chunki matnga mos keladi. Quyidagi demo versiyasi ushbu CSS kodini, shuningdek HTML-ning boshqa bir nechta misollarini ko'rsatadi.
Demo versiyasini ko'rish
Qo'llab-quvvatlash brauzerlari
Ushbu mulkni qo'llab-quvvatlash " Veb-platformaning eksperimental funktsiyalarini yoqing»Google Chrome va Opera-da 35 va 22 versiyalardan boshlab mos ravishda. Bu Chrome 47+ va Opera 34+ opera-da to'liq qo'llab-quvvatlanadi.
Ushbu mulkni Firefox-da ishlatish uchun siz prefiks -moz qo'shishingiz kerak bo'ladi. Boshlash va tugatish qiymatlari IE tomonidan qo'llab-quvvatlanmaydi. Shu bilan birga, chekka bu xususiyatni to'liq qo'llab-quvvatlaydi. Matnni tekislashni to'liq qo'llab-quvvatlamaydigan yagona mashhur brauzer Safari.