Con i CSS, è facile impostare il colore del testo in un documento. Se desideri che i paragrafi della pagina vengano visualizzati in un determinato colore, devi semplicemente specificarlo nel foglio di stile esterno e il browser visualizzerà il testo nel colore scelto. Cosa succede allora quando vuoi cambiare il colore di una sola parola (o forse solo poche parole) all'interno di un paragrafo di testo? Per questo, dovrai usare un elemento in linea come il tag.
In definitiva, cambiare il colore di una singola parola o di un piccolo gruppo di parole all'interno di una frase è facile con i CSS, e i tag sono HTML validi, quindi non preoccuparti che si tratti di una sorta di hack. Con questo approccio, eviti anche di usare tag e attributi deprecati come "font", che è un prodotto di un'era passata dell'HTML.
Questo articolo è per gli sviluppatori web principianti che sono probabilmente nuovi in HTML e CSS. Ti aiuterà a imparare come usare il tag HTML e il CSS per cambiare il colore del testo specifico sulle tue pagine. Detto questo, ci sono alcuni inconvenienti a questo metodo, che copriremo alla fine di questo articolo. Per ora, continua a leggere per imparare i passaggi per cambiare questo colore del testo. È molto facile e dovrebbe richiedere circa due minuti.
Istruzioni passo dopo passo
- Apri la pagina web che desideri aggiornare nel tuo editor HTML di testo preferito. Questo potrebbe essere un programma come Adobe Dreamweaver o un semplice editor di testo come Notepad, Notepad ++, TextEdit, ecc.
- Nel documento, individuare le parole che si desidera visualizzare in un colore diverso sulla pagina. Per il bene di questo tutorial, usiamo alcune parole che si trovano all'interno di un paragrafo più grande di testo. Quel testo sarà contenuto all'interno della coppia di tag. Trova una delle due parole di cui desideri modificare il colore.
- Posiziona il cursore prima della prima lettera nella parola o nel gruppo di parole che desideri cambiare colore. Ricorda, se stai usando un editor WYSIWYG come Dreamweaver, stai lavorando in "code view" in questo momento.
- Consentono di avvolgere il testo di cui vogliamo cambiare il colore con un tag, incluso un attributo di classe. L'intero paragrafo può assomigliare a questo:
Questo è il testo su cui si concentra una frase.
- Abbiamo appena usato un elemento inline, il, per dare a quel testo specifico un "hook" che possiamo usare nei CSS. Il nostro prossimo passo è passare al nostro file CSS esterno per aggiungere una nuova regola.
- Nel nostro file CSS, aggiungiamo:
-
.focus-text {
-
colore: # F00;
-
}
- Questa regola imposterà quell'elemento inline, il, da visualizzare nel colore rosso. Se avessimo uno stile precedente che impostasse il testo del nostro documento in nero, questo stile in linea farebbe risaltare il testo di span e risaltare con il diverso colore. Potremmo anche aggiungere altri stili a questa regola, forse rendendo il testo in corsivo o grassetto per enfatizzarlo ancora di più?
- Salva la tua pagina
- Prova la pagina nel tuo browser web preferito per vedere le modifiche in vigore.
- Nota che, oltre a, alcuni professionisti del Web scelgono di utilizzare altri elementi come le coppie di tag o tag. Questi tag erano in grassetto e in corsivo in particolare, ma erano deprecati e sostituiti con e. I tag funzionano ancora nei browser moderni, tuttavia, così tanti sviluppatori web li usano come ganci per lo styling in linea. Questo non è l'approccio peggiore, ma se si desidera evitare elementi deprecati, si consiglia di attenersi al tag per questi tipi di esigenze di stile.
Consigli e cose a cui prestare attenzione
Anche se questo approccio funziona bene per esigenze di styling di piccole dimensioni, come se fosse necessario modificare solo una piccola porzione di testo in un documento, può rapidamente perdere il controllo. Se trovi che la tua pagina è piena di elementi inline, ognuno dei quali ha classi uniche che stai usando nel tuo file CSS, potresti sbagliare, ricorda, più questi tag sono nella tua pagina, più difficile è è probabile che sia per mantenere quella pagina andando avanti. Inoltre, una buona tipografia web raramente ha molte varianti di colore, ecc. In tutta la pagina.
