CSS reemplaza el texto

"Es posible que haya encontrado algunas animaciones en los sitios web, donde el flotar sobre algún texto lo hace reemplazar con otro. Esta animación no ha tenido lugar por sí misma, pero sería un efecto de algún estilo utilizado en la parte posterior del código. Dentro de HTML, podemos realizar esta operación utilizando algunas propiedades de estilo en la etiqueta de estilo CSS. Además, podemos reemplazar el texto de algunos enlaces con otro con el color reemplazado también. Dentro de esta guía tutorial hoy, veremos algunos ejemplos de HTML para realizar un reemplazo de texto."

Ejemplo 01

Comencemos con el uso de "después" de compensación para reemplazar un texto con un nuevo texto. Para crear una página web HTML, utilizaremos todas sus etiquetas estándar. La primera y principal etiqueta es la etiqueta HTML, y todo el otro contenido de las etiquetas llegó dentro de ella. Entonces, debemos asegurarnos de que la apertura y el cierre de esta etiqueta no se pierdan nuestro código. Hemos comenzado esta etiqueta, seguida de la etiqueta "Cabeza" que ha sido imprescindible para realizar un estilo de encabezado y otras cosas. Hemos estado agregando la etiqueta de estilo. También puede probar la etiqueta de "título" dentro de ella antes de la etiqueta de estilo para darle a su página HTML un nombre simple.

Dentro del área del cuerpo de nuestra página HTML, todos los demás elementos se agregarían entre la apertura y el cierre de la etiqueta de "cuerpo", yo.mi., y . Hemos estado usando el

Etiqueta para agregar un párrafo a nuestro cuerpo de página HTML. Este

La etiqueta ha sido clasificada con una clase "reemplazar" para usar para el estilo. El

La etiqueta se usa para cerrar esta etiqueta después de agregarle algunos datos de texto. La etiqueta de estilo se ha utilizado dentro de la etiqueta "Cabeza" y la clase ".reemplazar "se ha utilizado para agregar un estilo al párrafo de esta página. La propiedad de visibilidad se establece en "oculto" mientras su posición se ha establecido en relativa de acuerdo con el inicio de una página. El desplazamiento de "después" se ha utilizado en la siguiente línea para que la clase en particular cambie su visibilidad a "visible" y posicione a "absoluto". Esto significa que después del texto original, el nuevo texto será visible y su posición será absoluta.

El margen superior e izquierdo se ha establecido en 0, mientras que la propiedad de contenido se usa para agregar algún otro texto en lugar del texto original. Debido al reemplazo, el texto original se ocultará según la "visibilidad" establecida en "oculto". Ahora podemos ejecutar nuestro código como está completo.

Ahora, tenemos el resultado de Below Shows en la pestaña del navegador. Puedes ver que el texto original fue "Seré reemplazado", mientras que el texto mostrado es "Soy un texto nuevo ...". Indica que el uso de la propiedad de visibilidad a "oculto" y "visible" junto con la propiedad "contenido" puede hacerle reemplazar un texto con otro.

Ejemplo # 02

Echemos un vistazo a otro ejemplo de HTML para usar el desplazamiento de "después" sin la propiedad "Visibilidad" y ver si reemplaza el texto o no. Por lo tanto, hemos estado utilizando las mismas etiquetas de apertura y cierre HTML para crear un archivo HTML estándar para la ejecución en el navegador. Dentro de la etiqueta "cuerpo" de este código HTML, hemos estado usando el

Etiqueta para crear un párrafo en nuestra página HTML y le asignó una clase "reemplazar" para la clasificación en el nivel de estilo. Este párrafo también contiene una etiqueta de tramo junto con el texto para marcar el texto en él. Las etiquetas de tramo y párrafo están cerradas una tras otra.

Después de esto, cerramos la etiqueta del cuerpo también. La etiqueta de estilo usa la clase "Reemplazar" para que la etiqueta del tramo use la propiedad "Display" como ninguno. Esto significa que no se aplicará un marcado al texto dentro del tramo. El desplazamiento "After" se ha utilizado con la clase "Reemplazar" para agregar la propiedad "Contenido" con algún texto nuevo para reemplazar el texto anterior dentro de la etiqueta de párrafo de nuestro cuerpo HTML. Este código ahora está listo para la ejecución.

Después de la ejecución de este código en el navegador Chrome a través del menú "Ejecutar" del código de Visual Studio, tenemos el texto reemplazado en lugar del original en la página HTML.

Ejemplo # 03

Dentro de este ejemplo, comprenderá el método para reemplazar el texto sobre el cierre. La parte del cuerpo de este código contiene una etiqueta de rumbo simple "H1" para agregar un tamaño de rumbo más grande estándar en la página web HTML al ejecutarse. Después de cerrar la etiqueta de encabezado como ", Hemos agregado una etiqueta "div" para crear un nuevo contenedor dentro de la página HTML. Este contenedor contendría una etiqueta de anclaje para agregar un enlace a algún texto, yo.mi., La URL de Google se ha utilizado para vincular. La etiqueta de encabezado se ha utilizado para crear un encabezado de tamaño 2, seguido de la etiqueta del tramo con texto para marcar. La etiqueta de encabezado, la etiqueta de anclaje y la etiqueta "div" se han completado aquí. Entonces, hemos cerrado todas estas 4 etiquetas usando sus etiquetas de cierre I.mi. ,

, , .

Después de esto, aún no necesitamos nada por usar para esta página HTML. Por lo tanto, hemos estado cerrando el cuerpo también,.mi., Usando la etiqueta. El signo de la etiqueta de anclaje seguido de la compensación de "desplazamiento" se ha utilizado para su etiqueta de "span" infantil para establecer la pantalla en ninguno. El desplazamiento "visitado" se usa para decir que el color de un enlace sería verde en las visitas a la página. El desplazamiento "antes" se usa en el flotador para reemplazar el contenido original con el nuevo contenido después de flotar, yo.mi., "Haga clic aquí para visitar Google". Al flotar sobre el texto original, el color de un nuevo texto se cambiará a Crimson. Si presiona la tecla izquierda al flotar sobre el texto original sin liberar la tecla, el desplazamiento activo cambiará el color de un nuevo texto a azul. El estilo y las etiquetas de la cabeza ahora están cerradas.

Después de ejecutar este código a través de VS Código en Chrome, tenemos un encabezado y un enlace a Google. El enlace subrayado se muestra en color verde.

Cuando pasea el puntero de su mouse en el texto "Toco conmigo", su texto ha sido reemplazado por uno nuevo, y el color del nuevo texto también se actualiza, I.mi., carmesí. Cuando toque el enlace sin liberar el botón, cambiará su color a azul.

Conclusión

Hemos terminado con las ilustraciones y la explicación del concepto de reemplazo de texto CSS dentro de la secuencia de comandos HTML. Hemos implementado un total de 3 ejemplos en HTML para reemplazar un texto con otro. Para esto, hemos discutido el uso de la compensación de "después" junto con su propiedad de visibilidad, propiedad de posición y propiedad de contenido. Después de esto, también hemos implementado el método para reemplazar un texto de algún enlace con otro texto junto con su cambio de color a través de las etiquetas Hover seguidas de la propiedad "Antes" y la propiedad de contenido.