Miniatură

Miniatură

Mai mult decât de obicei

Mai puțin decât de obicei

Cursive

Cursive

Cu subliniere

Barat

Capacitățile atributelor de stil

Pe lângă etichetele descrise, există mai multe moduri de a schimba fontul în html. Una dintre ele este utilizarea atributului stil generic. Folosind valorile proprietăților sale, puteți seta stilul de afișare al fonturilor:

1) font-family – proprietatea stabilește familia de fonturi. Este posibil să enumerați mai multe valori.
Schimbarea fontului în html la următoarea valoare va avea loc dacă familia anterioară nu este instalată pe sistemul de operare al utilizatorului.

Sintaxa de scriere:

familia-font: font-name [, font-name[, ...]]

2) dimensiunea fontului – dimensiunea este setată de la 1 la 7. Acesta este unul dintre modalitățile principale prin care puteți crește fontul în HTML.
Sintaxa de scriere:

font-size: dimensiune absolută | dimensiune relativă | sens | interes | moşteni

De asemenea, puteți seta dimensiunea fontului:

• În pixeli;
• În termeni absoluti ( xx-mic, x-mic, mic, mediu, mare);
• În procente;
• În puncte (pt).

Dimensiunea fontului: 7

Dimensiunea fontului: 24px

Dimensiunea fontului: x-mare

Dimensiunea fontului: 200%

Dimensiunea fontului: 24 pt

3) font-style – setează stilul de scriere a fontului. Sintaxă:

stil font: normal | cursiv | oblic | moşteni

Valori:

• normal – ortografie normală;
• italic – italic;
• oblic – font înclinat spre dreapta;
• inherit – moștenește ortografia elementului părinte.

Un exemplu despre cum să schimbați fontul în html folosind această proprietate:

font-style:moștenire

stil font: cursiv

stil font: normal

stil font: oblic

4) font-variant – convertește toate majusculele în majuscule. Sintaxă:

font-variant: normal | cu majuscule mici | moşteni

Un exemplu despre cum să schimbați fontul în html cu această proprietate:

font-variant:moștenire

font-variant:normal

font-variant:small-caps

5) font-weight – vă permite să setați grosimea textului (saturație). Sintaxă:

greutate font: bold|bolder|lighter|normal|100|200|300|400|500|600|700|800|900

Valori:

• bold – setează fontul html la bold;
• bolder – mai îndrăzneț față de normal;
• mai ușoară – mai puțin saturată față de normal;
• normal – ortografie normală;
• 100-900 – setează grosimea fontului în echivalent numeric.

greutate font: bold

greutatea fontului: mai îndrăzneață

greutate font: mai ușor

greutate font: normal

greutate font: 900

greutate font: 100

Proprietatea fontului HTML și culoarea fontului

Fontul este o altă proprietate a containerului. În interiorul său, a combinat valorile mai multor proprietăți destinate schimbării fonturilor. sintaxa fontului:

font: font-size font-family | moşteni

Valoarea poate fi setată și la fonturile utilizate de sistem în etichetele de pe diferite controale:

• legenda – pentru butoane;
• pictogramă – pentru icoane;
• meniu - meniu;
• mesaj-box – pentru casete de dialog;
• small-caption – pentru controale mici;
• status-bar – font bara de stare.

font:pictogramă

font:legendă

font:meniu

font: caseta de mesaje

subtitrare

font:bara de stare

font: italic 50px bold „Times New Roman”, Times, serif

Pentru a seta culoarea fontului în HTML, puteți utiliza proprietatea culoare. Vă permite să setați culoarea, fie folosind un cuvânt cheie, fie în format rgb. Și, de asemenea, în cod hexazecimal.

Controlează dacă textul elementului este convertit în caractere majuscule sau majuscule. Când valoarea este alta decât none , se va modifica literul textului sursă.

informatie scurta

Denumiri

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 modifică literele caracterelor.

Cutie cu nisip

Winnie the Pooh nu s-a împotrivit întotdeauna un pic de răcoare, 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, era teribil de bucuros să vadă că Iepurele scotea cești și farfurii.

div (text-transform: capitalize; )

Exemplu

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 ( Recomandare posibilă) - grupul responsabil de standard este mulțumit că își îndeplinește obiectivele, dar necesită ajutor din partea comunității de dezvoltare pentru implementarea standardului.
• Recomandare propusă Recomandare sugerată) - î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ă.
• Schița redactorului ( Proiect editorial) - o versiune preliminară a standardului după ce au fost făcute modificări de către editorii de proiect.
• Ciornă ( Proiect de specificație) - prima versiune a standardului.

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 prin introducerea anumitor „comenzi” într-un fișier cu extensie css - o foaie de stil - sau adăugând o secțiune de stil la fișierul dvs. html. 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.

(<) style(>)

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

(<)/style(>)

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 (<) img src=”ссылка на место, где лежит картинка”(>). 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: (<) img src=”ссылка на место, где лежит картинка” heigh=12 px width=6px(>). 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ă:

(<) style(>)

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

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

(<)/style(>)

(<)link href="http://fonts.googleapis.com/css?family=Kelly+Slab&subset=latin,cyrillic" rel="stylesheet" type="text/css" (>).

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ă. În 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 o etichetă html asociată, întregul conținut al căruia devine un paragraf. Tot ce rămâne este să definiți o nouă clasă de stil pentru aceasta:

Acum avem ocazia să accesăm 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 folosind CSS cu majuscule. 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 acest exemplu, blocul nostru cu un articol are clasa articol.

Articolul p:nth-child(2)(
Text-transform: 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.