HTML velika slova i CSS razmak između slova. Kako napraviti sva velika slova u css-u Svojstvo css-a koje vam omogućuje da slova napravite velikima

Upravlja hoće li se tekst elementa pretvoriti u velika ili velika slova. Ako je vrijednost različita od ništa, registrirajte se izvorni tekstće se promijeniti.

Kratke informacijeNapomene Opis Primjer

	Označava vrstu vrijednosti.
A & & B	Vrijednosti se moraju ispisati navedenim redoslijedom.	&&
A \| B	Označava da trebate odabrati samo jednu vrijednost od predloženih (A ili B).	normalno \| malim slovima
A \|\| B	Svaka se vrijednost može koristiti samostalno ili zajedno s drugima bilo kojim redoslijedom.	širina \|\| računati
	Vrijednosti grupa.	[ obrezivanje \|\| križ ]
*	Ponovite nula ili više puta.	[,]*
+	Ponovite jednom ili više puta.	+
?	Navedena vrsta, riječ ili grupa nisu obavezni.	umetak?
(A, B)	Ponovite najmanje A, ali ne više od B puta.	{1,4}
#	Ponovite jednom ili više puta odvojene zarezima.	#

× Vrijednosti

veliko slovo Prvi znak svake riječi u rečenici bit će pisan velikim slovom. Preostali simboli ne mijenjaju svoj izgled. mala slova Svi tekstualni znakovi postaju mala slova (mala slova). velika slova Svi tekstualni znakovi postaju velika slova (velika slova). none Ne mijenja velika i mala slova znakova.

Pješčanik

Winnie the Pooh uvijek nije bio nesklon malom osvježenju, posebno u jedanaest ujutro, jer je u to vrijeme doručak već odavno završio, a ručak još nije počeo. I, naravno, silno se obradovao kad je vidio da Zec vadi šalice i tanjure.

div (transformacija teksta: veliko slovo; )

Primjer

text-transform h1 ( text-transform: velika slova; /* Velika slova */ ) p ( text-transform: veliko slovo; /* Svaka riječ počinje velikim slovom */ ) Spomenik kulture srednjeg vijeka

Amazonska nizina je neumjerena u malom prijevozu mačaka i pasa, a Hajos Bahia poznata je po svojim crvenim vinima.

Rezultat ovog primjera prikazan je na sl. 1.

Riža. 1. Primjena svojstva text-transform

Objektni model

Objekt.style.textTransform

Specifikacija

Svaka specifikacija prolazi kroz nekoliko faza odobravanja.

Preporuka - Specifikaciju je odobrio W3C i preporučuje se kao standard.
Preporuka kandidata - Grupa odgovorna za standard je zadovoljna da on ispunjava svoje ciljeve, ali joj je potrebna pomoć razvojne zajednice za implementaciju standarda.
Predložena preporuka - U ovoj fazi dokument se podnosi Savjetodavnom vijeću W3C na konačno odobrenje.
Radni nacrt - zrelija verzija nacrta o kojoj se raspravljalo i dopunjena radi pregleda zajednice.
Urednički nacrt (Urednički nacrt) - nacrt verzije standarda nakon izmjena i dopuna koje su izvršili urednici projekta.
Nacrt (nacrt specifikacije) - prvi nacrt verzije standarda.

Često u žurbi prilikom dodavanja materijala na web mjesto ili, na primjer, stvaranja nova tema na forumu korisnik može početi pisati rečenicu (naslov) malim (malim) slovom. To je u određenoj mjeri pogreška.

Pokazat ću nekoliko opcija za rješavanje ovog problema: PHP i CSS su prikladniji za već objavljene materijale, kada jQuery može ispraviti situaciju prije objave.

Prvo slovo niza u velika slova u PHP-u

U PHP-u postoji funkcija koja se zove “ucfirst”, koja samo pretvara prvi znak retka u veliko slovo, ali njen nedostatak je što ne radi sasvim ispravno sa ćirilicom.

Da bismo to učinili, napisat ćemo vlastitu malu funkciju. Implementacija bi izgledala ovako:

U ovoj verziji dobit ćemo rečenicu koja počinje velikim slovom, što nam zapravo i treba.

Veliko prvo slovo niza u CSS-u

Ova metoda je vizualna (to jest, u izvorni kod prijedlozi mjesta će se pojaviti kakvi jesu) također pretvara prvi znak u veliko slovo.

Upotreba je sljedeća:

prva rečenica

druga rečenica

