Con CSS , é fácil configurar a cor do texto nun documento. Se quere que os parágrafos da súa páxina se mostren nunha determinada cor, simplemente especifica que na súa folla de estilo externa eo navegador mostrará o seu texto na cor escollida. ¿Que pasa entón cando quere cambiar a cor dunha soa palabra (ou quizais só algunhas palabras) nun parágrafo de texto? Para iso, necesitarás usar un elemento en liña como a etiqueta.
En última análise, cambiar a cor dunha única palabra ou un pequeno grupo de palabras dentro dunha oración é doado de usar CSS e as etiquetas son HTML válidas, así que non se preocupe por ser un tipo de hackear. Con este enfoque, tamén evitará empregar etiquetas e atributos obsoletos como "fonte", que é produto dunha era anterior de HTML.
Este artigo é para os desenvolvedores web iniciais que probablemente sexan novos en HTML e CSS. Axudaralle a aprender a usar a etiqueta HTML e CSS para cambiar a cor do texto específico nas súas páxinas. Dito isto, hai algúns inconvenientes a este método, que cubriremos ao final deste artigo. Por agora, lea para aprender os pasos para cambiar esta cor de texto! É moi fácil e debe levar uns 2 minutos.
Instrución paso a paso
- Abra a páxina web que desexa actualizar no seu editor HTML de texto favorito. Este podería ser un programa como Adobe Dreamweaver ou un editor de texto simplemente como Bloc de notas, Notepad ++, TextEdit, etc.
- No documento, busque as palabras que quere que se mostren nunha cor diferente na páxina. Por mor deste tutorial, deixa usar algunhas palabras que están dentro dun parágrafo de texto máis grande. Ese texto estará contido dentro do par. Atopar unha das dúas palabras cuxa cor desexa editar.
- Coloque o cursor antes da primeira letra da palabra ou grupo de palabras que quere cambiar de cor. Lembre, se está a usar un editor de WYSIWYG como Dreamweaver, agora está a traballar na "vista de código".
- Permite engadir o texto cuxa cor queremos cambiar cunha etiqueta, incluído un atributo de clase. Todo o párrafo pode parecer así: Este é o texto que se enfoca nunha frase.
- Acabamos de usar un elemento en liña, o, para darlle ese texto específico a un "gancho" que podemos usar en CSS. O noso seguinte paso é saltar ao noso ficheiro CSS externo para engadir unha nova regra.
- No noso arquivo CSS, imos engadir:
- .focus-text {
- cor: # F00;
- }
- El
- Esta regra establecería que o elemento en liña, o, para mostrarse na cor vermella. Se tivésemos un estilo anterior que fixese o texto do noso documento en negro, este estilo en liña faría que o texto de span estivese enfocado e destaque coa cor diferente. Tamén poderiamos engadir outros estilos a esta regra, quizais facendo o texto en cursiva ou en negra para enfatizar aínda máis?
- Garda a túa páxina.
- Proba a páxina no teu navegador web favorito para ver os cambios en vigor.
- Teña en conta que, ademais do, algúns profesionais da web optan por usar outros elementos como os pares ou etiquetas. Estas etiquetas usaban para "negra" e "cursiva" específicamente, pero estaban obsoletas e substituíronse por e. As etiquetas aínda funcionan en navegadores modernos; con todo, moitos desenvolvedores web usan como hooks de estilo en liña. Este non é o peor enfoque, pero se desexa evitar elementos obsoletos, suxiro manter a etiqueta para este tipo de necesidades de estilo.
Consellos e cousas para coidar
Mentres esta visión funciona ben para as necesidades de pequeno estilo, como se necesitas cambiar só un pequeno anaco de texto nun documento, pode saír rápidamente do control. Se pensas que a túa páxina está chea de elementos en liña, que teñen clases únicas que estás usando no teu ficheiro CSS, podes estar equivocado, recordade que canto máis destas etiquetas están na túa páxina, máis difícil é É probable que sexa para manter esa páxina en diante. Adicionalmente, boa tipografía web raramente ten moitas variantes de cor, etc. en toda a páxina.