Schimbarea tipului de font și a culorii afișate pe o pagină web

Notă: Această pagină are legătură cu schimbarea tipului, dimensiunii și culorii fontului într-o pagină web. Pentru Microsoft Word, consultați pagina noastră despre cum să modificați culoarea, dimensiunea sau tipul fontului în Word.

Acest document conține instrucțiuni privind modificarea fontului și a culorii acestuia pe o pagină Web. Sintaxa corectă care avansează înainte este folosirea foilor de stil cascadă împreună cu selectorii de clasă sau ID, mai degrabă decât un atribut de stil inline sau o etichetă de font, care este depreciat. Deși, este demn de remarcat faptul că aceste două metode încă funcționează cu cele mai multe browsere de Internet.

Pentru a continua, selectați metoda pe care doriți să o învățați sau citiți fiecare secțiune.

Dacă intenționați să schimbați fața fontului și culoarea sa o singură dată pe o pagină web, trebuie să modificați atributele acestuia în eticheta elementului. Folosind atributul de stil, puteți specifica fața și culoarea fontului cu font-familie, culoare și dimensiunea fontului cu dimensiunea fontului, așa cum se arată în exemplul de mai jos.

Cod exemplu

Acest text are fontul Courier, este Albastru și 20px.

Rezultat

Acest text are fontul Courier, este Albastru și dimensiune de 20px.

Utilizarea CSS pentru una sau mai multe pagini

Font personalizat pentru o pagină

În partea din capul paginii dvs. web, puteți introduce un cod între file pentru a modifica aspectul textului dvs. în diverse elemente. Următoarea casetă albastră conține un exemplu de cod care, o dată numit, ar schimba fontul tău în Courier și-l va roșu. După cum puteți vedea, am definit numele clasei ca "personalizat".

 .custom {font-family: Curier; culoarea rosie; font-size: 20px; } 

Odată definită, acest stil poate fi aplicat majorității elementelor din pagină prin atașarea clasei "personalizate" la ele. În caseta următoare sunt afișate două rânduri de cod și rezultatele acestora.

Exemplu

Această întrerupere este roșie și Curier

Numai cuvântul TEST este roșu și Curier.

Rezultat

Această întrerupere este roșie și Curier.

Numai cuvântul TEST este roșu și Curier.

Font personalizat pentru mai multe pagini

Importul unui fișier extern CSS poate fi foarte benefic în faptul că permite utilizatorilor să schimbe regulile pentru mai multe pagini în același timp. Următoarea secțiune arată un exemplu pentru crearea unui fișier CSS de bază care modifică fontul și culoarea pentru majoritatea elementelor. Acest fișier poate fi încărcat în mai multe pagini Web, chiar și pe un întreg site.

Folosind orice editor de text de bază, salvând următorul text ca fișier .css îl pregătește pentru import.

 @charset "utf-8";

.courier {font-family: Curier; culoare: # 005CB9; }

Odată ce textul precedent a fost plasat într-un fișier .css (ne-am denumit ours basic.css ), puteți să îl conectați de la orice altă pagină utilizând o linie similară cu exemplul următor.

Sfat: utilizatorii pot schimba atributele elementelor dintr-o pagină modificând codul din fișierul importat .css.

Soluție etichetă de font

Deși este depreciată, eticheta HTML poate fi utilizată în continuare și poate fi necesară pentru a fi utilizat cu anumite servicii online. Când utilizați eticheta FONT, trebuie să includeți atributul față, care descrie fontul care va fi utilizat. În exemplul de mai jos, folosim fontul Courier și codul de culoare hexazecimal # 005CB9, care este albastru închis.

Cod exemplu

 Un exemplu de font special. 

Rezultat