Kuinka saada kaikki kirjaimet isoiksi html. Kuinka tehdä kaikki isot kirjaimet css:ssä

Usein kiire kun lisäät materiaalia sivustolle tai esimerkiksi luot uusi aihe foorumilla käyttäjä voi aloittaa lauseen (otsikon) kirjoittamisen pienellä (pienellä) kirjaimella. Tämä on jossain määrin virhe.

Näytän useita vaihtoehtoja tämän ongelman ratkaisemiseksi: PHP ja CSS sopivat paremmin jo julkaistuihin materiaaleihin, kun jQuery pystyy korjaamaan tilanteen ennen julkaisua.

Merkkijonon ensimmäinen kirjain isolla PHP:ssä

PHP:ssä on toiminto nimeltä "ucfirst", joka vain muuntaa merkkijonon ensimmäisen merkin muotoon isot kirjaimet, mutta sen haittapuoli on, että se ei toimi aivan oikein kyrillisten aakkosten kanssa.

Tätä varten kirjoitamme oman pienen funktiomme. Toteutus näyttäisi tältä:

Tässä versiossa saamme lauseen, joka alkaa isot kirjaimet, jota itse asiassa tarvitsemme.

CSS:n merkkijonon ensimmäinen kirjain iso kirjain

Tämä menetelmä on visuaalinen (eli sisään lähdekoodi sivustoehdotukset näkyvät sellaisenaan) muuntaa myös ensimmäisen merkin isoksi.

Käyttö on seuraava:

ensimmäinen lause

toinen lause

kolmas lause

neljäs lause

#content p:first-letter ( tekstin muunnos: isot kirjaimet; )

Käyttämällä "ensimmäisen kirjaimen" pseudoelementtiä ja "text-transform" -ominaisuutta määritämme mallin kappaleen jokaiselle ensimmäiselle kirjaimelle.

Merkkijonon ensimmäinen kirjain isolla kirjaimella jQueryssa

Kuten aiemmin sanoin, tämä muunnosmenetelmä sopii parhaiten materiaaleille, joita ei ole vielä julkaistu.

Esimerkiksi otamme tekstikentän (se toimii kenttänä otsikon syöttämiseen) ja kirjoitamme sille pienen skriptin, joka saa sen isolla kirjaimella syötettäessä lausetta pienellä kirjaimella:

