Ang malaking titik, ayon sa kahulugan, ay isang elemento ng teksto na medyo pinalaki sa halos lahat ng mga wika, ang isang pangungusap ay nagsisimula sa isang malaking titik. At ang pagdidisenyo ng simula ng isang talata na may kitang-kitang malaking titik ay nagbibigay-daan sa iyo na buuin ang teksto at ginagawang mas madaling maunawaan. Kapag ang isang pahina sa Internet ay dinisenyo, ang teksto ay maaaring isulat alinsunod sa mga kagustuhan ng may-akda at mga patakaran ng wikang Ruso. Maaari mo ring "i-automate" ang disenyo nito sa pamamagitan ng paglalagay ng ilang partikular na "mga utos" sa isang file na may extension ng css - isang style sheet - o pagdaragdag ng seksyon ng istilo sa iyong html file. Karaniwang pinag-aaralan ang CSS bilang karagdagan sa html upang mabilis na baguhin ang ilang elemento ng disenyo sa kabuuan ng teksto nang sabay-sabay.

Ito ay totoo lalo na kung ang site ay may daan-daang mga pahina, at ang paggawa ng mga pagbabago sa bawat isa sa kanila ay isang napakahirap na proseso.

Kung ilalapat mo ang css, ang malalaking titik sa simula ng bawat talata ay maaaring magmukhang espesyal. Halimbawa, ang code sa ibaba, na inilagay sa html nang walang panaklong, ay nagbibigay-daan para sa text na na-format gamit ang "p" na tag upang gawing malaki ang titik - unang titik - mas malaki - 220% ng karaniwang sukat, dilaw - ang halaga ng kulay ay dilaw, at isulat ito sa isang font na naiiba sa natitirang bahagi ng teksto - Georgia vs. batangche.

()

p: unang titik (font-family: Georgia; laki ng font:220%; kulay: dilaw;)

()

Maaari kang makakuha ng magagandang malalaking titik kung lumikha ka ng iyong sariling font sa anyo ng mga larawan - para sa bawat titik ay may hiwalay na larawan, halimbawa, sa Old Russian o Gothic na istilo. Maaari silang iguhit sa Pagkatapos, sa mga kinakailangang lugar, bilang kapalit ng malaking titik, maaari mong ipasok ang code nang walang panaklong (). Ang mga karagdagang katangian ay magiging taas at lapad - ang lapad at taas ng larawan, na maaaring itakda sa mga pixel para sa isang maayos na kumbinasyon sa natitirang bahagi ng teksto. Halimbawa: (). Panaklong sa paligid< и >alisin namin.

Kung wala kang pagkakataon na gumuhit ng alpabeto sa iyong sarili, kung gayon ang malaking titik ay maaaring idisenyo gamit ang mga font na malayang magagamit sa Google (seksyon ng Mga Font) o iba pang mga search engine at mapagkukunan. Upang gawin ito, ang code sa itaas ay kailangang ma-format tulad ng sumusunod:

()

p (font-family: batangche; font-size:93%;)

p: unang titik (font-family: Kelly+Slab; font-size:220%; color: blue;)

()

().

Binibigyang-daan ka ng serbisyo ng Google na pumili ng isa o sa isa pa at nagbibigay ng mga yari na link para sa pagpasok sa html o css. Iginuhit namin ang iyong pansin sa katotohanan na kinakailangan na pumili ng isang pangkat ng font - Latin o Cyrillic, dahil... Halos lahat ng mga Latin na font ay hindi gumagana kapag nag-format ng teksto sa wikang Ruso. Sa ngayon, ang search engine ay nagbibigay ng halos 40 mga uri nang walang bayad.

Ang isang malaking titik o ang malaking antipode nito ay maaaring i-istilo gamit ang CSS text transform property. Kung itinakda mo ang pagbabago ng text ng halaga: wala sa style sheet, magiging hitsura ng teksto ang paraan ng pagsulat mo nito. Upang i-convert ang lahat ng mga titik sa lowercase, kailangan mong itakda ang value ng text transform: lowercase, pinaghihiwalay ng colon, at uppercase para sa uppercase. Ang pagtatakda ng property sa text transform: gagawin ito ng malaking titik upang ang bawat salita ay may malaking titik sa simula.

