¿Qué es el objetivo en css. Destino en CSS

La pseudoclase: target es una de las grandes características de CSS3. Corresponde al elemento apuntado por el identificador en el documento URI.

El identificador en el URI contiene el carácter "#" seguido del nombre del identificador que coincide con el valor del atributo identificación elemento en el documento.

Apoyo

Ya que estamos hablando de CSS3, la pseudoclase es compatible con todos los navegadores modernos excepto IE 6 a 8. La frustración habitual no debería impedirle utilizar: target. IE9 ya es compatible con la pseudoclase: target.

¿Cómo uso: target?

Esta pseudoclase puede tener su propio estilo, al igual que las pseudoclases. : flotar, : activo o : atención para enlaces. Además de las pseudoclases mencionadas anteriormente : objetivo utilizado en determinadas acciones con el sitio web. Especialmente cuando se usa un identificador de fragmento, como http://example.com/index.html#lorem-ipsum.

Demostración

La página de demostración proporciona un ejemplo muy claro de cómo y cuándo usar : objetivo... Pseudo clase : objetivo puede mejorar la usabilidad de su recurso.

Marcado HTML

A continuación se muestra un ejemplo de la demostración. Tenemos 4 enlaces y la misma cantidad de bloques. Cada grupo tiene su propio identificador único.

• Bloque 1
• Bloque 2
• Bloque 3
• Bloque 4

CSS

El siguiente código CSS le permite lograr el efecto deseado, con la ayuda del cual se resalta el bloque con el ID correspondiente (aparece una sombra alrededor del rectángulo).

