Drop cap (tekstā iegultais nolaižamais vāciņš) ir rindkopas pirmais burts, kas ir lielāks par pārējo un novietots tā, lai tā augšdaļa būtu rindkopas pirmās rindiņas līmenī. Attēlā var redzēt tekstā iestrādāta nolaižamā vāciņa piemēru.

Starp citu, WordPress ir īpašs spraudnis (wordpress.org/extend/plugins/drop-caps), kas ļauj automātiski izveidot iegultu (un nobīdītu uz leju) tekstu. lielie burti. Apbrīnojami! Tomēr ko darīt, ja nevēlaties izmantot spraudni (esmu pārliecināts, ka nevēlaties), un jums vienkārši ir jāizveido nolaišanas ierobežojums vairākām ziņām un, iespējams, noteiktā vietā?

Labā ziņa ir tā, ka, lai izveidotu lielos burtus, nav nepieciešams spraudnis, viss, kas jums nepieciešams, ir mazs css un span tags. Atveriet css failu un pievienojiet šādu kodu:

Span.dropcaps ( font-family:Georgia, serif; krāsa: #ccc; fonta izmērs: 46 pikseļi; peldošs: pa kreisi; fonta svars: 400; līnijas augstums: 1 em; piemale-apakša: -0,4 em; margin-labais : 0,09 em; pozīcija: relatīvs;)

Kaut kas tamlīdzīgs. Protams, jums būs nepieciešams stils, kas atbilst jūsu dizainam un tekstam. Piemēram, rekvizītu vērtības: fonta lielums , piemales un līnijas augstums būs jāizvēlas, pamatojoties uz jūsu dizainu un tekstu.

Atzīmes diapazons

Lai stils tiktu attiecināts uz teksta lielo burtu, lielais burts ir “jāiesaiņo” span tagā un jānorāda atbilstošā klase.

A

Pseidoelements: pirmais burts

Varat arī veidot teksta pirmo rakstzīmi, izmantojot pseidoelementu: pirmais burts . Tomēr pseidoelementam:first-letter var lietot ierobežotu skaitu rekvizītu: tie ir rekvizīti, kas saistīti ar fontu, krāsu, fonu, apmalēm, piemalēm un polsterējumu. Vēl viena lieta, kas jāņem vērā, ir tāda, ka pseidoelements: pirmais burts nedarbosies vecākās pārlūkprogrammās.

P: pirmais burts ( fontu saime: Gruzija, serif; krāsa: #ccc; fonta izmērs: 46 pikseļi; peldošs: pa kreisi; fonta svars: 400; līnijas augstums: 1 em; piemale-apakša: -0,4 em; piemale -pa labi: 0,09 em; pozīcija: relatīvs; )

Šeit ir dažas metodes lielo burtu rediģēšanai, izmantojot CSS.

Bieži vien, steigā, pievienojot vietnei materiālus vai, piemēram, veidojot jaunu tēmu forumā, lietotājs var sākt rakstīt teikumu (virsrakstu) ar mazo (mazo) burtu. Tā zināmā mērā ir kļūda.

Parādīšu vairākas iespējas šīs problēmas risināšanai: PHP un CSS ir vairāk piemēroti jau publicētiem materiāliem, kad jQuery var labot situāciju pirms publicēšanas.

Virknes pirmais burts ar lielajiem burtiem PHP

PHP ir funkcija ar nosaukumu “ucfirst”, kas tikai pārvērš rindas pirmo rakstzīmi par lielajiem burtiem, taču tās trūkums ir tas, ka tā nedarbojas gluži pareizi ar kirilicu.

Lai to izdarītu, mēs uzrakstīsim savu mazo funkciju. Īstenošana izskatītos šādi:

Šajā versijā mēs saņemsim teikumu, kas sākas ar lielo burtu, kas patiesībā ir tas, kas mums vajadzīgs.

Virknes pirmais burts ar lielo burtu CSS

Šī metode vizuāli (tas ir, ieteikumi tiks parādīti tādi, kādi tie ir vietnes pirmkodā) arī pārvērš pirmo rakstzīmi par lielajiem burtiem.

Lietošanas veids ir šāds:

pirmais teikums

otrais teikums

trešais teikums

ceturtais teikums

#content p:first-burts ( teksta pārveidošana: lielie burti; )

Izmantojot pseidoelementu “pirmais burts” un rekvizītu “text-transform”, mēs iestatām katra rindkopas pirmā burta dizainu.

Virknes pirmais burts ar lielajiem burtiem jQuery

Kā jau teicu iepriekš, šī konvertēšanas metode ir vislabāk piemērota materiāliem, kas vēl nav publicēti.

Piemēram, mēs paņemsim teksta lauku (tas darbosies kā lauks nosaukuma ievadīšanai) un uzrakstīsim tam nelielu skriptu, kas, ievadot teikumu ar mazo burtu, liek to rakstīt ar lielo burtu:

$(dokuments).ready(function() ( $(.content").on("atslēga", funkcija() ( var teksts = $(this).val(); var new_text = text.charAt(0) .toUpperCase() + text.substr(1); $(this).val(new_text); )); ));

Skripts darbojas gan rakstot tekstu, gan vienkārši ievietojot to. Neaizmirstiet, ka, lai skripti darbotos jūsu vietnē, ir jābūt iespējotai jQuery bibliotēkai.

CSS lielie burti palīdz izjaukt vispārēja dizaina monotoniju, kur teksts izskatās vienādi no sākuma līdz beigām.

Sākuma burti toreiz un tagad

Hroniķi izmantoja lielos burtus ar roku rakstītos manuskriptos, daži no tiem datēti ar 5. gadsimtu. Lielos burtus turpināja lietot no 8. līdz 15. gadsimtam, kad iespiedmašīnas ļāva drukāt drukāšanu līdz rūpnieciskam līmenim. Teksta sākumā tika ievietoti gan ar roku rakstīti, gan drukāti sākuma burti. Tie bieži tika dekorēti ar dekoratīvu rakstu, kas atradās ap burtu.

Paceltos un nomestos burtus lieto vēl šodien. Tos var atrast laikrakstos, žurnālos un grāmatās, kā arī digitālajā drukā. Paceltais tips dažreiz tiek saukts par iegarenu tipu. Tie ir novietoti vienā līmenī ar tiem sekojošā teksta apakšdaļu. Nomestie burti tiek novietoti vienā līmenī ar teksta augšdaļu, dažreiz slānī aiz teksta satura pamatteksta, vai arī pārējais teksts tiek apvilkts ap tiem.

Paceltos burtus ir daudz vieglāk definēt, jo tie ir vienā līmenī ar pārējo tekstu un parasti nav jāmaina ārējās malas. Izlaistie burti prasa precīzāku pielāgošanu. Jums būs vieglāk to saprast, ja vispirms sapratīsit, kā tiek apstrādātas audzinātas rakstzīmes.

Nodarbību izmantošana

Dizaineri, kuriem jau ir izpratne par CSS, zina, ka viņiem ir jāizveido atsevišķa CSS klase pirmajam lielajam burtam.

CSS kods rindkopas elementam un klasei, kas veido burtu, izskatītos šādi:

p (fonta lielums: 20 pikseļi; fontu saime: Georgia, "Times New Roman", Times, serif;). myinitialcaps (fonta izmērs: 48 pikseļi; fontu saime: Didot;)

Un HTML kods izskatīsies šādi:

Ko mums dod:

Šķiet pārāk viegli? Jums faktiski būs jāveic pielāgojumi atkarībā no konkrētajiem burtiem, jo ​​katram lielajam burtam ir nepieciešama īpaša atzarošana. Pēc fonta izvēles izvirzītajiem burtiem un pamatteksta tekstam ir jāizveido atsevišķas klases katram izvirzītajam burtam. CSS klasē zem.myinitialcapsi labās puses piemale ir iestatīta uz negatīvu vērtību, lai samazinātu attālumu starp I un n.

Myinitialcapsi (fonta lielums: 48 pikseļi; fontu saime: Didot; malas labā puse: -1 pikseļi;)

Šajā gadījumā starp burtiem “I” un “n” ir papildu atstarpe.

Jaunas klases iekļaušana ar negatīvu rezervi pievelk to tuvāk.

Atkarībā no ekrāna izšķirtspējas iepriekš minētajā piemērā I un n var izskatīties tā, it kā tie būtu izplūduši kopā. Tas ir saistīts ar serifiem burtu galos. Tāpēc, pirms izlemjat par galīgajiem CSS stiliem, pārbaudiet savu vietni dažādās ierīcēs, lai redzētu, kā tajās izskatās CSS burtu teksts.

Citāti un citi īpaši gadījumi

Jūs varat palielināt ne tikai burtus teksta sākumā. Varat ieviest citu klasi, lai izveidotu lielāku pēdiņu versiju, kas parādīsies blakus burtam. Mūsu gadījumā pēdiņās neder ne burtu klase ar izmēru 48, ne teksta klase 20 pikseļi. Drīzāk tas būs kaut kas pa vidu – 30 pikseļi. Mēs pārvietosim pēdiņas uz leju par 4 pikseļiem, lai tās optiski izlīdzinātu ar I:

Myinitialcapsq (fonta izmērs: 30 pikseļi; fontu saime: Didot; peldēšana: pa kreisi; mala augšdaļa: 4 pikseļi;)

“Ieskaitot” jaunu klasi ar negatīvu rezervi, to pievelk tuvāk.

Jums jābūt ļoti uzmanīgam, iestatot katru no CSS lielo burtu lietojumiem kopā ar pēdiņām, lai to apgriešana un līdzinājums atbilstu apkārtējam marķējumam. Piemēram, burts T būs jāpārvieto pa kreisi, nedaudz aiz rindkopas malas, lai tā šķērslīnija vizuāli iekļautos izkārtojumā. Tas pats būs jādara ar apaļajiem burtiem, piemēram, C, G, O un Q. Šajā piemērā tiek izmantoti 20, 30 un 48 fontu izmēri. Taču jums būs jāizvēlas izmēri, pamatojoties uz konkrētajiem jūsu izvēlētajiem fontiem. Kā arī to ekrānu izmēri un izšķirtspēja, kuros vietne tiks skatīta.

Pseidoelementi un pseidoklases

Izmantojot CSS pseidoelementu, jūs varat viegli izveidot paaugstinātu burtu, pievienojot rindkopas elementam ::first-leter. Izmantojiet :pirmo burtu (ar vienu kolu) mantotajām pārlūkprogrammām:

p ( fonta izmērs: 1,2 em; fontu saime: Georgia, "Times New Roman", Times, serif; līnijas augstums: 2 em; polsterējums apakšā: 1,2 em;) p:: pirmais burts ( fonta lielums: 3,6 em; teksta pārveidošana: lielie burti; fontu saime: "Monotype Bernard Condensed", serif; mala-labā:0.03em;).initialb (margin-right:-0.1em;).initialn (margin-right:-0.15 em ;)

HTML kods, kas satur CSS klases, kas ņem vērā burtu N un B atzarojumu, izskatītos šādi...

Sākuma burts, pirmais burts ir lielais burts.
Ja ir līnijas pārtraukums, nākamajai rindai nav sākuma ierobežojuma.

HTML avotā ievērojiet, kā pirmais burts, nevis lielais burts HTML, tiek pielāgots sākotnējam ierobežojuma izmēram — 3,6 em. Kārtīgi, vai ne?

Taču ar smagu atgriešanos un jaunas rindkopas sākšanu vienmēr tiek izveidots cits sākotnējais ierobežojums. Jūs varētu sev jautāt: kā es par to atbildēšu? Vai man vajadzētu būt sākotnējam ierobežojumam ļoti jaunas rindkopas sākumā? Nu, jūs varētu. Bet vai vēlaties, lai tas tā izskatītos, un vai tam noteikti ir jāizskatās?

Rindkopas pirmais lielais burts tiek pārvērsts par burtu.
Pirmais burts pēc rindiņas pārtraukuma netiks pārvērsts par lielo burtu.

oŅemiet vērā, ka HTML avota kodā pirmais burts netiek rakstīts ar lielo burtu, bet tas tiek pārveidots par 3,6 em rakstzīmi.

Tomēr arī pēc piespiedu rindiņas pārtraukuma katras jaunas rindkopas sākumā vienmēr tiek izveidots burts. Jūs, iespējams, uzdodat sev jautājumu: kā to ņemt vērā? Vai man ir jāpievieno burti visiem šiem gadījumiem? Nu, jūs varat. Bet vai tas ir vajadzīgs?

Pat ņemot vērā priekšrocības, ko sniedz pseidoelementi, mums bija jāpievieno daudz koda, lai definētu atsevišķas klases, kas risinātu atzarošanas un polsterēšanas problēmas. Bet šī metode pārvērš katras jaunās rindkopas pirmo burtu par CSS lielo burtu. Dažiem tas var nebūt piemērots, jo tam nav jāpārveido katras rindkopas pirmais burts.

Apvienojot pseidoklases un pseidoelementus, lai izveidotu viedu izkārtojumu

Pseidoklases :first-child pievienošana palīdz atrisināt nevajadzīgas pirmo burtu pārveidošanas problēmu:

p ( fonta izmērs: 1,2 em; fontu saime: Georgia, "Times New Roman", Times, serif; līnijas augstums: 2 em; polsterējums apakšā: 0,5 em;) p: pirmais bērns:: pirmais burts ( fonta izmērs: 3,6 em; teksta pārveidošana: lielie burti; fontu saime: "Monotype Bernard Condensed", serifs; malas labā puse: 0,03 em;)

Apvienojot šo kodu ar HTML:

Pirmais burts, kas ir definēts kā pirmais pabērns, ir vienīgais burts, kas ar šo metodi tiek pārveidots par paaugstinātu nolaižamo vāciņu.

Tā kā tiek pārveidots tikai burts, kas definēts kā pirmais bērns, ņemiet vērā, ka šis piemērs atšķiras no iepriekšējā, bez pirmā bērna. Turklāt mēs nepārvēršam pirmos burtus pēc rindkopas sākuma un pēc piespiedu rindiņas pārtraukuma. Tas izskatās elegantāk nekā izkārtojums, kad mēs pārveidojām visus rindkopu pirmos burtus.

Pseidoklases izmantošanas priekšrocība ir spēja rīkoties ar dažādiem īpašiem gadījumiem. Kā ar mīnusiem? Ir daudz dažādu pseidoklases, un tās var apvienot tik dažādos veidos, ka tas var likt galvai griezties. Piemēram, pseidoklases :first-child un :first-of-type var dot tādus pašus rezultātus. Varat arī lietot pseidoklasi ne tikai rindkopai, bet arī elementiem vai elementiem. Piemēram, kā parādīts tālāk esošajā paaugstinātā burtu piemērā Didot fontā. Ievērojiet, kā piemales atribūts ir pievienots pa labi no A. Pretējā gadījumā tas “salīmētu kopā” ar burtu s sadaļas sākumā:

sadaļa ( fonta izmērs: 1,2 em; fontu saime: Georgia, "Times New Roman", Times, serif; rindas augstums: 3 em;) sadaļa> p: pirmais bērns: pirmais burts ( fonta izmērs: 4 em; teksta pārveidošana: lielie burti; fontu saime: Didot, serif; margin-labais: 5 pikseļi;)

Un kopā ar HTML:

Sadaļas sākumā pirmajam burtam ir norādīts paaugstināts nolaižamais vāciņš.

Un jauna rindkopa...

Ja jūtaties eksperimentāls, varat izpētīt dažādas metodes papildus :first-child un :first-of-type . Piemēram, piemēram, :nth-of-type vai :nth-of-child, lai redzētu, kā šīs vai cita veida pseidoklases var izmantot CSS lielo burtu lietojuma tekstam. Neatkarīgi no tā, vai ievērojat šajā rakstā izklāstītos principus vai sākat iedziļināties, tiklīdz uzzināsiet, kā strādāt ar CSS pseidoklases first-child , :first-of-type un :first-letter , varēsit pieteikties. tos pareizi uz HTML elementiem.

Html formātā fonta lielumam ir svarīga loma. Tas ļauj pievērst lietotāja uzmanību svarīgai informācijai, kas ievietota vietnes lapā. Lai gan svarīgs ir ne tikai burtu izmērs, bet arī to krāsa, biezums un pat ģimene.

Tagi un atribūti, strādājot ar html fontiem

Hiperteksta valodai ir plašs rīku klāsts darbam ar fontiem. Galu galā teksta formatēšana ir galvenais html uzdevums.

HTML valodas izveides iemesls bija teksta formatēšanas noteikumu parādīšanas problēma pārlūkprogrammās.

Apskatīsim tagus, kas tiek izmantoti darbam ar fontiem HTML un to atribūtiem. Galvenais ir tags. Izmantojot tā atribūtu vērtības, varat iestatīt vairākus fonta raksturlielumus:

• color – iestata teksta krāsu;
• izmērs – fonta lielums parastajās vienībās.

Tiek atbalstītas pozitīvas atribūtu vērtības no 1 līdz 7.

• seja — izmanto, lai iestatītu teksta fontu saimi, kas tiks izmantota . Tiek atbalstītas vairākas vērtības, atdalītas ar komatiem.

Tiek formatēts tikai teksts, kas atrodas starp pārī savienotā fonta taga daļām. Pārējais teksts tiek parādīts standarta noklusējuma fontā.

Arī html ir vairāki sapāroti tagi, kas norāda tikai vienu formatēšanas noteikumu. Tie ietver:

• — html iestata treknrakstu fontu. Darbības tags ir līdzīgs iepriekšējam;
• — izmērs ir lielāks par noklusēto;
• — mazāks burtu izmērs;
• — slīpraksts (slīpraksts). Līdzīga atzīme ;
• — teksts ar pasvītrojumu;
• - izsvītrots;
• — rādīt tekstu tikai ar mazajiem burtiem;
• - ar lielajiem burtiem.

Vienkāršs teksts

Sīktēls

Sīktēls

Vairāk nekā parasti

Mazāk nekā parasti

Slīpraksts

Slīpraksts

Ar pasvītrojumu

Izsvītrots

Stila atribūtu iespējas

Papildus aprakstītajiem tagiem ir vēl vairāki veidi, kā mainīt fontu html. Viens no tiem ir vispārīgā stila atribūta izmantošana. Izmantojot tā rekvizītu vērtības, varat iestatīt fontu displeja stilu:

1) font-family — rekvizīts nosaka fontu saimi. Ir iespējams uzskaitīt vairākas vērtības.
Html fonta maiņa uz nākamo vērtību notiks, ja lietotāja operētājsistēmā nav instalēta iepriekšējā saime.

Rakstīšanas sintakse:

fontu saime: fonta nosaukums [, fonta nosaukums[, ...]]

2) font-size – lielums ir iestatīts no 1 līdz 7. Tas ir viens no galvenajiem veidiem, kā palielināt fontu HTML.
Rakstīšanas sintakse:

fonta izmērs: absolūtais izmērs | relatīvais izmērs | nozīme | procenti | mantot

Varat arī iestatīt fonta lielumu:

• pikseļos;
• Absolūtajā vērtībā (xx-mazs, x-small, mazs, vidējs, liels);
• Procentos;
• Punktos (pt).

Fonta lielums: 7

Fonta lielums: 24 pikseļi

Fonta lielums: x-large

Fonta lielums: 200%

Fonta lielums: 24 pt

3) font-style – iestata fonta rakstīšanas stilu. Sintakse:

fonta stils: normāls | slīpraksts | slīpi | mantot

Vērtības:

• normāls – normāla pareizrakstība;
• slīpraksts – slīpraksts;
• slīps – fonts slīps pa labi;
• inherit – pārmanto vecāka elementa pareizrakstību.

Piemērs, kā mainīt fontu html, izmantojot šo rekvizītu:

font-style: inherit

fonta stils: slīpraksts

font-style:normāls

fonta stils: slīps

4) font-variant – pārvērš visus lielos burtus par lielajiem burtiem. Sintakse:

fonta variants: normāls | mazie burti | mantot

Piemērs, kā mainīt fontu html, izmantojot šo rekvizītu:

font-variant: inherit

fonta variants:normāls

fonta variants: mazie burti

5) font-weight – ļauj iestatīt teksta biezumu (piesātinājumu). Sintakse:

