Schimbați culoarea cuvântului cu eticheta SPAN în CSS

click fraud protection

Puteți specifica culorile fontului, dimensiunile și alți parametri într-o foaie de stil CSS externă. Cu toate acestea, dacă doriți să schimbați culoarea unui singur cuvânt sau frază, cel mai simplu și simplu mod este să utilizați eticheta în linie. Inline CSS este exact cum sună: este adăugat în HTML-ul paginii, mai degrabă decât într-o foaie de stil externă.

Evitați să utilizați eticheta, care a fost învechită.

Iată cum puteți schimba culoarea unui cuvânt folosind eticheta:

  1. Folosind editorul de text sau HTML preferat în modul de vizualizare cod, plasați cursorul înaintea primei litere a cuvântului sau a grupului de cuvinte pe care doriți să le colorați.

  2. Permiteți să înfășurați textul a cărui culoare dorim să o schimbăm cu o etichetă, inclusiv un atribut de clasă. Întregul paragraf poate arăta astfel: Acesta este textul pe care este concentrat într-o propoziție.

  3. Oferiți textului respectiv un „cârlig” pe care îl putem folosi în CSS. Următorul nostru pas este să trecem la fișierul CSS extern pentru a adăuga o nouă regulă.

    instagram viewer

    În fișierul nostru CSS, să adăugăm:

    .focus-text {

     culoare: # F00;

    }

    Această regulă ar seta acel element în linie, „,” să fie afișat în culoarea roșie. Dacă am avea un stil anterior care seta textul documentului nostru la negru, acest stil în linie ar face ca textul span să fie concentrat și să iasă în evidență cu diferite culori. Am putea adăuga și alte stiluri la această regulă, făcând textul cursiv sau îndrăzneț pentru a-l sublinia și mai mult?

  4. Salvați-vă pagina.

    Testați pagina în browserul dvs. web preferat pentru a vedea modificările în vigoare.

    Rețineți că, pe lângă, unii profesioniști din web aleg să folosească alte elemente precum perechile sau etichete. Aceste etichete erau pentru caractere aldine și italice, dar erau învechite și înlocuite cu și. Etichetele funcționează încă în browserele moderne, cu toate acestea, atât de mulți dezvoltatori web le folosesc ca cârlige de stil în linie. Aceasta nu este cea mai proastă abordare, dar dacă doriți să evitați orice elemente depreciate, vă sugerăm să rămâneți cu eticheta pentru aceste tipuri de nevoi de stil.

Sfaturi și lucruri de care trebuie să fii atent

Deși această abordare funcționează bine pentru nevoile de stiluri mici, cum ar fi dacă trebuie să schimbați doar o mică bucată de text dintr-un document, aceasta poate scăpa rapid de sub control. Dacă descoperiți că pagina dvs. este plină de elemente în linie, toate având clase unice pe care le utilizați în fișierul CSS, puteți fă-o greșit, amintește-ți, cu cât aceste etichete sunt mai multe în pagina ta, cu atât este mai greu să menții acea pagină redirecţiona. În plus, o tipografie web bună are rareori atâtea variante de culoare etc. pe toată pagina.

instagram story viewer