Isot kirjaimet css. Isojen kirjainten luominen CSS:n avulla

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 voi korjata tilanteen ennen julkaisua.

Merkkijonon ensimmäinen kirjain isot kirjaimet PHP:ssä

PHP:ssä on toiminto nimeltä "ucfirst", joka muuntaa vain rivin ensimmäisen merkin isoksi, mutta sen haittana on, että se ei toimi aivan oikein kyrillisillä kirjaimilla.

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.

Hyvää päivää, sivustonrakennusnörtti. Tämän päivän julkaisussa käsitellään tekstisisällön suunnittelua. Siksi opit kysymään isot kirjaimet css - tarkoittaa, että tutustu useisiin vaihtoehtoihin pudotuskorkin luomiseksi ja voit tietysti kokeilla kaikkea käytännössä. No, nyt siirrytään hauskaan osaan!

Aloitetaan tekstin muuntaminen

CSS-tyylisivujen ansiosta voit muuttaa sekä lohkon ensimmäistä merkkiä että koko tekstiä. Kerron sinulle, kuinka voit tehdä molemmat. Lisäksi kaikkia tässä artikkelissa mainittuja työkaluja tuetaan kolmella kielitasolla: css1, css2, css2.1 ja css3.

Aloitan mielenkiintoisella ominaisuudella, joka muuttaa kokonaisuutta tekstin sisältö valitussa. Tämä on tekstimuunnos.

Nimetty elementti voi muuntaa merkit isoiksi, pieniksi kirjaimille ja myös asettaa jokaisen sanan ensimmäisen merkin isoksi. Kirjoitin arvoista lisää taulukossa.

Katso nyt esimerkkiä teoreettisen materiaalin vahvistamiseksi.

Tekstin muunnos runko ( tekstin tasaus: keskellä; ) h1 ( tekstin muunnos: isot kirjaimet; ) h3 ( tekstin muunnos: isot kirjaimet; ) Huomio! !Huomenna kaikki kosmetiikkatuotteet alennuksella!

Kampanja on voimassa kaikissa kaupunkisi toimipisteissä.

Pudotuskorkin luominen

Jos et tiedä mitä termi "drop cap" tarkoittaa, niin nyt on aika ottaa selvää, sillä se liittyy suoraan ajankohtaiseen aiheeseen.

Iso kirjain (tai joskus he sanovat alkukirjaimen) on luvun ensimmäinen kirjain, joka eroaa muista suurikokoinen, väri ja joissain tapauksissa jopa fonttisuunnittelu. Todellisessa elämässä esimerkki tällaisesta kirjeestä löytyy vanhoista käsikirjoituksista ja kirjoista.

Alkukirjan luomiseen on useita tapoja. Usein symboli korostetaan merkintäkielen tunnisteella ja sitten tiettyjä ominaisuuksia määritetään sitä muokkaavissa tyyleissä. Tämä on kuitenkin hyvä tapa tämä julkaisu puhuu css-mekanismeista (jotka mielestäni ovat tässä tapauksessa Se on paljon loogisempaa ja kätevämpää käyttää).

Tämän ongelman ratkaisemiseksi voit käyttää työkalua, kuten.

Joten tässä tapauksessa käytämme:first-letter. Kuten kaikki pseudoelementit, se on määritetty valitsimelle kaksoispisteellä. Kaikkien tyylisivujen sääntöjen jälkeen ominaisuudet ilmoitetaan. Voit kuitenkin käyttää vain niitä ominaisuuksia, jotka liittyvät fonttien, sisennysten, värien, tausta, kentät ja rajat.

Suosittelen harkitsemaan konkreettinen esimerkki. Esitettyjen toteuttaminen pieni ohjelma Päätin tehdä värillisen alkukirjaimen lisäksi täyttää sen kukilla. Tätä varten sinun on käytettävä useita hankalia asennustemppuja läpinäkyvä väri fontti ja kirjaimen täyttäminen valitulla kuvalla.

Ulkoneva alkukirjain p ( font-size: 26px; font-family: fantasia ; väri: läpinäkyvä: url (http://dreempics.com/img/picture/Mar/26/51a6ff79968c93a6542e88e464368bce/1.jpg);

Tämä kappale sisältää erittäin mielenkiintoisen sisällön lauseen.

Jatketaan mielenkiintoista tarinaa seuraavassa kappaleessa.

Tuloksena oleva tulos näyttää erittäin houkuttelevalta ja epätavalliselta, mikä on ihanteellinen ratkaisu.

Kuten näet Tämä aihe erittäin yksinkertainen. Minun tuoma ohjelmakoodi Voit helposti käyttää sitä verkkoresursseissasi muokkaamalla ja mukauttamalla sitä tyyliisi sopivaksi.

Jos esitetty materiaali oli sinulle hyödyllistä, tilaa blogipäivitykseni ja älä unohda jakaa saamasi tiedot (ja tietysti linkki blogiini) ystävillesi. Onnea!

Hei hei!

Ystävällisin terveisin, Roman Chueshov

Luettu: 236 kertaa

Määrittää, muunnetaanko elementin teksti isoiksi vai isoiksi kirjaimille. Kun arvo on muu kuin ei mitään , lähdetekstin kirjainkoko muutetaan.

Lyhyt tiedotMerkinnät Kuvaus Esimerkki

	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 ( pienet kirjaimet). isot kirjaimet Kaikki tekstin merkit muuttuvat isoiksi kirjaimiksi. 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(tekstimuunnos: 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.

Tulos tämä esimerkki 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.

Mahdollistaa tekstin kirjainten muuttamisen.

Oletusarvo on none , mikä ei vaikuta tekstiin. Tekstin kirjainkoko pysyy samana. Isot ja pienet kirjaimet muuttavat merkit isoiksi ja pieniksi kirjaimiksi. 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 ( tekstin muunnos: 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 kiinnität huomiota yllä olevan esimerkin toiseen kappaleeseen, huomaat, että sana isot kirjaimet näkyvät kokonaan tekstinmuunnosominaisuudesta, jonka arvo on isot kirjaimet kohdistettu kappaleeseen. isot kirjaimet, joka vastaa alkuperäinen teksti. 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.

Usein kiireessä materiaalia sivustolle lisättäessä tai esimerkiksi foorumille uutta aihetta luodessaan käyttäjä saattaa alkaa kirjoittaa lausetta (otsikkoa) pienellä kirjaimella. Tämä on jossain määrin virhe.