treća rečenica

četvrta rečenica

#sadržaj p:prvo-slovo (transformacija teksta: velika slova;)

Koristeći pseudoelement "prvo slovo" i svojstvo "transformacija teksta", postavili smo dizajn za svako prvo slovo odlomka.

Prvo slovo niza velikim slovima u jQueryju

Kao što sam ranije rekao, ova metoda pretvorbe je najprikladnija za materijale koji tek trebaju biti objavljeni.

Na primjer, uzet ćemo tekstualno polje (ono će služiti kao polje za unos naslova) i napisati malu skriptu za njega, koja, kada upisuje rečenicu s malim slovom, čini da je velika:

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

Skripta radi i kada pišete tekst i kada ga jednostavno ubacujete. Ne zaboravite da za rad skripti na vašoj stranici morate imati omogućenu jQuery biblioteku.

Kapica (kapnica ugrađena u tekst) je prvo slovo odlomka, veće od ostalih, a postavljeno tako da mu je vrh u razini prvog retka odlomka. Na slici možete vidjeti primjer kape umetnute u tekst.

Usput, WordPress ima poseban dodatak (wordpress.org/extend/plugins/drop-caps) koji vam omogućuje da automatski stvorite tekst ugrađen (i pomaknut prema dolje) velika slova . nevjerojatno! Međutim, što ako ne želite koristiti dodatak (siguran sam da ne želite), a trebate samo stvoriti drop cap na više postova, a možda i na određenom mjestu?

Dobre vijesti: Ne trebate dodatak za stvaranje velikih slova, sve što trebate je malo css-a i span tag. Otvorite svoju css datoteku i dodajte sljedeći kod:

