Asterisco CSS
Sintaxis
*El valor de la propiedad
O
*Padre
El valor de la propiedad
Ejemplo 1
Cree el archivo HTML y escriba párrafos y encabezados en el archivo HTML para que podamos diseñarlos usando el selector de CSS "*". En este tutorial, el software que estamos utilizando para realizar ejemplos es Visual Code Studio. Entonces, abrimos el archivo HTML en este código de Visual Studio y escribimos el código HTML aquí. También proporcionamos el código. Este archivo se guarda utilizando el ".Extensión del archivo HTML ".
Puede ver que tenemos un encabezado1 en el cuerpo del HTML y luego una clase "" en la que tenemos dos párrafos diferentes usando el "
"Etiqueta y luego cierre este" div ". Después de esto ", tenemos otro párrafo"
"Que está fuera del" ". Aquí, cerramos el cuerpo y lo guardamos. Luego, estamos pasando a nuestro archivo CSS donde usamos el asterisco "*" para aplicar diferentes estilos en esta página HTML.
Código CSS
Aquí, creamos nuestro archivo CSS y usamos el ".Extensión del archivo de CSS "con este archivo. Debemos vincular este archivo al archivo html. Entonces, todo el estilo que mencionamos aquí se aplicará al archivo HTML que hemos creado antes de esto.
Primero, usamos el selector "*" y luego usamos diferentes propiedades de estilo dentro de los aparatos ortopédicos de este selector "*". Utilizamos la propiedad de "color de fondo" y hemos seleccionado el color "amarillo" para el fondo de esta página. Luego, tenemos la propiedad "color" y esta propiedad de "color" cambia el color del texto a "púrpura". Cambiará todos los colores de texto que se escriben en el archivo HTML a "púrpura". Además, use la propiedad "Font-Family" que se utiliza para cambiar el estilo de fuente, y configúrela en "Times New Roman". Todo el texto se escribirá en este estilo de fuente. Todas las propiedades de estilo que estamos utilizando se aplicarán en la página HTML completa porque usamos "*" y no mencionamos ningún nombre con este "*".
Producción
Obtenemos esta salida haciendo clic derecho en el archivo HTML y seleccionando "Abrir en el navegador predeterminado". La salida muestra cómo funciona este "*" selector en CSS.
Puede observar que todo el texto se muestra en color "púrpura" y todo el texto está escrito en el estilo de fuente "Times New Roman" y todo el color de fondo es "amarillo". Entonces, cuando usamos el selector "*", no necesitamos aplicarlo por separado a cada elemento. El selector "*" toma todos los elementos del archivo HTML y aplica el estilo a todos ellos.
Ejemplo 2
Tenemos el ejemplo 2 y cambiamos el código HTML. Estamos creando tres párrafos en el "Div" y un párrafo fuera del DIV en este código HTML dado.
Código CSS
En este archivo CSS, vamos a mencionar el "Div" con el "*" Asterisk. Luego, use las propiedades de estilo para este "div". Estos estilos se aplicarán a todos los elementos del "Div".
Usamos "div *" y colocamos aparatos ortopédicos rizados en los que usamos las propiedades de estilo. Aquí, estamos usando "azul claro" como un "color de fondo" solo para los elementos Div. Entonces, el "Blue-Violet" está configurado para el color del texto o la fuente. Además, cambie el estilo de fuente de los elementos DIV a "argelino" utilizando la propiedad "Font-Family". Estamos alineando el texto de los elementos "Div" en el "Centro" con la ayuda de "Texto alinearse".
Producción
En esta salida, el encabezado es simple. No hay estilo aplicado a este encabezado, ya que este encabezado está escrito fuera del "Div". Aplicamos el estilo solo a los elementos "div". Ahora, las siguientes tres líneas fueron escritas dentro del "Div". Su estilo de fuente cambia, su color de fuente se cambia y también el texto se coloca en el centro y el fondo de estas líneas es azul. Todos esos estilos que usamos en nuestro archivo CSS se aplican a todos los elementos "Div". El último párrafo también es simple, ya que también está escrito fuera del "Div".
Ejemplo 3
También realizamos otro ejemplo, por lo que puede obtener fácilmente la diferencia entre cómo funciona el selector "*" solo y cómo funciona cuando usamos cualquier nombre con este selector "*".
En este archivo HTML, estamos creando el encabezado 1 usando el "
" etiqueta; una clase Div usando la etiqueta ""; párrafos usando el "
" etiqueta; y también una clase de span usando "" etiqueta. Aplicaremos diferentes estilos en "H1", "Div", "P" y "Span" usando CSS.
Código CSS
Primero, usamos solo el selector "*" para cambiar todo el color de fondo de la página HTML. El color "rosa" se selecciona como un "color de fondo" para la página HTML. Luego, usamos "P" con la "*" para que todo el estilo se aplicará a los párrafos escritos en el archivo HTML. El "color de fondo" de todos los párrafos se establece como el color "verde claro". El tamaño del texto escrito en la etiqueta del párrafo se representará en "monoespacial" a medida que establecemos el tamaño del texto del párrafo en "monoespacial". Todas estas propiedades de estilo se aplican a los párrafos.
Luego, vamos a diseñar los elementos de clase "Span" usando el "Span" con el "*". El color de fondo de los elementos del tramo es "azul claro" y el estilo de fuente es "cursiva" y "audaz". Entonces, tenemos una clase "div" y vamos a diseñar esto. Cambiamos su color de fondo a "amarillo". El "tamaño de fuente" es "130%" para los elementos Div. Todo el texto del elemento Div se representa en el centro, ya que usamos "Text-Align". La "familia de fuentes" para esto es "argelino". El "H1" permanece. Entonces, tenemos que aplicar algo de estilo en este H1. El "color de fondo" del encabezado 1 es "naranja" y el texto de este encabezado 1 se establece como "verde" en color. El tamaño de la fuente del encabezado 1 es "25px" y está alineado "Center".
Producción
La salida muestra que el encabezado es de color diferente y también el estilo de este encabezado es diferente. Usamos dos clases "div" y los datos de estas dos clases Div son los mismos en el estilo. Puedes ver que hay cuatro párrafos y el color de fondo de estos cuatro párrafos es verde. Las clases de SPAN son iguales en estilo y el color de fondo de la clase SPAN es azul claro. Todo el fondo es el mismo que usamos esta propiedad de "color de fondo" con el "*".
Conclusión
En este tutorial, hemos aprendido el uso del "*" asterisco en CSS. Hemos estudiado cómo funciona solo y cómo funciona cuando escribimos cualquier nombre con este selector "*". Hemos aprendido que este selector de asterisco toma todos los elementos de la página HTML y ha aplicado el estilo a todos esos elementos. Hemos explorado diferentes ejemplos en los que hemos utilizado este selector "*" en CSS y hemos rendido la salida de todos estos ejemplos. Hemos proporcionado el código HTML y CSS en este tutorial junto con las salidas de esos códigos.