Css bosh harflari. CSS yordamida bosh harflar yaratish. HTML harflari va ular orasidagi CSS oralig'i
CSS bosh harflari matnlari boshidan oxirigacha bir xil ko'rinadigan bir xil turdagi dizayndagi monotonlikni buzishga yordam beradi.
Bosh harflar o'sha paytda va hozir
Solnomachilar qo'lyozma qo'lyozmalarida bosh harflardan foydalanganlar, ularning ba'zilari V asrga to'g'ri keladi. Bosh harflar 8—15-asrlarda ham qoʻllanila boshlandi, oʻshanda bosma mashinalar bosmachilikni sanoat darajasiga olib chiqish imkonini bergan. Matn boshida qo'lda yozilgan va bosma bosh harflar qo'yilgan. Ular ko'pincha xat atrofida joylashgan dekorativ naqsh bilan bezatilgan.
Ko'tarilgan va tushirilgan harflar bugungi kunda ham qo'llaniladi. Ularni gazetalar, jurnallar va kitoblarda, shuningdek raqamli bosib chiqarishda topish mumkin. Ko'tarilgan tur ba'zan cho'zilgan tip deb ataladi. Ular o'zlaridan keyingi matnning pastki qismi bilan bir tekisda joylashtiriladi. Tushgan harflar matnning yuqori qismi bilan bir tekisda, ba'zan matn mazmuni orqasidagi qatlamda joylashtiriladi yoki matnning qolgan qismi ularni o'rab oladi.
Ko'tarilgan harflarni aniqlash ancha oson, chunki ular matnning qolgan qismi bilan bir xilda joylashgan va odatda tashqi chetlari atrofidagi o'rashni o'zgartirishga hojat yo'q. O'tkazib yuborilgan harflar yanada nozik sozlashni talab qiladi. Agar siz avval ko'tarilgan belgilar qanday ishlanishini tushunsangiz, buni tushunishingiz osonroq bo'ladi.
Sinflardan foydalanish
CSS haqida allaqachon tushunchaga ega bo'lgan dizaynerlar birinchi bosh harf uchun alohida CSS sinfini yaratish kerakligini bilishadi.
Paragraf elementi va xatni yaratuvchi sinf uchun CSS kodi quyidagicha ko'rinadi:
p (shrift o'lchami: 20px; shrift-family: Georgia, "Times New Roman", Times, serif;).myinitialcaps (shrift-size: 48px; font-family: Didot;)
Va HTML kodi quyidagicha ko'rinadi:
Bizga nima beradi:
Juda oson ko'rinadimi? Haqiqatan ham ko'tarilgan maxsus harflarga qarab o'zgartirishlar kiritishingiz kerak bo'ladi, chunki har bir bosh harf uchun maxsus kerning talab qilinadi. Ko'tarilgan harflar va asosiy matn uchun shriftni tanlagandan so'ng, har bir ko'tarilgan harf uchun alohida sinflar yaratishingiz kerak. Quyida css-class.myinitialcapsi I va n orasidagi masofani kamaytirish uchun o'ngdagi chekka salbiy.
Myinitialcapsi (shrift o'lchami: 48px; shrift oilasi: Didot; chekka o'ng: -1px;)
Bu holda, "I" va "n" o'rtasida qo'shimcha bo'sh joy mavjud.
salbiy chegara bilan yangi sinf, shu jumladan, uni yaqinlashtiradi.
Yuqoridagi misoldagi ekran o'lchamlariga qarab, I va n birgalikda xiralashgandek ko'rinishi mumkin. Bu harflar oxiridagi seriflar bilan bog'liq. Yakuniy CSS uslublaringizni tanlashdan oldin saytingizni turli qurilmalarda sinab ko'ring va ularda CSS bosh harflari qanday ko'rinishini ko'ring.
Iqtibos va boshqa maxsus holatlar
Siz nafaqat matnning boshidagi harflarni kattalashtirishingiz mumkin. Harf yonida paydo bo'ladigan tirnoq belgilarining kattaroq versiyasini yaratish uchun boshqa sinfni amalga oshirishingiz mumkin. Bizning holatlarimizda qo'shtirnoq uchun 48 o'lchamli harflar sinfi ham, 20 pikselli matn sinfi ham mos kelmaydi. Aksincha, bu 30 piksel orasida bo'ladi. Qo'shtirnoqlarni optik jihatdan I bilan moslashtirish uchun ularni 4 piksel pastga siljitamiz:
Myinitialcapsq (shrift o'lchami: 30px; shrift oilasi: Didot; float: chap; chekka tepa: 4px;)
ncluding” manfiy marj bilan yangi sinf uni yaqinlashtiradi.
Har bir CSS bosh harflarini qo'shtirnoqlar bilan o'rnatishda juda ehtiyot bo'lishingiz kerak, shunda ularning kerning va hizalanishi atrofdagi belgilarga mos keladi. Masalan, T harfini chapga, paragrafning chetidan biroz uzoqroqqa siljitish kerak bo'ladi, shunda uning ko'ndalang chizig'i vizual ravishda tartibga mos keladi. C, G, O va Q kabi yumaloq harflar bilan ham xuddi shunday qilishingiz kerak bo'ladi. Ushbu misolda 20, 30 va 48 shrift o'lchamlari qo'llaniladi. Lekin siz tanlagan maxsus shriftlar asosida o'lchamlarni tanlashingiz kerak bo'ladi. Shuningdek, sayt ko'riladigan ekranlarning o'lchamlari va o'lchamlari.
Psevdoelementlar va psevdosinflar
CSS psevdo-elementidan foydalanib, paragraf elementiga ::birinchi harfni qo'shish orqali osongina baland harf yaratishingiz mumkin. Foydalanish: birinchi harf ( bitta yo'g'on nuqta bilan) eski brauzerlar uchun:
p (shrift o'lchami: 1,2em; shrift oilasi: Georgia, "Times New Roman", Times, serif; satr balandligi:2em; to'ldirish-pastki:1,2em;) p::birinchi harf (shrift o'lchami: 3.6em; matnni oʻzgartirish: katta harf; shrift-oila: “Monotip Bernard Condensed”, serif; chet-oʻng: 0.03em;).initialb (chet-oʻng:-0.1em;).initialn (chet-oʻng:-0.15) em;)
N va B harflarining kerningini hisobga oladigan CSS sinflarini o'z ichiga olgan HTML kodi shunday ko'rinadi...
Bosh harf, birinchi harf bosh harf.
Satr uzilishi bilan keyingi satrda boshlang'ich qopqoq yo'q.
n HTML manbasida bosh harf emas, balki birinchi harfning o'lchami 3,6em bo'lgan boshlang'ich bosh harf o'lchamiga qanday etib borishini ko'ring. Toza, a?
B qattiq qaytish bilan ut, va yangi paragraf boshlandi, yana bir boshlang'ich qopqoq har doim yaratilgan bo'ladi. O'zingizdan so'rashingiz mumkin, Buning uchun qanday hisob beraman? Juda yangi xatboshi boshida boshlang'ich qalpoq bo'lishi kerakmi? Xo'sh, mumkin. Lekin, siz uning shunday ko'rinishini xohlaysizmi va u mutlaqo shunday ko'rinishi kerakmi?
Paragrafning birinchi bosh harfi harfga aylantiriladi.
Satr uzilishidan keyingi birinchi harf bosh harfga aylantirilmaydi.
O E'tibor bering, HTML manba kodida birinchi harf katta harf bilan yozilmaydi, lekin u 3,6em belgiga aylantiriladi.
HAQIDA Biroq, majburiy chiziq uzilishidan keyin ham va har bir yangi paragrafning boshida har doim harf yaratiladi. O'zingizdan so'rashingiz mumkin: Buni qanday hisobga olishim kerak? Bu barcha holatlar uchun harflar qo'shishim kerakmi? Xo'sh, qila olasiz. Ammo bu kerakmi?
Pseudo-elementlar taqdim etadigan imtiyozlarga qaramay, biz kerning va to'ldirish masalalarini hal qilish uchun alohida sinflarni aniqlash uchun juda ko'p kod qo'shishimiz kerak edi. Ammo bu usul har bir yangi paragrafning birinchi harfini CSS bosh harfiga aylantiradi. Ba'zilar uchun bu mos kelmasligi mumkin, chunki har bir paragrafning birinchi harfini o'zgartirish kerak emas.
Aqlli tartib yaratish uchun psevdosinflar va psevdoelementlarni birlashtirish
:first-child pseudo-klassini qo'shish birinchi harflarni keraksiz konvertatsiya qilish muammosini hal qilishga yordam beradi:
p (shrift o'lchami: 1.2em; font-family: Georgia, "Times New Roman", Times, serif; satr balandligi: 2em; to'ldirish-pastki: 0.5em;) p:birinchi bola::birinchi harf ( shrift o'lchami: 3,6 m; matnni o'zgartirish: katta harf; shrift oilasi: "Bernard Condensed monotipi", serif; chekka o'ng: 0,03 em;)
Ushbu kodni HTML bilan birlashtirish:
Birinchi bola sifatida belgilangan birinchi harf, bu usul bilan ko'tarilgan qopqaga aylantiriladigan yagona harfdir.
Faqat birinchi farzand sifatida belgilangan harf o'zgartirilganligi sababli, bu misol avvalgisidan farq qiladi, birinchi farzandsiz. Bundan tashqari, biz birinchi harflarni paragraf boshidan keyin va majburiy satr uzilishidan keyin aylantirmaymiz. Bu paragraflarning barcha birinchi harflarini o'zgartirganimizda tartib qanday ko'rinishga ega bo'lganidan ko'ra nafisroq ko'rinadi.
Pseudo-sinflardan foydalanishning afzalligi turli xil maxsus holatlarni ko'rib chiqish qobiliyatidir. Kamchiliklari haqida nima deyish mumkin? Turli xil psevdo-sinflar mavjud va ular juda ko'p usullar bilan birlashtirilishi mumkin, bu sizning boshingizni aylantiradi. Masalan, psevdo-sinflar :first-child va :first-of-type bir xil natijalarni berishi mumkin. Pseudo-klassni nafaqat paragrafga, balki elementlarga ham qo'llashingiz mumkin bo'lim (shrift o'lchami: 1,2em; font-family: Georgia, "Times New Roman", Times, serif; line-height:3em;) bo'lim>p:birinchi bola:birinchi harf (shrift o'lchami: 4em; matnni o'zgartirish: katta harf; shrift-family: Didot, serif; chet-o'ng: 5px;) Va HTML bilan birga: Bo'limning boshida birinchi harf uchun ko'tarilgan tomchi qopqog'i ko'rsatilgan. Va yangi paragraf ... Agar o'zingizni eksperimental his qilsangiz, :first-child va :first-of-type ga qo'shimcha ravishda turli usullarni ham o'rganishingiz mumkin. Masalan, :nth-of-type yoki :nth-of-child kabi bu yoki boshqa turdagi psevdosinflardan CSS bosh harflari matni uchun qanday foydalanish mumkinligini koʻrish uchun. Ushbu maqolada keltirilgan tamoyillarga amal qilasizmi yoki chuqurroq qazishni boshlaysizmi, CSS psevdo-sinflari birinchi bola , :birinchi turdagi va :birinchi harf bilan qanday ishlashni o'rganganingizdan so'ng, ariza topshirishingiz mumkin bo'ladi. ularni HTML elementlariga to'g'ri kiriting. Xayrli kun, sayt quruvchilar. Bugungi nashrda matn mazmunini loyihalash mavzusi muhokama qilinadi. Shuning uchun siz CSS vositalaridan foydalangan holda bosh harflarni qanday o'rnatishni o'rganasiz, tushirish qopqog'ini yaratishning bir nechta variantlari bilan tanishasiz va, albatta, amalda hamma narsani sinab ko'rishingiz mumkin. Xo'sh, endi qiziqarli qismga o'tamiz! Kaskadli uslublar jadvallari tufayli siz blokning birinchi belgisini ham, butun matnni ham o'zgartirishingiz mumkin. Qanday qilib ikkalasini ham qila olishingizni aytaman. Bundan tashqari, ushbu maqolada keltirilgan barcha vositalar uchta til darajasida qo'llab-quvvatlanadi: css1, css2, css2.1 va css3. Men tanlangan dagi barcha matn tarkibini o'zgartiruvchi qiziqarli xususiyatdan boshlayman. Bu matnni o'zgartirish. Nomlangan element belgilarni katta, kichik harflarga aylantirishi, shuningdek, so'zning har bir birinchi belgisini bosh harfga o'rnatishi mumkin. Jadvaldagi qiymatlar haqida ko'proq yozdim. Endi nazariy materialni mustahkamlash uchun misolga qarang.
Aksiya shahringizdagi barcha filiallarda amal qiladi. Agar siz "tomchi qalpoq" atamasi nimani anglatishini bilmasangiz, hozir buni aniqlash vaqti keldi, chunki bu to'g'ridan-to'g'ri dolzarb mavzu bilan bog'liq. Bosh harf (yoki ba'zan ular bosh harfni ham aytishadi) bobning birinchi harfi bo'lib, u katta o'lchami, rangi va ba'zi hollarda hatto shrift dizayni bilan boshqalardan farq qiladi. Haqiqiy hayotda bunday xatning namunasini eski qo'lyozmalarda va kitoblarda topish mumkin. Boshlang'ich yaratishning bir necha yo'li mavjud. Ko'pincha belgi belgilash tili yorlig'i bilan ta'kidlanadi va keyin ma'lum xususiyatlar uni o'zgartiradigan uslublarda belgilanadi. Bu yaxshi usul, ammo bu nashr CSS mexanizmlari haqida gapiradi (mening fikrimcha, bu holatda ulardan foydalanish ancha mantiqiy va qulay). Ushbu muammoni hal qilish uchun siz kabi vositadan foydalanishingiz mumkin. Shunday qilib, bu holda biz foydalanamiz: birinchi harf. Barcha psevdoelementlar singari, u ikki nuqta yordamida selektorga tayinlanadi. Uslublar jadvallarining barcha qoidalaridan so'ng xususiyatlar ko'rsatiladi. Biroq, siz faqat shriftlarni, to'ldirishni, rangni, fonni, hoshiyalarni va chegaralarni tahrirlash bilan bog'liq xususiyatlarni qo'llashingiz mumkin. Men aniq bir misolni ko'rib chiqishni taklif qilaman. Taqdim etilgan kichik dasturni amalga oshirishda men nafaqat rangli boshlang'ich harfni yasashga, balki uni gullar bilan to'ldirishga qaror qildim. Buni amalga oshirish uchun siz shrift rangini shaffof qilib belgilash va tanlangan rasm bilan harfni to'ldirish orqali bir nechta hiyla-nayranglardan foydalanishingiz kerak.
Ushbu paragrafda juda qiziqarli tarkibga ega jumla mavjud. Kelgusi paragrafda qiziqarli voqeani davom ettiramiz. Olingan natija juda jozibali va g'ayrioddiy ko'rinadi, bu uchun ideal echim. Ko'rib turganingizdek, bu mavzu juda oddiy. Men veb-resurslar uchun taqdim etgan dastur kodidan osongina foydalanishingiz mumkin, uni uslubingizga mos ravishda o'zgartirishingiz va sozlashingiz mumkin. Agar taqdim etilgan material siz uchun foydali bo'lsa, mening blogim yangilanishlariga obuna bo'ling va olgan bilimlaringizni (va, albatta, mening blogimga havolani) do'stlaringiz bilan baham ko'rishni unutmang. Omad tilayman! Hayr hayr! Hurmat bilan, Roman Chueshov Matn harflarining registrini o'zgartirish imkonini beradi. Standart qiymat none ga o'rnatiladi, bu matnga ta'sir qilmaydi. Matnning holati bir xil bo'lib qoladi. Katta va kichik harflar qiymatlari belgilarni mos ravishda katta va kichik harflarga aylantiradi. Agar siz katta harf bilan belgilasangiz, har bir so'zning faqat birinchi belgilari bosh harf bilan yoziladi. Inherit o'z ota-onasining qiymatini meros qilib oladi. Ushbu paragrafga kichik harf bilan matnni o'zgartirish xususiyati qo'llaniladi, ya'ni barcha harflar kichik harflarda bo'ladi. Va bu oxirgi paragrafga CAPITALIZE xususiyatiga ega matnni o'zgartirish xususiyati qo'llaniladi. Har bir so'zning birinchi harflari katta harf bilan yoziladi va faqat ular.Keling, matnni o'zgartiraylik
Diqqat!
!Ertaga barcha kosmetika mahsulotlariga chegirma bor!
Qopqoqni yaratish
Misol
h3 (matnni o'zgartirish: katta harf; ) .kichik (matnni o'zgartirish: kichik harf; ) .capitalize (matnni o'zgartirish: katta harf; )
Bu sarlavha. Unda matnni o'zgartirish xususiyati katta harf bilan qo'llaniladi. Barcha belgilar katta harf bilan yoziladi.