Cum să faci un font frumos în html: dimensiuni, culori, etichete de font html. Crearea de majuscule cu CSS Css toate majuscule

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

Vă voi arăta câteva opțiuni pentru rezolvarea acestei probleme: PHP și CSS sunt mai potrivite pentru materialele deja publicate, în timp ce jQuery poate rezolva situația chiar înainte de publicare.

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

În PHP, există o funcție numită „ucfirst”, care doar convertește primul caracter al șirului în majuscule, dar minusul este că nu funcționează corect cu chirilic.

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

În această versiune, obținem o propoziție care începe cu majusculă care este exact ceea ce avem nevoie.

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

Această metodă vizual (adică în cod sursa sugestiile de site vor apărea așa cum sunt) transformă și primul caracter în majuscule.

Utilizarea este următoarea:

prima propoziție

a doua teză

a treia teză

a patra teză

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

Cu pseudo-elementul „prima literă” și proprietatea „text-transform”, setăm stilul pentru fiecare primă literă a paragrafului.

Prima literă majusculă a unui șir cu 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 el, care, atunci când introduceți o propoziție cu o literă mică, o face 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 pur și simplu îl lipiți. Nu uitați că pentru ca scripturile să funcționeze pe site-ul dvs., trebuie să aveți biblioteca jQuery inclusă.

sau mai multe despre litere și formatarea HTML CSS

Capitolul conține exemple de formatare a caracterelor din zona Hypertext Markup.

În meniul din stânga veți găsi tutoriale HTML moderne și foarte detaliate.

Vă vor permite să vă creați site-ul de la zero, dar deocamdată, uitați-vă puțin mai jos.

Ar putea fi interesant.

Epocă societate informaţională

Omenirea a intrat într-o nouă perioadă a dezvoltării sale, în care informaţia şi tehnologii de rețea joacă un rol extrem de important. Trăim în era societății informaționale, care se caracterizează prin dezvoltarea rapidă a tehnologiilor informației și telecomunicațiilor. Odată cu apariția computerului și a internetului, au început schimbări extraordinare. Calculatorul și internetul împing societatea să formuleze noi norme de comportament, reguli și idealuri. Internetul este pentru noua generație ceea ce a fost televiziunea pentru generația anterioară. Dar Retea globala mult mai funcțional decât televiziunea, deoarece oferă o oportunitate de a face achiziții, vânzări, oferte de comunicare și diferite căi auto-exprimare, cum ar fi crearea de pagini web și site-uri web personale.

Litere HTML: majuscule și minuscule

Exemplu de formatare a scrisorii:

Format rezultat:

Un exemplu de text liber scris cu majuscule

Un exemplu de text liber scris cu majuscule

Etichete - definiți litere mari(Aceste etichete nu sunt acceptate în HTML 5).

Cod CSS style="text-transform:uppercase" - definește litere mari.

Cu alte cuvinte, majusculele sunt definite cu folosind CSS atribute.

Litere HTML și Spațiere CSSîntre ele

Exemplu de formatare a scrisorii:

Format rezultat:

Text HTML personalizat și spațiere între litere CSS de 2 px

Descrierea atributelor și valorilor:

Cod CSS style="letter-spacing:2px" - definește Spațiere între litere CSS.

Exemple similare formatarea uită-te în meniul din stânga. Vă mulțumim pentru atenție.

În html, dimensiunea fontului joacă un rol important. Atrage atenția utilizatorului asupra Informații importante postat pe pagina site-ului. Deși nu numai dimensiunea literelor este importantă, ci și culoarea, grosimea și chiar familia lor.

Etichete și atribute atunci când lucrați cu fonturi html

Limbajul hipertext are un set mare de instrumente pentru lucrul cu fonturile. La urma urmei, formatarea textului este sarcina principală a html.

Cauza creației limbaj HTML a existat o problemă de afișare a regulilor de formatare a textului de către browsere.


Luați în considerare etichetele care sunt folosite pentru a lucra cu fonturile în html și atributele acestora. Principala este eticheta. Folosind valorile atributelor sale, puteți seta mai multe caracteristici ale fontului:

  • culoare - setează culoarea textului;
  • dimensiune – dimensiunea fontului în unități convenționale.

Este acceptată o valoare de atribut pozitivă de la 1 la 7.

  • fata - folosit pentru a seta familia de fonturi a textului care va fi folosit in interiorul etichetei. Sunt acceptate valori multiple, separate prin virgule.

Doar textul care se află între părțile etichetei de font pereche este formatat. Restul textului este afișat în fontul implicit.

De asemenea, în html există o serie de etichete pereche care definesc o singură regulă de formatare. Acestea includ:

  • - setează fontul aldine în html. Eticheta este similară în acțiune cu cea anterioară;
  • - dimensiunea este mai mare decât cea implicită;
  • - dimensiune mai mică a fontului;
  • - text italic (italic). Etichetă similară ;
  • — text cu subliniere;
  • - tăiat;
  • — afișarea textului numai cu litere mici;
  • - cu litere mari.

