Litere mari HTML și spațiere între litere CSS. Cum să faceți toate literele majuscule în css O proprietate css care vă permite să faceți literele majuscule

Controlează dacă textul elementului este convertit în caractere majuscule sau majuscule. Când valoarea este alta decât none , înregistrați-vă text sursă va fi schimbat.

Informații scurteNotații Descriere Exemplu

	Indică tipul valorii.
A && B	Valorile trebuie să fie afișate în ordinea specificată.	&&
A \| B	Indică faptul că trebuie să selectați o singură valoare dintre cele propuse (A sau B).	normal \| litere mici
A \|\| B	Fiecare valoare poate fi folosită independent sau împreună cu altele în orice ordine.	lățime \|\| numara
	Grupează valori.	[ recolta \|\| cruce ]
*	Repetați de zero sau de mai multe ori.	[,]*
+	Repetați una sau mai multe ori.	+
?	Tipul, cuvântul sau grupul specificat este opțional.	medalion?
(A, B)	Repetați cel puțin A, dar nu mai mult de B ori.	{1,4}
#	Repetați o dată sau de mai multe ori, separate prin virgule.	#

× Valori

capitalize Primul caracter al fiecărui cuvânt dintr-o propoziție va fi scris cu majuscule. Simbolurile rămase nu își schimbă aspectul. minuscule Toate caracterele textului devin minuscule (minuscule). majuscule Toate caracterele textului devin majuscule (majuscule). none Nu schimbă caracterele.

Cutie cu nisip

Winnie the Pooh nu s-a împotrivit întotdeauna la o mică răcoritoare, mai ales la unsprezece dimineața, pentru că la acea oră micul dejun se terminase de mult, iar prânzul încă nu începuse. Și, bineînțeles, a fost teribil de bucuros să vadă că Iepurele scoate cești și farfurii.

div (text-transform: capitalize; )

Exemplu

text-transform h1 ( text-transform: majuscule; /* Litere majuscule */ ) p ( text-transform: capitalize; /* Fiecare cuvânt începe cu majuscule */ ) Monument cultural al Evului Mediu

Ținutul Amazonian este nemoderat în transportul mic de pisici și câini, iar Hajos Bahia este renumit pentru vinurile sale roșii.

Rezultatul acestui exemplu este prezentat în Fig. 1.

Orez. 1. Aplicarea proprietății text-transform

Model obiect

Un obiect.style.textTransform

Specificație

Fiecare specificație trece prin mai multe etape de aprobare.

Recomandare - Specificația a fost aprobată de W3C și este recomandată ca standard.
Recomandarea candidatului - Grupul responsabil pentru standard este mulțumit că își îndeplinește obiectivele, dar are nevoie de ajutor din partea comunității de dezvoltare pentru a implementa standardul.
Recomandare propusă - În această etapă, documentul este înaintat Consiliului Consultativ W3C pentru aprobare finală.
Proiect de lucru - O versiune mai matură a unui proiect care a fost discutat și modificat pentru revizuire comunitară.
Proiectul redactorului (Editorial draft) - o versiune nefinalizată a standardului după ce au fost aduse modificări de către editorii de proiect.
Draft (Draft specification) - prima versiune schiță a standardului.

Adesea se grăbește atunci când adaugă materiale pe un site sau, de exemplu, creează subiect nou pe forum, utilizatorul poate începe să scrie o propoziție (titlu) cu o literă mică (minuscule). Aceasta este într-o oarecare măsură o greșeală.

Voi arăta mai multe opțiuni pentru rezolvarea acestei probleme: PHP și CSS sunt mai potrivite pentru materialele deja publicate, când jQuery poate corecta situația înainte de publicare.

Prima literă a șirului în majusculeîn PHP

În PHP există o funcție numită „ucfirst”, care doar convertește primul caracter al unei linii în majuscule, dar dezavantajul său este că nu funcționează destul de corect cu chirilic.

Pentru a face acest lucru, vom scrie propria noastră funcție mică. Implementarea ar arăta astfel:

În această versiune, vom primi o propoziție care începe cu o literă mare, care, de fapt, este ceea ce avem nevoie.

Prima literă majusculă a unui șir în CSS

Această metodă este vizuală (adică în cod sursa propunerile de site vor apărea ca atare) convertește și primul caracter în majuscule.

Utilizarea este după cum urmează:

prima propoziție

a doua teză

a treia teză

a patra teză

#conținut p:prima-litera (text-transform: majuscule; )