$(dokumentti).ready(function() ( $(.content").on("avain", function() ( var teksti = $(this).val(); var uusi_teksti = text.charAt(0) .toUpperCase() + text.substr(1); $(this).val(new_text ));

Skripti toimii sekä tekstiä kirjoitettaessa että yksinkertaisesti lisättäessä. Älä unohda, että jQuery-kirjaston on oltava käytössä, jotta skriptit toimivat sivustossasi.

Mahdollistaa tekstin kirjainten muuttamisen.

Oletusarvo on none , mikä ei vaikuta tekstiin. Tekstin kirjainkoko pysyy samana. Isot ja pienet kirjaimet muuttavat merkit isoiksi ja pieniksi kirjaimille pienet kirjaimet, vastaavasti. Jos määrität isot kirjaimet, vain kunkin sanan ensimmäiset merkit kirjoitetaan isoilla kirjaimilla. Peri perii emonsa arvon.

Esimerkki h3 ( tekstin muunnos: isot kirjaimet; ) .pienet kirjaimet ( tekstin muunnos: pienet kirjaimet; ) .capitalize ( text-transform: isot kirjaimet; ) text-transform Tämä on otsikko. Siinä on tekstinmuunnosominaisuus, jonka arvo on iso. Kaikki merkit ovat isoja kirjaimia.

Tässä kappaleessa käytetään tekstinmuunnosominaisuutta pienellä arvolla, mikä tarkoittaa, että kaikki kirjaimet ovat pieniä.

Ja tähän viimeiseen kappaleeseen sovelletaan tekstin muunnosominaisuutta CAPITALISE-ominaisuuden kanssa. Jokaisen sanan ensimmäiset kirjaimet kirjoitetaan isoilla kirjaimilla ja vain ne.

Tulos

Kaikki eivät kuitenkaan ole niin yksinkertaisia. On joitain vivahteita. Jos katsot yllä olevan esimerkin toista kappaletta, huomaat, että sana isot kirjaimet näkyvät kokonaan isoilla kirjaimilla, mikä vastaa alkuperäistä tekstiä, vaikka tekstinmuunnosominaisuus on asetettu isoin kirjaimiin. Tämä selittyy sillä, että määritetyllä isojen kirjainten arvolla vain sanojen ensimmäiset kirjaimet tarkistetaan, ja loput pysyvät muuttumattomina niiden alkuperäisestä tilasta riippumatta.
Näennäisestä yksinkertaisuudestaan ​​huolimatta tekstinmuunnosominaisuus voi olla erittäin hyödyllinen. Jos esimerkiksi haluat tehdä sivustosi kaikkien H1-otsikoiden tekstistä isoja kirjaimia, sinun tarvitsee vain lisätä yksi ominaisuus tyylisivuun

H1 (tekstin muunnos: isot kirjaimet;)

ja ongelma ratkeaa. Eikä sinun tarvitse muuttaa manuaalisesti kaikkia otsikoita, joita voi olla hyvin, hyvin monia.

CSS isot kirjaimet auttaa murtamaan samantyyppisen suunnittelun yksitoikkoisuuden, jonka tekstit näyttävät alusta loppuun samalta.

Alkukirjaimet ennen ja nyt

Kronikirjailijat käyttivät isoja kirjaimia käsinkirjoitetuissa käsikirjoituksissa, joista osa on peräisin 500-luvulta. Isot kirjaimet Sitä käytettiin edelleen 800-1400-luvuilla, jolloin painokoneet mahdollistivat painamisen saattamisen teolliselle tasolle. Sekä käsin kirjoitetut että painetut alkukirjaimet sijoitettiin tekstin alkuun. Ne oli usein koristeltu koristeellisella kuviolla, joka sijaitsi kirjeen ympärillä.

Korotettuja ja pudotettuja kirjaimia käytetään edelleen. Niitä löytyy sanomalehdistä, aikakauslehdistä ja kirjoista sekä digipainamisesta. Korotettua tyyppiä kutsutaan joskus pitkänomaiseksi tyypiksi. Ne sijoitetaan samalle tasolle niitä seuraavan tekstin alaosan kanssa. Pois jätetyt kirjaimet sijoitetaan samalle tasolle yläosa tekstiä, joskus pääosan takana olevalla kerroksella tekstin sisältö tai muu osa tekstistä kietoutuu niiden ympärille.

Korotetut kirjaimet on paljon helpompi määritellä, koska ne ovat samassa tasossa muun tekstin kanssa, eikä niitä yleensä tarvitse muuttaa ulkoreunojen ympärillä. Pois jätetyt kirjaimet vaativat enemmän hienosäätö. Sinun on helpompi ymmärtää tämä, jos ymmärrät ensin, kuinka kasvatettuja hahmoja käsitellään.

Luokkien käyttö

Suunnittelijat, jotka jo ymmärtävät CSS:n, tietävät, että heidän on luotava erillinen CSS-luokka ensimmäiselle isolle kirjaimelle.

Kappaleelementin ja kirjaimen luovan luokan CSS-koodi näyttäisi tältä:

p (fonttikoko: 20px; fonttiperhe: Georgia, "Times New Roman", Times, serif;).myinitialcaps (fontin koko: 48px; fonttiperhe: Didot;)

Ja HTML-koodi näyttää tältä:

Mitä meille antaa:

Näyttääkö liian helpolta? Sinun on itse asiassa tehtävä säätöjä korostettujen kirjainten mukaan, koska jokainen iso kirjain vaatii erityistä välilyöntiä. Kun olet valinnut fontin korotetuille kirjaimille ja leipätekstille, sinun on luotava erilliset luokat kullekin korotetulle kirjaimelle. CSS-luokassa alla.myinitialcapsi oikeanpuoleinen marginaali on asetettu negatiiviseksi arvoksi I:n ja n:n välisen etäisyyden pienentämiseksi.

Myinitialcapsi (fontin koko: 48px; fonttiperhe: Didot; marginaalioikea:-1px;)

Tässä tapauksessa I:n ja n:n välissä on ylimääräistä tilaa.

Uuden luokan sisällyttäminen negatiivisella marginaalilla vetää sitä lähemmäs.

Yllä olevan esimerkin näytön resoluutiosta riippuen I ja n voivat näyttää siltä, ​​että ne ovat epäselviä yhdessä. Tämä johtuu kirjainten lopussa olevista serifeista. Siksi testaa sivustoa ennen lopullisten CSS-tyylien valitsemista erilaisia ​​laitteita nähdäksesi miltä teksti näyttää CSS-kirjaimilla.

Lainaukset ja muut erikoistapaukset

Voit suurentaa paitsi tekstin alussa olevia kirjaimia. Voit toteuttaa toisen luokan luodaksesi suuremman version lainausmerkeistä, jotka näkyvät kirjaimen vieressä. Meidän tapauksessamme lainausmerkkeihin ei sovellu kirjainluokka, jonka koko on 48, eikä tekstiluokka, jonka koko on 20 pikseliä. Pikemminkin se on jotain - 30 pikselin väliltä. Siirrämme lainausmerkkejä 4 pikseliä alaspäin, jotta ne kohdistetaan optisesti I:n kanssa:

Myinitialcapsq (fontin koko: 30px; fonttiperhe: Didot; float:vasen; marginaali-yläosa: 4px;)

Uuden luokan "sisältäminen" negatiivisella marginaalilla vetää sitä lähemmäs.

Sinun on oltava erittäin varovainen määrittäessäsi CSS-kirjaimia ja lainausmerkkejä, jotta niiden välitys ja tasaus vastaavat ympäröivää merkintää. Esimerkiksi kirjain T on siirrettävä vasemmalle, hieman kappaleen reunan yli, jotta sen poikittaisviiva sopii visuaalisesti asetteluun. Sinun on tehtävä sama pyöreillä kirjaimilla, kuten C, G, O ja Q. Tässä esimerkissä käytetään fonttikokoja 20, 30 ja 48. Sinun on kuitenkin valittava koot valitsemiesi kirjasimien perusteella. Sekä niiden näyttöjen koot ja resoluutiot, joilla sivustoa tarkastellaan.

Pseudoelementit ja pseudo-luokat

CSS-pseudoelementin avulla voit helposti luoda korotetun kirjaimen lisäämällä kappaleelementtiin ::first-letter. Käytä :first-kirjain (yksi kaksoispiste) vanhoissa selaimissa:

p ( kirjasinkoko: 1,2 em; fonttiperhe: Georgia, "Times New Roman", Times, serif; rivin korkeus: 2 em; täyttöpohja: 1,2 em;) p:: ensimmäinen kirjain ( fontin koko: 3.6em; tekstin muunnos: "Monotype Bernard Condensed", serif (margin-right:-0.1em;).initialn em ;)

HTML-koodi, joka sisältää CSS-luokat, kun otetaan huomioon N- ja B-kirjainten välitys, näyttää tältä...

Alkukirjain, jonka ensimmäinen kirjain on iso kirjain.
Kun rivinvaihto on käytössä, seuraavalla rivillä ei ole alkupäätä.

huomaa HTML-lähteessä, kuinka ensimmäinen kirjain, ei iso kirjain HTML:ssä, kootaan alkuperäiseen yläkoon 3,6 em. Siisti, vai mitä?

Mutta kovalla paluulla ja uuden kappaleen alkaessa luodaan aina uusi alkukatto. Saatat kysyä itseltäsi, kuinka aion selittää tämän? Pitäisikö minulla olla alkukatto aivan uuden kappaleen alussa? No, voisit. Mutta tee haluat näyttääkseen siltä, ​​ja onko sen ehdottomasti näytettävä siltä?

Kappaleen ensimmäinen iso kirjain muunnetaan kirjaimeksi.
Rivinvaihdon jälkeistä ensimmäistä kirjainta ei muunneta isoksi.

oHuomaa, että HTML-lähdekoodissa ensimmäistä kirjainta ei kirjoiteta isolla, vaan se muunnetaan 3,6 em:n merkiksi.

Kuitenkin sen jälkeenkin pakkotauko riviä, ja kirjain luodaan aina jokaisen uuden kappaleen alkuun. Saatat kysyä itseltäsi: Miten otan tämän huomioon? Pitääkö minun lisätä kirjaimet kaikissa näissä tapauksissa? No, voit. Mutta onko tämä tarpeellista?

Vaikka näemme pseudoelementtien tarjoamat edut, jouduimme lisäämään paljon koodia erillisten luokkien määrittelemiseksi välitys- ja täyteongelmien käsittelemiseksi. Mutta tämä menetelmä muuntaa jokaisen uuden kappaleen ensimmäisen kirjaimen CSS-isoksi kirjaimeksi. Se ei ehkä sovi joillekin, koska sinun ei tarvitse muuntaa jokaisen kappaleen ensimmäistä kirjainta.

Yhdistämällä pseudoluokkia ja pseudoelementtejä älykkään asettelun luomiseksi

:first-child pseudoluokan lisääminen auttaa ratkaisemaan ensimmäisten kirjainten tarpeettoman muuntamisen ongelman:

p ( kirjasinkoko: 1,2 em; fonttiperhe: Georgia, "Times New Roman", Times, serif; rivinkorkeus: 2 em; täyttöpohja: 0,5 em;) p:first-child::first-letter ( font-size: 3.6em; font-family: "Monotype Bernard Condensed";

Tämän koodin yhdistäminen HTML:ään:

Ensimmäinen kirjain, joka on määritelty ensimmäiseksi alaksi, on ainoa kirjain, joka muunnetaan korotetuksi pudotuskorkiksi tällä menetelmällä.

Koska vain ensimmäiseksi lapseksi määritelty kirjain muunnetaan, huomaa, että tämä esimerkki eroaa edellisestä, ilman ensimmäistä lasta. Emme myöskään muunna ensimmäisiä kirjaimia kappaleen alun ja pakotetun rivinvaihdon jälkeen. Tämä näyttää tyylikkäämmältä kuin miltä asettelu näytti, kun muunnosimme kappaleiden kaikki ensimmäiset kirjaimet.

Pseudoluokkien käytön etuna on kyky käsitellä erilaisia ​​erikoistapauksia. Entä huonot puolet? Erilaisia ​​pseudoluokkia on monia, ja niitä voi yhdistää niin monella tavalla, että se saa pään pyörimään. Esimerkiksi pseudo-luokat :first-child ja :first-of-type voivat tuottaa samat tulokset. Voit myös käyttää pseudoluokkaa kappaleen lisäksi myös elementteihin tai elementteihin. Esimerkiksi kuten näkyy alla olevassa korotetussa kirjaimessa Didot-fontilla. Huomaa, kuinka marginaaliattribuutti on lisätty A:n oikealle puolelle. Muuten se "liimautuisi yhteen" jakson alussa olevan s-kirjaimen kanssa:

jakso ( font-size: 1.2em; font-family: Georgia, "Times New Roman", Times, serif; rivin korkeus: 3 em;) section>p:first-child:first-letter ( font-size: 4em; tekstin muunnos: isot kirjaimet: Didot, margin-right: 5px;)

Ja HTML:n ohella:

Jakson alussa ensimmäiselle kirjaimelle annetaan kohotettu pudotuskorkki.

Ja uusi kohta...

Jos tunnet tarvetta kokeilla, voit tutkia erilaisia ​​menetelmiä lisäksi :first-child ja :first-of-type . Esimerkiksi :nth-of-type tai :nth-of-child nähdäksesi, kuinka näitä tai muun tyyppisiä pseudoluokkia voidaan käyttää CSS:n isoilla kirjaimilla. Noudatatpa tässä artikkelissa esitettyjä periaatteita tai alat kaivautua syvemmälle, kun opit työskentelemään CSS-pseudo-luokkien first-child , :first-of-type ja :first-letter kanssa, voit hakea ne oikein HTML-elementteihin.

Viivan piirtäminen

Erillisten luokkien ja näennäisluokkien käyttäminen eri kirjainten käsittelyyn on yrityksen ja erehdyksen prosessi, jossa lasketaan positiivinen ja negatiivinen täyte. Ja tämä vaatii paljon kärsivällisyyttä. Kirjaimet, kuten F, G, O, P, Q, T, W, V ja Y vaativat myös erilliset välitysluokat.

Määrittää, muunnetaanko elementin teksti isoiksi vai isoiksi kirjaimille. Kun arvo on muu kuin ei mitään , rekisteröidy lähdeteksti muutetaan.

Lyhyt tiedotMerkinnät Kuvausesimerkki

	Ilmaisee arvon tyypin.
A && B	Arvot on annettava määritetyssä järjestyksessä.	&&
A | B	Ilmaisee, että sinun on valittava vain yksi arvo ehdotetuista arvoista (A tai B).	normaali | pienet kirjaimet
A || B	Jokaista arvoa voidaan käyttää itsenäisesti tai yhdessä muiden kanssa missä tahansa järjestyksessä.	leveys || Kreivi
	Ryhmien arvot.	[ sato || risti ]
*	Toista nolla tai useampia kertoja.	[,]*
+	Toista yksi tai useampia kertoja.	+
?	Määritetty tyyppi, sana tai ryhmä on valinnainen.	upotettu?
(A, B)	Toista vähintään A, mutta enintään B kertaa.	{1,4}
#	Toista yksi tai useampi kertaa pilkuilla erotettuina.	#

× Arvot

isolla kirjaimella Jokaisen lauseen sanan ensimmäinen merkki kirjoitetaan isolla kirjaimella. Muut symbolit eivät muuta ulkonäköään. pienet kirjaimet Kaikki tekstin merkit muuttuvat pieniksi kirjaimiksi. isot kirjaimet Kaikki tekstin merkit muuttuvat isoiksi (isoiksi). none Ei muuta merkkien kirjainkokoa.

Hiekkalaatikko

Nalle Puh ei aina vastustanut pientä virvokkeita, varsinkin kello yhdeltätoista aamulla, koska siihen aikaan aamiainen oli jo päättynyt, eikä lounas ollut vielä alkanut. Ja tietysti hän oli hirveän iloinen nähdessään, että Kani otti kuppeja ja lautasia.

div (tekstin muunnos: isoilla kirjaimilla; )

Esimerkki

text-transform h1 ( text-transform: iso kirjain; /* isot kirjaimet */ ) p ( text-transform: iso; /* Jokainen sana alkaa isolla kirjaimella */ ) Keskiajan kulttuurimonumentti

Amazonin alanko on kohtuuton kissojen ja koirien pienkuljetuksissa, ja Hajos Bahia on kuuluisa punaviineistään.

Tämän esimerkin tulos on esitetty kuvassa. 1.

Riisi. 1. Tekstimuunnosominaisuuden käyttäminen

Objekti malli

Esine.style.textTransform

Erittely

Jokainen erittely käy läpi useita hyväksymisvaiheita.

• Suositus - W3C on hyväksynyt spesifikaation ja sitä suositellaan standardiksi.
• Ehdokassuositus ( Mahdollinen suositus) - standardista vastaava ryhmä on tyytyväinen, että se täyttää tavoitteensa, mutta tarvitsee kehitysyhteisön apua standardin toteuttamiseen.
• Ehdotettu suositus - Tässä vaiheessa asiakirja toimitetaan W3C:n neuvoa-antavalle toimikunnalle lopullista hyväksyntää varten.
• Working Draft - Kypsempi versio luonnoksesta, josta on keskusteltu ja jota on muutettu yhteisön tarkistamista varten.
• Toimittajan luonnos (Editorial draft) - standardin luonnosversio sen jälkeen, kun projektitoimittajat ovat tehneet siihen muutoksia.
• Luonnos (Draft specification) - standardin ensimmäinen luonnosversio.

×

Hei tämän blogin lukijat. Tänään puhun siitä, kuinka voit tehdä kaikki isot kirjaimet CSS: n avulla. Voit tietysti ottaa tämän käyttöön Caps Lock ja kirjoita vaadittu teksti, mutta tämä on melko primitiivinen menetelmä. Mutta entä jos sinun on korostettava erillinen kappale jo valmiissa artikkelissa?

Kaikkien kirjainten teko isot css:ssä

Tätä varten on tekstinmuunnosominaisuus, joka, kuten olet ehkä arvannut, muuttaa tekstiä. Sillä on seuraavat arvot:

• pienet kirjaimet – kaikki teksti näytetään pienillä kirjaimilla
• isot kirjaimet – kaikki sanat näytetään isoilla kirjaimilla (mitä tarvitsemme)
• iso kirjain – jokaisen sanan ensimmäinen kirjain kirjoitetaan isolla

Siinä on periaatteessa kaikki, mitä sinun tarvitsee tietää. Jäljelle jää vain selvittää, kuinka päästä haluttuun elementtiin. Kuvitellaanpa tämä esimerkki: artikkelin viides kappale on tehtävä vain isoilla kirjaimilla. Ja miten tämä voidaan toteuttaa?

Kuinka tavoittaa haluttu elementti?

Kuten tiedät, kappale luodaan käyttämällä parillinen html-tunniste, jonka koko sisällöstä tulee kappale. Jäljelle jää vain määritellä sille uusi tyyliluokka:

Nyt meillä on mahdollisuus ottaa yhteyttä kautta css kieli tähän kohtaan vaikuttamatta muihin. Voit tehdä sen näin:

Isot kirjaimet (tekstin muunnos: isot kirjaimet; )

Tämä menetelmä sopii, kun haluat korostaa fragmenttia tietyssä artikkelissa. Mitä jos kaikilla sivuilla pitäisi olla tietty teksti isoilla kirjaimilla. Tässä tapauksessa on parempi sijoittaa lohko mallitiedostoon, jotta sitä ei kirjoiteta joka kerta.

Tai ehkä sinun on korostettava kunkin artikkelin toinen kappale css:n avulla isoilla kirjaimilla. Sitten toinen vaihtoehto sopii sinulle. Etsi lohko, jossa artikkeli esiintyy, ja siirry toiseen kappaleeseen käyttämällä pseudoluokkaa n-lapsi. SISÄÄN tässä esimerkissä Artikkelilohkossamme on artikkeliluokka.

Artikkeli p:nth-child(2)( Tekstin muunnos: isot kirjaimet )

Kuten näet, jokaiseen tapaukseen on olemassa erilainen ratkaisu. Tärkeintä on muistaa tekstimuunnosominaisuus, joka muuttaa kirjainten kirjainkokoa.

Yleensä tekstin näyttäminen tällä tavalla ei ole suositeltavaa, koska se heikentää suuresti sen havaintoa, mutta joitain erityisen tärkeitä fragmentteja voidaan korostaa.

Tänään tarkastelimme tekstin muunnosominaisuutta. Tilaa blogi saadaksesi uusia artikkeleita.