text simplu

Miniatură

Miniatură

Mai mult decât de obicei

Mai puțin decât de obicei

Cursive

Cursive

Cu subliniere

Striat

Capabilități de atribute 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 a fontului:

1) font-family - proprietatea setează familia de fonturi. Este posibilă enumerarea mai multor valori.
Schimbarea fontului în html la următoarea valoare se va întâmpla dacă familia anterioară nu este setată la sistem de operare utilizator .

Sintaxa de scriere:

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

2) font-size - dimensiunea este setată de la 1 la 7. Acesta este unul dintre principalele modalități prin care puteți crește fontul în html.
Sintaxa de scriere:

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

De asemenea, puteți seta dimensiunea fontului:

  • În pixeli;
  • În valoare absolută (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 fontului. Sintaxă:

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

Valori:

  • normal - ortografie normală;
  • italic - italic
  • oblic - font cu o înclinare 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 literele mari în majuscule. Sintaxă:

font-variant: normal | 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 scrierii 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;
  • îndrăzneț - 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 termeni numerici.

greutate font: bold

greutatea fontului: mai îndrăzneață

greutate font: mai ușor

greutate font: normal

greutate font: 900

greutate font: 100

proprietatea fontului și culoarea fontului html

Fontul este o altă proprietate a containerului. Pe plan intern, a combinat valorile mai multor proprietăți concepute pentru a schimba fonturile. Sintaxa fontului:

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

De asemenea, fonturile folosite de sistem în etichetele de pe diferite controale pot fi setate ca valoare:

  • 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

legendă mică

font:bara de stare

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

Pentru a seta culoarea fontului în html, puteți folosi proprietatea color. Vă permite să setați culoarea, ca și cu cuvânt cheie, și în format rgb. Și, de asemenea, sub forma unui cod hexazecimal.

Vă permite să schimbați majusculele literelor text.

Valoarea implicită este none , care nu are niciun efect asupra textului. Cazul textului rămâne același. Valorile majuscule și minuscule convertesc caracterele în majuscule și, respectiv, litere mici. Dacă specificați capitalize , atunci numai primele caractere ale fiecărui cuvânt vor fi scrise cu majuscule. Moștenire moștenește valoarea părintelui.

Exemplu h3 ( text-transform: majuscule; ) .minuscule ( text-transform: minuscule; ) .capitalize ( text-transform: capitalize; ) text-transform Acesta este titlul. Are o proprietate text-transform aplicată cu o valoare majusculă. Toate caracterele vor fi majuscule.

Acest paragraf are proprietatea Text-transform setată la Minuscule, ceea ce înseamnă că toate literele vor fi cu litere mici.

Și acest ultim paragraf are o proprietate text-transform aplicată cu proprietatea CAPITALIZE. Primele litere ale fiecărui cuvânt vor fi scrise cu majuscule și numai ele.

Rezultat

Cu toate acestea, nu toate sunt atât de simple. Există câteva nuanțe. Dacă acordați atenție celui de-al doilea paragraf al exemplului de mai sus, veți observa că cuvântul capitalize , în ciuda proprietății text-transform aplicată paragrafului cu valoarea capitalize , este afișat în întregime cu litere mari, ceea ce corespunde textului sursă. Acest lucru se explică prin faptul că, cu valoarea specificată a capitalizei, sunt bifate doar primele litere ale cuvintelor, iar restul rămân neschimbate, indiferent de starea lor inițială.
În ciuda simplității sale aparente, proprietatea text-transform poate fi foarte utilă. De exemplu, pentru a face textul tuturor titlurilor H1 ale site-ului dvs. cu majuscule, trebuie doar să adăugați o proprietate în foaia de stil

H1 (transformare text: majuscule;)

iar problema se va rezolva. Și nu trebuie să schimbați manual toate anteturile, care pot fi foarte, foarte multe.

Capulă (o literă inițială încorporată în text) este prima literă a unui paragraf care are marime mai mare decât restul și așezat astfel încât vârful său să fie la nivelul primului rând al paragrafului. În imagine puteți vedea un exemplu de literă inițială încorporată în text.

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

Vestea bună este că nu aveți nevoie de un plugin pentru a crea majuscule, tot ce aveți nevoie este niște 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ăților: dimensiunea fontului , marginile și înălțimea liniei vor trebui ajustate în funcție de design și text.

eticheta span

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

A

Pseudo element: prima literă

De asemenea, puteți stila primul caracter din text folosind pseudo-elementul :first-letter. Cu toate acestea, un număr limitat de proprietăți poate fi aplicat pseudo-elementului :first-letter: acestea sunt proprietăți legate de font, culoare, fundal, chenar, margine și umplutură. Un alt lucru de remarcat este că pseudo-elementul :first-letter 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ă; )

Aici, de fapt, câteva metode de editare litere mari cu CSS.