fonta svars: trekns|treknāks|vieglāks|parasts|100|200|300|400|500|600|700|800|900

Vērtības:

• treknraksts – iestata html fontu uz treknrakstu;
• drosmīgāks – drosmīgāks attiecībā pret parasto;
• gaišāks - mazāk piesātināts salīdzinājumā ar parasto;
• normāls – normāla pareizrakstība;
• 100-900 – iestata fonta biezumu skaitliskā ekvivalentā.

font-weight:bold

font-weight:bolder

fonta svars: vieglāks

fonta svars: normāls

fonta svars: 900

fonta svars: 100

HTML fonta rekvizīts un fonta krāsa

Fonts ir vēl viens konteinera īpašums. Sevī tas apvienoja vairāku rekvizītu vērtības, kas paredzētas fontu maiņai. fonta sintakse:

fonts: font-size font-family | mantot

Vērtību var iestatīt arī fontiem, ko sistēma izmanto dažādu vadīklu etiķetēs:

• paraksts – pogām;
• ikona – ikonām;
• izvēlne - izvēlne;
• ziņu lodziņš – dialoga logiem;
• mazie paraksti – mazām vadīklām;
• status-bar – statusa joslas fonts.

fonts: ikona

fonts: paraksts

fonts: izvēlne

font: Message-box