/ * Agrega algo de espacio * / ul, div (margin-bottom: 10px;) / * Estilo de bloque predeterminado * / div (padding: 10px; border: 1px solid #eaeaea; -moz-border-radius: 5px; border- radius : 5px;) / * Cambiar la vista de la salida si coincide con * / div: target (border-color: # 9c9c9c; -moz-box-shadow: 0 0 4px # 9c9c9c; -webkit-box-shadow: 0 0 4px # 9c9c9c; caja-sombra: 0 0 4px # 9c9c9c;)

A continuación se muestra el resultado de la acción del código. Si hace clic en el enlace, el bloque correspondiente se resalta y se activa.

¿Hay alguna forma de manejar eventos de clic en CSS sin usar JavaScript? Puedes usar el método con : objetivo... Pero, ¿y si no se puede usar? Hay otro método.

Vea una demostración. Está completamente hecho en CSS, ni una sola línea de JavaScript. Se basa en el uso original de los selectores: active y: hover.

Descripción

Primero, necesita crear un contenedor que contendrá el botón y los bloques que se muestran con el clic del mouse. La estructura de marcado será algo como esto:

Debe hacer que el .content sea invisible hasta que se presione el botón del mouse en el .wrapper. Para resolver el problema, configure la propiedad display: none para .content. Luego, cuando hacemos clic en el .wrapper, habilitaremos la propiedad display: block para el .content. Para hacer esto, establezca la propiedad display: block para .wrapper: active .content. En este estado, el .content solo será visible cuando se presione el botón del mouse. Si lo suelta, el contenido desaparece de nuevo. Para corregirlo, hagamos que cuando el cursor del mouse esté sobre .content, la propiedad display: block se asigne al elemento. Es decir, establecemos la propiedad display: block para .content: hover. El código CSS se verá así:

Contenido (pantalla: ninguno;) .wrapper: activo .contenido (pantalla: bloque;) .contenido: hover (pantalla: bloque;)

Solo queda "peinar" la apariencia y darle claridad:

Envoltorio (posición: relativa;) .button (fondo: amarillo; altura: 20px; ancho: 150px;) .content (posición: absoluta; padding-top: 20px;) .content li (fondo: rojo;)

El texto del botón en el código anterior tendrá un fondo amarillo y la información que se muestra cuando se presiona el botón del mouse tendrá un fondo rojo.

De forma predeterminada, cuando hace clic en un enlace, el documento se abre en la ventana o marco actual. Si es necesario, esta condición se puede cambiar mediante el atributo de destino de la etiqueta. ... En XHTML, el uso de este atributo está prohibido.

Sintaxis

...

Atributo requerido

Los valores

El valor es el nombre de la ventana o marco especificado por el atributo de nombre. Si se establece un nombre inexistente, se abrirá una nueva ventana. Los siguientes se utilizan como nombres reservados.

En blanco Carga la página en una nueva ventana del navegador. _self Carga la página en la ventana actual. _parent Carga la página en el marco principal, si no hay marcos, este valor funciona como _self. _top Cancela todos los marcos y carga la página en la ventana completa del navegador; si no hay marcos, este valor funciona como _self.

Valor por defecto

Validación

El uso de este atributo está desaprobado por la especificación HTML, el código válido se obtiene solo usando un transitorio .

HTML5 IE Cr Op Sa Fx

Abrir en una nueva ventana

Hoy hablaremos de las principales funciones relacionadas con pseudo clase : objetivo y cómo puede usarlo para crear impresionantes efectos CSS puros, aprender a crear presentaciones de diapositivas usando CSS y mucho más.

¿Qué es: target?

h1 (fuente: negrita 30px / 1.5 "Helvetica Neue", Arial, Helvetica, Ginebra, sans-serif;) h1: target (tamaño de fuente: 50px; decoración de texto: subrayado; color: # 37aee4;)

Agregar animación

Animemos nuestro efecto y agreguemos algo de animación, como una pequeña transición para cambiar el color. Vea como funciona.

h1 (fuente: negrita 30px / 1.5 "Helvetica Neue", Arial, Helvetica, Ginebra, sans-serif; -webkit-transición: color 0.5s facilidad; -moz-transición: color 0.5s facilidad; -o-transición: color 0.5 s facilidad; -ms-transición: color 0.5s facilidad; transición: color 0.5s facilidad;) h1: objetivo (tamaño de fuente: 50px; decoración de texto: subrayado; color: # 37aee4;)

Gestión de objetos no objetivo

Digamos que queremos cambiar los estilos del párrafo que sigue al encabezado seleccionado.

Es muy fácil hacer esto con el siguiente código. Ver demostración.

h1: objetivo + p (fondo: # f7f7f7; relleno: 10px;)

Crear una presentación de diapositivas simple con CSS

Los desarrolladores han creado toneladas de aplicaciones que utilizan pseudo-clase : objetivo... Este pseudo selector puede resultar útil al crear pestañas o incluso presentaciones de diapositivas. Veamos cómo puede implementar este último.

Pues creemos una lista desordenada. Cada elemento de la lista contendrá una etiqueta de anclaje que apunta al ID del fragmento y una imagen con el ID correspondiente.

• Uno
• Dos
• Tres
• Cuatro
• Cinco

Ahora agreguemos nuestros estilos:

* (margen: 0px; relleno: 0px;) # presentación de diapositivas (margen: 50px automático; posición: relativa; ancho: 400px;) ul (estilo de lista: ninguno;) li (flotante: izquierda; desbordamiento: oculto; margen: 0 20px 0 0;) li a (color: # 222; texto-decoración: ninguno; fuente: 15px / 1 Helvetica, sans-serif; -webkit-transición: color 0.5s facilidad; -moz-transición: color 0.5s facilidad; -o-transición: color 0.5s facilidad; -ms-transición: color 0.5s facilidad; transición: color 0.5s facilidad;) li a: hover (color: # 50b0df;) li img (posición: absoluta; superior: 50px; izquierda: 0; índice z: -1; -webkit-transición: opacidad 1s facilidad de entrada-salida; -moz-transición: opacidad 1s facilidad de entrada-salida; -o-transición: opacidad 1s facilidad de entrada-salida; -ms-transición: opacidad 1s facilidad de entrada-salida; transición: opacidad 1s facilidad de entrada-salida;) li img: objetivo (índice z: 1;) li img: no (: objetivo) (opacidad: 0;)

Primero agreguemos flotador izquierdo todos los elementos de nuestra lista. Usamos posicionamiento absoluto y relativo para los elementos.

A continuación, instale índice z: -1 para todas las imágenes y luego configurar índice z: 1 para imágenes de destino. Esto hará que la imagen cambie cuando haga clic en el elemento de la lista. Para que la transición sea más suave, estableceremos el valor de opacidad para otras imágenes. 0 .

Vea una demostración de presentación de diapositivas de CSS puro.

Compatibilidad entre navegadores

Pseudoclase : objetivo es un selector de CSS de nivel 3, lo que significa que es compatible con casi cualquier navegador excepto (no adivinará) ... IE. El buen burro solo admite selectores CSS3 en las versiones 9 y 10.

Al igual que con cualquier problema de representación del selector CSS3 en IE, esto es bastante fácil de solucionar con Selectivizr.

Gracias a este complemento y la magia vudú, los selectores CSS3 necesarios serán compatibles incluso en IE6.

Conclusión

El uso de pseudoclases puede parecer abrumador al principio, pero ¿por qué comprende cómo pueden facilitar su trabajo y hacer que su sitio sea más interesante? Pseudo selector

: objetivo es un buen ejemplo. Solo asegúrate de no exagerar con los estilos.

Otro caso de uso interesante : objetivo

Puede encontrar fácilmente muchos tutoriales en la web utilizando la pseudoclase: target. Sin embargo, no seguiremos el código de otra persona, sino que intentaremos entenderlo y entender cómo funciona. Por supuesto, no sin ejemplos.

¿Qué es: target?

En CSS: target es una pseudoclase que le permite seleccionar una "pieza" completa de su documento HTML, sobre la cual se realizará alguna acción. Puede ser un párrafo de texto o un encabezado, por ejemplo.

Las pseudoclases no deben confundirse con los pseudoelementos, que pueden seleccionar solo una determinada parte de un elemento, como la primera letra o la primera línea de un párrafo.

Pseudoclases:

• a: enlace (color: # 111)
• a: hover (color: # 222)
• div: primer hijo (color: # 333)

Pseudo-elementos:

• p :: primera letra (color: # 444)
• p :: primera línea (color: # 555)

Creo que está claro por la sintaxis lo que hace esta o aquella pseudoclase o pseudo-elemento. La pseudoclase más popular es: hover, es encontrada por todos los webmasters, describe los estilos del elemento al hover. target funciona de manera similar y describe los estilos de un elemento cuando ocurre una determinada situación.

Identificadores de fragmentos

En resumen, este es el tipo de cosas a las que está ligada nuestra pseudoclase. Este es un hashtag con una palabra o frase al final de la dirección. Se parece a esto:

Esta técnica se puede utilizar para navegar dentro de un artículo. Por ejemplo, al comienzo de un artículo, creas una pequeña tabla de contenido, cuando una persona hace clic en un elemento del cual, una persona llega a la sección a la que lleva el enlace, a la sección y, al mismo tiempo, tú Necesito agregar un identificador.

Esto funciona en HTML puro, no se requieren ajustes. Pequeños identificadores.

Manejo de un clic con: target

Ahora intentemos asegurarnos de que cuando hace clic en la sección deseada de nuestro menú improvisado, el estilo del encabezado cambia, mostrando qué párrafo está actualmente activo.

H1 (fuente: 30px Arial sans-serif;) h1: target (tamaño de fuente: 50px; decoración de texto: subrayado; color: # 37aee4;)

El código es muy simple: cuando se hace clic, el título cambia de tamaño, color y subrayado. Puede agregar vida (Ruslan, hola) y animar el cambio de color del título:

H1 (fuente: 30px Arial sans-serif; -webkit-transición: color 0.5s facilidad; -moz-transición: color 0.5s facilidad; -o-transición: color 0.5s facilidad; -ms-transición: color 0.5s facilidad; transición: color 0.5s facilidad;)

Resaltar el título activo es algo bueno, pero ¿qué sucede si necesita cambiar la apariencia del texto que lo sigue? CSS nos brinda esta oportunidad. Se parece a esto:

H1: objetivo + p (fondo: #eaeaea; relleno: 10px;)

En este caso, el signo más significa que el estilo debe aplicarse al párrafo que sigue al título. Por lo tanto, al cambiar el título activo, también cambiamos el diseño de la sección con el texto que "le pertenece".

Soporte del navegador

La pseudoclase de destino pertenece a la tercera revisión de CSS y es perfectamente compatible con todos los navegadores excepto IE, anterior a la versión 9. Por lo tanto, no debe implementarla si su audiencia usa este navegador. Aunque, hay una salida: esta es Selectvizr, una biblioteca JS con la que puede hacer que IE funcione con CSS3. Simplemente agregue el script y listo, funciona.

Lo único, si no usa JQuery o MooTools, necesita conectarlo para que este script funcione. En el sitio oficial hay una tabla de qué bibliotecas admiten qué. Si te interesa, léelo. Eso .

Conclusión

El uso de pseudoclases puede parecer una tarea abrumadora, pero una vez que comprenda cómo funcionan, puede hacer cosas increíbles con solo CSS y nada más. La pseudoclase: target- una excelente confirmación de esto. Con su ayuda, puede cambiar radicalmente la interacción de la página con el visitante. El ejemplo anterior es el más simple, pero también agrega un poco de interactividad a la página. Pero esto es solo un par de líneas de código.

No exagere con la belleza y el soporte del navegador y debería estar bien.

Que tenga un lindo día