Grupo CSS
Sintaxis del selector de grupos:
Element1, Element2, Element3 ..// Lista de declaraciones
Ejemplo 1:
Para demostrar estos ejemplos dados, se está utilizando el código Visual Studio. Abriremos el nuevo archivo y elegiremos el idioma "html", que creará un archivo html. Luego, comenzamos a hacerlo en el archivo recién creado. Cuando guardamos el código terminado, el ".La extensión del archivo HTML "se agrega automáticamente al nombre del archivo. Una vez que las etiquetas HTML básicas han aparecido en este archivo recién formado agregando "!"Marcas y hacer clic en" Enter ", estamos comenzando agregando los encabezados" H1 "y también" H2 ". Después de estos encabezados, estamos poniendo dos párrafos diferentes en el código HTML. Ahora, estamos produciendo el archivo CSS después de esto y también vinculando ambos archivos para aplicar las propiedades de CSS a los elementos HTML.
Como queremos aplicar el mismo estilo tanto al encabezado como al párrafo, no necesitamos poner todos estos elementos por separado. Simplemente seguimos el selector de agrupación y mencionamos todos los elementos y los separamos colocando una coma "", entre ellos como se muestra en la captura de pantalla a continuación. Mencionamos todos los elementos como "H1, H2, P". Ahora, coloque los frenos rizados y luego utilice propiedades en estos aparatos ortopédicos. Cuando agregamos propiedades, estas propiedades se aplicarán a todos los elementos que hemos mencionado. Utilizamos la propiedad de "Alinear texto" de todos ellos y los establecemos en "Centrar" utilizando esta propiedad.
Luego, decoramos todo esto colocando "subrayado" como el valor de la propiedad de "decoración de texto". La "familia de fuentes" que estamos utilizando para todos estos elementos es "argelino". Ajustamos el "tamaño de fuente" a "22px". Luego, hemos utilizado la propiedad de "color" que establecemos en "marrón" a todos los encabezados, así como a los párrafos.
Aquí está el resultado del código CSS anterior. Puede ver que el color, el tamaño de la fuente, la familia-familia y todas las demás propiedades que hemos utilizado anteriormente se aplican a todos los encabezados y párrafos porque utilizamos el selector de agrupación para todos ellos. Todo el estilo para estos elementos es el mismo aquí que hemos establecido en el código CSS.
Ejemplo # 2:
En este ejemplo, vamos a crear múltiples párrafos con nombres únicos y también múltiples divs con diferentes nombres. Tenemos un rumbo aquí antes de todos estos párrafos y divs. Aplicaremos el selector de agrupación a todos estos en el código CSS.
Estamos poniendo los nombres de todas las clases de párrafo y clases de div y también el encabezado. Vamos a aplicar las mismas propiedades a todos. Todas las propiedades que vamos a definir aquí en los aparatos ortopédicos rizados se aplicarán a todos estos elementos que hemos mencionado. Estamos alineando todos los elementos en el "Centro" con la ayuda de la propiedad "Alineación de texto" y usamos el "Times New Roman" como el valor de la propiedad "Fuente-Familia". Luego, configure el "tamaño de la fuente" en "23px" y el "color" para todo es "rojo". Ahora, estamos aplicando un poco de "color de fondo" como "azul claro" y el "estilo de fuentes" a "cursiva". Todas estas propiedades se aplicarán a todos los párrafos, divs y también al encabezado.
Aquí, en este resultado del código anterior, todos los divs, párrafos y también el encabezado aparece en el mismo estilo. Todas las propiedades de estilo que se aplican en todas ellas son las mismas. Como hemos utilizado el selector de agrupación para hacer esto.
Ejemplo # 3:
Aquí, vamos a aplicar las mismas propiedades a los párrafos. Todos los párrafos aparecerán iguales. Para los Divs, utilizamos las mismas propiedades, por lo que todos los DIV serán del mismo estilo.
Utilizamos "Times New Roman" como la "familia de fuentes" de la "H1" y "Orange" se selecciona aquí como su "color". El "color de fondo" de este "H1" está configurado en "amarillo ligero". Ahora, colocamos todos los nombres de los párrafos y utilizamos algunas propiedades aquí. "Calibri" se especifica como el valor de la propiedad "Font-Family" y "Font-Size" será "23px". Entonces, "granate" para el "color". Aquí, estamos poniendo un "color de fondo" de "verde luz" y el valor de la propiedad "Font-Weight" está establecida en "Bold". Luego, tenemos la propiedad "color" y la establecemos en "verde" y el "color de fondo" para todos los divs es "salmón ligero". También los "en cursiva" establecemos este valor en la propiedad "estilo de texto".
Aquí, ves que todos los párrafos aparecen en el mismo estilo y todos los divs aparecen en el mismo estilo que hemos establecido estos valores en el código CSS.
Ejemplo # 4:
Tenemos tres encabezados diferentes, un párrafo, un div y también una clase de span. Aplicaremos las mismas propiedades de estilo a todas estas en CSS.
Ponemos los nombres de todos los elementos en los que queremos aplicar las propiedades. Puedes ver aquí cómo poner estos nombres. Debemos poner la coma entre todos los nombres de los elementos y luego colocar las propiedades dentro de los aparatos ortopédicos rizados. Utilizamos la propiedad "Alineación de texto" para alinear "izquierda" todos los componentes. La familia de fuentes "Times New Roman" se establece como el valor de la propiedad "Font-Family". Luego, elija "24px" para el "tamaño de fuente" que se aplicará a todos, y se selecciona "Purple" para el "color". Aquí, estamos aplicando un "color de fondo" de "luz de luz" y la palabra clave "en negrita" se selecciona como el valor de la propiedad "Font-Weight". Además, hemos utilizado "subrayado" para la propiedad de "decoración de texto" para que todos sean más atractivos.
Aquí se muestra el resultado del código CSS antes mencionado. Como puede ver, todos los encabezados y párrafos y también el tramo tienen el mismo color, tamaño de fuente, fuente de fuente y todos los demás estilos son los mismos porque utilizamos el selector de agrupación para todos ellos. El formato de estos elementos es el mismo aquí.
Conclusión
En este tutorial, hemos explicado que el selector de agrupación se define como podemos elegir múltiples componentes y estilos colectivamente, separándolos por una coma. En nuestros códigos, hemos hecho uso de este concepto. En este tutorial, también discutimos cómo usar este selector de agrupación y cómo establecer propiedades dentro de este. También dimos los resultados de todos estos códigos. Para su ventaja, hemos desarrollado un tutorial completo que incluye el código, una explicación exhaustiva y los resultados.