mazais paraksts

fonts: statusa josla

fonts: slīpraksts 50 pikseļi treknrakstā "Times New Roman", Times, serif

Lai iestatītu fonta krāsu HTML, varat izmantot krāsu rekvizītu. Tas ļauj iestatīt krāsu, izmantojot atslēgvārdu vai RGB formātā. Un arī heksadecimālā kodā.

Sveiki šī emuāra lasītāji. Šodien es runāšu par to, kā jūs varat izveidot visus lielos burtus, izmantojot CSS. Protams, lai to izdarītu, varat ieslēgt Caps Lock un uzrakstīt vajadzīgo tekstu, taču šī ir diezgan primitīva metode. Bet ko darīt, ja jums ir jāizceļ atsevišķa rindkopa gatavajā rakstā?

Visu burtu pievienošana lielajiem CSS

Šim nolūkam ir teksta pārveidošanas rekvizīts, kas, kā jūs, iespējams, uzminējāt, pārveido tekstu. Tam ir šādas vērtības:

• mazie burti – viss teksts tiek rādīts ar mazajiem burtiem
• lielie burti - visi vārdi tiek parādīti ar lielajiem burtiem (kas mums ir nepieciešams)
• lielo burtu – katra vārda pirmais burts tiek rakstīts ar lielo burtu