Ang drop cap (isang drop cap na naka-embed sa text) ay ang unang titik ng isang talata, mas malaki kaysa sa iba, at inilagay upang ang tuktok nito ay nasa antas ng unang linya ng talata. Sa larawan, makikita mo ang isang halimbawa ng drop cap na naka-embed sa text.

Sa pamamagitan ng paraan, ang WordPress ay may isang espesyal na plugin (wordpress.org/extend/plugins/drop-caps) na nagbibigay-daan sa iyong awtomatikong lumikha ng text na naka-embed (at inilipat pababa) malaking titik. Kahanga-hanga! Gayunpaman, paano kung ayaw mong gumamit ng plugin (sigurado akong ayaw mo), at kailangan mo lang gumawa ng drop cap sa maraming post, at marahil sa isang partikular na lokasyon?

Ang magandang balita ay hindi mo kailangan ng isang plugin upang lumikha ng malalaking titik, ang kailangan mo lang ay isang maliit na css at isang span tag. Buksan ang iyong css file at idagdag ang sumusunod na code:

Span.dropcaps ( font-family:Georgia, serif; color: #ccc; font-size: 46px; float: left; font-weight: 400; line-height: 1em; margin-bottom: -0.4em; margin-right : 0.09em; posisyon: kamag-anak;

May ganyan. Siyempre, kakailanganin mo ng istilong tumutugma sa iyong disenyo at teksto. Halimbawa, ang mga value ng property: font-size , margins at line-height ay kailangang piliin batay sa iyong disenyo at text.

Span ng Tag

Upang mailapat ang istilo sa malaking titik ng teksto, kailangan mong "i-wrap" ang malaking titik sa isang span tag at tukuyin ang naaangkop na klase.

A

Pseudo-element:unang-titik

Maaari mo ring i-istilo ang unang character sa text gamit ang pseudo-element: first-letter . Gayunpaman, maaaring ilapat ang isang limitadong bilang ng mga katangian sa:first-letter pseudo-element: ito ay mga katangiang nauugnay sa font, kulay, background, border, margin, at padding. Ang isa pang bagay na dapat tandaan ay ang pseudo-element:first-letter ay hindi gagana sa mas lumang mga browser.

P:unang titik ( font-family: Georgia, serif; color: #ccc; font-size: 46px; float: left; font-weight: 400; line-height: 1em; margin-bottom: -0.4em; margin -kanan: 0.09em posisyon: kamag-anak;

Narito ang ilang mga pamamaraan para sa pag-edit ng malalaking titik gamit ang CSS.

Tumutulong ang mga cap ng CSS na masira ang monotony ng isang generic na disenyo kung saan pareho ang hitsura ng text mula simula hanggang matapos.

Mga unang titik noon at ngayon

Gumamit ang mga Chronicler ng malalaking titik sa mga manuskrito na sulat-kamay, ang ilan sa mga ito ay mula pa noong ika-5 siglo. Ang mga malalaking titik ay patuloy na ginamit mula ika-8 hanggang ika-15 siglo, nang ang mga palimbagan ay nagpapahintulot sa pag-imprenta na dalhin sa isang antas ng industriya. Ang parehong sulat-kamay at naka-print na mga panimulang titik ay inilagay sa simula ng teksto. Madalas silang pinalamutian ng isang pandekorasyon na pattern na matatagpuan sa paligid ng sulat.

Ang mga itinaas at ibinaba na mga titik ay ginagamit pa rin hanggang ngayon. Matatagpuan ang mga ito sa mga pahayagan, magasin at libro, gayundin sa digital printing. Ang nakataas na uri ay tinatawag na pinahabang uri. Ang mga ito ay inilalagay na flush sa ilalim ng teksto na sumusunod sa kanila. Ang mga nalaglag na titik ay inilalagay na kapantay sa tuktok ng teksto, minsan sa isang layer sa likod ng katawan ng nilalaman ng teksto, o ang natitirang bahagi ng teksto ay bumabalot sa kanila.

Ang mga nakataas na titik ay mas madaling tukuyin dahil ang mga ito ay kapantay ng natitirang bahagi ng teksto at kadalasan ay hindi kailangang baguhin ang pambalot sa mga panlabas na margin. Ang mga inalis na titik ay nangangailangan ng higit pang fine-tuning. Mas magiging madali para sa iyo na maunawaan ito kung mauunawaan mo muna kung paano pinangangasiwaan ang mga nakataas na character.

Gamit ang mga klase

Alam ng mga taga-disenyo na mayroon nang pang-unawa sa CSS na kailangan nilang gumawa ng hiwalay na klase ng CSS para sa unang malaking titik.

Ang CSS code para sa elemento ng talata at ang klase na lumilikha ng liham ay magiging ganito:

p (font-size:20px; font-family: Georgia, "Times New Roman", Times, serif;).myinitialcaps (font-size:48px; font-family: Didot;)

At ang HTML code ay magiging ganito:

Ano ang nagbibigay sa amin:

Parang napakadali? Kakailanganin mo talagang gumawa ng mga pagsasaayos depende sa mga partikular na titik na nakataas, dahil ang bawat malaking titik ay nangangailangan ng espesyal na kerning. Pagkatapos pumili ng font para sa mga nakataas na titik at para sa body text, kailangan mong lumikha ng hiwalay na mga klase para sa bawat nakataas na titik. Sa CSS class na .myinitialcapsi sa ibaba, ang margin sa kanan ay nakatakda sa isang negatibong halaga upang bawasan ang distansya sa pagitan ng I at n .

Myinitialcapsi (font-size:48px; font-family: Didot; margin-right:-1px;)

Sa kasong ito, may ilang dagdag na espasyo sa pagitan ng "I" at "n."

Ang pagsasama ng isang bagong klase na may negatibong margin ay naglalapit dito.

Depende sa resolution ng screen sa halimbawa sa itaas, ang I at n ay maaaring magmukhang naka-blur ang mga ito nang magkasama. Ito ay dahil sa mga serif sa dulo ng mga titik. Kaya bago ka magpasya sa iyong mga panghuling istilo ng CSS, subukan ang iyong site sa iba't ibang device upang makita kung ano ang hitsura ng CSS caps text sa mga ito.

Mga quote at iba pang mga espesyal na kaso

Maaari mong palakihin hindi lamang ang mga titik sa simula ng teksto. Maaari kang magpatupad ng isa pang klase upang lumikha ng mas malaking bersyon ng mga panipi na lalabas sa tabi ng titik. Sa aming kaso, alinman sa klase ng sulat na may sukat na 48 o isang klase ng teksto na 20 pixel ay hindi angkop para sa mga panipi. Sa halip, ito ay magiging isang bagay sa pagitan ng - 30 pixels. Ililipat namin ang mga quote pababa ng 4 na pixel upang optically ihanay ang mga ito sa I:

Myinitialcapsq (font-size:30px; font-family: Didot; float:left; margin-top:4px;)

"Kabilang" ang isang bagong klase na may negatibong margin ang naglalapit dito.

Kailangan mong maging maingat sa pagtatakda ng bawat isa sa mga capitalization ng CSS kasama ng mga quote upang ang kanilang kerning at alignment ay tumugma sa nakapalibot na markup. Halimbawa, ang letrang T ay kailangang ilipat sa kaliwa, bahagyang lampas sa gilid ng talata, upang ang nakahalang linya nito ay biswal na umaangkop sa layout. Kakailanganin mong gawin ang parehong sa mga bilog na titik, tulad ng C, G, O at Q. Ang halimbawang ito ay gumagamit ng mga laki ng font na 20, 30, at 48. Ngunit kakailanganin mong pumili ng mga laki batay sa mga partikular na font na iyong pipiliin. Pati na rin ang mga sukat at resolution ng mga screen kung saan titingnan ang site.

Mga pseudo-element at pseudo-class

Gamit ang CSS pseudo-element, madali kang makakagawa ng nakataas na titik sa pamamagitan ng pagdaragdag ng ::first-letter sa isang elemento ng talata. Gamitin ang :first-letter (na may isang colon) para sa mga legacy na browser:

p ( font-size: 1.2em; font-family: Georgia, "Times New Roman", Times, serif; line-height:2em; padding-bottom:1.2em;) p::first-letter ( font-size: 3.6em; text-transform: uppercase; font-family: "Monotype Bernard Condensed", serif; margin-right:0.03em;).initialb (margin-right:-0.1em;).initialn (margin-right:-0.15 em;)

HTML code na naglalaman ng mga klase ng CSS na isinasaalang-alang ang kerning ng mga letrang N at B ay magiging ganito...

Isang paunang titik, na ang unang titik ay isang malaking titik.
Sa isang line break, ang susunod na linya ay walang paunang cap.

pansinin sa HTML source kung paano ang unang titik, hindi malaking titik sa HTML, ay nagkakaroon ng laki sa paunang laki ng cap na 3.6em. Maayos ha?

Ngunit sa isang mahirap na pagbabalik, at nagsimula ang isang bagong talata, isa pang paunang cap ang palaging nagagawa. Maaaring tinatanong mo ang iyong sarili, Paano ko ito sasagutin? Dapat ba akong magkaroon ng paunang takip sa simula ng napakabagong talata? Well, kaya mo. Ngunit, gusto mo ba itong magmukhang ganoon, at talagang kailangang ganoon ang hitsura nito?

Ang unang malaking titik ng talata ay ginagawang liham.
Ang unang titik pagkatapos ng isang line break ay hindi mako-convert sa capital.

oTandaan na sa HTML source code ang unang titik ay hindi naka-capitalize, ngunit ito ay na-convert sa isang 3.6em character.

Gayunpaman, kahit na pagkatapos ng sapilitang linya break, ang isang sulat ay palaging nagagawa sa simula ng bawat bagong talata. Maaaring tinatanong mo ang iyong sarili: Paano ko ito isasaalang-alang? Kailangan ko bang magdagdag ng mga titik para sa lahat ng mga kasong ito? Well, kaya mo. Ngunit kailangan ba ito?

Kahit na may mga benepisyong ibinibigay ng mga pseudo-element, kinailangan naming magdagdag ng maraming code para tukuyin ang magkakahiwalay na klase para mahawakan ang mga isyu sa kerning at padding. Ngunit ang pamamaraang ito ay nagko-convert sa unang titik ng bawat bagong talata sa isang malaking titik ng CSS. Para sa ilan, maaaring hindi ito angkop dahil hindi nito kailangang baguhin ang unang titik ng bawat talata.

Pinagsasama-sama ang mga pseudo-class at pseudo-element para lumikha ng matalinong layout

Ang pagdaragdag ng :first-child pseudo-class ay nakakatulong na malutas ang problema ng hindi kinakailangang conversion ng mga unang titik:

p ( font-size: 1.2em; font-family: Georgia, "Times New Roman", Times, serif; line-height:2em; padding-bottom:0.5em;) p:first-child::first-letter ( laki ng font: 3.6em; text-transform: uppercase;

Ang pagsasama-sama ng code na ito sa HTML:

Ang unang titik na tinukoy bilang first-child ay ang tanging titik na na-convert sa isang nakataas na drop cap sa pamamagitan ng pamamaraang ito.

Dahil ang titik lamang na tinukoy bilang unang-anak ang na-convert, tandaan na ang halimbawang ito ay iba sa nauna, nang walang unang-anak. Bilang karagdagan, hindi namin kino-convert ang mga unang titik pagkatapos ng simula ng isang talata at pagkatapos ng sapilitang break na linya. Mukhang mas elegante ito kaysa sa hitsura ng layout noong na-convert namin ang lahat ng unang titik ng mga talata.

Ang bentahe ng paggamit ng mga pseudo-class ay ang kakayahang pangasiwaan ang iba't ibang mga espesyal na kaso. Paano ang tungkol sa mga downsides? Mayroong maraming iba't ibang mga pseudo-class, at maaaring pagsamahin ang mga ito sa napakaraming paraan na maaari nitong paikutin ang iyong ulo. Halimbawa, ang pseudo-classes :first-child at :first-of-type ay maaaring makagawa ng parehong mga resulta. Maaari mo ring ilapat ang isang pseudo-class hindi lamang sa isang talata, kundi pati na rin sa o mga elemento. Halimbawa, tulad ng ipinapakita sa nakataas na halimbawa ng titik sa ibaba sa font na Didot. Pansinin kung paano naidagdag ang margin attribute sa kanan ng A. Kung hindi, ito ay "magdikit" sa mga titik s sa simula ng seksyon:

section ( font-size: 1.2em; font-family: Georgia, "Times New Roman", Times, serif; line-height:3em;) section>p:first-child:first-letter ( font-size: 4em; text-transform: uppercase; font-family:Didot, serif-right:5px;)

At kasama ng HTML:

Sa simula ng seksyon, ang isang nakataas na drop cap ay tinukoy para sa unang titik.

At isang bagong talata...

Kung pakiramdam mo ay eksperimental, maaari mong tuklasin ang iba't ibang paraan bilang karagdagan sa :first-child at :first-of-type . Halimbawa, gaya ng :nth-of-type o :nth-of-child para makita kung paano magagamit ang mga ito o iba pang uri ng pseudo-class para sa CSS capitalization text. Sinusunod mo man ang mga prinsipyong nakabalangkas sa artikulong ito o nagsimulang maghukay ng mas malalim, kapag natutunan mo kung paano magtrabaho sa CSS pseudo-classes first-child , :first-of-type , at :first-letter , magagawa mong mag-apply ang mga ito nang tama sa mga elemento ng HTML.

Magandang araw, mga geeks ng pagbuo ng site. Tatalakayin ng publikasyon ngayong araw ang paksa ng pagdidisenyo ng nilalaman ng teksto. Iyon ang dahilan kung bakit matututunan mo kung paano magtakda ng mga malalaking titik gamit ang mga tool ng CSS, makilala ang ilang mga pagpipilian para sa paglikha ng isang drop cap at, siyempre, magagawa mong subukan ang lahat sa pagsasanay. Well, ngayon ay lumipat tayo sa masayang bahagi!

Simulan natin ang pagbabago ng teksto

Salamat sa mga cascading style sheet, maaari mong baguhin ang parehong unang character ng isang block at ang buong text. Sasabihin ko sa iyo kung paano mo magagawa ang dalawa. Bukod dito, lahat ng tool na binanggit sa artikulong ito ay sinusuportahan sa tatlong antas ng wika: css1, css2, css2.1 at css3.

Magsisimula ako sa isang kawili-wiling pag-aari na nagbabago sa lahat ng nilalaman ng teksto sa napiling . Ito ay text-transform .

Ang pinangalanang elemento ay maaaring mag-convert ng mga character sa uppercase, lowercase, at itakda din ang bawat unang character ng isang salita sa isang malaking titik. Sumulat ako ng higit pa tungkol sa mga halaga sa talahanayan.

Ngayon, upang mapalakas ang teoretikal na materyal, tingnan ang isang halimbawa.

Text transformation body ( text-align: center; ) h1 ( text-transform: uppercase; ) h3 ( text-transform: capitalize; ) Atensyon! !Bukas may discount sa lahat ng cosmetic products!

Ang promosyon ay may bisa sa lahat ng sangay na matatagpuan sa iyong lungsod.

Paglikha ng isang drop cap

Kung hindi mo alam kung ano ang ibig sabihin ng terminong "drop cap", ngayon na ang oras para malaman, dahil direktang nauugnay ito sa kasalukuyang paksa.

Ang malaking titik (o kung minsan ay sinasabi rin nilang inisyal) ay ang unang titik ng isang kabanata, na naiiba sa iba sa malaking sukat, kulay at, sa ilang mga kaso, maging ang disenyo ng font. Sa totoong buhay, ang isang halimbawa ng naturang liham ay makikita sa mga lumang manuskrito at aklat.

Mayroong ilang mga paraan upang lumikha ng isang inisyal. Kadalasan ang isang simbolo ay naka-highlight na may isang markup language tag at pagkatapos ay ang ilang mga katangian ay tinukoy sa mga estilo na nagbabago nito. Ito ay isang mahusay na paraan, ngunit ang publikasyong ito ay nagsasalita tungkol sa mga mekanismo ng CSS (na, sa palagay ko, ay mas lohikal at maginhawang gamitin sa kasong ito).

Upang malutas ang problemang ito, maaari kang gumamit ng isang tool tulad ng.

Kaya, sa kasong ito ginagamit namin ang:first-letter. Tulad ng lahat ng pseudo-element, itinalaga ito sa isang selector gamit ang colon. Matapos ang lahat ng mga patakaran ng mga style sheet, ipinahiwatig ang mga katangian. Gayunpaman, maaari ka lamang maglapat ng mga katangian na nauugnay sa pag-edit ng mga font, padding, kulay, background, mga margin, at mga hangganan.

Iminumungkahi kong isaalang-alang ang isang partikular na halimbawa. Kapag ipinatupad ang ipinakita na maliit na programa, nagpasya akong gumawa ng hindi lamang isang kulay na paunang titik, ngunit punan ito ng mga bulaklak. Upang gawin ito, kailangan mong gumamit ng ilang nakakalito na trick sa pamamagitan ng pagtatakda ng kulay ng font sa transparent at pagpuno sa titik ng napiling larawan.

Nakausli na inisyal na p ( font-size: 26px; font-family: fantasy; ) P:first-letter ( /*prescribe style rules for the first letter of a paragraph*/ font-family: sant-serif; font-weight: 900 ; kulay: transparent;

Ang talatang ito ay naglalaman ng isang pangungusap na may napakakagiliw-giliw na nilalaman.

Ipagpatuloy natin ang kawili-wiling kuwento sa susunod na talata.

Ang resultang resulta ay mukhang napaka-kaakit-akit at hindi pangkaraniwan, na isang mainam na solusyon para sa.

Tulad ng nakikita mo, ang paksang ito ay napaka-simple. Madali mong magagamit ang code ng programa na ibinigay ko para sa iyong mga mapagkukunan sa web, binabago at pag-customize ito upang umangkop sa iyong istilo.

Kung ang materyal na ipinakita ay kapaki-pakinabang sa iyo, pagkatapos ay mag-subscribe sa aking mga update sa blog at huwag kalimutang ibahagi ang kaalaman na iyong nakuha (at siyempre ang link sa aking blog) sa iyong mga kaibigan. Sana good luck!

paalam na!

Pagbati, Roman Chueshov

Kadalasan, sa pagmamadali kapag nagdaragdag ng mga materyales sa isang site o, halimbawa, sa paglikha ng isang bagong paksa sa isang forum, ang isang gumagamit ay maaaring magsimulang magsulat ng isang pangungusap (pamagat) na may maliit (maliit na titik) na titik. Ito ay medyo isang pagkakamali.

Magpapakita ako ng ilang mga pagpipilian para sa paglutas ng problemang ito: Ang PHP at CSS ay mas angkop para sa na-publish na mga materyales, kapag ang jQuery ay maaaring itama ang sitwasyon bago ang publikasyon.

Unang titik ng isang string sa uppercase sa PHP

Mayroong isang function sa PHP na tinatawag na "ucfirst", na nagko-convert lamang ng unang character ng isang linya sa upper case, ngunit ang kawalan nito ay hindi ito gumagana nang tama sa Cyrillic.

Upang gawin ito, isusulat namin ang aming sariling maliit na function. Ang pagpapatupad ay magiging ganito:

Sa bersyong ito, makakatanggap tayo ng pangungusap na nagsisimula sa malaking titik, na, sa katunayan, ang kailangan natin.

Malaking titik ang unang titik ng isang string sa CSS

Ang pamamaraang ito ay biswal (iyon ay, ang mga suhestiyon ay lilitaw habang ang mga ito ay nasa source code ng site) ay nagko-convert din sa unang character sa uppercase.

Ang paggamit ay ang mga sumusunod:

unang pangungusap

pangalawang pangungusap

ikatlong pangungusap

ikaapat na pangungusap

#content p:first-letter ( text-transform: uppercase; )

Gamit ang "first-letter" pseudo-element at ang property na "text-transform", itinakda namin ang disenyo para sa bawat unang titik ng talata.

Unang titik ng isang string sa uppercase sa jQuery

Gaya ng sinabi ko kanina, ang paraan ng conversion na ito ay pinakaangkop para sa mga materyal na hindi pa nai-publish.

Halimbawa, kukuha kami ng field ng text (ito ay magsisilbing field para sa pagpasok ng isang pamagat) at magsulat ng isang maliit na script para dito, na, kapag nagpasok ng isang pangungusap na may maliit na titik, ginagawa itong may malaking titik:

$(dokumento).ready(function() ($(".content").on("keyup", function() ( var text = $(this).val(); var new_text = text.charAt(0) .toUpperCase() + text.substr(1); $(this).val(new_text ));

Gumagana ang script sa parehong pagsusulat ng teksto at kapag ipinapasok lamang ito. Huwag kalimutan na para gumana ang mga script sa iyong site, dapat na pinagana mo ang library ng jQuery.