Amb CSS , és fàcil configurar el color del text en un document. Si voleu que els paràgrafs de la vostra pàgina es mostrin en un determinat color, només heu d'especificar que, al vostre full d'estils extern, el navegador mostrarà el text en el color seleccionat. Què passa llavors quan vulgueu canviar el color d'una sola paraula (o tal vegada només algunes paraules) dins d'un paràgraf de text? Per a això, haurà d'utilitzar un element en línia com l'etiqueta.
En última instància, canviar el color d'una sola paraula o un petit grup de paraules dins d'una oració és fàcil d'utilitzar CSS, i les etiquetes són HTML vàlids, així que no us preocupeu perquè es tracti d'algun tipus de pirateig. Amb aquest enfocament, també eviteu utilitzar etiquetes i atributs obsolets com ara "font", que és producte d'una passada era HTML.
Aquest article és per a principiants desenvolupadors web que probablement siguin nous en HTML i CSS. Us ajudarà a aprendre a utilitzar l'etiqueta HTML i CSS per canviar el color del text específic a les vostres pàgines. Dit això, hi ha alguns inconvenients d'aquest mètode, que vaig a cobrir al final d'aquest article. De moment, segueix llegint per conèixer els passos per canviar aquest color de text! És molt fàcil i ha de trigar uns 2 minuts.
Instrucció pas a pas
- Obriu la pàgina web que vulgueu actualitzar al vostre editor HTML de text preferit. Aquest podria ser un programa com Adobe Dreamweaver o un simple editor de text com el Bloc de notes, el Bloc de notes, + TextEdit, etc.
- Al document, localitzeu les paraules que voleu que es mostrin en un color diferent a la pàgina. Pel bé d'aquest tutorial, permet utilitzar algunes paraules que es troben dins d'un paràgraf de text més gran. Aquest text estarà contingut dins del parell de la parella. Trobeu una de dues paraules el color que vulgueu editar.
- Col·loqueu el cursor abans de la primera lletra de la paraula o grup de paraules que vulgueu canviar de color. Recordeu, si esteu utilitzant un editor de WYSIWYG com Dreamweaver, ara esteu treballant en la "visualització de codi".
- Deixeu-vos embolicar el text del qual volem canviar amb una etiqueta, incloent un atribut de classe. Tot el paràgraf pot tenir aquest aspecte: aquest és un text centrat en una frase.
- Acabem d'utilitzar un element en línia, el, per donar a aquest text específic un "ganxo" que podem utilitzar en CSS. El nostre següent pas és saltar al nostre fitxer CSS extern per afegir una nova regla.
- En el nostre fitxer CSS, afegim:
- .focus-text {
- color: # F00;
- }
- El
- Aquesta regla estableix que l'element en línia, el, es mostri en color vermell. Si teníem un estil anterior que fixés el text del nostre document en negre, aquest estil en línia provocaria que el text span estigués centrat i es destaqués amb el color diferent. També podríem afegir altres estils a aquesta regla, potser fent que el text en cursiva o en negreta l'emfatitzi encara més?
- Desa la teva pàgina.
- Proveu la pàgina al vostre navegador web favorit per veure els canvis en vigor.
- Tingueu en compte que, a més de la, alguns professionals de la web opten per utilitzar altres elements, com ara els parells o etiquetes. Aquestes etiquetes solien ser "en negreta" i "cursiva" específicament, però estaven obsoletes i substituïdes per i. Les etiquetes encara funcionen en navegadors moderns, però, tants desenvolupadors web els utilitzen com anells d'estil en línia. Aquest no és el pitjor enfocament, però si voleu evitar elements obsolets, us suggerim que s'adhereixi a l'etiqueta d'aquest tipus de necessitats d'estil.
Consells i coses per tenir cura
Tot i que aquest mètode funciona bé per a petites necessitats d'estil, com si necessiteu canviar només un petit text en un document, pot sortir ràpidament de control. Si trobeu que la vostra pàgina està plena d'elements en línia, tots els quals tenen classes úniques que esteu utilitzant al vostre fitxer CSS, podeu fer-ho malament, recordeu, com més d'aquestes etiquetes estan a la vostra pàgina, més difícil és és probable que sigui per mantenir aquesta pàgina endavant. A més, bona tipografia web rarament té moltes variants de color, etc. al llarg de la pàgina.