ATTR CSS
En esta guía, exploraremos la función attr () en CSS y usaremos esta función para recuperar el valor. Explicaremos cómo usar esta función en CSS y cómo devolverá el valor en la salida en el lugar deseado. Haremos algunos ejemplos aquí y aclararemos este concepto de función attr ().
Ejemplo 1
Debemos tener un código HTML para usar esta función attr () en CSS. Podemos usar esta función attr () en nuestro código CSS para recuperar los valores utilizados en HTML. El software que utilizamos para realizar estos ejemplos en esta guía es el código de Visual Studio. Abrimos un nuevo archivo en el código de Visual Studio y luego seleccionamos el idioma en el archivo como HTML. El archivo creado es el archivo HTML. Luego, escribimos el código HTML en este archivo. Cuando guardamos este archivo después de completar el código, este archivo se guarda con el ".Extensión del archivo HTML ".
En el código HTML, creamos un encabezado 1 usando el "
". Luego usamos la etiqueta "" donde creamos un "enlace" de "Google" y luego escribimos el "enlace de Google" que se muestra en la pantalla. Entonces, cierre la etiqueta "". Usamos la función attr () en el "href" en CSS, por lo que el enlace aparecerá con el texto.
Código CSS:
Aquí, creamos el archivo CSS. Podemos usar la función attr () para recuperar los datos. Debemos usar el ".Extensión del archivo de CSS "Al guardar este archivo.
El "H1" representa el encabezado que creamos en el archivo HTML. Alineamos este rumbo al centro de la "pantalla" utilizando el "Alineado de texto". Luego, usamos el "A: antes" para que cuando usemos la función "attr ()", mostrará el valor deseado que recuperamos antes del contenido. Este "contenido" define los datos que escribimos en el archivo HTML utilizando la propiedad personalizada. El "attr (href)" obtiene los datos del "href", que es el enlace. Y lo coloca ante el contenido y coloca el "=>" después del "href".
Luego, diseñamos la "A" que se usa para definir el hipervínculo en el HTML. Establecimos el "estilo de fuentes" en "cursiva", por lo que se convertirá en la pantalla en estilo "cursiva". Además, establecemos el "color" en "azul". Esta propiedad de "color" define el color de la fuente. El "tamaño de fuente" está configurado en "30px". Podemos obtener la salida después de vincular y guardar los códigos HTML y CSS presionando "Alt+B" en la página HTML.
Producción:
La salida del código anterior se refleja en la siguiente imagen:
El enlace que usamos en el código HTML se muestra aquí ya que usamos el "attr ()" para recuperar este enlace. Usamos "antes" para que este enlace se muestre antes del contenido. Aquí, el contenido es "Google Link". El valor que queremos recuperar es el enlace de Google que guardamos en el "href" en el código HTML.
Ejemplo #2
Para este ejemplo, usamos el mismo archivo HTML. Pero vamos a hacer algunos cambios en el código CSS y usar la función "attr ()" nuevamente en el código HTML anterior.
Nuevamente, el encabezado está alineado en el "centro". Usamos el "After" con "A", por lo que cuando la función "attr ()" recupera el valor, este valor se mostrará después del contenido. Aquí, usamos el "Contenido", luego tenemos una flecha "=>" y luego usamos la función "ATTR ()". Cuando obtengamos la salida de esto, verá que el enlace aparece después del contenido. En este ejemplo, usamos un color de fuente "rojo" con un "30px" "tamaño de fuente".
Producción:
Esta salida muestra el enlace después del contenido. Primero muestra el contenido que es "Enlace de Google". Luego muestra el enlace del mismo, que obtenemos mediante el uso de la función "affr ()" del CSS.
Ejemplo #3
Aquí, creamos una lista con diferentes nombres. El "OL" se usa para definir la lista ordenada. Mientras que "Li" se usa para representar el elemento en la lista. Creamos la lista de cuatro nombres y recuperamos estos nombres usando la función "attr ()" en CSS.
Código CSS:
Usamos el color "naranja" para el encabezado y lo alineamos en el "centro". Queremos colocar los nombres después del contenido, por lo que usamos "después" con la "lista.li ". Usamos el "contenido" para mostrar el contenido que escribimos en el código HTML. También usamos el paréntesis dentro de los paréntesis. Usamos la función "attr ()". Pasamos el "nombre" como elemento en la función "attr ()". Cuando obtengamos la salida, los nombres aparecerán entre paréntesis. El color de fuente de este conjunto es "azul" y se muestra en estilo cursiva mientras establecemos el "estilo de fuente" en "cursiva". Utilizan algunas propiedades en los elementos de la lista, que es la propiedad de "tamaño de fuente". Establecimos el tamaño de la fuente en "25px". Y use la propiedad "Font-Family" que se establece en "Times New Roman".
Producción:
Aquí, podemos ver que el contenido se presenta primero. Entonces los nombres aparecen dentro del paréntesis después del contenido. Obtenemos todos los nombres usando solo una función ATTR () y renderizamos estos nombres con cada elemento de lista después del contenido.
Ejemplo #4
Creamos cuatro enlaces en este código HTML utilizando "href" y teniendo el contenido para cada enlace. Ahora, mire el código CSS y cómo recuperamos estos enlaces utilizando la función "attr ()".
Código CSS:
Estilizamos el encabezado cambiando el "color" y la "familia de fuentes" del texto. Alineamos el texto en el "Centro". Usamos "después" para que el enlace que obtenemos usando la función attr () se representa después del contenido. Usamos el paréntesis para que cuando la función attr () recupera el enlace, los mostrará dentro del paréntesis. Estos enlaces se convierten en color "rojo" y en estilo "cursiva".
Producción:
Ejemplo #5
Creamos una lista de diferentes frutas y verduras y aplicamos la función attr () en esta lista. La lista que creamos aquí es la lista ordenada. Ahora, viene el código CSS en el que usamos la función ATtr ().
Código CSS:
Usamos el color "verde" para el encabezado. El color de fondo para este encabezado es "Aqua". Usamos "después" que discutimos en nuestros códigos anteriores. Aquí, la función attr () se usa nuevamente dentro del paréntesis para que los datos recuperados se mostrarán en este paréntesis. Establecimos su color en "naranja" y el tamaño de la fuente a "22px". Usamos el color de fondo para esto y lo establecemos en "amarillo".
Producción:
Conclusión
En esta guía, aprendimos qué es la función attr () y por qué usamos esta función attr () en CSS. También aprendimos a usar esta función en CSS. Explicamos esta función attr () teóricamente y realizamos ejemplos donde utilizamos esta función en CSS. Exploramos los cinco ejemplos diferentes en esta guía y mostramos los datos o enlace que recuperamos utilizando la función attr () antes y después del contenido. Explicamos cómo esta función recupera los datos deseados del elemento o valor seleccionado y los muestra en la salida.