Cuando diseña un sitio web, es posible que desee: ser el estilo de un elemento cuando lo activa el usuario. Por ejemplo, es posible que desee cambiar el color de un botón o enlace cuando el usuario hace clic en el botón o el enlace
es donde está disponible la pseudoclase CSS en:. Activo. La pseudo-clase activa le permite seleccionar elementos que han sido activados por el usuario, a los que puede aplicar estilos
Este tutorial discutirá, con ejemplos, los conceptos básicos del apodo. Clases CSS y cómo puede usar la pseudoclase activa en su código. Al final de este tutorial, estará bien versado en el uso de la pseudoclase activa
Pseudoclases de CSS
En CSS, los selectores se usan para seleccionar. los elementos a los que aplicar un estilo o un conjunto de estilos. Por ejemplo, un selector le permite seleccionar todas las etiquetas
Una vez que el usuario deja de hacer clic en un elemento, el elemento ya no estar "habilitado". Por lo tanto, el elemento no será seleccionado por el selector activo. cuando el usuario sale para hacer clic en un elemento
CSS: ejemplos activos
muestra dos ejemplos para ilustrar cómo se puede usar la pseudoclase: active
enlaces activos
Supongamos que está diseñando un sitio web para un club local de juegos de cartas, los Wizards of the Boards. Nos han encargado... crear una página "Acerca de oni" que incluye un enlace a una página w eb lista de juegos de cartas jugados por los miembros del club.
Por defecto, este enlace debería aparecer en azul claro. Al hacer clic en este enlace, el color del texto debe volverse naranja. para ello podemos utilizar la pseudo-clase: active. Aquí está el código que usaríamos para cambiar el color de nuestro texto haciendo clic en un enlace:
Nuestro código devuelve: Clickbotón en el editor de código que se muestra arriba para ver el resultado de nuestro HTML / CSS
En nuestro archivo HTML, definimos un párrafo de texto usando la etiqueta
que describe la historia del club Wizards of the Card Game Boards. En nuestra etiqueta
Hemos estado trabajando en un módulo para la tarjeta Wizards of the Game Club Boards que permite a las personas mostrar su interés en el club.
Hacia el final de nuestro formulario queremos crear un botón th en dice "envíe su interés". Cuando se hace clic en este botón, se debe aplicar un borde naranja de 3 píxeles de ancho alrededor del botón
Podríamos crear este botón usando el siguiente código:.
Nuestro código devuelve: Clickbotón en el editor de código que se muestra arriba para ver el resultado de nuestro HTML / Código CSS
Analicemos nuestro código... En nuestro archivo HTML, definimos un botón usando la etiqueta button <>. Este botón contiene el texto "Envíe su interés.
En nuestra hoja de estilo CSS, hemos definido una regla que se aplica a una etiqueta de botón <> cuando la activa el usuario. Esta regla crea un borde sólido de 3 píxeles de ancho alrededor de nuestro botón. Usamos el. Selector activo para aplicar esta regla solo cuando el botón está activo
Así que si hacemos clic en nuestro botón, aparece un borde naranja y tan pronto como dejamos de hacer clic en el botón, el borde desaparece
p>
Conclusión
La clase pseudo-activa CSS: le permite seleccionar un elemento cuando está en su estado "activo" una vez que haya seleccionado un elemento activo, puede aplicar un estilo o conjunto de estilos al elemento
botón en el editor de código que se muestra arriba para ver el resultado de nuestro HTML / CSS