Cu CSS , este ușor să setați culoarea textului într-un document. Dacă doriți ca paragrafele de pe pagina dvs. să fie redate într-o anumită culoare, pur și simplu specificați că în foaia de stil externă și browserul va afișa textul dvs. în culoarea aleasă. Ce se întâmplă atunci când doriți să modificați culoarea unui singur cuvânt (sau poate doar câteva cuvinte) într-un paragraf de text? Pentru aceasta, va trebui să utilizați un element inline, cum ar fi eticheta.
În cele din urmă, schimbarea culorii unui singur cuvânt sau a unui grup restrâns de cuvinte într-o propoziție este ușor de utilizat folosind CSS, iar etichetele sunt valabile în HTML, așa că nu vă îngrijorați despre acest lucru fiind un fel de hack. Cu această abordare, evitați, de asemenea, să utilizați etichete depreciate și atribute precum "font", care este un produs al unei ere HTML anterioare.
Acest articol este pentru începători dezvoltatorii web care sunt probabil noi pentru HTML și CSS. Acesta vă va ajuta să învățați cum să utilizați eticheta HTML și CSS pentru a schimba culoarea textului specific pe paginile dvs. Acestea fiind spuse, există unele neajunsuri la această metodă, pe care o voi acoperi la sfârșitul acestui articol. Pentru moment, citiți mai departe pentru a afla pașii de schimbare a acestei culori a textului! Este foarte ușor și ar trebui să dureze aproximativ 2 minute.
Instrucțiuni pas cu pas
- Deschideți pagina Web pe care doriți să o actualizați în editorul HTML preferat pentru text. Acesta ar putea fi un program cum ar fi Adobe Dreamweaver sau un simplu editor de text cum ar fi Notepad, Notepad ++, TextEdit etc.
- În document, găsiți cuvintele pe care doriți să le afișați într-o altă culoare pe pagină. De dragul acestui tutorial, permiteți să utilizați câteva cuvinte care se află într-un paragraf mai mare de text. Acest text va fi conținut în perechea de tag-uri. Găsiți unul din cele două cuvinte ale căror culori doriți să le modificați.
- Plasați cursorul înaintea primei litere din cuvântul sau grupului de cuvinte pe care doriți să le modificați culoarea. Amintiți-vă că, dacă utilizați un editor WYSIWYG ca Dreamweaver, lucrați acum în modul "vizualizare cod".
- Să împachetați textul a cărui culoare dorim să o modificăm cu o etichetă, inclusiv un atribut de clasă. Întregul paragraf poate arăta astfel: Acesta este textul care se concentrează într-o propoziție.
- Tocmai am folosit un element inline pentru a da acelui text un "cârlig" pe care îl putem folosi în CSS. Următorul pas este să treceți la fișierul CSS extern pentru a adăuga o nouă regulă.
- În fișierul nostru CSS, să adăugăm:
- .focus-text {
- culoare: # F00;
- }
- Această regulă ar seta acel element inline, pentru a afișa în culoarea roșie. Dacă am avea un stil anterior care ne-a stabilit textul documentului neagră, acest stil inline ar determina focalizarea pe textul de tip span și să iasă în evidență cu culoarea diferită. Am putea adăuga, de asemenea, alte stiluri la această regulă, făcând probabil textul italic sau îndrăzneț să-l subliniezi chiar mai mult?
- Salvați pagina.
- Testați pagina în browserul dvs. web preferat pentru a vedea modificările în efect.
- Rețineți că, în plus față de, unii profesioniști web aleg să utilizeze alte elemente, cum ar fi perechile sau etichetele. Aceste etichete fuseseră folosite pentru "bold" și "italice" în mod specific, dar au fost depreciate și înlocuite cu și. Etichetele încă mai funcționează în browserele moderne, cu toate acestea, atât de mulți dezvoltatori web le folosesc ca și cârligele de styling inline. Aceasta nu este cea mai proastă abordare, dar dacă doriți să evitați orice elemente depreciate, vă sugerăm să păstrați eticheta pentru aceste tipuri de nevoi de styling.
Sfaturi și lucruri de urmărit
În timp ce această abordare funcționează bine pentru nevoile de stil redus, ca în cazul în care trebuie să schimbați doar o mică bucată de text într-un document, acesta poate scăpa rapid de sub control. Dacă găsiți că pagina dvs. este plină cu elemente inline, toate având clase unice pe care le utilizați în fișierul dvs. CSS, este posibil să faceți acest lucru greșit. Rețineți că, cu cât mai multe dintre aceste etichete sunt în pagina dvs., cu atât mai greu este este probabil să fie menținerea acestei pagini în viitor. În plus, tipografia web bună are rareori multe variante de culoare, etc. pe toată pagina!