Tas būtībā ir viss, kas jums jāzina. Atliek tikai izdomāt, kā piekļūt vēlamajam elementam. Iedomāsimies šo piemēru: raksta piektā rindkopa ir jāraksta tikai ar lielajiem burtiem. Un kā to var īstenot?

Kā sasniegt vēlamo elementu?

Kā zināms, rindkopa tiek izveidota, izmantojot pārī savienotu html tagu, kura viss saturs kļūst par rindkopu. Atliek tikai definēt tai jaunu stila klasi:

Tagad mums ir iespēja piekļūt šim konkrētajam punktam, izmantojot CSS valodu, neietekmējot pārējo. To var izdarīt šādi:

Lielie burti(
Teksta pārveidošana: lielie burti;
}

Šī metode ir piemērota, ja jums ir nepieciešams izcelt fragmentu konkrētā rakstā. Kā būtu, ja visās lapās būtu jābūt noteiktam tekstam ar lielajiem burtiem. Šajā gadījumā labāk ir ievietot bloku veidnes failā, lai to nerakstītu katru reizi.

Vai varbūt jums ir jāizceļ otrā rindkopa katrā rakstā, izmantojot CSS ar lielajiem burtiem. Tad jums būs piemērota cita iespēja. Atrodiet bloku, kurā parādās raksts, un piekļūstiet otrajai rindkopai, izmantojot n-to bērnu pseidoklasi. Šajā piemērā mūsu blokam ar rakstu ir rakstu klase.

pants p:nth-child(2)(
Teksta pārveidošana: lielie burti
}

Kā redzat, katram konkrētajam gadījumam ir atšķirīgs risinājums. Vissvarīgākais ir atcerēties par teksta pārveidošanas īpašību, kas maina burtu reģistru.

Kopumā nav ieteicams šādi attēlot tekstu, jo tas ļoti pasliktina tā uztveri, taču var izcelt dažus īpaši svarīgus fragmentus.

Šodien mēs apskatījām teksta pārveidošanas rekvizītu. Abonējiet emuāru, lai saņemtu jaunus rakstus.