Grupo CSS

O seletor de grupo é usado para modelar todos os elementos, que são separados por vírgulas, com as mesmas propriedades de estilo. Vários componentes podem ser escolhidos e estilizados coletivamente usando o seletor de agrupamento CSS. Todo seletor é separado dos outros por um espaço e coloca uma vírgula entre cada elemento ou seletor. Quando queremos aplicar o mesmo estilo a todos os elementos, não precisamos colocar propriedades separadas para todos esses. Em vez disso, utilizamos o método de seletor de agrupamento e definimos as propriedades para todos os elementos ao mesmo tempo. Neste tutorial, usaremos este seletor de agrupamento e explicaremos seu uso em detalhes.

Sintaxe do seletor de grupo:

Element1, Element2, Element3…

// Lista de declaração

Exemplo 1:

Para demonstrar esses exemplos dados, o código do Visual Studio está sendo usado. Abriremos o novo arquivo e escolhemos o idioma "html", que criará um arquivo HTML. Então, começamos a fazer isso no arquivo recém -criado. Quando salvamos o código acabado, o “.A extensão do arquivo html ”é adicionada automaticamente ao nome do arquivo. Depois que as tags HTML básicas apareceram neste arquivo recém -formado, adicionando “!”Marcas e clicando em“ Enter ”, estamos começando adicionando os títulos“ H1 ”e também“ H2 ”. Após esses títulos, estamos colocando dois parágrafos diferentes no código HTML. Agora, estamos produzindo o arquivo CSS depois disso e também vincula os dois arquivos para aplicar as propriedades CSS aos elementos HTML.

Como queremos aplicar o mesmo estilo ao título e também ao parágrafo, não precisamos colocar todos esses elementos separadamente. Acabamos de seguir o seletor de agrupamento e mencionar todos os elementos e separá -los colocando uma vírgula ", entre eles, como mostrado na captura de tela abaixo. Mencionamos todos os elementos como "H1, H2, P". Agora, coloque aparelhos encaracolados e depois utilize propriedades nesses aparelhos encaracolados. Quando adicionamos propriedades, essas propriedades se aplicarão a todos os elementos que mencionamos. Usamos a propriedade "Alinhamento de texto" de todos eles e os definimos como "Centro", utilizando esta propriedade.

Em seguida, decoramos tudo isso colocando "sublinhado" como o valor da propriedade "decoração de texto". A “família da fonte” que estamos utilizando para todos esses elementos é “argelino”. Ajustamos o "tamanho da fonte" para "22px". Em seguida, utilizamos a propriedade "cor" que definimos para "marrom" para todos os títulos e parágrafos.

Aqui está o resultado do código CSS acima. Você pode ver que a cor, do tamanho de fontes, a família de fontes e todas as outras propriedades que utilizamos acima são aplicadas a todos os títulos e parágrafos porque usamos o seletor de agrupamento para todos eles. Todo o estilo para esses elementos é o mesmo aqui que definimos no código CSS.

Exemplo # 2:

Neste exemplo, vamos criar vários parágrafos com nomes únicos e também várias divs com nomes diferentes. Temos um título aqui antes de todos esses parágrafos e divs. Aplicaremos o seletor de agrupamento a tudo isso no código CSS.

Estamos colocando os nomes de todas as classes de parágrafos e divisões e também o cabeçalho. Vamos aplicar as mesmas propriedades a todas elas. Todas as propriedades que vamos definir aqui no aparelho encaracolado se aplicarão a todos esses elementos que mencionamos. Estamos alinhando todos os elementos no “centro” com a ajuda da propriedade “Text-Align” e usamos o “Times New Roman” como o valor da propriedade “Font-Family”. Em seguida, defina o "tamanho da fonte" como "23px" e a "cor" para todos é "vermelho". Agora, estamos aplicando alguma "cor de fundo" como "azul-céu leve" e o "estilo de fonte" ao "itálico". Todas essas propriedades serão aplicadas a todos os parágrafos, divs e também ao título.

Aqui, neste resultado do código acima, todos os divs, parágrafos e também o título aparece no mesmo estilo. Todas as propriedades de estilo aplicadas em todas elas são iguais. Como usamos o seletor de agrupamento para fazer isso.

Exemplo # 3:

Aqui, vamos aplicar as mesmas propriedades aos parágrafos. Todos os parágrafos aparecerão iguais. Para as divs, utilizamos as mesmas propriedades, para que todos os divs renderizem no mesmo estilo.

Utilizamos "Times New Roman" como a "fonte da fonte" do "H1" e "Orange" é selecionada aqui como sua "cor". A "cor de fundo" deste "H1" está definida como "amarelo-luz". Agora, colocamos todos os nomes dos parágrafos e utilizamos algumas propriedades aqui. "Calibri" é especificado como o valor para a propriedade "Font-Family" e "Size de fontes" será "23px". Então, "marrom" para a "cor". Aqui, estamos colocando uma “cor de fundo” de “verde-luz” e o valor da propriedade “Fonte-peso” está definido como “ousado”. Em seguida, temos a propriedade "cor" e a definimos como "verde" e a "cor de fundo" para todos os divs é "leve-salmão". Também os "itálicos", definindo esse valor na propriedade "estilo de texto".

Aqui, você vê que todos os parágrafos aparecem no mesmo estilo e todos os divs aparecem no mesmo estilo que definimos esses valores no código CSS.

Exemplo # 4:

Temos três títulos diferentes, um parágrafo, uma div e também uma aula de span. Aplicaremos as mesmas propriedades de estilo a tudo isso no CSS.

Colocamos os nomes de todos os elementos nos quais queremos aplicar as propriedades. Você pode ver aqui como colocar esses nomes. Devemos colocar a vírgula entre todos os nomes de todos os elementos e depois colocar as propriedades dentro dos aparelhos encaracolados. Utilizamos a propriedade "Alinhamento de texto" para alinhar "esquerda" todos os componentes. A família de fontes “Times New Roman” é definida como o valor da propriedade “Font-família”. Em seguida, escolha "24px" para o "tamanho da fonte" que será aplicado a todos, e "roxo" é selecionado para a "cor". Aqui, estamos aplicando uma "cor de fundo" de "Light-Rink" e a palavra-chave "em negrito" é selecionada como o valor da propriedade "Fonte-peso". Além disso, usamos "sublinhado" para a propriedade "decoração de texto" para tornar todos eles mais atraentes.

O resultado do código CSS acima mencionado é mostrado aqui. Como você pode ver, todos os títulos e parágrafos e também a extensão têm a mesma cor, tamanho de fonte, família de fontes, e todos os outros estilos são iguais porque usamos o seletor de agrupamento para todos eles. A formatação para esses itens é a mesma aqui.

Conclusão

Neste tutorial, explicamos que o seletor de agrupamento é definido, pois podemos escolher vários componentes e estilos coletivamente, separando -os por uma vírgula. Em nossos códigos, fizemos uso desse conceito. Neste tutorial, também discutimos como usar esse seletor de agrupamento e como definir propriedades dentro disso. Também demos os resultados de todos esses códigos. Para sua vantagem, desenvolvemos um tutorial completo que inclui o código, uma explicação completa e os resultados.