Folosind pseudo-elementul „prima literă” și proprietatea „transformare text”, setăm designul pentru fiecare primă literă a paragrafului.

Prima literă a unui șir cu majuscule în jQuery

După cum am spus mai devreme, această metodă de conversie este cea mai potrivită pentru materialele care urmează să fie încă publicate.

De exemplu, vom lua un câmp de text (va acționa ca un câmp pentru introducerea unui titlu) și vom scrie un mic script pentru acesta, care, atunci când introduceți o propoziție cu literă mică, o face să o scrie cu majuscule:

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

Scriptul funcționează atât atunci când scrieți text, cât și când îl introduceți pur și simplu. Nu uitați că pentru ca scripturile să funcționeze pe site-ul dvs., trebuie să aveți biblioteca jQuery activată.

Capulă (o șapcă încorporată în text) este prima literă a unui paragraf, mai mare decât restul, și plasată astfel încât partea superioară a acesteia să fie la nivelul primului rând al paragrafului. În imagine puteți vedea un exemplu de un drop cap încorporat în text.

Apropo, WordPress are un plugin special (wordpress.org/extend/plugins/drop-caps) care vă permite să creați automat text încorporat (și deplasat în jos) litere mari . Uimitor! Cu toate acestea, ce se întâmplă dacă nu doriți să utilizați un plugin (sunt sigur că nu o faceți) și trebuie doar să creați o limită pentru mai multe postări și poate într-o anumită locație?

Vești bune: Nu aveți nevoie de un plugin pentru a crea majuscule, tot ce aveți nevoie este un mic css și o etichetă span. Deschideți fișierul CSS și adăugați următorul cod:

Span.dropcaps ( font-family:Georgia, serif; culoare: #ccc; font-size: 46px; float: stânga; font-weight: 400; line-height: 1em; margin-bottom: -0.4em; margin-right : 0,09em; poziție: relativă; )

Ceva de genul. Desigur, veți avea nevoie de un stil care să se potrivească cu designul și textul dvs. De exemplu, valorile proprietății: dimensiunea fontului , marginile și înălțimea liniei vor trebui selectate pe baza designului și textului dvs.

Tag Span

Pentru ca stilul să fie aplicat litera majusculă a textului, trebuie să „împachetați” litera majusculă într-o etichetă span și să specificați clasa corespunzătoare.

Pseudo-element: prima literă

De asemenea, puteți stila primul caracter din text folosind pseudo-elementul: prima literă . Cu toate acestea, un număr limitat de proprietăți poate fi aplicat pseudo-elementului:first-litera: acestea sunt proprietăți legate de font, culoare, fundal, margini, margini și umplutură. Un alt lucru de remarcat este că pseudo-element:prima-litera nu va funcționa în browserele mai vechi.

P:prima literă (familie de fonturi:Georgia, serif; culoare: #ccc; dimensiunea fontului: 46px; float: stânga; greutatea fontului: 400; înălțimea liniei: 1em; marginea inferioară: -0.4em; marginea -dreapta: 0.09em; poziție: relativă; )

Iată de fapt câteva metode de editare a majusculelor folosind CSS.

O literă majusculă, conform definiției, este un element de text care crește relativ în dimensiune.În aproape toate limbile, o propoziție începe cu o literă mare. Și proiectarea începutului unui paragraf cu o literă majusculă proeminentă vă permite să structurați textul și îl face mai ușor de perceput. Când este proiectată o pagină de internet, textul poate fi scris în conformitate cu preferințele autorului și cu regulile limbii ruse. De asemenea, îi puteți „automatiza” designul introducând anumite „comenzi” într-un fișier cu extensie css - o foaie de stil - sau completați fișier html secțiunea de stil. CSS este de obicei studiat în plus față de html pentru a schimba rapid unele elemente de design de-a lungul textului simultan.

Acest lucru este valabil mai ales dacă site-ul are sute de pagini, iar efectuarea de modificări la fiecare dintre ele este un proces care necesită foarte multă muncă.

Dacă aplicați css, majusculele de la începutul fiecărui paragraf pot arăta deosebite. De exemplu, codul de mai jos, introdus în html fără paranteze, permite textul formatat cu eticheta „p” pentru a face litera majusculă - prima literă - mai mare - 220% din dimensiunea standard, galben - valoarea culorii este galbenă și scrieți-l într-un font diferit de restul textului - Georgia vs. batangche.

()

p: prima literă (familie de font: Georgia; dimensiunea fontului: 220%; culoare: galben;)

()

Puteți obține litere mari frumoase prin crearea propriului font sub formă de imagini - pentru fiecare literă există o imagine separată, de exemplu, în stilul vechi rus sau gotic. Acestea pot fi desenate în Apoi, în locurile cerute, în locul majusculei, puteți introduce codul fără paranteze (). Atributele suplimentare vor fi înălțimea și lățimea - lățimea și înălțimea imaginii, care pot fi setate în pixeli pentru o combinație armonioasă cu restul textului. Exemplu: (). Paranteze în jur< и >scoatem.

Dacă nu aveți ocazia să desenați singur alfabetul, atunci litera majusculă poate fi proiectată folosind fonturi care sunt disponibile gratuit pe Google (secțiunea Fonturi) sau alte motoare și resurse de căutare. Pentru a face acest lucru, codul de mai sus trebuie formatat după cum urmează:

()

p (familie font: batangche; dimensiune font: 93%;)

p: prima literă (familie font: Kelly+Slab; dimensiune font: 220%; culoare: albastru;)

()

().

Serviciul Google vă permite să alegeți unul sau altul și oferă link-uri gata făcute pentru inserarea în html sau css. Vă atragem atenția asupra faptului că este necesar să selectați un grup de fonturi - latină sau chirilică, deoarece... Aproape toate fonturile latine nu funcționează la formatarea textului în limba rusă. Pe acest moment Motorul de căutare oferă aproximativ 40 de tipuri gratuit.

O literă majusculă sau antipodul său majuscul poate fi stilizat folosind proprietatea de transformare a textului CSS. Dacă setați valoarea text transform: niciuna în foaia de stil, atunci textul va arăta așa cum îl scrieți. Pentru a converti toate literele în litere mici, trebuie să setați transformarea textului valorii: litere mici, separate prin două puncte, iar pentru litere mari - litere mari. Setarea proprietății la transformarea textului: capitalize va face astfel încât fiecare cuvânt să aibă o literă majusculă la început.

Salutare cititori ai acestui blog. Astăzi voi vorbi despre cum puteți face toate majusculele folosind CSS. Desigur, pentru a face acest lucru, puteți activa Caps Lock și puteți scrie textul dorit, dar aceasta este o metodă destul de primitivă. Dar dacă trebuie să evidențiați un paragraf separat într-un articol terminat?

Toate literele majuscule în css

Există o proprietate text-transform pentru aceasta, care, după cum probabil ați ghicit, transformă textul. Are urmatoarele valori:

litere mici – tot textul este afișat cu litere mici
majuscule – toate cuvintele sunt afișate cu majuscule (de ce avem nevoie)
capitalize – prima literă a fiecărui cuvânt este scrisă cu majuscule

Asta e practic tot ce trebuie să știi. Tot ce rămâne este să vă dați seama cum să accesați elementul dorit. Să ne imaginăm acest exemplu: trebuie să faceți al cincilea paragraf dintr-un articol cu majuscule. Și cum poate fi implementat acest lucru?

Cum se ajunge la elementul dorit?

După cum știți, un paragraf este creat folosind etichetă html asociată, al cărui conținut întreg devine paragraf. Tot ce rămâne este să definiți o nouă clasă de stil pentru aceasta:

Acum avem posibilitatea de a accesa acest paragraf specific prin limbajul CSS fără a afecta restul. O poți face astfel:

Majusculă(
Text-transformare: majuscule;
}

Această metodă este potrivită atunci când trebuie să evidențiați un fragment dintr-un anumit articol. Dacă toate paginile ar trebui să aibă un anumit text cu majuscule. În acest caz, este mai bine să plasați blocul într-un fișier șablon pentru a nu-l scrie de fiecare dată.

Sau poate trebuie să evidențiați al doilea paragraf din fiecare articol cu folosind css cu litere mari. Atunci o altă opțiune ți se va potrivi. Găsiți blocul în care apare articolul și accesați al doilea paragraf folosind pseudoclasa a n-a-copil. ÎN în acest exemplu Blocul nostru de articole are clasa de articole.

Articolul p:nth-child(2)(
Transformare text: majuscule
}

După cum puteți vedea, există o soluție diferită pentru fiecare caz specific. Cel mai important lucru este să vă amintiți despre proprietatea text-transform, care schimbă majusculele literelor.

În general, nu se recomandă afișarea textului în acest fel, deoarece îi afectează foarte mult percepția, dar pot fi evidențiate unele fragmente deosebit de importante.

Astăzi ne-am uitat la proprietatea text-transform. Abonați-vă la blog pentru a primi articole noi.