Span.dropcaps (font-family:Georgia, serif; boja: #ccc; veličina fonta: 46px; float: lijevo; težina fonta: 400; visina retka: 1em; margin-bottom: -0.4em; margin-desno : 0,09 em; položaj: relativan; )

Nešto kao ovo. Naravno, trebat će vam stil koji odgovara vašem dizajnu i tekstu. Na primjer, vrijednosti svojstava: veličina fonta, margine i visina linije morat će se odabrati na temelju vašeg dizajna i teksta.

Raspon oznaka

Kako bi se stil primijenio na veliko slovo teksta potrebno je veliko slovo “zamotati” u span tag i odrediti odgovarajuću klasu.

Pseudo-element: prvo slovo

Također možete stilizirati prvi znak u tekstu pomoću pseudo-elementa: first-letter . Međutim, ograničen broj svojstava može se primijeniti na pseudoelement:prvo slovo: to su svojstva koja se odnose na font, boju, pozadinu, obrube, margine i ispune. Još jedna stvar koju treba napomenuti je da pseudo-element:prvo-slovo neće raditi u starijim preglednicima.

P:prvo-slovo (familija-fontova:Georgia, serif; boja: #ccc; veličina-font-a: 46px; float: lijevo; težina-font-a: 400; visina-line: 1em; margin-bottom: -0.4em; margina -desno: 0,09em; položaj: relativno; )

Evo zapravo nekoliko metoda za uređivanje velikih slova pomoću CSS-a.

Veliko slovo je, prema definiciji, element teksta koji je relativno povećan.U gotovo svim jezicima rečenica počinje velikim slovom. Dizajniranje početka odlomka s istaknutim velikim slovom omogućuje vam strukturiranje teksta i olakšava njegovu percepciju. Kada je internetska stranica dizajnirana, tekst može biti napisan u skladu s preferencijama autora i pravilima ruskog jezika. Također možete "automatizirati" njegov dizajn unosom određenih "naredbi" u datoteku s ekstenzijom css - list stilova - ili dopuniti svoj html datoteka odjeljak za stil. CSS se obično proučava uz html kako bi se brzo promijenili neki elementi dizajna u cijelom tekstu odjednom.

To je osobito istinito ako stranica ima stotine stranica, a izmjene na svakoj od njih vrlo su naporan proces.

Ako primijenite css, velika slova na početku svakog odlomka mogu izgledati posebno. Na primjer, donji kod, unesen u html bez zagrada, dopušta tekst formatiran s oznakom “p” kako bi veliko slovo - prvo slovo - bilo veće - 220% standardne veličine, žuto - vrijednost boje je žuta i napišite ga fontom drugačijim od ostatka teksta - Georgia protiv batangchea.

()

p: prvo slovo (familija fonta: Georgia; veličina fonta: 220%; boja: žuta;)

()

Lijepa velika slova možete dobiti stvaranjem vlastitog fonta u obliku slika - za svako slovo postoji zasebna slika, na primjer, u staroruskom ili gotičkom stilu. Mogu se nacrtati. Tada na tražena mjesta, umjesto velikog slova, možete umetnuti kod bez zagrada (). Dodatni atributi bit će heigh i width - širina i visina slike, koja se može postaviti u pikselima za skladnu kombinaciju s ostatkom teksta. Primjer: (). Zagrade okolo< и >uklanjamo.

Ako nemate priliku sami nacrtati abecedu, tada se veliko slovo može dizajnirati pomoću fontova koji su besplatno dostupni na Googleu (odjeljak Fontovi) ili drugim tražilicama i resursima. Da biste to učinili, gornji kôd mora biti formatiran na sljedeći način:

()

p (familija fonta: batangche; veličina fonta:93%;)

p: prvo slovo (familija fonta: Kelly+Slab; veličina fonta: 220%; boja: plava;)

()

().

Google servis vam omogućuje da odaberete jedno ili drugo i daje gotove poveznice za umetanje u html ili css. Skrećemo vam pažnju da je potrebno odabrati grupu slova - latinicu ili ćirilicu, jer... Gotovo svi latinični fontovi ne rade pri oblikovanju teksta na ruskom jeziku. Na ovaj trenutak Tražilica nudi oko 40 vrsta besplatno.

Veliko slovo ili njegov veliki antipod mogu se stilizirati pomoću CSS svojstva transformacije teksta. Ako postavite vrijednost text transform: none u listu stilova, tada će tekst izgledati onako kako ste ga napisali. Za pretvaranje svih slova u mala slova potrebno je postaviti vrijednost transformacije teksta: mala slova, odvojena dvotočkom, a za velika slova - velika slova. Postavljanje svojstva na transformaciju teksta: kapitalizirat će tako da svaka riječ ima veliko slovo na početku.

Pozdrav čitateljima ovog bloga. Danas ću govoriti o tome kako možete napraviti sva velika slova koristeći CSS. Naravno, da biste to učinili, možete uključiti Caps Lock i napisati željeni tekst, ali ovo je prilično primitivna metoda. Ali što ako trebate istaknuti zaseban odlomak u gotovom članku?

Izrada svih slova velikim u css

Za ovo postoji svojstvo pretvaranja teksta, koje, kao što ste možda pogodili, transformira tekst. Ima sljedeće vrijednosti:

mala slova – sav tekst se prikazuje malim slovima
velika slova – sve riječi se prikazuju velikim slovima (što nam je potrebno)
veliko slovo – prvo slovo svake riječi je veliko

To je u biti sve što trebate znati. Ostaje samo smisliti kako pristupiti željenom elementu. Zamislimo ovaj primjer: peti odlomak u članku morate napisati velikim slovima. I kako se to može provesti?

Kako doći do željenog elementa?

Kao što znate, odlomak se stvara pomoću uparena html oznaka, čiji cijeli sadržaj postaje odlomak. Sve što preostaje je definirati novu klasu stila za njega:

Sada imamo priliku pristupiti ovom specifičnom paragrafu putem CSS jezika bez utjecaja na ostatak. Možete to učiniti ovako:

Veliko slovo(
Transformacija teksta: velika slova;
}

Ova je metoda prikladna kada trebate istaknuti fragment u određenom članku. Što ako sve stranice moraju imati određeni tekst velikim slovima. U ovom slučaju, bolje je staviti blok u datoteku predloška kako ga ne biste svaki put pisali.

Ili možda trebate istaknuti drugi odlomak u svakom članku s koristeći css velikim slovima. Tada će vam odgovarati druga opcija. Pronađite blok u kojem se pojavljuje članak i pristupite drugom paragrafu koristeći pseudo-klasu nth-child. U u ovom primjeru Naš blok članaka ima klasu članaka.

Članak p:nth-child(2)(
Transformacija teksta: velika slova
}

Kao što vidite, za svaki pojedini slučaj postoji drugačije rješenje. Najvažnije je zapamtiti svojstvo text-transform, koje mijenja velika i velika slova.

Općenito, nije preporučljivo prikazivati tekst na ovaj način, jer to uvelike narušava njegovu percepciju, ali neki posebno važni fragmenti mogu biti istaknuti.

Danas smo pogledali svojstvo text-transform. Pretplatite se na blog kako biste primali nove članke.